Simple Icon Template Tutorial



So, I thought I’d make a simple icon tutorial for all those people who have no idea how, it’s really quite simple to start making your own. Once you get the template made, it’s as simple as pie.

This post is heavy on the images.

I’ll be using photoshop for this guide. I’ve never used GIMP but I’m sure everything will work on GIMP too as this guide is as easy as possible.

Right, start by making a new image. I like to make my icons around 115 x 115, gives you enough space to play around with. So go ahead and make it 115 by 115 pixels

Now that you have your new image, select the rounded rectangle tool like shown in the image. You can make the icon any shape you like, It’s really your choice, but I’ll be making this icon with this shape.

So you’ve made the template for your icon now, everything you’ll do will revolve around this shape.
Hold ctrl and select the layer in your layer pallet.

Now that the shape is selected, in the layer pallet click on the folder icon. This will creat a group, then click on the layer mask (the one that’s a square with a circle in it) now that you have a layer mask on the group, every image you put into this group will be the same size as your template, so theres no need to cut anything.

As you can see i’ve renamed the layer 1 to background shadow too. in fill reduce it to 0 and right click on the layer and go ito blending options. We’ll now add a shadow to your icon. It’s upto you how dark you have the shadow.

Make a new layer in the group and fill it just with black for now.

Make another new layer, call it top highlight. ctrl+click on the background layer, once the selection is made, go back to the top highlight layer and make a layer mask. and move it to the top of the layer list, above the group. Then select the elliptical marquee tool

making a shape like shown.

Fill it white and reduce the fill to 0, dis-select the selection and go into blending options of the tophighlight layer.

Follow the selections on the image. You now have a highlight for your icon. Duplicate this layer, click on the little link next to the layer mask to unlink it and move the white bit of the image down to make a lower highlight. Feel free to rename the copy to lower highlight then.

There you go… You now have an icon template. stick any images into the group section and you can make icons till your hearts content.

I just made some sample ones extremely quickly but you get the idea

I’m sure I will have missed something, but let me know what ya think/how ya get on with it. Have fun playing around with it. Feel free to ask any questions.

Advertisements

7 thoughts on “Simple Icon Template Tutorial

  1. My laptop is like 9 year old, gets the job done so never upgraded. Long as i can still do everything I want, whats the point.

    • hey… for some reason, when I create the layer mask on the group, it doesn’t take the shape of my rounded rectangle. it’s just completely white. I can make a mask on the layer with the rectangle but it won’t work on the group with the instructions you have. any ideas?

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