6/27/2007

Make Web 2.0 Icons in Photoshop

This is a tutorial on how to make glassy icons. This is just one of many ways to create web 2.0 images. I have tried to keep it simple but it assumes you know your way arround Photoshop.
1. Start off with a basic image or text. In this case I chose a butterfly using the Custom Shape Tool. I am working on a 300 x 300 pixel white canvas.

2. Rasterize the butterfly layer.
3. Apply Bevel and Emboss to the layer using Size: 200, Highlight white at 100% opacity and a dark red shadow at 75% opacity.
4. Stroke the layer with a orange stroke at 4 pixels in size.

5. Apply a white inner glow to the layer at size 20.

6. Now create a new top layer. Using the mask tool, create an oval at the top from one side of the image to the other. Fill this mask tool using the Gradient Tool from white at the bottom to clear at the top. Now slant the layer a little anti-clockwise and change the layer opacity to around 50%.

7. Again create a new top layer and create a new oval mask at the bottom of the image. Now fill this mask using the gradient tool with black at the top down to clear at the bottom. Give it opacity 30% and a soft light blend mode. Angle the layer in the same way as the highlight and moce it around until it look well placed.

8. Move the whole image (all layers) to the top of the canvas.
9. There are many ways to create the mirror effect under the image, but simplest I think is to just copy the whole image then paste it back. You do this by Ctrl + a then Shift + Ctrl + c then Ctrl + v.
10. Flip the whole layer verticaly. Now move it down so that the top of the new image just touches the bottom of the original image.



11. Apply a mask to the new layer from the bottom and up, covering the new image.
12. Using the gradient give it a white bottom moving up to clear at the top of the new layer. Now give the layer opacity 50%.


13. Now play around a little with various settings until you are happy. I finished by creating a new top layer and with the brush tool at size 100 just clicked once on the top left wing, just to give it a little extra glare up there.

Source:tutorialized.com

No comments: