In today’s tutorial, we’ll be creating a slick folder icon with a 3D glossy backdrop. Here’s a preview of the final result:

Step 1

Let’s get started! To begin, open up Photoshop and make a new document. Size doesn’t matter that much here, but I’ve used my favorite dimensions of 1680 x 1050 for this tutorial. Fill the background with #004d96, get the Pen Tool (P), and turn on the grid by going to View > Show > Grid or by pressing Ctrl + ‘ (single quote).

Step 2

If you don’t have “snap to grid” enabled, go to View > Snap To > Grid to enable it. This ensures that the Pen Tool snaps to the grid lines for precise drawing.

Now that snapping is enabled, click and hold on one of the grid cross sections to create a new anchor point. Without letting go of the mouse, drag up one grid section until the bezier handles snap into place. Finally, click up and over two grid sections and drag to the right one square. See the image below for reference:

Step 3

Count out about 14 squares to the right of that last point, click, and drag to the right one square.  Go over three and down two squares, and click again.

Step 4

Count out another 14 squares to the right of the last point, click, and drag to the right one square.  Go down and over two squares, click, and drag down one square.

Step 5

Count down 18 squares, click, and drag down one square. Go down and to the left two squares, click and drag left one square.

Step 6

Count left seven squares and click to make a new anchor point.  Go up four squares, click and hold the mouse, hold down the alt/option key, and drag to the right one square.  Count up two squares, click, and drag to the left one section.  Here’s a reference:

Step 7

Go two squares to the left, click, and drag over one square.  Count down two squares and click.  Without letting go, drag to the right two squares, press and hold the alt/option key, and drag down and left one square.  Finally, count four squares down and click again.

Step 8

Count six squares to the left, and repeat steps 6 and 7.

After completing those steps, go left seven squares, click, and drag to the left one square.  Then go up and to the left two squares, click, and drag up one square.  Finally, finish off the entire shape we’ve been creating by clicking on the first point, 20 squares up.

Step 9

Fill the shape you just created with #bcc1c5, and apply the following layer styles to it:

Drop Shadow

Outer Glow

Inner Glow

Gradient Overlay

Drag Gradient

Still in the Gradient Overlay dialog, click outside of the layer styles window and drag upward, like the image below.  This moves the gradient up so it’s not in the center of the icon.

Result

You should now have this:

Step 10

Now we’ll create the silhouette of a person for the middle of the folder.  To make sure that both sides are equal, we will create the left half first and then mirror it for the right half.  I can’t be as precise with the position of the Pen Tool anchors here, but it is fairly easy to make the shape below.  You don’t have to be exact, just make something that resembles a human being.

Step 11

Duplicate the shape layer you just created by selecting it in the Layers palette and pressing Ctrl/Cmd + J.  With the new layer selected, hit Ctrl + T to transform it, right click on it, and select Flip Horizontal from the context menu.  Click and drag it to the right so it’s just barely overlapping the other half of the silhouette we created before.

To merge the two halves together, make sure the Vector Mask of the current layer is selected (see below).  Press Ctrl + C to copy it, select the Vector Mask of the other half of the silhouette, and press Ctrl + V to paste it.

You can delete the single half shape layer that you created now, which should give you this:

Step 12

Center the silhouette to the folder by Ctrl + clicking on the folder layer’s icon, getting the move tool, and pressing “Align Horizontal Centers”.  Move it vertically to a position that looks good to you.

Now we’ll apply some layer styles to the silhouette to make it pop off the screen (or sink into the folder).  Use these settings:

Drop Shadow

Gradient Overlay

Gradient

Stroke

Result

And that should give you this:

Step 13

Now that we’re done with the folder icon itself, we can give it a cool 3D background to sit on.  Before we do this, let’s center the icon to the document.  Select all the layers above the Background layer (there should be two layers – the folder and the silhouette), and press Ctrl + G to put them into a group.  With this group selected, press Ctrl + A to make a selection of the whole document.  Take the Move Tool (V), and in the toolbar at the top of the screen, press both “Align Vertical Centers” and “Align Horizontal Centers” like below:

Now that the icon’s centered, you can deselect everything by pressing Ctrl + D.  Make a new layer below the group we just created, get the Rectangular Marquee Tool (M), and drag out a selection like this:

Step 14

