Photoshop Tutorial: Web 2.0 style icons in 3 steps
Friday, February 29, 2008
This Photoshop tutorial shows how "relatively" easy to create eye-catching icons for web 2.0 style, with shades and everything else, simply by setting the effects on the layer. Once you understand the process, it is also possible - giving free rein to your creativity - to create many variations.
STEP 1 - FORM ICON
We create a layer and draw a rectangle 
(or square) with slightly rounded corners.
Applied to this layer the following effects:
As I used an Inner Shadow Color # ffd800
The gradient goes from # 067,500 to # 0cff00
We have almost achieved our icon! The gradient of color that you can make it more like! The important thing is a gradation from dark to clear.
STEP 2 - REFLECTION
Add a new layer above this cha we just made. Select the shape of the icon (Ctrl + click on layer) and - while remaining on the new layer still empty - select from the menu Select-> Modify-> Contract: Enter 2 pixels:
Set the foreground color to white 
and select the Gradient tool 
Which goes from white to transparent. Then draw a gradient from top to bottom, in order to obtain:
Now, a finishing touch, choose the selection tool circular 
Select one ellipse and place it as shown below and press the Delete key - if you want you can set the transparency to 90/80:
STEP 3 - TEXTS AND SYMBOLS
Using one of the many free font library you can add a graphic symbol, an icon in fact. If this is outline, as in my case, adding the effect of:
Otteremo a nice effect include:
Only thing missing ... the text of your choice!
Related Post
Loading ... 
Complimenti x il tutorial, web 2.0 is creating standards that webmasters can hardly miss ...
I searched on the network graph to be included in a font similar to the buttons you used but I've found, you could tell me what it's called or where to find it? Thanks
@ Mark: Thanks Mark! You can find some bitmap fonts at this address: http://www.orgdot.com/aliasfonts/
Photoshop Tutorial: Web 2.0 style icons in 3 steps | Undolog.com ...
Tutorial to create style icons with Photoshop 2.0 ....
hei .. but you forgot to tell us how the shadow under which fades!
.. you know .. you've already done 99 .. ago 100
mythical small button .. but it would take a shadow cunt eh eh! ^. ^
@ Dapdudida:
To forgive me I made a small screencast, although there is no sound came from! Go here Techniques reflection 
're right
There are two techniques: with the mask on the layer (the first example) and use the mask general! I prefer the first
Great tutorial! I have been waiting, thank you! Your blog among my favorites, just
@ Artemisia: thanks!
Hello, congratulations for the tuotorial I have been very useful, but the small icons where did you find?
I tried to look at the site that you posted in the comments preceding paragraphs but I found nothing.
@ Agriturismo Lazio: the icons are actually a font chart. You can find many free fonts that contain characters instead of the usual icons of various types. Search Google for "font dingbats"
Ie boys after this step .. I know it is bullshit, but I'm on tilt "Add a new layer above the one just completed. Select the shape (Ctrl + click on layer) and layer remaining on the new empty "can someone explain how if I were a child of 2 years?
@ Mark: you have to do in practice is to recreate the same shape as the button on the empty layer, but a little smaller. To select the contents of a layer you can use CTRL + mouse click. This way you'll see the box around the shape of the button. Then select the layer vacuum that was made previously that selection will act on this layer.
The problem is that when I get to set "Gradient Overlay" then the whole layer covers the color of the gradient and does not let me see the big picture that is the form that I gave to the button first. Secondly, returning to text, I create the level, draw the square but to intervene in internal and external shadows I need to duplicate the layer. E 'right?
Thank you for your excellent guide! Since I saw my creations can only improve!
@ Matthias: Thanks to you! For any info do not hesitate to email me
Can you explain how you managed a video tutorial style popup window visible?
Well I mean the effect on the video where visis Suggest a tutorial about creating web 2.0 style icons
@ Giuseppe Serra:
I used the Javascript library ShodowBox that allows you to open popup windows with different content: images, flash movies or quicktime, html pages and more.
easy and convenient ... just how I like it:)