2

Create Sleek 3D Folders Tutorial

Posted by in Design, Tutorials on November 10, 2010

3D icons have become a major part of web design over the last couple of years and as a result designers are using them more frequently to visually communicate ideas and navigation. Today we’ll be looking at how to create sleek folder icons. As always some knowledge of Photoshop will be useful when following this tutorial but there is a PSD for download at the end of the post.

STEP 1

Start by creating a new document 1500×800 pixels, colour the background using the following hex code: #1a1a1a

Select the rounded rectangle tool and make sure the pixel diameter is 10 pixels radius. Draw a rectangle 399 pixels width x 295 pixels height:

STEP 2

Add another rounded rectangle but this time hold the shift button, begin drawing and then let go of shift while you create a 115×37 pixel shape as follows:

Make sure the vector mask for the shape is still selected in the layers palette (circled). This will be the top of our folder.

STEP 3

Open layer styles and use the following settings:


STEP 4

We’ve made a good start but right now the folder is a bit flat so we’re going to add some perspective. Select the layer, go to edit-> transform -> perspective and adjust the top left handle while holding shift till you have something like this:

Apply the transformation by hitting enter twice. We now want to make it look like the folder is open rather than closed. Choose the direct selection tool and select only the top points on the folder shape as shown here:

Now choose edit-> transform points -> skew grab the top left handle and begin to move it till the folder looks something like the following:

Again apply the transformation once you’re happy. Duplicate the layer in the layers palette, go to edit-> transform -> skew again but this time grab the top right handle and move it till the shape looks like this:

Hit enter twice again and our folder already has a lot more depth:

STEP 5

Duplicate the new layer (the back of the folder) and move it to the right slightly.

Select the direct selection tool and select the bottom right points of the folder to ensure they don’t overlap:

Apply the following settings in the layer styles and set the layer opacity to 48%:



STEP 6

Now we’re going to add a document icon to the front of our folder. Create a new document 300×300. Select the pen tool and draw a shape that looks like a page with a cut corner:

STEP 7

Select the pen tool again but this time also select ‘subtract from shape area’ in the pen menu at the top of the screen. Make sure the vector mask in the layers palette is selected and begin to cut out the part of the page like so:

STEP 8

Do the same again but this time cut around the inside of the document so it looks like an outline:

STEP 9

Apply the following settings to the layer:



STEP 10

Drag the shape layer to our other document with the folder:

Choose edit -> transform -> skew and adjust the shape till the perspective looks correct on the folder:

And we’re done!

Here’s the PSD.

FINAL TIP

If you would like to see the folder in a different colour create a hue/saturation adjustment layer and change the hue, you can get some really cool colours quite easily!

Hope you enjoyed the tutorial.

Leave a comment below if you have any suggestions of tutorials you would like to see in the future. :)

Further Reading

10 tips for effective icon design
Create a dock icon folder in photoshop
Make a Stunning Folder Icon in Photoshop