Recently I was given a task to create an icon for our newly redesigned website (which is not online yet); the icons 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.
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.
Select your foreground to #ebe9e9, and use the Paint Bucket Tool (G) to fill our background.
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.
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.
Now back to triangle layer, press Ctrl + T and rotate the layer to look like this. Now we are getting closer.
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!
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.
We re-create the same effect that we did from above, always create a new layer.
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.
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.
You should have something like this. If not, you’ve done something wrong.
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.
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.
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.
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.
On your Glossy layer, set the Opacity to 30% and press Ctrl + T (Free Transform) set the width like the one below. 
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!
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.
