PDA

View Full Version : Creating Web 2.0 Icons In PS



S.T.A.L.K.E.R
07-09-2008, 01:49 PM
Since Vista Aero Glass style is all the rage these days, I decided to modify my icons a bit to the aero style, and I m also releasing a tutorial to create such background of your, which is transparent & see through, adapts itself to any color background. This tutorial consists of Photoshop CS & Icon workshop, however for more complex shapes; U will need other software like Illustrator

1) Open Photoshop & File -> New. Give the dimension as 256X256 Pixels & transparent background, with 72 Pixels/inch resolution

2) Click on the shape tool, & select any shape U want, I selected a rectangle & gave the radius 40 pixels, With the shift key pressed make a shape, drag the cursor to make one, this way, U will be making shape with a perfect regularity & aspect ratio, make sure it is filled with black color


3) Now right click on the layer in layer properties & select “ Rastarize Layer�, double click on it to open the layer style window

4) At the topmost area, U will find “Blending Option :default�, click on it If it is not already selected, & change the “Fill opacity to 5% in the “Advanced Blending� section, at this point your created shape will look like almost invisible

5) Now click on Drop shadow, In the “Structure� section change the opacity to 100%, Distance & size to 5, & angle to 90 degrees, in the “Quality� section, change the counter to Gaussian & click on Anti-Aliased, select noise level 0 & check the box saying “layer knock out drop shadow�

6) Now add to it an Interior shadow, In the Structure section set the Blend Mode to Color Burn, the Size to 10 pixels, angle 90 degree & opacity to 100%, this gives the shape a dark edge which is still visible when making & viewing icons on white background.

http://www.geocities.com/gx_saurav/aero/inrshadow.jpg


7) Now click on the Inner Glow option, set the blend mode to overlay, & opacity to 50%, & the color of glow to black, leave the rest of the options to default

http://www.geocities.com/gx_saurav/aero/inrglow.jpg

8 ) Now add bevel & emboss, set the depth to 30, & size & soften value to 10, & technique to smooth, & other things as shows in the image, the shadow mode to color dodge & color of shadow to white.

http://www.geocities.com/gx_saurav/aero/bvl.jpg


9) If U want to save this as a style & use it on any other shape later, then simply click on new style, & save it

Your aero like glass shape is ready, now U can make anything out of it, as an example I m giving a file type icon of QuickTime File, it was made with Icon Workshop

http://img104.exs.cx/img104/7002/qtico0py.png

:thumbsup: :thumbsup: :thumbsup:

tariqctn
07-09-2008, 04:58 PM
:thumbsup: :thumbsup: :thumbsup:

optimushunk
07-09-2008, 07:14 PM
thanks...

JOHNS
07-11-2008, 06:04 PM
thanks man. Keep rocking

raghunathj
08-24-2008, 06:42 AM
cool.. was looking for this