DesignTips > > How to Create Three Dimensional Icons

How to Create Three Dimensional Icons

How to Create Three Dimensional Icons

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.

Step01 Extract Web Icon Symbol from Illustrator

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.

Step02 Extract Other Icons

Similarly, drag and drop other icons and arrange them nicely.

Copy all the arranged icons.

Step03 Background Setting with Photoshop

Next, start Photoshop.

Select [Layer > New Fill Layer > Fill] and set the color #e9e9e9 (gray).

Step04 Paste Icons

Paste the copied web icons.

Set the paste format pixel.

Step05 Apply Layer Style

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.

Step06 Apply Bevel (Inside)

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.

Step07 Emphasize Edge with Borderline

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.

Done!

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.

この投稿文は次の言語で読めます: Chinese (Simplified), Japanese

How to Create Halloween Jack O’ Lantern Illustration (Illustrator)
How to Create Halloween Ghost Illustration (Illustrator)
How to convert a photo into black and white (monochrome) 3 (Photoshop CS5)
How to convert a photo into black and white (monochrome) in 30 seconds 2
How to convert a photo into black and white (monochrome) 3 (Photoshop CS5)
How to Create Retro Photo in Photoshop
How to convert a photo into black and white (monochrome) in 30 seconds 2
How to convert a photo into black and white in Photoshop 1
How to Create Retro Picture in Photoshop