This Photoshop tutorial shows how it is "relatively" easy to create eye-catching icons web 2.0 style, with reflections and so on, simply by setting the effects on the layer. Once you understand the process, it is also possible - by giving free rein to your creativity - create many variations.
STEP 1 - FORM ICON
We create a layer and we 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 # 067500 to # 0cff00
We almost got our icon! The nuance of color that can make it more like! The important thing is to start from a dark towards a clear gradation.
STEP 2 - GHOST
Add a new layer above this cha we just made. Select the shape of the icon (Ctrl + click on the layer) and - staying 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 
, Going from white to transparent. Then draw a gradient from top to bottom, in order to obtain:
Now, a final touch, select the circular selection tool 
, Select an ellipse and position it as shown in the figure 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 libraries you can add a graphic symbol, an icon in fact. If this is outline, as in my case, adding to the effect:
You can achieve a nice effect to return:
The only thing missing ... the text of your choice!
Congratulations x tutorial, web 2.0 is giving the standards that webmasters can hardly forget ...
I searched on the net to be included in a font graphic buttons similar to what you used but I have not found it, could you 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 make 2.0 style icons with Photoshop ....
hei .. but you forgot to tell us how the shade under that fades!
.. know how it is .. already you've 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, even if the sound came there! Go here Techniques for reflection 
you're right
There are two techniques: with the mask on the layer (the first example) and the use of the mask general! I prefer the first
Great tutorial! I was looking for a long time, thanks a lot! Your blog is among my favorites, immediately
@ Artemisia: thanks!
Hello, congratulations for the tuotorial I have been very useful, but the small icons where you found them?
I tried to look at the site you posted in the comments preceding paragraphs but I found nothing.
@ Lazio Farm: The icons are actually a font graphic. You can find many free fonts that contain characters instead of the normal icons of various types. Google "dingbats fonts"
That is guys after this step .. is a bullshit I know, but I'm on tilt "Add a new layer above the one you just made. Select the shape (Ctrl + click on the layer) and layer remaining on the new empty "can someone explain as if I were a child of 2 years?
@ Marco: you need to do, basically, 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 + Click of the Mouse. In this way you will see the selection around the shape of the button. Then select the empty layer so that the selection made previously 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 allow me to see the square that is the form that I had given to the button initially. Secondly, returning at the beginning, I create the level, drawing the square but to intervene in the shadows external and internal necessarily have to duplicate the layer. And 'right?
Thank you very much for your excellent guide! Ever since I saw my creations can only improve!
@ Matt: thanks to you! For any info do not hesitate to email me
Can you tell me how you handled a video tutorial style popup window visible?
In short, I am referring to the effect on the video where visisibile propose a tutorial on creating icons web 2.0 style
@ Giuseppe Serra:
I used the Javascript library ShodowBox that allows you to open pop-up windows with different content: images, flash movies or videos, quicktime, html pages, and more.
simple and practical ... just like I like it:)
Hello when I try to apply the macshera to level the second square disappears and the mask on the layer is white and not black as in the movie as ever?
@ Stephen: You have to hold down the ALT key when you apply the mask
Great guide, thank you!
I miss only one thing ... The passage in which you place the ellipse: I can not give that effect to the icon.
I can not understand this passage:
Thank you very much in advance
@ Digit WM: This is a simple step. The shaded layer is cut, preferably with a circular shape. What you have to do is follow the illustrations to make the effect similar to that proposed, but you can also apply different cuts for different effects. On layer "reflection", what to cut, use a circular selection to delimit the area to be deleted and press the "DELETE" to cut the bottom.
In addition the opacity of this layer can be reduced to 90% or 80% depending on the colors used.
I hope I have answered your question.
excellent and clear! congratulations and thank you, greetings