"Complete Icon Tutorial with ALL about Icons" Flame_Phoenix
Creators Note
After the unexpected success my first tutorial had Creating a Tavern by Flame_Phoenix i was astonished. I never expected my tutorial to have an excellent qualification by the users. In deed i remember trying to go to every detail and that seemed to work for me. Now, to thank that opportunity i decided to write a new tutorial. All about icons. I guaranty that when you finish reading my tutorial you will be a professional making icons - if you are new at icon making, don't worry, this tutorial it's just for you. It was made by purpose to people who never managed themselves into the world of icon making, but non less this tutorial will also give to advanced icon makers all the experience they need, as it also contains advanced icon knowledge. This super tutorial DOES HAVE EVERYTHING ABOUT ICONS. YOU WON'T FIND A BETTER TUTORIAL. To this tutorial i searched for all icon websites, and this is a work with all that information. As a work it is, it also has a Bibliography section you can visit and a few sites i recommend myself to all icon makers. Now to maybe end this note I am not going to say that I don't want this to go to the grave, because I know this work is to much good for that. To nearly end i just want you to comment my 3,5 months work and give suggestions. If you don't understand something, post it on the forum so than I can help you and make a better tutorial.
To finally end i want you to know that this is also my first and probably my last super tutorial, as the chances of you guys seeing me doing more tutorials will be small. Doing this tutorial gave the chance to be with the best people among icon making like BlackDoom and gave me the chance to learn tons of new stuff while making it. Still I must confess myself very disappointed with the moderators of the "Submit a Tutorial" section , as I only got the feedback I needed in the very final stage of my work (Special thanks to Purplepoot, Wolverabid and low_kwaliti). Making this tutorial gave me the most difficult times I have ever had in the Hive Workshop, but also the hope that it can give me the best moments I will ever have as well. So to finish I just want to say to ALL people who read super tutorials, to COMMENT them, even if you are the newest guys in the world to the subject, keep in mind that your WORDS, REPUTATION POINTS and RATING are the best help a tutorial creator can ever have. Even if you don't understand the subject in cause, I guarantee you that the simple word of Thanks is a very important word for all those who make tutorials. Psychologically it does have a GREAT IMPACT, so use it to do good.
And now before you start reading my tutorial I would like you to close this revealed window, as it does take needed space from the tutorial, thus damaging it's contend.
“General Introduction”
Hi, this tutorial will teach you people everything you will ever need to know about icons. This is a massive tutorial that gets together all icon information for Warcraft 3 TFT. It also applies to ROC users, but you will need an extra program to import the icon.
I will use Irfanview as an image program. However you may choose to use other programs such as Photoshop, Paint Shop Pro, PhotoImpact, GIMP or others. In the end of the tutorial you will have the links to download this programs if you want.
This tutorial also has a list of other Internet sites that can help you if you need.
“Creating an Icon”
“Introduction”
Before I start I want you to know that I will not teach you how to create an image for an icon; I will just teach how to create the icon with the image. If you want to create a good image for an icon you can search in goggle, or, the most common solution, you can use a professional image program like those I mentioned in the start. In the end of this tutorial you will have the websites of the programs I mentioned, it is up to you to choose the best.
This means that to start we must know what an icon is. So, what is an icon?? Well, this is not a simple answer. There are two types of icons: icons which we use in active game play (BTN, DISBTN, PAS and DISPAS, I will explain what this is later) and icons that we use in passive game play (Type of attack, armor, level of upgrade, etc).
So we have:
1.Active game play icons – these icons are 64x64 pixels icons with 24 bit colors. We use these icons when we cast a spell or give an order.
2.Passive game play icons – these icons are 48x48 pixels and 24 bit, used by the game to determinate the level of an upgrade, they are referenced by the game as “special icons”.
In this tutorial you will learn how to create both of these icons.
Both icons can be in TGA format or BLP format. Icons in TGA format do not save alpha channels which cause some icons to appear green or even black in the game, BLP format does save alpha channels and it is the format I recommend and use.
Green icon … sometimes there are also black icons. This happens when you do not do things correctly. It can be caused due the TGA format.
Each icon graphic for a unit / building consists of two basic icons, the main icon you see when normally playing the game (BTN - Button), and the darkened icon that you see when you hit F10 to display the menu (DISBTN – Disabled Button).
Other icons, such as the passive abilities (like endurance aura, Unholy aura, etc) use a different type of icon, an icon with no borders (PASBTN – Passive button) and the darkened version (DISPASBTN – Disabled Passive Button). PASBTN and DISPASBTN icons are not necessary for an icon to work properly, they are optional. Passive game play icons, are an exception as they can not have Passive Icons and Disabled Icons.
In this tutorial I will uses the programs:
• IrfanView ( You can use other programs that can save in BMP format and that can work with images, like GIMP, Photoshop, Paint Shop Pro, PhotoImpact, etc). IrfanView is available in http://www.irfanview.com/, or you can download the version I include on this tutorial.
• W3IR (available in this website, or you can download the version I include with this tutorial)
• Warcraft 3 viewer (available in this website, or you can download the version I include with this tutorial)
• Warcraft World Editor (to import the icons)
Now I will explain what I will do during this section:
1. I will start by using IrfanView to "create an image". After that I will resize the image set it to 24 bit and save it in BMP format.
2. After that I will use W3IR to create the borders for my icon.
3. In the end I will use Warcraft 3 viewer to convert my image into BLP format.
4. It is done!, now I just need to import it.
“Start with Irfanview”
To start install Irfanview. Now because Irfanview is a very limited program (and that is why my advice is to use better programs, like the others I mentioned), it can not create a new image. To solve this problem, I used a very simple and easy solution, Print Screen your Desktop! Or search for a BIG image in Google, I decided to search for a big image in Google. Now that the most difficult part is done (lol) save the image in a paste. Now use Irfanview and open the image with it. If you want to learn how to create and design your own icon, then visit the Websites and Downloads section and have a look on the websites I recommend.
MMM Shrek and Fiona are so nice together! Now it is time to resize our image which is very easy to do. Go to Image > and then use Resize/Resample, or if you are lazy you can just press CTRL + R.
Now uncheck the “Preserve ratio aspect” box, and choose size 64x64 for an active game play icon, or 48x48 for a passive game play icon. I will make an active game play icon, so I will use 64x64 pixels size.
OMG, MM it seems that Merlin did a great job, Shrek and Fiona are much smaller now =).
With our image resized it is time to set it to 24 bit colors. But, how do I know the color depth my image has? Well, to know the current Bit colors of your image just go to Image > Information or press “I”.
IrfanView tells me that the current Color depth of my image (number of color bits it has) it 24 BitsPerPixel. This is good news because now I don’t need to change anything.
But what if my image has too many color bits?
Well IrfanView does have a solution for that. To decrease the color depth of your image you just need to go to Image > decrease Color depth ( in this case, but if your image needs more colors, go to Increase Color depth) and set the color depth of the image to 24BPP.
Now to end this part of the tutorial, just save you image in BMP format. This is very easy to do. Go to File > Save as and there give a name to the image, and save it as a BMP image in a place you know where it is. I am saving the image in BMP format because the program I will use next works better with BMP. Also Warcraft 3 Viewer and Warcraft World Editor do have a few errors and bugs when they handle TGA images. This means that I will save the images in BMP and in the end I will convert them into BLP.
I saved my image in my desktop as you can see.
Now close IrfanView, we will not need it for now. Time to move to the next section.
“Add Borders with W3IR for active game play icons”
W3IR is a very complex program and I warn you that this will be the most difficult part of the tutorial. This program allows you to do many things, but for now, I will just add the BTN, DISBTN, PASBTN, DISPASBTN and the AUTOCAST borders to my shrek icon.
If you remember active game play icons are 64x64 icons, and so we will work out that format.
To start create 2 folders. One folder is where you have to place the image you just created now (in this case name it “In”), and the other folder is the folder where the program will place the Bordered images it will create (in this case name it “Out”).
Now place your recently created image in the “In” folder. After doing this open the W3IR program.
Good, now press the button Add Borders.
If you done this correctly, this new window will pop up:
Here is where the challenge begins.
If you look to the image you can see that there are 2 windows. In the left one, you must choose the “input” folder; this is the folder where you have your created image. In the right window, select the “output” folder, the output folder is the folder where the program will place the “Bordered icons”.
This means that in the “Input window” you have to select the “In” folder you created, and that in the “Output window” you have to select the “out” folder you also created before.
Now click in the 64x64 images button.
After this I will check all other boxes, the BTN, DISBTN, PASBTN, DISPASBTN, and the Autocast border boxes, just like in the image below.
Now it is time to name my icons.
Naming an icon is not easy as well, it has several and important rules:
• When naming your icons, make sure you put the letters "BTN" at the start of the BTN icon filename.
• Put "DISBTN" at the start of the DISBTN icon filename.
• Put "PASBTN" at the start of the PASBTN icon filename.
• Put "DISPASBTN" at the start of the DISPASBTN icon filename.
• Autocast icons are an exception. These icons are regular BTN icons, but they have a different border type. This means that when naming an Autocast icon, it needs to have “BTN” at the start of the file name.
If you didn't understand what I wrote before, I will just give an example:
Be careful, because, a BTN icon to correspond to a DISBTN icon, they both need to have the same IconCustomName. If this doesn’t happen, Warcraft will display a normal good looking icon during the game, but a green box when you hit F10.
Example:
BTNshrek + DISBTNshrek = works fine, good work
BTNshrek + DISBTNfiona = does not work, bad work
The PASBTN and the DISPASBTN icons work the same way, however the prefix is different:
PASBTNshrek + DIPASSBTNshrek = works fine, good work
PASBTNshrek + DISPASBTNfiona = does not work, bad work
The Autocast Icon is an exception, the program can not create a DISBTN version for the Autocast Icon, but don't worry, I will teach you later how to create it with only a few steps in IrfanView, it is very easy.
So, now that we know how to name our icons, let’s do it!
Good, now we just tell the program which type of file the folder has. Click "Please select the target image type:" and there choose BMP.
Now it is time to Create some Borders !!! Click the Border images button and the program will create the bordered images in the “output” folder according to the extension ( this means that if the image in the “input” folder is in BMP format, the bordered images created in the “output” folder will be in BMP format. However if the image in the “input” folder is in TGA format, the bordered images created in the “output” folder will be in TGA format, and so on).
After you press the button a box will pop up. Just press the “Yes” button as you have no other choice.
Great job until now. Now let’s open the “Output” folder where our new icons are.
Wow, great !! I have the icons! BUT WAIT A SECOND .. NOOOOOO the work is not done yet .. why !!.
Well that happens for 1 main reason:
• W3IR is a great program but it has 2 bugs in it. The first one that you can easily see is that the file name is not correct, if you look to the name of the icons, you can read that we have NormalIconName + IconType + IconCustomName which is not correct. If we place this in the Warcraft 3, it will cause it to crash. This is easy to solve, just change the name and delete the NormalIconName part; delete everything before the IconType part.
Good, now we have the correct formula: icon type + icon custom name.
The second bug it has is that this program fails to create a DISBTN image for the BTN Autocast icon. This means that we will have o create our own DISBTN Autocast icon.
This is very simple to do and we will use Infraview.
To start creating your DISBTN Autocast icon, open IrfanView. Once the program is opened, use it to open the BTN Autocast icon you’ve created.
Now that you have the BTN Autocast file opened, it is time to remember what a DISBTN is. DISBTN icons are darkened BTN icons, so this means that in order to make our icon darker; we have to decrease its Brightness. To change the brightness of an image go to Image > Enhance colors or press Shift + G. A new window will pop up.
Now just set Brightness to “-100”. I’ve chosen “-100” because I believe it is a good value, if you wish you can try other values. Keep in mind that changing the other values such as “Contrast” or “Color Balance” per example, will change the quality of your image. Besides, we only need a darker image, so we only need to change Brightness.
Now just press “Ok” button. ”DO NOT CLICK IN “APPLY TO ORIGINAL” as you will loose the original image if you do so.
Now that we have our darkened icon, we will use the command “Save AS” and we will change its name to DISBTN_shrek_autocast (or whatever the name you choose).
When saving the icon keep in mind the formula and the fact that it needs to have the same name of its BTN correspondent.
BTN_shrek_autocast >> DISBTN_shrek_autocast
Good job now look at your folder. If you did all steps correctly and saved the images in BMP format, this is what you will see.
If you saved your images in TGA format, use IrfanView to see them.
Good job. Now that everything it is ok, let’s convert all this images to BLP format.
Close IrfanView, we won’t need it for now. Now create another folder and name it “BLP shrek”.
Now we have 3 folders, “In”, “Out”, and “BLP shrek” just like in the image. We will use no more the “In” folder now, we will work with the “Out” and the BLP shrek folders.
Next is the ”Add Borders with W3IR for passive game play icons” section of the tutorial. If you don’t wish to learn it and if you want to move to the final step please go to the ”Converting to BLP with Warcraft 3 Viewer” section of the tutorial.
“Add Borders with W3IR for passive game play icons”
Please before doing passive game play icons read the create active game play icons section of this tutorial, because it has all the basics you need to know. Passive game play icons are special BTN icons that DO NOT need a DISBTN correspondent. This makes our job a lot easier. Here I will teach you (I hope) how to create an Upgrade type Border and an Attack / defense type border. W3IR also has some limitations and these are the only types of borders it can create. You can eventually use these icons to do more things and to add to new sets of borders, new attack types, etc. Your imagination is the boss once you learned how to create active and passive game play icons.
I will assume that you already read the Introduction and the Start with IrfanView sections of this tutorial, if you have not read them yet, do it.
To start create 2 folders. One folder is where you have to place the image you just created now (in this case name it “In”), and the other folder is the folder where the program will place the Bordered images it will create (in this case name it “Out”).
Now place your recently created image in the “In” folder. After doing this open the W3IR program. Remember that the images in the “In” folder must be 48x48 pixels size and 24 bits colored.
Good, now press the button Add Borders.
If you done this correctly, this new window will pop up:
Here is where the challenge begins.
If you look to the image you can see that there are 2 windows. In the left one, you must choose the “input” folder, this is the folder where you have your created image. In the right window, select the “output” folder, the output folder is the folder where the program will place the “Bordered icons”.
This means that in the “Input window” you have to select the “In” folder you created, and that in the “Output window” you have to select the “out” folder you also created before.
Now click in the 48x48 images button.
After this I will check all other boxes, the Upgrade Border and the Attack Type border boxes, just like in the image below. I do not advice you to check the bordered images string box as it will just complicate things, and it doesn’t create any type of border.
Now it is time to name my icons. Let’s remember our rules. These 48x48 sized icons are regular BTN icons, and they do not need a DISBTN correspondent. This way what we need to know is:
• When naming your icons, make sure you put the letters "BTN" at the start of the BTN icon filename.
If you didn’t understand what I wrote before, I will just give an example:
• BTN_attack
• BTN_upgrade
To remember, the name of an icon is:
IconType + IconCustomName
So, now that we know how to name our icons, let’s do it!
Good, now we just tell the program which type of file is in the folder. Click Please select the target image type: and there choose BMP, if you saved the icon in BMP format, or TGA, if you saved the icon in TGA format.
Now it is time to Create some Borders !!! Click the Border images button and the program will create the bordered images in the “output” folder according to the extension ( this means that if the image in the “input” folder is in BMP format, the bordered images created in the “output” folder will be in BMP format. However if the image in the “input” folder is in TGA format, the bordered images created in the “output” folder will be in TGA format, and so on).
After you press the button a box will pop up. Just press the “Yes” button as you have no other choice.
Great job until now. Now let’s open the “Output” folder where our new icons are.
Wow, great !! I have the icons! BUT WAIT A SECOND .. NOOOOOO (lol, again) the work is not done yet .. why !!.
Well that happens for 1 main reason:
• Well, as I told you before, W3IR is a great program but it has 2 bugs. In this case we are lucky, because we are not affected by the second bug type, but only by the first bug type. If you remember well, the first bug type that you can easily see is that the file name is not correct, if you look to the name of the icons, you can read that we have NormalIconName + IconType + IconCustomName which is not correct. If we place this in the Warcraft 3, it will cause it to crash. This is easy to solve, just change the name and delete the NormalIconName part.
Good, now we have the correct formula: IconType + IconCustomName.
Do this to all icons.
Good job. Now that everything it is ok, let’s convert all this images to BLP format.
You can create a 3rd folder to save the BLP format images if you want. I decided that it will be more organized, so I created a 3rd folder named BLP shrek.
Now we have 3 folders, “In”, “Out” and “BLP shrek just like in the image. We will use no more the “In” folder, now we will work with the “Out” and the BLP shrek folders.
The next section will instruct you how about to convert BMP files into BLP files.
“Converting to BLP with Warcraft 3 Viewer”
Now it is time to head to the final step of icon creation !! This chapter applies to both active game play icons and passive game play icons. The following examples will be with the active game play icons but it applies to the others as well.
To start open Warcraft 3 viewer.
Now just follow the steps on the image:
If you did this correctly, a new window will appear.
Now press ok. A new window will pop up. This window is EXTREMELY IMPORTANT, and you must not ignore it. This window will make you a question about alpha channels. If you remember the introduction, an icon with no alpha channels, is probably a black or a green icon. So, to answer to the question say “YES, add alpha channel to all”.
After this important step, if you did everything right, a box saying that it was converted with success will appear. If it doesn’t it is because the program has a bug, or because the installation has some problems. In last case, you can read the hole tutorial again to see if you did something wrong. Post in the forum if you have any questions.
Now close the program and import the icon !! congratulations you now have advanced icon making knowledge !!! enjoy it.
You have created a professional blizzard icon ! =P.
Now use your imagination as it is your limit from now on ! create hundreds of icons and don’t forget to place them in this website!
If you don’t know how to import an icon into Warcraft, read my “Import Icon” section !
“Edit an Icon”
“Introduction”
Editing an icon is very similar to creating one, the steps are the same but the order they follow is different. Many people compare editing to stealing, this is not truth; when you edit an icon, you change the work of someone, you don’t steal it. However icons can be stolen, so when you edit someone else’s work, remember to give credit to the creator. Sometimes the creators of icons don’t make a complete package of icons with all icons they should have, other times, you just don’t like the color or some other detail per example. Other times in the map making job you want to create a different attack type, or different armor and you just can’t because you can’t find 48x48 icons.
This section of the tutorial will help you with all those problems, and I will do my best to make sure you will be an iconing master when you finish reading it. In this section you will also learn how to work better with Irfanview and hopefully you shall acquire medium/advance knowledge about the program itself. However remember that it is you who are editing the icon and not me, which means that it must be you who is going to do the creator’s part of the editing work. I will not teach you how to make major changes or completely new images; I will just give you the tools and the knowledge for you to do it.
“Incomplete packages of images”
This is the most common problem. Most of the time, you find a perfect icon for something, but when you open the package it only has the BTN and DISBTN file or sometimes only the BTN. Sometimes you wan that icon for a passive ability, or for an autocast spell and you can’t because you don’t know what to do. This section of the tutorial will explain all this stuff to you, but remember that it is a lot similar to creating an icon. My advice is READ THE CREATE AN ICON SECTION of the tutorial.
So imagine that you are in the internet site of hiveworkshop and suddenly you see this icon:
OOHHHH SO BEAUTIFUL !!!! I love it !! my map must have it !!!
However when you download it you see a problem:
HEEYYY!! There is only a BTN icon … Where are the others !? OMG there is no others … crap I will have to create them myself ..
Yes it is truth, sometimes when you want a job well done; you have to do it yourself.
So to start let’s remember our steps. When we created an icon we first used IrfanView to create the image, after that W3IR and than Warcraft 3 Viewer. This means that now we will start backward. We will use Warcraft 3 viewer to convert our BLP file into a BMP file. Run Warcraft 3 viewer, and once there press the BLP>TGA icon like the image shows, but choose the BMP format when converting.
Ha Ha! There he is. Now press open and, after pressing open, choose the BMP format in the format section and press save (no need to change the name). You can also choose a different directory if you want. But I think there is no need to do that (it is just one image).
If you done this correctly the program will ask you the quality of compression. If you remember my long introduction icons must be 24 bits, so it is obvious that you must chose 24 bit compression. After that press ok.
The program can also have a bug (mine has) which will show a pop up box telling you that your icon was converted into BLP format successfully. If that happens just ignore it and don’t worry as your icon was saved into TGA format with no problems.
Now if you saved the BMP file in the original folder where the BLP file was (like did) you probably have something like this by now:
This means you are doing a good job.
Now that you converted your icon into BMP format we should use W3IR, however there is a problem. If the icon you downloaded already has a BTN border (probably has, known sites as Hive, per example, only accept icons with borders) it means that if we try to create an Autocast icon (per example) the result will be an icon with two borders – the autocast border and the BTN original border of the icon.
An example of an icon with 2 borders – the BTN border and the Autocast border.
To solve this problem we could use the DISBTN icon than but, if we do so our images will be so dark in game that it will be nearly impossible to see them. Also, the DISBTN icons are also border. Than there is only one way out – we remove the BTN border from the BTN icon with IrfanView. If the icon you downloaded has no borders (unusual) you are lucky and you can jump this part of the section and move to the part where I use W3IR. Other way, if you don’t need an Autocast icon, you can also jump this section of the tutorial.
To start run IrfanView, than go to File > Open and search/open for your recently converted BMP file so you can work it.
Once the icon is opened in the program, zoom it to a zoom between 300 and 500. It is important that you choose a value which is a multiple to number 100 (like 100, 200, 300 ...). To understand why, please read the "List of important known bugs in the programs".
Now with you mouse (the arrow) select the inner part of the image (don’t select the border, this requires some ability, if you did this well done, when the image is small again, you will not see any gray areas from the border).
Now go to Edit > Crop selection or just press CTRL + Y.
If you done this hard step correctly this is what you will see when if you amplify the cropped image.
No gray areas form the borders as you can see.
Images with no borders are 56x56 pixels sized. This value is very difficult to obtain when cropping so don’t worry if you don’t get it, just try to get as closer as possible. You can see the pixels size by pressing CTRL + R.
Now if you did this well, you have created another small problem (lol), your image should be 64x64 pixels size and now it is 56x56 pixels. Fortunately this problem has a quick and simple answer. Just press CTRL + R (Resize/Resample), uncheck the box that says Preserve aspect ratio and resize your image to 64x64 pixels size.
Good job, however remember that an icon to be well accepted must have 24 bits (24BPP). To see if you icon has this value just press “i”.
My icon has the correct value so it means that I can move on. If yours does not have it you should go to Image > Decrease Color Depth or Increase Color Depth and choose the 24 BPP option. For additional help on this section you can read the Create an Icon section.
Now that our image is ok, we will save it, overwrite the old file with this one if you may prefer. I will just press “s” and overwrite the file I no longer need.
Now that we had all this work with removing borders, it is time to add them with W3IR - Yes, life is ironic I know …
If you remember, last time we used W3IR, we created an “In” folder and an “Out” folder. This time my “In” folder will be where these two icons (if you remember the BMP file we just changed is in the same folder the BLP icon you downloaded is) are ( this means that our “In” folder is “Shrek_cat”). So now we just need to create an “Out” folder. Create a folder somewhere you know where to find it and name it “shrek_cat_BMP_Borders”; this folder is important as by the means of logic it will work as our “Out” folder (“out” folder is the folder where our bordered icons will be).
Now open the W3IR program and click in Add Borders.
If you done this correctly, this window will pop-up.
Good, now it is just like creating an icon. Select the “shrek_cat”/the folder where your two icons are) in the Input window (left side) and the “shrek_cat_BMP_Borders” in the Output window (right side). Now choose the pixels size of the image (normally is 64x64 because the Hive Workshop and all other sites rarely have 48x48 pixels sized images), check the BTN, DSBTN, PASBTN, DISPASBTN and the Autocast boxes (just check the type of border that you want) and name your images (read the create an active game play icon section to better understand this). Finally select the type of image you want to convert (in this case BMP).
To finish just press the Border images button and say yes to the window that will appear.
Now if we make a quick visit to our “Out” folder (shrek_cat_BMP_Borders) we will see a “bug” from the program.
The program saved all our images with the previous name. This “Bug” doesn’t mean that the images don’t work, because they still work, however if we import them into Warcraft this way, we won’t know which images are passive, autocast or even disabled. This will cause green icons and in the worst scenario game crashes. However this fearsome bug is very easy to delete. Just change the name of all icons to their correct formulas: IconType + IconCustomName.
This means that (in this particular case) we must remove the “BTN_shrek_cat” part of the name that is repeated in the start.
These are the names you should have after you change the name of the files to the correct formula.
Now to end I will create a folder named “BLP cat”. This is the folder where you will place the BLP icons we will create now. Yes, if you read the Create an Icon section you will understand why it is so important to use BLP icons instead of TGA.
After creating the folder open Warcraft 3 Viewer and once there convert all your BMP files into BLP files with the method described above.
Now just follow the steps on the image:
If you did this correctly, a new window will appear.
Now press ok. A new window will pop up. This window is EXTREMELY IMPORTANT, and you must not ignore it. This window will make you a question about alpha channels. If you remember the introduction, an icon with no alpha channels, is probably a black or a green icon. So, to answer to the question say “YES, add alpha channel to all”.
After this important step, if you did everything right, a box saying that it was converted with success will appear. If it doesn’t it is because the program has a bug, or because the installation has some problems. In last case, you can read the hole tutorial again to see if you did something wrong. Post in the forum if you have any questions.
Done, you edited my incomplete icon!!! Now you just need to import it into Warcraft 3! If you don’t know how to import an icon go to the Import icon section of my tutorial. Congratulations as you already know how to complete those incomplete packages of images =)
“Transforming a 64x64 pixels image into a 48x48 pixels image”
MM, imagine that when you download an icon you want that icon to represent an armor, or even an attack type. The first problem you will have is that it is very hard to find and download 48x48 from any website. People just prefer to do 64x64 pixels icons because they are more used. So, the only option that is left for you is to learn how to convert a 64x64 icon into a 48x48 icon.
Well I created a 64x64 icon with another shrek image and it has the name of BTN_shrek2.BLP. I created a folder to this new icon and named it Shrek_64x64. You should also create this folder, unless if you already have it.
To start we must convert our BLP icon to BMP format with Warcraft 3 Viewer. So, let's do it =) .
Run Warcraft 3 viewer, and once there go to the BLP > TGA icon, just like the image shows.
Now just follow the image, and save your icon in BMP format:
If you did this correctly the program will ask you the quality of compression. If you remember my long introduction icons must be 24 bits, so it is obvious that you must chose 24 bit compression. After choosing your option press ok.
The program can also have a bug (mine has) which will show a pop up box telling you that your icon was converted into BLP format successfully. If that happens just ignore it and don’t worry as your icon was saved into BMP format with no problems.
Now that you converted you shrek2 icon into BMP you have something like this in the Shrek_64x64 folder.
Well because 64x64 BTN icons have borders and 48x48 BTN icons don’t we will have to remove the borders from our recent BMP icon. No problem, if you read the last section you will see that we already did this step before.
To start run Irfanview, than go to File > Open an search for your recently converted BMP file so you can work it.
Once the icon is opened in the program, zoom it to a zoom between 300 and 400 keeping in mind that the value you choose must be a multiple of 100, to avoid a bug from the program. To know why visit the List of important known bugs in the programs section of the tutorial.
Now with you mouse (the arrow) select the inner part of the image (don’t select the border, this requires some ability, if you did this well done, when the image is small again, you will not see any gray areas from the border).
Now go to Edit > Crop selection or just press CTRL + Y.
If you done this hard step correctly this is what you will see when if you amplify the cropped image.
No gray areas form the borders as you can see.
Images with no borders are 56x56 pixels sized. This value is very difficult to obtain when cropping so don’t worry if you don’t get it, just try to get as closer as possible. You can see the pixels size by pressing CTRL + R.
Now it is different, if you did this well, you have created another small problem (lol). However you can take advantage of it. As you know the image we want to create is 48x48. Following the steps, we started with a 64x64 pixels image and now we have a 56x56 pixels image (image with no borders are 56x56 pixels). Now follow the logic, the time for us to resize the image to 48x48 pixels has come. Just press CTRL + R (Resize/Resample), uncheck the box that says Preserve aspect ratio and resize your image to 48x48 pixels size.
Good job, however remember that an icon to be well accepted must have 24 bits (24BPP). To see if you icon has this value just press “i”.
My icon has the correct value so it means that I can move on. If yours does not have it you should go to Image > Decrease Color Depth or Increase Color Depth and choose the 24 BPP option. For additional help on this section you can read the Create an Icon section.
Now that our image is ok, we will save it, overwrite the old file with this one if you may prefer. I will just press “s” and overwrite the file I no longer need.
Now that we had all this work with removing borders, it is time to finally transform our icon into what we want – a passive game play icon.
To start close Irfanview. After that create a folder and name it “Shrek_48x48_BMP”. This folder will be our “Out” folder. To know what an “out” folder is read the Create an Icon section of the tutorial. Now finally open W3IR.
If you done this correctly, this window will pop-up.
Good, now it is just like creating an icon. Select the “shrek_64x64” in the Input window (left side) and the “Shrek_48x48_BMP” in the Output window (right side). Now choose the pixels size of the image (in this case is 48x48), check the “Upgrade Border” and the “Attack Type border” boxes and name your images (read the create an active game play icon section to better understand this). Finally select the type of image you want to convert (in this case BMP).
To finish just press the Border images button and say yes to the window that will appear.
Good, now we have our shrek icon turned into what we want. If you did this correctly this is what you will see when you open your “Out” folder.
Now if you look closely to the images you can see that there is something wrong - the icon Formula.
The program saved all our images with the previous name. This “Bug” doesn’t mean that the images don’t work because they still work, however if we import them into Warcraft this way, we won’t know which images are passive, autocast or even disabled. This will cause green icons and in the worst scenario game crashes. To solve it, just change the name of all icons to their correct formulas: IconType + IconCustomName.
This means that (in this particular case) we must remove the “BTN_shrek2” part of the name that is repeated in the start.
The correct name for the icon.
These are the correct names you should have.
After this step, just close W3IR as we won’t need it anymore.
Good, now let’s finish our job. Create another folder named “Shrek_48x48_BLP”.
Now we have 3 folders:
Shrek_64x64
Shrek_48x48_BMP
Shrek_48x48_BLP
After creating the folder open Warcraft 3 Viewer and once there convert all your BMP files into BLP files with the method described above.
Now just follow the steps on the image:
If you did this correctly, a new window will appear.
Now press ok. A new window will pop up. This window is EXTREMELY IMPORTANT, and you must not ignore it. This window will make you a question about alpha channels. If you remember the introduction, an icon with no alpha channels, is probably a black or a green icon. So, to answer to the question say “YES, add alpha channel to all”.
After this important step, if you did everything right, a box saying that it was converted with success will appear. If it doesn’t it is because the program has a bug, or because the installation has some problems. In last case, you can read the hole tutorial again to see if you did something wrong. Post in the forum if you have any questions.
Done, you transformed a 64x64 complete icon into a 48x48 icon!! Now remember, that attack type icons can be used as armor icons and others. As you can see you will soon enough be ale to do anything with icons. Just stay around to see my next chapter. Now you ca import your icon to Warcraft 3 !! Have fun !
To create a 64x64 pixels image from a 48x48 image just follow this steps as well, however don’t remove the borders and use Irfanview to resize you image to 64x64. After that Select the 64x64 option in W3IR.
If you have trouble converting a 48x48 into a 64x64 icon, just read the Create an icon section. If that doesn’t help you just post something in this forum and I will create a section for it (If there are many post requesting the same).
If you don’t know how to import an icon go to the Import icon section of my tutorial.
“Modifying an Icon”
There are hundreds of ways to modify an already existing icon. In this section of the tutorial I will use Irfanview and W3IR to make a few changes in the icons. Remember that Irfanview and W3IR are not professional image programs so they are very limited. What I am going to put here all programs have. My advice is for you to work with a professional image program because you will have more freedom to do whatever you want.
I will start by using Irfanview and after that W3IR.
“Modifying with Irfanview”
So to make a quick introduction, Irfanview is a program wit limitations but still a program all can use. This is the main reason why I am dedication to much time to it. I decided not to use trials because they have several bugs, take hours to download and mainly because they only last 30 days … What you are going to learn here also applies to all other programs I mentioned making of Irfanview the perfect program for minor/medium changes in icons. If you wish to make radical changes I suggest professional programs like those I mentioned in the start.
So we will learn a few interesting things here with Irfanview. The icon I will use is this one:
I named my icon BTN_shrek3.bmp ; yes I will work with BMP files because Irfanview does not support BLP files and because they offer more vantages when being edited, unlike TGA files. You can use TGA files as well, they will not be a bad choice but I recommend BMP. Non less, I also made a BLP version of this icon, so if you wish you can download it.
Anyway, after entering IrfanView and after you opened your image, use the zoom and zoom your image to a value between 200 and 400, remember that the value must be a multiple of 100. To know why visit the List of important known bugs in the programs section.
Now, all image editing function of this program are available in the Image menu. I will use some so you can see their effects.
If we have a look on the menu we will see the functions are in groups. First we have the image information’s, after the creating an image functions, rotating functions, resize and Canvas functions, the Color Depth functions and finally the coloring/editing/effect functions.
I will not loose time with the information, creation and rotation functions by some reasons:
Information function only gives you information about your image. As we saw earlier it is very useful to know the color bits of the image and other things but it can not be used to edit anything.
Irfanview can not create an image all by himself; it needs a base image to do it. Even if you create an image with Irfanview, it will never be as good as other images created with professional programs. To resume, this section is not important for icon modeling
Rotation functions are extremely easy and intuitive of using. They just rotate the image or flip it. They are useful to icon modeling but to resume they are so easy to use, I think everyone can understand what they do. This means that you don’t need my help in these functions. Just experiment them.
Next are the Resize/resample and Canvas functions. The resize functions are very often used in this tutorial so I think that you already know what they do – they resize. If you have troubles with the resize functions, just read the Edit an icon or theCreate an icon sections of the tutorial.
So we have the Canvas function left. Canvas function creates an area around the image. It is just like a picture in a wall. Canvas adds a border to an image. So you are wondering, why can’t we use Irfanview to make a BTN icon? Well we could use Irfanview to do that but the quality of the icon would be very poor. Irfanview is not detailed to make 3D buttons (although he does have that function), and when it does them they loose quality when compared to border programs like W3IR. Anyway I will just create a nice blue border.
To create a Canvas border go to Image > Canvas size.
And now here is the result:
Nice don’t you think?
Now next to the Canvas function we have the Color Depth functions. These functions are used to change the colored bits of an image. Its job in icon modeling is to change the color depth of an image to 24 BPP. So all this means that the Color depth functions are very useful but not here. I want to show effects and changes and besides, you already are familiar with this function, we used it a lot in the previous sections of this tutorial. So, if you have any questions, just read the Edit an icon or theCreate an icon chapters of the tutorial.
Next to this function we have the coloring/editing/effect functions. These are the best functions to anyone use if you want to change something in an image.
If you look to the menu first is the Convert to Greyscale function. It is not hard to know what this does … it makes your image grey.
To access this function go to Image > Convert to Greyscale.
Not difficult at all.
After this, we have the Negative function. It is also very easy to use and to know what it does – converts your image to negative form.
To access this function go to Image > Negative.
It seems you are watching some of those weird blocked channels that you have to pay to be able to see them… like SportTV (what were you thinking!! you are sick! =P).
Now we have the Enhance colors function. If you remember we already used this function to create a DISBTN_Autocast icon. This function is extremely useful when editing.
To access it go to Image > Enhance colors.
As you can see you can change the Brightness, Contrast, Saturation, Color Balance and Gamma correction values of the image. This allows you to make moderate changes in it. With the right values you can improve your image or just have some fun seeing what happens. This extremely useful tool can not be thought. We must use it and experiment it in order to understand what it does. Per example, if you want to create a DIS icon, you just need to set the Brightness values to negative. If you want your image to be redder, just change the color balance, if you want it to be more transparent change the Gamma correction values and so on. You choose what you need and what you do.
Next to this important tool we have another decisive function – the Auto adjust colors function. It is not difficult to know what this wool does; it balances the colors of your image. You should use this tool to improve you icon as harmony between colors is very important. My icon is already balanced so I don’t need to use this function (DreamWorks did a great job when they created this wallpaper =P), but I strongly recommend that you do so.
To access this function go to Image > Auto adjust colors.
After the Auto adjust colors function we have the Sharpen function. This function allows you to see your image better by increasing the Contras levels it has. This means that you can use it to improve small details, but if you use it too much it will eventually ruin your image. My advice is using this function if you need, but always keep the original file for backup.
You can access this function by using Image > Sharpen
This image is ruined because I used the function Sharpe too much. Fortunately I have my original file as I backup. Phew …
Next to he Sharpen function we have the Red eye reduction (selection) function. This function is used to remove red eyes when you take a picture, so we won’t need to waste time with this function unless you want to convert one of your photos into a Warcraft icon. I won’t explain this function because I would waste my time if I did so and because there is another extremely important function next to this one.
I am talking about the Effects function. This function allows you to create several effects for you icons. When using this function I recommend that you use it by going to Image > Effects > Effect Browser. The [i]Effect browser allows you to see the result of your experiments in a instant way.
Here I used the Shift Colors effect. There are lots of them for you to use.
Another great thing about effect, is that you can combine them !!
In this image, after saving the first effect I am using a second one – the Swirl effect.
This is what my icon looks like with the 2 effects together.
Now in the last place, my favorite function – the Swap Colors function. This function swaps the colors of your icon using the RGB (Red, Green and Blue) definitions. It is very easy and beautiful to use, you can use this to create a new ambient for your icon and, just like the effects, you can double use it!
To access this function go to Image > Swap colors > chose anything!.
This is my new purple ogre ! (lol). To do this I used the Image > Swap colors > RGB -> RBG function.
Now say hello to my new weird ogre! After using the first function (RGB -> RBG) I decided to use RGB -> BRG, and this was the result.
Quick and simple! There is nothing better =P.
Now you learned the most important, and the best editing tools Irfanview has. You now have advanced knowledge about this program (together with the information within the other sections). However as I told you before this program is limited and I recommend you to explore new image programs. Now it is time to use W3IR.
“Modifying with W3IR”
If you don’t have time to experiment changing an icon with Irfanview, or you just don’t have the patience to do it, than W3IR is your solution. This program allows you to make minor changes for your icons while bordering them.
Do you think that your icon is really cool?? Than try to see how it is with some weird effects and make it better! Why have only 1 icon when you can have a whole bunch of them!!??
This section will show you why it is so important to save your files in BMP format! This section only works for those who saved their icons in BMP.
So here it goes. I will use another function of the program. Before using this section of the tutorial I strongly recommend that you read the Create an Icon section because you will need an icon to use this function of the program. This section applies to both 64x64 and 48x48 icons as well as the others.
Now a quick summary, after saving your images in BMP format, remember that you must have two folders – an “Input” folder and an “Output” folder.
Now to start Open W3IR and click in the add borders button, like the image shows.
