How to Make a Folder Icon


In this tutorial you will learn how to create a nice folder for your desktop or a website.

1. First of all create a new document which is 128 x 128 pixels large and has a transparent background.

2. Make a new layer, choose the Pen Tool and draw a shape wich is similar to this one:

Step2

3. Now use the following settings:

Gradient Overlay
#FFd27A -> #FFB912

Stroke
Size: 1px
Position: Outside
Color: #C07C33

Inner Glow
Blend Mode: Normal
Color: #FFFFFF
Choke: 100%
Size: 1px

After that it should look something like this:

Step3

4. Then you duplicate the layer with the shape. Now you have to perspectively distort the new layer as shown on the picture:

Pic1

And now scale it down a little bit, so that it looks like an 3d opened folder:

Pic2

The result of step 4:

Step4

5. In this step we’re going to add a piece of paper. So make a new layer and draw a shape like the one on the picture:

Step5

6. Now go to the layers palette and use the following settings:

Gradient Overlay:
Opacity: 10%
#000000 -> #FFFFFF
Angle: 50°

Stroke
Size: 1px
Position: Outside
Color: #D6D6D6

It should now look similar to this one:

Step6

7. Next you turn the piece of paper to the left a little bit and put this layer under the layer with the 3D folder thing from step 4.

Step7

8. That looks quite nice, but the thing wich makes it look like a really cool icon, is to set the opacity of the 3D folder part to about 50-60%.

Step8

That’s it. You can add some details and use it for a website or make an .ico file and use it for your desktop.

Thats what I came up with in the end:

Final

Two other things wich I made with exactly the same folder parts:

Folder_sheet_x

Folder_world

I hope you liked my first tutorial, and I’m looking forward to make another one soon!

Have fun!

http://www.webdesign.org/web/photoshop/web-layout/how-to-make-a-folder-icon.6433.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s