In this section we will introduce you how to create three dimensional icons.
The icons look embedded. These three dimensional icons give you smoother and sharper impression than the two dimensional ones. They are ideal for chic and professional websites.
They are easy to make. We will extract web icon symbols from Illustrator and modify them with Photoshop.
First, extract a web icon from Illustrator.
Start Illustrator, select [Window > Symbol > Click Top-Right▼ > Open Symbol Library > Web Icon] and open [Web Icon] dialog.
Select any icon and drag and drop it on the art board.
Similarly, drag and drop other icons and arrange them nicely.
Copy all the arranged icons.
Next, start Photoshop.
Select [Layer > New Fill Layer > Fill] and set the color #e9e9e9 (gray).
Paste the copied web icons.
Set the paste format pixel.
Next, change the icon color gray.
Select the icon layer and click [Layer > Layer Style > Color Overlay].
Set the color #bebebe like the example above. Now the icon color turned into #bebebe (gray). Do not click OK yet.
Now let’s turn the icons into 3-D.
Select [Bevel and Emboss] in [Layer Style] dialog.
Set the style like the example above. Check the preview and view icons. Now icons look 3-D. Do not click OK yet.
Lastly, emphasize the edge part with borderline.
Select [Borderline] in [Layer Style] dialog and apply setting above.
Borderline is added and the icon edges are emphasized.
Now you have created 3-D icons.
It was easier than it looked, wasn’t it? Photoshop layer style is ideal for adding textures on icons.
You can add different effects with Layer Style. Please try.