[Rin™]

Step 1 – New Document

Create a new document in photoshop with a transparent background 512x512px

Spoiler (Click to View)[img]http://drawingclouds.com/dC_Files/Tutorials/Folder_Dock_Icon/Step_01.jpg[/img]

Step 2 – Front

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

Spoiler (Click to View)[img]http://drawingclouds.com/dC_Files/Tutorials/Folder_Dock_Icon/Step_021.jpg[/img]

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:

Spoiler (Click to View)[img]http://drawingclouds.com/dC_Files/Tutorials/Folder_Dock_Icon/Step_031.jpg[/img]

Step 4 – Back

Create two new shapes with the Rounded Rectangle Tool with 10px radius

Spoiler (Click to View)[img]http://drawingclouds.com/dC_Files/Tutorials/Folder_Dock_Icon/Step_043.jpg[/img]

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:

Spoiler (Click to View)[img]http://drawingclouds.com/dC_Files/Tutorials/Folder_Dock_Icon/Step_041.jpg[/img]

Spoiler (Click to View)[img]http://drawingclouds.com/dC_Files/Tutorials/Folder_Dock_Icon/Step_042.jpg[/img]

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.

Spoiler (Click to View)[img]http://drawingclouds.com/dC_Files/Tutorials/Folder_Dock_Icon/Step_051.jpg[/img]

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

Spoiler (Click to View)[img]http://drawingclouds.com/dC_Files/Tutorials/Folder_Dock_Icon/Step_052.jpg[/img]

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.

Spoiler (Click to View)[img]http://drawingclouds.com/dC_Files/Tutorials/Folder_Dock_Icon/Step_071.jpg[/img]

Step 8 – Saving

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

I DID NOT MAKE THIS TUT NOR DO I CLAIM THAT ITS MINE YOU CAN FIND THIS TUTORIAL HERE http://drawingclouds.com/2009/05/create-...photoshop/

[Do‎s‎Equis]

Wow, really nice, thanks for sharing!

[PANDAsQUAD]

Nice tutorial bro, keep it up, nice Firefox folder. :)

[Kenny West]

Nice tutorial, by Dock, do you mean the Mac's dock?

[MyLittlePony]

Very neat.
Never thought of doing something like this.
Wouldn't waist my time for it but when I make some more programs I'll definitely do something like this.

[MUT4NT]

very useful tutorial, thanks for sharing!

[Rin™]

very useful tutorial, thanks for sharing!

Glad you think so :D and of course my frined i try my hardest to give to the community

[Staid]

Thats a nice tutorial indeed, thanks for sharing man.

[Rin™]

Thats a nice tutorial indeed, thanks for sharing man.

thank you friend and but of course anything for the community 🤝

[Text]

Sorry if I sound like a noob, but in the first shape, it shows that the shape has curves in the edge of it (Best I can think of explaining). How do you do that? Thanks.