On today’s tutorial i will be showing you how to create a wooden stack icon for your dock or any other programs using icons, we’ll use some wood textures and different filters to give a nice effect.
Step 1 – New Document
Open Photoshop and create a new document, I choose 1000×1000px with a white background; this size is good you can make more details, it’s better to downsize your icon at the end in order to use it on a dock.
Step 2 – Front Part
Create a new layer, name it Front and select the Rounded Rectangle Tool (U), choose 10px for the radius and select those options in the Tool option bar.
Create a rectangle shape then when you like it, use the Free Transform Tool (Ctrl+T) and the perspective option, right click on the shape and choose Perspective or Edit – Transform – Perspective and pull one of the top corners outside.
Step 3 – Top Front Part
Create a new layer, name it Top Front and select the Rounded Rectangle Tool (U) again with the same options we used in Step 2, instead of grey choose black for the colour, you can maybe change the radius to 9 or 8px if you want. Create a shape with a bigger Width and about 1/3 of the Front shapes for the Height. Place on top of the previous one. Use the Perspective option but this time pull one of the bottom corners outside.
Then right click on the layer and select rasterize when that’s done pick the Rectangular Marquee Tool and make a selection of the top part of the shape and delete it.
Step 4 – Top Front Shadow
Duplicate the Top Front layer, place the new one under the original and name it Top Front Under then with the Move Tool (V) move the shape down about 8px.
I’ve put it in red in the image to see it better but you should use black.
Step 5 – Top Part
Select the Rectangle Tool (U), create a thin horizontal bar of about 20px of height and the same width than the Top Front layer in black, then create a thinner vertical bar on the left, duplicate this bar and move the new one to the right. Finally merge those 3 layers and name the layer Top.
Select the Free Transform Tool Ctrl+T and use the Perspective option again Right Click – Perspective and pull one of the top corners inside. Place the layer under the Front layer.
Step 6 – Wood Texture
In this step we’re going to add a wood texture, first download the texture 7719-RikkDarkMoon by ~RikkDarkMoon then open it in photoshop and drag it into your document.
You’ll need to maybe resize it, use the Free Transform Tool (Ctrl+T), duplicate the texture layer and hide the new one we’ll use it after. Put the texture layer in front of the Front layer then right click on the texture layer and select Create a Clipping Mask, rename the texture layer Front Wood.
Unhide the duplicated texture, place in front of the Top Front layer and create a clipping mask, rename the layer Top Front Wood.
Step 7 – Sides
In order to give a better 3d effect, let’s create the sides, select the Pen Tool (P) and create a shape like me
Duplicate the shape layer and flip it the new one Horizontally, Edit – Transform – Flip Horizontal and place it on the other side. Finally name those layers Left Side and Right Side.
Place both layer under the Top layer.
Step 8 – Side Texture
For this step you can use the same texture we used all along, drag it again in the document, place it in front of the right side and with the Free Transform Tool resize it then use the perspective option, select one of the side middle square and move it up.
Then move the layer just in front of the Right Side layer and create a clipping mask, duplicate the clipped layer and flip it horizontally then move it on the other side and place the layer on top of the Left Side layer. Create a clipping mask like before and change the opacity of both texture layers to 90%.
Step 9 – Groups
Group all the layers except the background layer in a new group and name this group Stack 1, then make sure you’ve selected the Stack 1 group and press Ctrl+Alt+E this will create a new layer representing the group, name this layer Stack, Create a new group name it Stack 2 and place the Stack layer in it. You can now hide the Stack 1 group we won’t need it.
From now we’ll just work on the Stack 2 group
Step 10 – Back
When you’ll add your icons in the stack it’ll be better that they appear between the front and the side parts. Select the Stack layer and pick the Rectangular Marquee Tool, make a selection to select the sides like below.
Right click in the selection and select Layer via Cut, rename the new layer Back and place it under the Stack layer.
Step 11 – Radial Blur
Duplicate the stack layer and name the new one Stack Radial Blur then apply a Radial Blur on this layer, Filter – Blur – Radial Blur, Enter an Amount of 12, Blur Method Zoom and Good for the Quality. You can play with the parameters of course, it depends if you used the same texture or not. Change the Blend mode of the Stack Radial Blur layer to Darken and the opacity to 50%.
Step 12 – Erase Around
After applying the radial blur, you’ll have a part of the radial blur fading to much around the stack, it’s better to erase it, to do that make a selection of the stack layer to do that select the Stack layer and go to Select – Load Selection and click ok, then invert this selection, Select – Invert then go back on the Stack Radial Blur layer with the selection still active and press the delete key.
Step 13 – Burn Tool
Select the Burn Tool (O), with 65px brush, midtones and 50% for exposure, then on both Stack and Stack Radial Blur layers paint on some parts in order to darken them.
Step 14 – Shadow
Select the Ellipse Tool and with a black colour create a thin oval shape on the bottom of the stack, then apply a Gaussian Blur to it with 6,5px, Filter – Blur – Gaussian Blur. Name the layer Shadow Gaussian Blur and place it between the Stack and Back layers in the layer box.
Step 15 – Add Icons
For this step just add icons you like, I’ve added two icons from previous tutorials, the Adobe Box and the Dock Icon Folder, place your icons between the Shadow Radial Blur and the Back layers.
In order to use the Wooden Stack in a dock or as an icon, hide the white background layer or delete it and save your Stack as a PNG File
That’s it for this tutorial, you’ve got a nice wooden stack to put in your dock, send me your creations if you want, and I’ll post them at the bottom of the post.
Don’t forget to download the PSD file:
discuss this topic to forum
