Simple Icons using photoshop and WingDings!

[deathtaker26]

So you have a website but you need icons, you can't seem to find good looking icons everywhere. What do you do than? Make your own. In this tutorial I'll demonstrate some basic effects to make a quick, but effective looking web or program icon in photoshop CS5.

So open up photoshop and create a new document Make it about 150x150 with the basic web resolution of 72 dpi (dots per inch). You an re-size it later to fit the size you want. I'm going to make mine 800x800 however, for the sake of this tutorial so you can clearly see what I'm doing.

[](http://www.freemmorpgmaker.com/files/imagehost/#a1beb32eaf8bbeb5375bf090a3388b09.png)

Once you have created your layout setup, you need to choose the icon to make. I am making a bomb icon since I need a hot posts icon for my website.

There are many methods to creating the shape you need. If you are familiar with the pen tool, it's likely your best bet. However, I won't be using any tool as the icon I want to use happens to be in a wingdings font pack, which is a preset font in windows systems as of xp+, you can use this to make a lot more icons but if it doesn't make the icon you want you will need to take a tutorial on the pen tool. (bomb icon is a capital M in wingdings)

After creating the icon resterize it by right clicking the layer and clicking rasterize type Don't forget to center it!

[](http://www.freemmorpgmaker.com/files/imagehost/#a1ad9607e6d522b6a73b44ea35150879.png)

after rasterizing and centering, we are going to need to add some effect first. I know some things don't add up just yet, like how the wick and the cap of the bomb are still attached, but bare with me.
Double click the layer's image to open up the layer Style panel, the first thing I am going to do is make a gradient. A proper gradient is essential to having good a decent icon.

click the gradient overlay text on the layer styles(not the checkbox) to open up the gradient overlay style. we are going to use a light black to a darker black overlay going from the upper left area of our bomb to the bottom of it. In this case I'm going to use the web colors #333333 and #111111 if you need to create the gradient click on the gradient image show in the style box and than double click one of the small color pointers on the gradient bar.

[](http://www.freemmorpgmaker.com/files/imagehost/#cc0a6a4caec0fb97893bbe392b280eeb.png)

Hit okay, now we need to set our angle, since we are going from upper left to bottom right we need a 120 degree angle. So set your angle to 120 degrees, if the darker area is on the upper left hit reverse.

Next thing we are going to do is make the cap of the bomb we can do this by selecting our entire bomb hold ctrl and click on the image next to the layer the bomb is on this will select the layer alone but this selects our whole bomb! We can remove the wick and the body of the bomb using our Rectangle marquee tool. simply hold alt and select the body of the bomb just below where the cap meets (I find that rulers help me a lot when doing this, go to view and rulers to use them), do the same where the wick meets the cap Don't forget to deslect the rest of the wick and explosion as well

[](http://www.freemmorpgmaker.com/files/imagehost/#a2b2518092d826b7b9050e44bc1aa759.png)

You also need a little round area under the cap because the cap shouldn't be flat while connecting to the bomb, do this by using the elliptical marquee tool
after that hit ctrl+J to create a new layer out of your selection. go into the layer styles of this and go to gradient overlay and make a grayish overlay the same way as the other one with a 120 degree angle I used the color #808080 and #c4c4c4  make sure you go from light to dark again!

Now you want to place a stroke on this of 3px and make it black it's also a layer style, add one to the body of your bomb as well in your other layer, it makes a great effect!

[](http://www.freemmorpgmaker.com/files/imagehost/#992d621abcae635b3ac80a74b4f6e08b.png)

The next thing is making the wick and where it connects into the cap. To make the cap area I used the elliptical selection tool and the magic wand tool(to remove the outside area) than created a new layer and filled my selection with black(since im adding effects to it anyway) for the styles of the top of the cap I gave it a stroke of 2 pixels(black) and a gradient overlay about the same as the rest of the cap with a 120degree angle.

[](http://www.freemmorpgmaker.com/files/imagehost/#176827f4f1ea2f1aaa5959b60ed641ed.png)

Now it's time to create our Wick! Select the area of the bomb layer above where the cap meets the wick and select the entire wick(excluding the explosions), hit ctrl+J to make a new layer from the wick. use your elliptical marquee too to select a rounded end of the end of the wick where it meets the cap and fill it with the fill tool, it doesn't matter what color because the gradient overlay and stroke will automatically take effect.

Now making the wick look like a rope, us your pen tool and select 2 points on each side of the wick make it a bit round. Than go to your brush tool, make sure it's on a simple round brush make sure it's small I suggest about 5px dependent on your image size. keep using this method all the way up the wick.

[](http://www.freemmorpgmaker.com/files/imagehost/#39ca1d315cebd6b2a5a09428d663d005.png)

Let's add a bit of effect before going on, just simple things that are easy to point out. First of all let's add some gloss to the bomb, Select your brush tool and select a circle brush that dims out towards the edges. select your entire bomb (ctrl and click bomb layer) create a new layer above all the layers and name it shine. Click on the upper left area of your bomb using a bright #ffffff white color, turn shine layer down to about 20% opacity and you have created a nice shine

And finally we're going to make our explosion/flare. Select the flare in the bomb layer using magic wand tool. make a new layer from it(ctrl + J) than in layer effects change the gradient overlay to a nice orange I'm using #f8bf7a to #ce6a1c. This overlay is a bit different though, we are going to change the  the style to radial, which is a ball of gradient that goes from center darkest to outer lightest.

This is what your bomb should look like when it's done
[](http://www.freemmorpgmaker.com/files/imagehost/#c9a7f429470b184b559eac5b4e137c8e.png)

[Wing]


[deathtaker26]

o-o you just made everything…. more simple I hate you for that T_T