Design glossy folder icon in Photoshop

Hello friends.
I have another icon design tutorial for you. Today we will design folder icon in Adobe photoshop. Please follow the steps carefully as we will merge layer few times.
Difficulty: Intermediate
Completion time: 10-20 minutes.
Tools: Adobe Photoshop

Final Icon

Before I start the tutorial, lets see the final image of the folder icon we will design in this tutorial.

Step 1:

Create a new document of size 256 X 256 px and transparent background.

Step 2:

Create a new layer and name it as First Face. Select “Rounded rectangle tool” with radius 10px and set color to #353434

Draw a rounded rectangle shape as shown below.

Step 3:

Create a new layer and name it as second Face. Select “Rounded rectangle tool” with radius 10px and set color to #353434 Draw a small round shape in top left as shown below.

Step 4:

Using CTRL key select both First Face and second Face layer and merge both layers. Rename merged layer to Face three.

Apply following layer style to Face three

So, it looks like this now.

Step 5:

Press and hold CTRL key and click on Face three.
This will load the rounded rectangle shape.

Contact the selection by 2 px. (Select >> Modify >> Contract).

Step 6:

Create a new layer. Select Elliptical marquee tool with subtract from selection.

Now select lower half of the selection.

Only upper part will be selected.

Create a new layer and name it as Top Half. Fill the selection with #ffffff color.

Change layer mode of Top half layer to “Soft light” and opacity to 15%

So, it looks like this now.

Step 7:

Using CTRL key select both Face three and Top half layer and merge both layers. Rename merged layer to Face four.

Step 8:

Duplicate layer Face four and rename duplicate later as Face five.

Step 9:

Free transform Face five layer (CTRL + T). Right click and select Perspective.

Slightly drag top right point to right side as shown below.

So, it looks like this now.

Right click again and this time select “Scale”.

And scale the shape little down. So, it looks like this now.

Step 10:

Create a new layer between Face four and face five layer and name it as icon. Place a nice looking icon on this layer.

Change opacity of “Face five” layer to 80-90%.
Our folder icon is ready.

Hope you liked the tutorial.

Trackbacks/Pingbacks

1. pligg.com says:

   August 15, 2010 at 6:48 pm

   Design glossy folder icon in Photoshop « PhotoShop Yag | Photoshop Tips, Tutorials for beginners and advanced…

   Hello friends. I have another icon design tutorial for you. Today we will design folder icon in Adobe photoshop. Please follow the steps carefully as we will merge layer few times….

   Reply