horizon

general forum


You are not connected. Please login or register

Advanced Photoshop Techniques for Web Designers

View previous topic View next topic Go down  Message [Page 1 of 1]

Admin


Admin
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.


cyclops
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.


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




cyclops
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

View user profile http://horizon.4ulike.com

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum