[Tutorial] Create simple web icons in Photoshop

Hello there fellow SP members! So, I realised that I plan on being a member here for a while, and thought to myself, “I need to give back to this community as much as I take from it”. So heres me doing just that. I hope you enjoy this tutorial and are able to walk away with some good ideas and possibly a little smarter than you were when you went in :smiley:

Enjoy the tutorial!!!

Software used:
Adobe Photoshop CS3

Step 1 - Shaping your icons

It shouldn’t be a problem at all for you to make a suitable shape for your icons. Photoshop boasts a pretty wide variety of pre-made shapes which you can utilize, or you could also create shapes yourself using the Pen tool if you have the know-how (this tutorial will not go into this, sorry). You also have the alternative of downloading and installing shepe packs from the web (please view additional information at the end of this tutorial for information on how to do this).

Ok, lets get started, for this tutorial, I will be creating a small rounded square as the base for my icon. You can create this shape by selecting the Rounded rectangle tool. At first you may only see the rectangle tool here, right click this tool to access other shapes, here you will find the rounded rectangle tool.

Now, holding down shift, draw your shape onto the canvas. Note: You can change the radius of the rounded edges by playing with the radius in the bar near the top of the Photoshop UI (i forget what its called, sorry :D) as shown in the image below. A higher radius will increase the roundedness of the shape.

Here is what i have so far:

Step 2 - Coloring your shape
Now, this is where it gets really fun! :smiley: You could however skip this section, if you like the plain black shape, its your choice :slight_smile: but thats just horrible, so carry on!

Ok, most web icons i see these days contain a gradient, so thats exactly what were going to do in this tutorial. Let’s get started!

Holding down Ctrl (CMD for Mac users), click on the little box on the layer your shape is on in your layers palette, this will select the shape, now anything you do will only take affect within this selection.

Hold down Ctrl + Shift + N to create a new layer.
Now, select the gradient tool:

Similarly to when we created the shape tool. Additional options will now appear at the top of the Photoshop UI. click on the option which looks like a color box (example shown below) to open up the gradient dialog box.

Now you are presented with the gradient color dialogue box, from here you can change the type, and colours of your gradient. At this stage, i will only be using a simple liniar gradient.

Now, using the slider at the bottom of this dialogue area, notice the two arrows at either side. By double clicking on these, you can select the colour you wish each side of the gradient to be. For example, by clicking on the left arrow, you will be changing the colour for the left side of the gradient, and vice versa.

Once you have your colors of choice selected, close this dialog box then with the gradient tool selected, and also your shape selected as shown above, drag from the top of your shape to the bottom to form your gradient.

You should now have something that looks similar to this, of course the color of yours may be different of course :slight_smile:

Step 3 - Adding the super duper mind blowing (or not) effects to your icon

This is probably the most complicated part of this process, and its easy!

Ok, let’s add some shine to this thing shall we? With your shape selected (like above), select again the gradient tool, however this time, we are going to take a different route. In your color palette in the tools menu, set your foreground color to white.

Now, in the gradient options in the UI at the top of Photoshop, click the arrow on the color box, from here select the color to transparent gradient (you will notice that it contains only one color, then is transparent, its only color is that of your foreground color!):

Is your shape still selected? make sure it is, now, using the same short keys as above (Ctrl + Shift + N), create a new layer. Now, with the gradient tool, drag from the top of your shape to around the middle. You may want to play around at this stage till you find an outcome your happy with. Once your happy, drop the opacity of this to around 20%-50%. Heres my outcome, notice how this gives the icon a shine effect.

This isn’t really a big change, but hang in there. Now, lets add some other stuff, with the shape still selected, go to Select > Modify > Contract, then contract this selection by 1 Pixel. You will notice the selection around your shape has not decreased in size by 1 PX. Create a new layer, and then add another white gradient, as done above, only this time we are going to use a different style of gradient.

Remember the UI at the top of Photoshop, with the gradient tool selected? Good, go back there and you will notice a set of 5 desaturated icons to the right of the color box. Select the 2nd one from the left, this is called the ‘Radial’ gradient. Now, with this gradient style selected drag again from the top of the shape to around the middle. Again, lower the opacity to something your happy with.

Heres how mine looks so far!

Should be looking pretty shiny ant this stage. However, it looks a little boring, right? Theres a very simple way to give a very nice, almost 3D’ish looking effect to this, and heres how its done.

Select your shape, YET AGAIN, then as we did before go to Select > Modify > contract and contract it again by 1 PX., Create a new layer and will this with solid white. Now contract the selection again by another pixel and then press delete. If done correctly you will notice now that you are only left with a 1 PX white border within the icon. Lower the opacity of this border to whatever your satisfied with. Heres how mine looks:

Now create a new layer. Using the brush or pencil tool, draw a straight white line at the same location of the top and bottom areas of this border. Drop the opacity of these lines to whatever your satisfied with, however i think for the best effects it is nice to these white lines be pretty bright, to give a more 3D-ish effect, as you can see below from my outcome.

[B]Thats pretty much the crux of it. there are, of course many more things you could do to this, but for the sake of this tutorial, and your sanity, this is enough to give you a push in the right direction and hopefully no more need to search the net for some nice icons.

Heres a few more examples I made to aid this tutorial:[/B]


I hope that you were able to learn something from this.
If there is anything your confused or unsure about please don’t hesitate to ask for help or advice, I am always glad to help!

Nice work cptnox. Thanks for going to the trouble to get this all together. I hope to follow it through in detail tonight. :slight_smile: