Photoshop

Published on December 17th, 2012 | by Adrien de Broglio

Create a Dock Icon Folder in Photoshop

Enjoy this Post! Please Help spread the word and Share it!

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.

Download

Step 1 – New Document

Create a new document in Photoshop with a transparent background, I choose 512x512px.

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

Step 8 – Saving

When you’re finished save your folder to a PNG File, make sure your background is transparent when you save it

Download

Using testking a+ web designing guide and other free resources, learn to create inspiring web icons in photoshop. Learn all the basics of web designing with testking mcse tutorials and testking 350-001 live demos.

Enjoy this Post! Please Help spread the word and Share it!

About the Author

Adrien de Broglio Hi, I'm a designer and the creator of supercolortuts.com, I like to share Tips and Techniques in Photoshop and Illustrator. Check out my Portfolio at supercolorstudio.com or my Prints shop supercolor.bigcartel.com