Author Archives: author

Create a Static Website PSD to Dreamweaver Tutorial

If you’re a beginner and wanting to learn how to Create a Static Website PSD to Dreamweaver Tutorial this is for you. In today’s tutorial by, FlewDesignsTutorials, you’ll learn how to design and export a basic Static Website using Photoshop and Dreamweaver, plus you’ll learn how to upload it to the internet. Adobe Photoshop is an excellent tool for Web Design. With Photoshop you can design website layout mockups ready for converting to html/css templates

This website is dark and elegant and is a great website to create if you’re a beginner. You’ll learn how to use Photoshop tools like text, blending options, slice and more. You’ll learn how to create a beautiful website which will be perfect as a porfolio or landing page. We hope this Create a Static Website PSD to Dreamweaver Tutorial helps you to learn more skills when creating fantastic and simple websites.

PSD to Dreamweaver Tutorial

1. Designing the Website in Photoshop

You’ll first learn how to create a static website using Photoshop. FDT will teach you step by step on learing to design the website using basic tools like text, Blending Options and more.

PSD to Dreamweaver Tutorial

2. Slicing

Learning how to use the slice tool is essential for creating a static website. FDT will go through the important steps how to use the Slice Tool.

PSD to Dreamweaver Tutorial

3. Exporting to HTML

When the Photoshop website has been sliced, you’ll then learn how to export the website design into HTML format and into Dreamweaver to add in the finishing touches likes links. You’ll then learn how to upload your website onto the internet using Filezilla.

psd-to-dreamweaver-tutorial-004

In this tutorial, FlewDesignsTutorials It, will take you through the process of how to Create a Static Website PSD to Dreamweaver Tutorial, and show you how to create a beautiful dark website. Let’s get started!

Photoshop Tutorial: Avatar Na’vi Photo Manipulation

In today’s tutorial, TastyTuts, will teach you how to create a Photoshop Tutorial: Avatar Na’vi Photo Manipulation,  This Character Photo Manipulation is from the popular movie avatar. Creating Character manipulations in Photoshop can be a lot of fun and help you gain many skills in the area.

Thhe movie, Avatar, is about a paraplegic Marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.

The na’vi Characters in the movie have a very distinct look which can be fun to create in Photoshop. In this Avatar Na’vi Photo Manipulation you’ll learn how to change the skin color, manipulation the face features and add in artistic elements and technique the create a realistic Avatar Na’vi Photo Manipulation. This is a fantastic tutorial to use on your own photos!

Photoshop Tutorial: Avatar Na'vi Photo Manipulation

Below is a quick breakdown of the Photoshop Tutorial: Avatar Na’vi Photo Manipulation:

1. Prepping the Image

Open up your image in Photoshop, once in Photoshop you’ll be asked to Mask the layer which means cutting the person out of the background using the pen tool. Once this is complete you’ll learn how to make the charater blue using the Hue/Saturation Tool.

Photoshop Tutorial: Avatar Na'vi Photo Manipulation

2. The Eyes

For the eyes you’ll learn how to cut the eye out and into a new layer. You’ll duplicate the eye and move it to the other side of the face and using the erase tool to blend the eyes more into the skin.

Photoshop Tutorial: Avatar Na'vi Photo Manipulation

3. Liquify Tool

More of an Na’vi look is created using the Liquify Tool, you’ll learn how to using the many useful features to get the right look. The Bloat tool is used to edit the eyes more and the Forward Warp Tool is used to edit the nose.

 

Photoshop Tutorial: Avatar Na'vi Photo Manipulation

4. Avatar Ears

For the ears you’ll be learning how to remove them and replacing them with avatar ears. These are found in the image pack. More Color adjustments are added to make it look more unique.

Photoshop Tutorial: Avatar Na'vi Photo Manipulation

5. Skin Stripes

More skin textures and highlights and then added to the charater. You’ll learn how to create the stripes on the face using an ordinary brush tool and making it tool more like a stripe by applying a filter, Other > Maximum.

Photoshop Tutorial: Avatar Na'vi Photo Manipulation

6. More Skin Features

More stripes are then added along with some little white dots on the face using a custom brush. This will create some nice clusters of white dots which are apply on the face in a new layer. An outer glow is placed on the dots by going into Blending Options so they sparkle more.

Photoshop Tutorial: Avatar Na'vi Photo Manipulation

7. Hair and Decorations

The hair is created using a similar style as the Stripes. Using the images Pack you’ll then learn how to place extra objects onto the character like earing, hair objects and necklaces to make the Na’vi Character more authentic. To finish off the Avatar you’ll then placed in a nice forest background.

Photoshop Tutorial: Avatar Na'vi Photo Manipulation

In this tutorial, Tasty Tuts, will take you through the process of creating a Photoshop Tutorial: Avatar Na’vi Photo Manipulation, and show you how to create a realistic Avatar Na’va Character. Let’s get started!

Glossy Social Media Icons Tutorial Photoshop CS6

Having high quality Social Media Icons is essential for Designers, but sometimes it’s useful to learn how to create Glossy Social Media Icons yourself and gain more skills. In today’s tutorial, ChromeDesignsHD, will teach you how to create beautiful Glossy Social Media Icons Tutorial from scratch using Photoshop CS6. Having quality icons can help to make a site’s design look complete, and can also help with the usability of the site. Social media icons are some of the most commonly used icons, especially in blog design.

In this Tutorial you’ll learn how to create a beautiful Glossy Social Media Icon set with a Sparkly background, Glossy look and indepth effects. If you’re looking to make your own Social Media Icons set or want to impress a client, these super cute Glossy Social Media Icons Tutorial Photoshop Tutorial will teach you how!

