+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Graphics (https://hackforums.net/forumdisplay.php?fid=156)
+---- Forum: Graphics (https://hackforums.net/forumdisplay.php?fid=6)
+---- Thread: {TUT} Create a Dock Icon Folder {TUT} (/showthread.php?tid=2905209)
{TUT} Create a Dock Icon Folder {TUT} - Rin™ - Sep 30, 2012
Step 1 – New Document
Create a new document in photoshop with a transparent background 512x512px
Spoiler (Click to View)
Step 2 – Front
Select the Rounded Rectangle Tool (U), with 15px radius and draw a shape like below,
Spoiler (Click to View)
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)
Step 4 – Back
Create two new shapes with the Rounded Rectangle Tool with 10px radius
Spoiler (Click to View)
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)
Spoiler (Click to View)
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)
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)
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)
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-a-dock-icon-folder-in-photoshop/
* - DosEquis - Sep 30, 2012
Wow, really nice, thanks for sharing!
* - PANDAsQUAD - Sep 30, 2012
Nice tutorial bro, keep it up, nice Firefox folder. :)
* - Kenny West - Sep 30, 2012
Nice tutorial, by Dock, do you mean the Mac's dock?
* - MyLittlePony - Oct 2, 2012
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 - Oct 3, 2012
very useful tutorial, thanks for sharing!
* - Rin™ - Oct 18, 2012
(Oct 3, 2012 11:02 PM)MUT4NT Wrote: 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 - Oct 18, 2012
Thats a nice tutorial indeed, thanks for sharing man.
* - Rin™ - Oct 18, 2012
(Oct 18, 2012 08:48 PM)Staid Wrote: Thats a nice tutorial indeed, thanks for sharing man.
thank you friend and but of course anything for the community 🤝
* - Text - Oct 23, 2012
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.