Icon Making: The Complete Art

By El Heffe

This tutorial is part of the “A Blank Mod” project which can be downloaded in it’s entirety here:

Introduction

How to make a new icon... this probably won’t be as good as a tutorial from Tiptoe ( no screen shots ), but what I’m going to tell you should pretty much make you an expert icon modder once you get a little practice.

WARNING: This post is very long. I’m not trying to make this seem hard... I’m just trying to be thorough. What you are about to read is not a guide to ‘quick and dirty’ icon modding... this is the whole enchilada. Icon making from scratch. Ready? ok... here goes:

The Main Components

There are 2 main components to getting an icon to show up properly in the game. The art files and the *.DAT entries. ( items.dat and spells.dat work pretty much the same way ).

I. The Art Files

The first thing I’m going to talk about is the art files and the different types of files that you will see when you look into the existing game’s ICONS folder. The 2 file types that are involved with icons are *.PNG files and *.DDS files.

The DDS Files

When it comes to *.DDS files you really only need to know a few things:

DDS File Fact 1:

The *.DDS file are what fate actually displays during game play ( *.DDS files are smaller than *.PNG’s, so using them reduces the resources the game uses on your PC ).

DDS File Fact 2:

You cannot directly affect the *.DDS files, the game ‘compresses’ the *.PNG files ( which you CAN affect ) into *.DDS files on its own when it’s first loading ( remember the "this will only happen once" screen when you first bought the game? ).

DDS File Fact 3:

Once the *.DDS files are built the game never looks at your *.PNG files again unless it needs to replace a corrupt or missing *.DDS ( this last bit becomes very important at the end - since sometimes we have to ‘trick’ the game into looking again so it will see our new stuff ).

So just remember these things whenever the subject of *.DDS files comes up, other than these 3 things you pretty much completely ignore the *.DDS files.

The PNG Files: The Heart of Icon making

When it comes to the *.PNG files, however, this is where you will do most of your work. There are a few things here that need to be mentioned right up front:

PNG File Fact 1:

*.PNG is a file format for images, just like *.BMP or *.GIF or *.JPG, so if you have worked with any of those types of files before there really is no difference between them and *.PNG, its just a different file extension is all, so don’t be scared of it.

PNG File Fact 2:

No special software is needed to work with *.PNG’s. Most, if not all, graphics programs can save in *.PNG but you may need to manually type *.PNG as your file extension on each new file the first time ( even crappy ol’ MS Paint works with *.PNG, which is all I happen to have at the moment, so even if that’s all you got - no worries. )

Ok with those basics out of the way we can start getting down to business. ( if you already understand ‘alphas’ then this will be some review, otherwise you’re about to learn a lot ).

The Icon and The Alpha Transparency

In the game it takes two different *.PNG files, overlaid with one another, to build one icon. The 2 files are the full-color version of the icon ( called just ‘the icon’ from here on out ), and a gray scale image called the alpha. The alpha is used to give transparency to part of the icon ( usually the edges ) so that it can have a shape other than a square in the game ( if your finished icon has a messed up shape in the game, its a good bet that something is wrong with the alpha ).

These two files, the icon and its alpha, are usually named very similar names but the alpha has an ‘a’ right at the end - amethyst.PNG and amethysta.PNG - for instance ( you don’t have to do it this way on your custom icons but the fate designers did it this way so that it is easier to tell which icons and alphas go together - I happen to think its a pretty good standard to adhere to ).

Take a quick glance at the 2 amethyst *.PNG files below now... it will help this next part make more sense.

amethyst.png

amethysta.png

Here is how the alphas actually work. Each alpha is a gray-scale image ( or a grey-scale image depending on where you live ), that defines transparency in the icon based on how ‘gray’ any given area is in the alpha. When overlaid, the areas in the alpha that are totally white ( i.e. no ‘gray’ at all ) are going to show exactly what the icon shows ( no transparency at all ). But the areas that are totally black ( i.e. maximum ‘gray’ ) are going to be totally transparent, or to say it another way ‘gone’.

Going back to the *.PNG’s for the amethyst, the inventory icon for the amethyst is an oval shape but the icons *.PNG is a square ( i.e. a black background is present behind the purple stone ) the way that the game gets from the square amethyst.PNG to the oval icon in game is by using the amethysta.PNG ( the alpha ) to make the all the black around the purple stone ‘transparent’, thus giving the desired oval shape.

There is just a little more about the alphas, you don’t have to use just black and white in the alpha, you can use shades of gray to get varying degrees of transparency ( the darker the gray, the more transparent ). this is what allows the icons in the spell fold out to ‘glow’ - its really a partial transparency.

With me so far?...

...Good.

The Making of an Icon

