5 Advanced Photoshop Techniques for Web Designers
Ifwe look at web design today, it’s anything but simple. Sometimesyouneed that extra Photoshop knowledge in order to achieve the lookweneed.In this step-by-step tutorial, I’m going to show you how tocreate five killer effects for your site.When I was choosing examplesfor this article I visited some designgalleries and roundup posts andtook screenshots of design details thatare used (sometimes overused) inweb design. I don’t encourage you tofollow trends but rather developyour own style. Nevertheless, it isalways useful to polish yourPhotoshop skills a bit more. Let’s getrockin’!Editor’s Note: AndyClarke will be teaching an interestingsession called “How to Design inthe 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
Nowwhat is a site without a great “Call to action” button? Thedesign styleand colors will depend on your overall site style andimportance of eachbutton. Here is one example of a simple buteffective button that we’llbe trying to recreate (taken from transmissionapps.com).
Step 1OpenNew Document, set canvas to 470px wide and 350px high. Create anewlayer and draw in this shape with Rounded Rectangle Tool withradius setto 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
Themost important part of a website: the navigation. I’ve chosentheexample that uses some transparency and fade out effect (taken fromlegacylocker.com).
Step 1Opena New Document, same dimensions from previous example. Create aNewLayer and fill it with Gradient Overlay using the color hex valuesyoucan see in the image.
------------------------------
#3 Typography Inset
Eventhough we’re used to seeing this technique now, it’s still agood skillto add to your toolbox. Please use it only if you have to :)The examplewas taken from forabeautifulweb.com.
Step 1Same New Document filled with #aa8e5c.
----------------------------
#4 Faded Shadow
Witha little bit of Blur and Quick Mask we can create shadows thatfade outin any direction we want to. With this effect you can makeboxes looklike 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
Moreand more interesting 3D elements are being used in web designlately.Here you can see how with just few extra layers, you can createanillusion 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
Ifwe look at web design today, it’s anything but simple. Sometimesyouneed that extra Photoshop knowledge in order to achieve the lookweneed.In this step-by-step tutorial, I’m going to show you how tocreate five killer effects for your site.When I was choosing examplesfor this article I visited some designgalleries and roundup posts andtook screenshots of design details thatare used (sometimes overused) inweb design. I don’t encourage you tofollow trends but rather developyour own style. Nevertheless, it isalways useful to polish yourPhotoshop skills a bit more. Let’s getrockin’!Editor’s Note: AndyClarke will be teaching an interestingsession called “How to Design inthe 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
Nowwhat is a site without a great “Call to action” button? Thedesign styleand colors will depend on your overall site style andimportance of eachbutton. Here is one example of a simple buteffective button that we’llbe trying to recreate (taken from transmissionapps.com).
Step 1OpenNew Document, set canvas to 470px wide and 350px high. Create anewlayer and draw in this shape with Rounded Rectangle Tool withradius setto 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
Themost important part of a website: the navigation. I’ve chosentheexample that uses some transparency and fade out effect (taken fromlegacylocker.com).
Step 1Opena New Document, same dimensions from previous example. Create aNewLayer and fill it with Gradient Overlay using the color hex valuesyoucan see in the image.
------------------------------
#3 Typography Inset
Eventhough we’re used to seeing this technique now, it’s still agood skillto add to your toolbox. Please use it only if you have to :)The examplewas taken from forabeautifulweb.com.
Step 1Same New Document filled with #aa8e5c.
----------------------------
#4 Faded Shadow
Witha little bit of Blur and Quick Mask we can create shadows thatfade outin any direction we want to. With this effect you can makeboxes looklike 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
Moreand more interesting 3D elements are being used in web designlately.Here you can see how with just few extra layers, you can createanillusion 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