Press D and then X to reset the foreground/background colors and then swap them.  Get the Gradient Tool (G), and in the toolbar, modify it to this:

Starting from above the document, drag out a gradient to almost the bottom of the image like this:

If you deselect everything (Ctrl + D), you should now have this:

Step 15

It’s looking pretty good!  However, the icon looks a bit like it’s floating up and not sitting on the 3D shelf.  To fix this, we’ll add both a reflection and a shadow to it.

Let’s start with the reflection.  Duplicate the group we created by dragging it down to the “New Layer” icon in the Layers palette.  Merge all the layers in the new group together by selecting it and pressing Ctrl + E.  Move the created layer below the original group, but above the gradient layer.  Press Ctrl + T to transform the layer, right click, select Flip Vertical, and drag it down so it’s just below the original folder icon:

With the new layer still selected, press the “Add Layer Mask” button at the bottom of the Layers Palette (third button from the left).  Get the Gradient Tool (G), set it to a linear black-to-white gradient, and drag out a gradient like this:

Finally, fade out the opacity of the layer to about 50%.  You should have this:

Step 16

Now we’ll make the folder shadow.  Duplicate and merge the folder group once again to make another layer.  Move this layer below the original group, but above the reflection, and go to Image > Adjustments > Hue/Saturation.  Move the lightness slider all the way to the left (-100) to make the layer totally black, and press enter.

Press Ctrl + T to transform the layer, and squash it way down like this:

Not right click on the transformation, and select perspective from the context menu.  Drag out the top right handle a bit to make the shadow look like it’s spreading out from the folder:

Press enter to complete the transformation, then go to Filter > Blur > Gaussian Blur and set the Blue Amount to 8 pixels.  Press ok in the dialog, set the layer’s Blending Mode to “Soft Light”, and lower its opacity to around 30%.

Final Result

And that’s it!  You’ve just created a stunning folder icon with added backdrop, shadow, and reflection.  Here’s the final result:

Final Result

Here is the final Photoshop icon that we will be creating:

Step 1

To start off, create a new document of the dimensions 100px by 100px.  Set your background color to #2f64a8, and then press Ctrl + Backspace to fill the “Background” layer with it.

Step 2

Now we will add that nice gradient lighting effect that this icon uses.  However, since we want to be able to reuse this effect for all of the other CS4 icons, we need a way to add this lighting effect “non-destructively”.  To do this, first create a new layer above the background layer, fill it with #808080, and set its blending mode to Overlay.  As you can see, this didn’t change the background color at all, and that’s because the color is a perfect medium-gray.

To add the lighting effects, make sure that your new gray layer is selected, and go to Filter > Render > Lighting Effects.  Enter these settings:

And that will give you this:

Step 3

That’s it for the background!  Now on to the text.  Take the Text Tool (T), click anywhere in the document, and type in a capital P and a lowercase s.  Set the font to Myriad Pro, the size to 72pt, and the color to #28201d.  To center the text to the background, press Ctrl + A to select everything, get the Move Tool (V), and press the “Align Vertical Centers” and “n Centers” width=”647″ heighAlign Horizontal Centers” in the menu:

That should give you this:

Step 4

For the final step, we will ad some subtle layer effects to the text.  To do this, right-click on the text layer and click on Blending Options.  Use these settings:

Inner Shadow

Bevel and Emboss

That’s it!  A really simple effect, yet a surprisingly beautiful icon.  Here’s the final Photoshop CS4 icon again:

How to Create the Other Icons

Creating the rest of the CS4 icons is rather straight-forward.  There are really only two steps the you need to take, and I have listed them below:

Step 1

Select your background layer, and set your foreground color to the color of the new icon.  I am creating the Adobe Illustrator icon, so I will choose #ec8e24.  Press Alt + Backspace to fill the background layer with that color.  Here’s what I have:

Step 2

Now we just need to change the text to fit the new program’s name.  In my case, this is Ai.  Just take the Text Tool (T), click on your text, delete the original text, and type in the new text.  And your new icon is done!  Here is the Illustrator icon:

Now that you know how to recreate the icons, you can create any of them that you want, including custom ones.  Below are the icons that I have created, each followed by the background color I used for that icon.

#c13636

#a9c244

#939cb3

#ad89b6

#aa5378

#778894

Why not make your own icons?  Since we preserved the text and background layers, you can customize the icons to suit your needs.  Enjoy!