So... to make your own icon called ‘blah’ just make a color version of what you want, on a black background ( if you have trouble doing this seek a tutorial for your graphics editor, sorry ). Then save that image under 2 file names, blah.PNG and blaha.PNG ( for the alpha ).

To get the right effect from your alpha, go back into blaha.PNG and use the ‘eraser’ tool in your graphics program to erase all the color parts leaving plain white behind. ( it may be helpful to increase the magnification since that will allow you to be more precise in defining the edges ) Then save the blaha.PNG image again, this is now your finished alpha.

When you see the icon in-game ( which we WILL get to eventually ) if you see a heavy black line around parts of it that is because of your alpha. If you go back into the alpha and add a band of dark gray just inside the white it will help minimize the line by ‘softening’ the edges in-game ( or if you are way off just re-do the alpha, defining the edges more accurately ).

II. The *.dat Files

Ok now we move on to the *.DAT part of this whole operation.

If you have mucked about a bit in the items.dat ( which I assume you have, since you are asking how to make an icon ) you will have noticed the <ICON> tag on each item. It is laid out like this:

<ICON>:path_to_icon.PNG:path_to_alpha.PNG:width_in _pixels:height_in_pixels

Or, looking at the Light Handaxe ( the first item in an unmodded items.dat ) it looks like this:

<ICON>:ICONS/handaxe.png:icons/handaxea.png:48:96

( Hint: items.dat and spells.dat work pretty much the same way except, as far as I know, you can’t specify sizes in spells.dat )

The path to the *.PNG images is pretty straight forward. Assuming you are modding for the Mod Manager you can keep those images pretty much anywhere you want inside your mod, you just have to list he correct path to them. for instance lets say that our icon ‘blah’ is in the ICONS folder for a mod called ‘BlahMod’, then our file path to the icon would look like this:

MODS/BlahMod/ICONS/blah.png

...and for the alpha:

MODS/BlahMod/ICONS/blaha.png

On the subject of pixel sizes. One ‘square’ in the inventory screen is 48x48 pixels. Most icons in the main game are built in multiples of 48 pixels on a side. For instance a gem is 48x48 pixels, the Light Handaxe is 48x96 pixels, a belt on the other hand would be 96x48 pixels, and a small shield would be 96x96 pixels... you get the idea.

If your icon ( with its alpha ) is built to an exact multiple of 48 pixels then you can actually leave off the last 2 parts after your <ICON> tag if you like, just make sure your paths are correct. If you are less precise that’s ok too ( well not really but... ). As long as your icon and alpha are exactly the same size you can use the last 2 fields to ‘force’ your icon to fit the available space ( this can also be used as a trick to re-size existing icons - see the ‘pocket fisherman’ in the Happy Hour mod ). Keep in mind however that the game will squish or stretch your icon to fit the space you define in your <ICON> tag, so it may look a bit wonky. My advice is to build your icons in multiples of 48 pixels to begin with, then you don’t have to worry about it.

Also just a note on trying to use non-standard icon sizes... they wont work. If you don’t believe me try it and see for yourself, there are various ways that the game will mess up depending on what you do wrong but you won’t like any of them, trust me.

Getting Your Icon into The Game

Ok, now we come to the part that I mentioned above about tricking the game into looking at your new files. Lets say that you made your blah.PNG icon but you were a little off when you made the alpha and you have a heavy black line ( which looks ugly ) surrounding your icon in-game. Or lets say that you messed up the path to the alpha and pointed to the wrong one in items.dat so its all funky looking in game.

How do you go back and fix it?

If you just go add in the dark gray line on the alpha ( like I mentioned above ), or correct the path to the alpha in items.dat then when you run the game again it will still look messed up. The reason is because the game still has the *.DDS files that it made last time around, and it ignored the changes that you made to fix the problem.

To get a corrected *.DDS file in the game ( so that it will show up RIGHT ) you have to delete the messed up ones and let the game ‘re-compress’ the corrected *.PNG’s into a new *.DDS, which it will automatically do - in response to you deleting the bogus *.DDS’s - the next time you run the game.

Hint #1:

If you ever have a problem where you correct a *.PNG and it wont show up in the game. Just go delete ALL the *.DDS files in the folder where you made the changes to the art. This will add maybe 30-90 seconds onto your next game load but I bet you that your new stuff WILL show up the way you corrected it ).

Hint #2:

Some people go out and get a plug in that allows them to see thumbnails of *.DDS files. I recommend against this - unless you have already done it { no offense to Tiptoe }. The reason is that its easier psychologically to ignore the *.DDS files - and to delete them when necessary - if you can’t see them to begin with. that’s just my opinion though. Your Mileage May Vary ).

Regards,
El_Heffe