How to make an icon

[Tiki]

Please rep me if you like it :)

Paths:

ReplaceableTextures\CommandButtons\BTNicon.blp
ReplaceableTextures\CommandButtonsDisabled\DISBTNicon.blp
ReplaceableTextures\PassiveButtons\PASBTNicon.blp
ReplaceableTextures\CommandButtonsDisabled\DISPASBTNicon.blp

I. Icon Templates
-- Enabled
-- Disabled
-- Passive

II. How to make your icon
-- Template
-- Outline
-- Coloring
-- Touchups

I. Icon Templates

Enabled Icon

This will teach you how to make an enabled icon, pretty straight forward and isnt that hard to do. First take your icon template, which I will provide for you as well. This is the basic 64x64 icon that all warcraft icons have. To plainly start, draw within the center of the icon, mainly in the white area. You may learn more from my Steps Tutorial. Once you have finished your icon. (Icon I made from the steps below). You will have to make sure that its 64x64 which is fairly simple, just reduce the size. You will have to create a inner black shadow, heres an example: That inner black shadow makes it look more unique and not so squareish and finalizes the icon.You may do whatever you want to your icon but this is the basics to how I make one. The image above goes as so, Black Icon, Icon with graphics, Icon with graphics and inner shadow.



Disabled Icon

Alot of people do not know how to make a good disabled icon, heres a basic on how to do that. First take your completed icon, and create a new layer. Within that new layer, set the layers opacity to 50% and then cover the whole icon in black. If you did it right you should still be able to see your icon but its darkened (Image in Middle). Next create a layer ontop of the last created layer. Now draw a black 1 pixel line on the outside of the icon on all sides (on the new layer). Now on the layer with the pixel line, add these effects to it. Outer Glow: Blend Mode- Normal, Opacity- 100%, Noise- 0%, Color- Black(#000000), Technique- Softer, Spread- 0, Size- 4, Range- 2%, Jitter- 0%... and you should get a good looking icon like mine (far right). The image above goes as so, Icon, Icon with black masque, Icon with black masque and border.


Passive Icon

Making a passive icon is exactly like making a disabled icon, so here we go. Next create a new layer. Now draw a black 1 pixel line on the outside of the icon on all sides (on the new layer). Now on the layer with the pixel line, add these effects to it. Outer Glow: Blend Mode- Normal, Opacity- 100%, Noise- 0%, Color- Black(#000000), Technique- Softer, Spread- 0, Size- 4, Range- 2%, Jitter- 0%... and you should get a good looking icon like mine (far right).



II. How to make your icon!


Template
First off take your template. I have provided you with one in the Enabled Tutorial. If you are using Photoshop open the image, and then go to Image -> Image Size. Now that you are there, a window should have popped up. Under Pixel Dimensions (Width and Height) change the dropdowns to percent instead of pixels, and set the input boxes to 300% in both spaces. You should have something like this on the left. Now that you have done that, you are ready to start drawing your icon. If you are using something besides Photoshop, change the image size to 192 x 192 pixels, if you find that easier to do.
Or you may use the template above as your icon if you want, instead of blowing it up.


Outline
First before your start drawing, create a new layer above the icon template. Now set your brush to 3pixels and set the color to black. Make sure your document is set to RGB color mode. Now start drawing an outline of your icon, within the white area. If you go out of the white area thats what the new layer is for, select the area where you messed up and erase it or press the delete button. Everyone is different in drawing techniques, try the best you can. Mine is an icon of the Dreameater murloc hero.


Coloring
Now that you have the outline of your drawing on the icon, its time to color it in. First color in the base colors for each area of the icon, as like I did on the left. Next select the color using eye dropper, and go to a darker color of the selected color, and then draw an outline. If you are confused just look at the icon. Make sure that you cover the black lines from the first layer, if not it will look bunchy and the wrong colors. After you have colored the bases, sharpen it up a bit and make sure your lines are straight and colors or right and etc.


Touchups
This is the main part of your icon, this is where the icon comes alive. First take your base color and go darker, then draw with the darker color where the shadows would be with the icon. You can keep going darker and darker until you have your desired effect. Do the same with making it lighter, take the base color and choose a lighter color and draw were the sun would be hitting the icon. After you have done that, use the smudge and blur tools to sharpen the image up. After you have done use dodge and burn to shape your icon. Use burn to darken areas, mainly shadows... while using dodge to lighten areas, mainly were sun hits. After youve done this, just add all the little touchup and effects to the image as you need. For me I put the rune symbols along his face and forhead.


Finished
Now that you have created an icon, I suggest following step I and creating the 3 types of icons.

[PlasticAngel]

That purple dood is obviously getting some pussy.

[Vexorian]

hmnn attach the images in the post (so we don't rely on external servers / leech bandwidth from them) and I will aprove it

[Tiki]

Done. I had to shorten some images, since max upload was 5.

[Vexorian]

yeah I had the same problem when reenabling another tutorial, I think that 5 is too few will check if there is a way to change that limit.
Edit: no limit now

[Tiki]

Well it doesnt matter now but next time, so this is done.

[Belphegor666]

How you make Outer Glow in Gimp?

[Tiki]

Im not sure, you can do the glow manually by using the guide above.

[noix]

this site is great , gg ^^

[DeaD_MeN_WalkiN]

Is it me or those pictures were taken from wc3sear.ch tutorials?

[Tiki]

Originally Posted by DeaD_MeN_WalkiN

Is it me or those pictures were taken from wc3sear.ch tutorials?

I wrote that tutorial, kthnx.

[DeaD_MeN_WalkiN]

Oh ok :P.

[illidan92]

How do I make my disabled imported icon work?

[illidan92]

What are the paths to import disabled and passive icons? Put em' in there.

[Tiki]

You should know that yourself -_- but fine.