Glossy Social Media Icons Tutorial

Tutorial Assets:

Shining Star Brush Set

Below is a quick breakdown of the Glossy Social Media Icons Tutorial Photoshop Tutorial:

1. Creating the Shape

First create the document using any size you want, using the Ellipse Tool you’ll draw a circle on the canvas while holding down the Shift Key to keep the shape perfect. On the Circle layer you’ll click into Blending Options and add in a Gradient Overlay with a Radial Style (reversed). You can make it any color.

Glossy Social Media Icons Tutorial

2. Adding in a Gloss

Using the Ellipse Tool again, you’ll draw a squashed white circle onto the Social Icon. Next you’ll add a mask to the layer and go to the Gradient Tool with a foreground color of white and background color of black. While clicked onto the Mask Layer you’ll click down using the Gradient Tool to create a nice Glossy Effect. You’ll change the opacity to a lower number to make it more see through.

Glossy Social Media Icons Tutorial

3. Social Icon

Now to bring in the social icon, copy and paste your icon onto the canvas. To make it the right color you’ll click onto the ‘Create a New Fill or Adjustment Layer icon’ and go into Hue & Saturation we’re you’ll make adjustment to the color and make it darker.

Glossy Social Media Icons Tutorial

4. Social Icon Blending Options

To make the Social Icon look more appealing you’ll go into Blending Options and be adding in the effects, Outer Glow, Inner Glow and Gradient Overlay.

Glossy-Social-Icons-Tutorial-004

5. Lighting Effects

Using the Pen Tool you’ll learn how to draw a nice white shape on the bottom of the icon and lowering the opacity. You’ll be shown how to duplicate the shape and reflect it to the opposite side.

Glossy-Social-Icons-Tutorial-005

6. Adding in a Background Pattern

To add in a nice background, using a Star brush you’ll create a new layer and click the star onto the layer using the color White and setting the Blending Mode to Darker. This will add a nice background pattern.

Glossy-Social-Icons-Tutorial-006

7. Finishing Touches

To finish off the Glossy Social Icon, you’ll add in some Blending Options to the main social icon shape. This includes Outer Glow, Inner Glow, Bevel and Emboss. To add in a final gloss you can draw a oval shaped white circle and place it in the top corner, add in a white outer glow and put down to opacity to about 70%.

Glossy-Social-Icons-Tutorial-007

In this tutorial, ChromeDesignsHD, will take you through the process of creating a Glossy Social Media Icons Tutorial Photoshop Tutorial and show you how to create a stunning Glossy Social Icon from scratch. Let’s get started!

32+ Best CSS3 and jQuery Tutorials

Many web designers are aware they popularity of CSS3 and jQuery has become. In this article we’ve compiled a list of 32+ Best CSS3 and jQuery Tutorials that make learning CSS3 and Jquery fun. With the use of CSS3 properties and jQuery ideas, it’s never been more creative! There are many CSS3 and jQuery tutorials around on the web today, we’ve focused on various website elements and techniques to help you see the never-ending possibilities, web designers can now to more creative with thier ideas!

In today’s collection we’ve gathered 32+ Best CSS3 and jQuery Tutorials. These CSS3 and jQuery Tutorials are all high quality and can help add special elements to your websites. You’ll learn about image animations, image transitions, backgrounds, menus, banner effects, rounded corners any many more innovative ideas! We hope you enjoy these fantastic css and jquery tutorials! If you think we’ve missed any comment below with your link.

 

EXPERIMENTAL CSS3 ANIMATIONS FOR IMAGE TRANSITIONS

CSS3 and jQuery Tutorials

Create a stunning menu in CSS3

Just another CSS3 menu

FULLSCREEN BACKGROUND IMAGE SLIDESHOW WITH CSS3

SLIDING IMAGE PANELS WITH CSS3

CSS3 and jQuery Tutorials

Magnifying glass for image zoom using Jquery and CSS3

CSS3 and jQuery Tutorials

SWATCH BOOK WITH CSS3 AND JQUERY

CSS3 breadcrumbs

CREATIVE CSS3 ANIMATION MENUS

FILTER FUNCTIONALITY WITH CSS3

CSS3 and jQuery Tutorials

ANIMATED WEB BANNERS WITH CSS3

THUMBNAIL PROXIMITY EFFECT WITH JQUERY AND CSS3

CSS3 & jQuery folder tabs

How to Create a Slider Plugin with jQuery

CSS3 Rounded Image With jQuery

CSS3 Image Styles – Part 2

How To Create a Pure CSS Dropdown Menu

Tutorial: Create A Minimal Single Page Portfolio With HTML5/CSS3

Portfolio Flipping Slider using JQuery & CSS3

3D FLIPPING CIRCLE WITH CSS3 AND JQUERY

Orman Clark’s Vertical Navigation Menu: The CSS3 Version

How to Design a Dribbble-Style Homepage Layout

Simple yet amazing CSS3 border transition effects

Orman Clark’s Chunky 3D Web Buttons: The CSS3 Version

Full CSS3 HTML5 Contact Form with No Images

How to Create a Stylish Image Content Slider in Pure CSS3 [Tutorial]

Make an accordian style slider in CSS3

How to Create CSS3 Buttons [Tutorial]

Change Image Click with JQuery

An Awesome CSS3 Lightbox Gallery With jQuery

Cross-Browser Rounded Buttons with CSS3 and jQuery

A Colorful Clock with CSS3 & JQuery

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3