Tutorial Art of Icon Making(GIMP)

[WilliamPa]

Art of Icon Making
-By WilliamPa-​

Contents

1. Introduction
2. Looking for improvisation
3. Icon techniques
4. Creating an icon
5. Converting&Importing the image
6. 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.​

--

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
​

--

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.​

--

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.​

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!​

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​

E: First tutorial i've made \o/

Update: I uploaded ALL border types(in one image) here.(check layers)
Note: Only openable with GIMP

 

[_whelp]

>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.

That's not completely true, it can look bad, and people can see small mistakes, depending on their eyesight. Even if it is zoomed out, low-quality icons can be ugly.

EDIT: Yes, 500th post!

 

[gameman]

The finger thingy tool is called smudge, and the black bottle is called doge/burn

 

[WilliamPa]

Thanks will fix

E: Can you also tell name of the black-white box-tool? ^^

E2: Thanks. BTW, as i said in tutorial i have FINNISH version of GIMP, and i searched for half an hour and didn't find options where you could change it.

 

[WolfieeifloW]

Gradient?

EDIT: Before writing a tutorial you should know everything about the subject that you're writing about.

 

[TwiLight]

How about an icon border tut?, dont see any tut for it. Or i just use ButtonManager, presto! have icon border, to make it easy.

 

[GooS]

I think this tutorial is rather unnecessary, since it doesn't focus on anythign and in genereal only explains which icons there are and how to import them, which already exists at World Edit Tutorials, and probably here aswell. And (not to be the judge) my tutorial goes mroe in depth on making the icon itself.

If it did go in depth on how to create an icon using GIMP then I'd have no problem with it since my tutorial only explains PS tools.

Add mroe about the creation process in GIMP and I ahve no problem with it!

//==GooS

 

[13lade619]

Upraged Attack/Defense
UnUprageable Attack/Defense

?

 

[_whelp]

Upraged? Intentional mispelling?

 

[Dest]

Good work. The only downside thing is that you mustn't save these images as a JPEG. It distorts the quality which makes it look bad. A person wouldn't want a bad quality icon.

Also, UnUpgradeable is not a word. Simply say un-upgradeable.

 

[GetTriggerUnit-]

If I was a Gimp user/Icon maker, this wouldn't help me because you can do the same things on photo shop. You don't explain how to use tools, (Goos one does), basicly you show how to paste a picture, add some little effects and convert it to .blp?