5 Advanced Photoshop Techniques for Web Designers

5 Advanced Photoshop Techniques for Web Designers

If we look at web design today, it’s anything but simple. Sometimesyou need that extra Photoshop knowledge in order to achieve the look weneed.In this step-by-step tutorial, I’m going to show you how to create five killer effects for your site.When I was choosing examples for this article I visited some designgalleries and roundup posts and took screenshots of design details thatare used (sometimes overused) in web design. I don’t encourage you tofollow trends but rather develop your own style. Nevertheless, it isalways useful to polish your Photoshop skills a bit more. Let’s getrockin’!Editor’s Note: Andy Clarke will be teaching an interestingsession called “How to Design in the Browser” and Elliot Jay Stockswill be showing you how to design the “The Perfect Portfolio” at The Future of Web Design Tour.#1 Awesome Buttons

Now what is a site without a great “Call to action” button? Thedesign style and colors will depend on your overall site style andimportance of each button. Here is one example of a simple buteffective button that we’ll be trying to recreate (taken from transmissionapps.com).





Step 1Open New Document, set canvas to 470px wide and 350px high. Create anew layer and draw in this shape with Rounded Rectangle Tool withradius set to 80px.



please visit the link below to readMORE...http://www.stumbleupon.com/su/2lxbW8/www.smashingmagazine.com/2010/09/22/round-up-of-useful-adobe-photoshop-techniques-tutorials-and-tools//r:t


----------------------------

#2 Navigation Menus

The most important part of a website: the navigation. I’ve chosenthe example that uses some transparency and fade out effect (taken fromlegacylocker.com).



Step 1Open a New Document, same dimensions from previous example. Create aNew Layer and fill it with Gradient Overlay using the color hex valuesyou can see in the image.

------------------------------

#3 Typography Inset

Even though we’re used to seeing this technique now, it’s still agood skill to add to your toolbox. Please use it only if you have to :)The example was taken from forabeautifulweb.com.





Step 1Same New Document filled with #aa8e5c.


----------------------------


#4 Faded Shadow

With a little bit of Blur and Quick Mask we can create shadows thatfade out in any direction we want to. With this effect you can makeboxes look like they pop out of the background. This example is from mint.com.



Step 1First thing first, the background. As usual by now, within New Document same dimensions like previous ones.


------------------------------


#5 Depth and 3D Space

More and more interesting 3D elements are being used in web designlately. Here you can see how with just few extra layers, you can createan illusion of 3D space. This example is from mosaiko.com.br.





Step 1New Document filled with Black.


-----------------------------------


MORE ...................
http://www.stumbleupon.com/su/2lxbW8/www.smashingmagazine.com/2010/09/22/round-up-of-useful-adobe-photoshop-techniques-tutorials-and-tools//r:t