How to Create Your Own File Icon in Photoshop

On 9 Jul, 2011 By With 3 Comments

Recently I was given a task to create an icon for our newly redesigned website (which is not online yet); the icon­s should match the design and should “pop out”. After some time meddling with pencil and paper, it’s time to convert it to Photoshop.

Short History

Icon is a graphic interface element, a small picture, which represents an application, file, directory, operation system component, device etc. When the user clicks the icon, a standard action is usually performed (run application, open file etc.).

Icons can make your website livelier, and if you’re a graphic designer this is the time to show your skills. We’ve seen what icons can do to a website and how powerful they can be. They can be used to direct our users to another link/page.

icon How to Create Your Own File Icon in Photoshop

You can download the PSD at the bottom of this tutorial!

Today I will show you how to create your own file icon that you can use in your portfolio or in a Client project. As always, we will create everything from scratch. Are you ready? Let’s get started!

Getting down and dirty!

Create a 500×500 file.

1 500x500 size How to Create Your Own File Icon in Photoshop

Select your foreground to #ebe9e9, and use the Paint Bucket Tool (G) to fill our background.

2 background color How to Create Your Own File Icon in Photoshop

Create a new layer (Ctrl + Shift + N), and Select Marquee tool (M) and create a rectangular shape that look like this. Name this as  File.

3 select the marquee tool How to Create Your Own File Icon in Photoshop

Select your Pen Tool, now create a triangle shape like this and right click>make a selection. Create a duplicate layer and name it Triangle. On your layer toolbar, hold Ctrl and press triangle layer (this will select the triangle layer) and back to the File layer, press delete. We will create the folded paper effect.

4 select the corner How to Create Your Own File Icon in Photoshop

Now back to triangle layer, press Ctrl + T and rotate the layer to look like this. Now we are getting closer.

6 folded corner effect How to Create Your Own File Icon in Photoshop

While Triangle layer is still selected, we will move it by 1px. In your arrow keys, press arrow up and arrow right by one. And select your foreground color is #ebe9e9, get your Brush Tool and set it to 60px. Now brush only the edges of the selected layer, don’t overdo it!

7 creating the effect How to Create Your Own File Icon in Photoshop

On blending options, select stroke and set your color to #ebe9e9, follow the settings below. You can see the white 1px on the bottom of the layer? That’s the effect we created from above.

8 end of the folded effect How to Create Your Own File Icon in Photoshop

We re-create the same effect that we did from above, always create a new layer.

9 copy the effect How to Create Your Own File Icon in Photoshop

Now duplicate the File layer and move it below, so it’ll be sitting in the bottom of the layers. Name it Shadow, your foreground should be #323333, and use the Paint Bucket tool. On your Filter select Gaussian Blur and set the Radius to 7.6 pixels.

10 re create the shadow effect How to Create Your Own File Icon in Photoshop

Now on your Shadow layer, press Ctrl + T > right click and select warp, follow the image below. Adjust the layer by pressing your arrow keys, follow your gut feeling! lol.

11 warp tool for shadow effect How to Create Your Own File Icon in Photoshop

You should have something like this. If not, you’ve done something wrong.

12 paper model How to Create Your Own File Icon in Photoshop

Set your foreground to #10b9dd; create a new layer name it Ribbons. Select your Marquee tool (M) and create a rectangular shape like this, fill it with Paint Bucket tool.

13 create a ribbon effect How to Create Your Own File Icon in Photoshop

Create a new layer and select your pen tool, follow the edges of the Ribbons and file layer. After that right click > make selection and set your Paint Bucket tool and foreground to #0a7186, and fill the selected area.

14 re create ribbons back How to Create Your Own File Icon in Photoshop

While your foreground is still at #0a7186, set your background color to #10b9dd, and follow the settings below. This will add more depth to the ribbon. Just duplicate the layer and set it on another side, drag the two layer below File layer.

15 graident the back of the ribbons How to Create Your Own File Icon in Photoshop

On the very top of the layer, create a new one and name it Glossy, hold Ctrl and click ribbons layer. Now fill the glossy layer with white (#FFFFFF), after that select your Elliptical Marquee tool  and drag a circle like this one. After that press delete,­ you’ll have something that look like this.

16 create a glossy effect How to Create Your Own File Icon in Photoshop

On your Glossy layer, set the Opacity to 30% and press Ctrl + T (Free Transform) set the width like the one below.  17 finish the glossy effect How to Create Your Own File Icon in Photoshop

Almost done! Set your font to Arial and 188pt font size, foreground color #10b9dd, and put the sign like the one below. As for the HTML text, set your font size to 57pt and foreground to white #FFFFFF, and you’re done!

icon1 How to Create Your Own File Icon in Photoshop

As you can see, we created a detailed icon. We tackled the hard part first because that’s where all the fun stuff; we’ve combined different techniques like folded effect, ribbons and shadow effect. Honestly, when I am working on this project I didn’t expect it to turn out this good.

Now it’s your turn to show what you’ve came up! I want to see your results and feel free add your own design, ideas are what sets us apart. Hope you’ve learn a lot from this.

3 Responses to “How to Create Your Own File Icon in Photoshop”