Create a Dock Icon Folder in Photoshop

Posted by drawingclouds in Photoshop, Tutorials on 05 11th, 2009 | 13 responses

Tutorial #03

Mini Preview

Create a dock icon folder in photoshop, customize it and fill your dock with all your favorite folders.

In the last 5 years, programs called docks began to be more and more used on desktops, so I did a quick tutorial to create a folder icon .You can as well use it on the avedesk software.
Final Preview

Step 1 – New Document
Create a new document in photoshop with a transparent background, I choose 512×512px.

Step 1

Step 2 – Front
Select the Rounded Rectangle Tool (U), with 15px radius and draw a shape like below,

Step 2

then go to Edit - Transform – Warp and pull the four corners, pull the top corners a bit more, press enter when you’re satisfied with the result. The color of the shape isn’t important, name that layer Front.

Step 2

Instead of using the Warp tool you can do Edit - Transform - Perspective it give a straighter look to the folder.

Step 2

Step 3 – Drop Shadow
Apply a drop shadow to the Front layer, Layer – Layer Style – Drop Shadow or double click the layer and in the blending options choose drop shadow, set the values like this:

Step 3

Step 4 – Back
Create two new shapes with the Rounded Rectangle Tool with 10px radius

Step 4

Merge the two layers by selecting both of them and Right Click – Merge Layers, name the layer Back. Apply a drop shadow to the Back layer like we did in Step 3 with those values:

Step 4

Step 5 – Customization
Choose an Image or a logo you’d like on your folder, I’ve choose a Firefox image : Here
Open your image in photoshop and drag it in your document, place it and scale it (Ctrl+T) where you want, duplicate the image layer. Take one of the image layers and place it in on top of the Front layer, make a selection of the Front layer, Ctrl+Left Click on the little thumbnail in the layer panel or Select - Load Selection. Select the image layer and create a layer mask Layer – Layer Mask – Reveal Selection, name this layer Front Image.

Step 5

Select the other image layer we duplicated before and repeat the same process with the Back layer. Name the layer Back Image

Step 5

Step 6 – Text
Just add some text on the top; I’ve put Firefox using a font called Cooper Std with 36px.

Step 7 – Reflection
To add a little glow you can do a reflection of your folder, to do that select all the layers and duplicate them. Merge all the duplicated layers you’ll have one layer name it Reflection. Rotate it 180° and go to Edit – Transform – Flip Horizontal. Drag the reflection just under the folder and create a layer mask on it Layer – Layer Mask – Reveal All. Then select the gradient tool going from black to white and make a gradient starting in the bottom going a little bit further than the reflection, make sure the layer mask is selected.

Step 7