Create a Shiny Psdtuts+ Folder Icon in Photoshop

Icon design is an essential element in any designer’s tool chest. No matter how simple or how complex your design is, a nice looking icon will almost always help to spruce things up. In this Photoshop tutorial we will demonstrate some easy steps to help you to produce your own shiny Psdtuts+ icon in Photoshop. These steps can be easily modified to produce a family of icons for your website.

Step 1

Start with a new document, I’ve used Width – 600px, Height – 600px. Take the Rounded Rectangle Tool (U), Radius- 20px, and draw a shape like this, modify the shape using the Add Anchor Point Tool, then move the new anchor points as shown.

Step 2

Hit Ctrl + Enter to make selection, fill it with color – #05b4ba and then apply a Gradient Overlay using a Layer Style.

Step 3

Name this Layer “Base”, Ctrl + Click on the Layer thumbnail to create selection. Now create a new later and name it “Outside Stroke”. Go to Edit > Stroke. Apply a Stroke of 8px, Location – Center. (You can use any color).

Step 4

Now we need to create a shadow of the layer “Outside Stroke”. To do this, you will need to duplicate that layer and drag it under the main “Outside Stroke” layer. Go to Layer > Layer Style > Color Overlay. Fill it with Black color. Now go to Filter > Blur > Gaussian Blur. Radius – 0.9 px. Change its Opacity to 7%. You should get something like this.

Step 5

Now again Ctrl + Click on the “Base” layer thumbnail. Create a new layer and name it “Glow Overlay 1″. Fill it with white color and move the selection down using your arrow key. Hit delete. Change its Opacity to 7%.

Step 6

It’s time for another glow light. Use the Pen Tool (P) and draw a shape like this. Name this layer “Glow Overlay 2″. Change its Opacity to 11%.

Step 7

Again Ctrl + Click on the “Base” layer. Create a new layer and name it “Box Glow”. Fill it with white. Go to Select > Modify > Contract, contract by 30px. Delete this area. Take the Eraser Tool (E), follow the next image.

Step 8

Optionally, you can add your own effects as shown.

Step 9

Our next step is to give it a glassy look. Create a new layer and name it “Glass”. Take the Rounded Rectangle Tool, Radius – 10px, change the layer blending mode to Lighten. See instructions in next image.

Step 10

Now we need to create the edge of the glass themed area. Draw the same shape using the Rounded Rectangle Tool, press Ctrl + Enter to make selection, go to Edit > Stroke, width – 1px, Location – Center, color – white. Change the Layer Blending mode to Overlay. Take Eraser Tool (E). See the next image.

Step 11

Now that the text has been typed out, it’s time to adjust some of the layers. Create a new Layer Group, name it “Object Front”, and then put all the layers inside it.

Step 11

Time for adjusting the layers. Create a new Layer Group, name it “Object Front” and put all the layers inside it.

Step 12

To create the back side of the object, we will next create a new layer under the “Object Front” group and name it “Object Back”, create a shape using Rounded Rectangle tool, then apply the following Layer Blending Styles.

Step 13

Now it is time to add another glow on “Object Back” layer. Something like this. Use the steps we laid out in earlier parts of this tutorial for this.

Step 14

Our next step is to apply a shadow to our back object. See the following image.

Step 15

Create a New layer Group, name it “Object Back” and put the layers inside it. After that, create the upper area of the folder icon by creating a new layer above the “Object Back” Group. Name it “Head”. Start using the Pen Tool, follow the next image.

Step 16

Ctrl + Click on the thumbnail of the Head layer, create a new layer and name it “Head Stroke”, Go to Edit > Stroke, width – 1 px, color – white. Now add some glow on the Head layer, try creating this one yourself.

Step 17

Now we will be creating our tag. To do this, follow the instructions on the image below.

Step 18

To create the rope, draw it using your pen tool and apply the hole’s Blending Style. (Used in Step 17.)

Step 19

To create the shadow of the tag, follow the steps laid out in Step 4 and erase the outer areas. Set its Opacity to 61%.

Step 20

Create a shadow for the folder icon just like this and place the layer at the bottom.

Final Image

You can create a family of icons using very similar techniques. Thank you! I hope you have enjoyed this tutorial.