Art of Icon Making
-By WilliamPa-
-By WilliamPa-
Contents
- Introduction
- Looking for improvisation
- Icon techniques
- Creating an icon
- Converting&Importing the image
- Ending words
--
Requirements
- GIMP -- Image editing
- Image converter -- WC3Viewer or WC3 Image Extractor
- The Frozen Throne World Editor(Import Manager)
--
1. Introduction
This tutorial tells you about creating icons and importing them to map.
Please download GIMP and any working converter. WEUltimate might also work, never tested it but friends tell me that it can convert images.
I really don't know much about practicing, so you will have to practice image making on your own.
Mainly I created this tutorial because the previous tutorials didn't tell all about this subject.
Please download GIMP and any working converter. WEUltimate might also work, never tested it but friends tell me that it can convert images.
I really don't know much about practicing, so you will have to practice image making on your own.
Mainly I created this tutorial because the previous tutorials didn't tell all about this subject.
--
2. Looking for improvisation
Improvisation is fairly easy to find for some people, and some people cannot find it at all.
Probably easiest way to get an idea is to think of spells and create icon for them.
Mapmakers can just think what kind of icons they'd need for their maps.
Also, you can look for a map project and ask if you can join as a icon creator.
If you can not think of anything, you might get an idea from looking other people's icons.
Here are some websites where many people upload icons: The Hive Workshop and WC3Campaigns
Probably easiest way to get an idea is to think of spells and create icon for them.
Mapmakers can just think what kind of icons they'd need for their maps.
Also, you can look for a map project and ask if you can join as a icon creator.
If you can not think of anything, you might get an idea from looking other people's icons.
Here are some websites where many people upload icons: The Hive Workshop and WC3Campaigns
--
3. Icon Techniques
Firstly, every icon MUST have size of 64x64.
Almost every map uses the default border style in icons.
I will now show all the borders that blizzard and most mapmakers use.
Inside is colored as bright red so you can note borders easier.
Outside is colored as clear blue so you won't mix it up.
Active Item
It only has a border, this border is used when item of the icon is ready for use.
Disabled Item
Borders are painted black and then drawn to the center. Image is darkened. This is used when item is unable to be used.
Passive Item
Borders are black, and drawn to in like they were in disabled one, but the image isn't darkened.
Disabled Passive Item
This is like normal disabled one.
Autocast Item
At corners there are yellow lines, the image goes over normal line of border and isn't touching the yellow corners.
Disabled Autocast Item
This one is also like normal disabled item.
Upraged Attack/Defense
This is used on uprageable attack/defense icons on unit. Must be changed at Advanced > Gameplay Interface
Un-Uprageable Attack/Defense
Same as upraged attack/defense, but this'll show instead if the item is unuprageable or the unit does not belong to you.
Scorescreen Item
This will show up in the scorescreen.
--
Now we should understand how to do borders.
Next I tell you some general tips on how to make image look better.
Glow
Glow is quite easy to make. First create some color on the glow source spot, and then select the smudge-tool.
Pull the color outwards and it will create glow looking paint. You can use the tool differently, depending on what kind of glow you want.
Smooth
This also requires the smuge-tool. First you create a shape, and then take the smudge-tool.
Now, pull the smudge-tool by the outlines of the thing you drew. This way the outlines will smooth.
Shadows and lights
To do this, use the tool named doge/burn and then configure it for your needs.
Then just use it on your image.
Almost every map uses the default border style in icons.
I will now show all the borders that blizzard and most mapmakers use.
Inside is colored as bright red so you can note borders easier.
Outside is colored as clear blue so you won't mix it up.
Active Item
It only has a border, this border is used when item of the icon is ready for use.
Disabled Item
Borders are painted black and then drawn to the center. Image is darkened. This is used when item is unable to be used.
Passive Item
Borders are black, and drawn to in like they were in disabled one, but the image isn't darkened.
Disabled Passive Item
This is like normal disabled one.
Autocast Item
At corners there are yellow lines, the image goes over normal line of border and isn't touching the yellow corners.
Disabled Autocast Item
This one is also like normal disabled item.
Upraged Attack/Defense
This is used on uprageable attack/defense icons on unit. Must be changed at Advanced > Gameplay Interface
Un-Uprageable Attack/Defense
Same as upraged attack/defense, but this'll show instead if the item is unuprageable or the unit does not belong to you.
Scorescreen Item
This will show up in the scorescreen.
--
Now we should understand how to do borders.
Next I tell you some general tips on how to make image look better.
Glow
Glow is quite easy to make. First create some color on the glow source spot, and then select the smudge-tool.
Pull the color outwards and it will create glow looking paint. You can use the tool differently, depending on what kind of glow you want.
Smooth
This also requires the smuge-tool. First you create a shape, and then take the smudge-tool.
Now, pull the smudge-tool by the outlines of the thing you drew. This way the outlines will smooth.
Shadows and lights
To do this, use the tool named doge/burn and then configure it for your needs.
Then just use it on your image.
--
4. Creating an icon
Note: Whenever i say to save something, save it as .tga(just add .tga to the end when you save)
Firstly, you should create the border.
Then right click on the Layers window and press Create Layer, or somthing like that, got finnish version of GIMP and don't know how to change.
Now we should draw our picture on this layer.
I tend to make the picture on several layers, same with glows and background.
The icon will look good ingame, because it is zoomed in at the moment. In the game it is so small that nobody will note small mistakes.
Note: Please do not make this bad looking images, they won't show up nice even ingame.
Moving on.
Now that the image is done, create background and shadows for it.
Tips for shadowing can be found at Image Techniques part.
Create background on a new layer too.
There are some background images in tool gradient. Though i prefer to make background myself.
Note: The background in the last example picture was from that tool.
Once the image is done, save it as BTN[Imagename].
Now select the Border layer, and right click it.
Press "Select Alfa/Alpha" or something like that.
Now select black color and paint the borders black, don't worry, it won't go over because you have selected alpha.
Now unselect the alpha and select Brush.
Set Transparency to 50 and Scale to 4, then select shape of square which loses color inwards.
Now move mouse to middle of the image. You can see it's location by the numbers in bottomleft corner of the image window.
When it is 32.32, stop.
Then spam brush there untill you think that it would look like a good passive image.
Once done, save it as PAS[imagename].
Then select a large ball-shaped brush shape. Set scale to max so it covers whole image.
Now press mouse ONCE and it should look like a good disabled icon.
Save it as DISBTN[imagename] and DISPAS[imagename].
Now we have passive and normal icons of an image.
If you want to create autocast or something else, you have to improvise or import blizzard borders because i cannot help much at those.
Firstly, you should create the border.
Then right click on the Layers window and press Create Layer, or somthing like that, got finnish version of GIMP and don't know how to change.
Now we should draw our picture on this layer.
I tend to make the picture on several layers, same with glows and background.
The icon will look good ingame, because it is zoomed in at the moment. In the game it is so small that nobody will note small mistakes.
Note: Please do not make this bad looking images, they won't show up nice even ingame.
Moving on.
Now that the image is done, create background and shadows for it.
Tips for shadowing can be found at Image Techniques part.
Create background on a new layer too.
There are some background images in tool gradient. Though i prefer to make background myself.
Note: The background in the last example picture was from that tool.
Once the image is done, save it as BTN[Imagename].
Now select the Border layer, and right click it.
Press "Select Alfa/Alpha" or something like that.
Now select black color and paint the borders black, don't worry, it won't go over because you have selected alpha.
Now unselect the alpha and select Brush.
Set Transparency to 50 and Scale to 4, then select shape of square which loses color inwards.
Now move mouse to middle of the image. You can see it's location by the numbers in bottomleft corner of the image window.
When it is 32.32, stop.
Then spam brush there untill you think that it would look like a good passive image.
Once done, save it as PAS[imagename].
Then select a large ball-shaped brush shape. Set scale to max so it covers whole image.
Now press mouse ONCE and it should look like a good disabled icon.
Save it as DISBTN[imagename] and DISPAS[imagename].
Now we have passive and normal icons of an image.
If you want to create autocast or something else, you have to improvise or import blizzard borders because i cannot help much at those.
Converting&Importing the image
This is quite easy. Though i can only help those who use War3 Viewer, because Image Extractor won't work on my computer.
First, press this button.
It should open window of your files. Use any of the images you saved, and then just press ok to the following windows.
Now you should have BLP image of the icon you created and converted, congratulations!
First, press this button.
It should open window of your files. Use any of the images you saved, and then just press ok to the following windows.
Now you should have BLP image of the icon you created and converted, congratulations!
Ending words
Well, this is the end of my tutorial. Please rate and comment.
Remember to invent your own effects so you can create cooler icons.
I hope you enjoyed reading my shabby and sucky tutorial and learned something new.
Sorry photoshop users for GIMP guide.
Please notify me if you find any typos.
-End
Remember to invent your own effects so you can create cooler icons.
I hope you enjoyed reading my shabby and sucky tutorial and learned something new.
Sorry photoshop users for GIMP guide.
Please notify me if you find any typos.
-End
E: First tutorial i've made \o/
Update: I uploaded ALL border types(in one image) here.(check layers)
Note: Only openable with GIMP
will fix
