If you haven’t heard, perhaps because you’ve been recovering from a Treeman-induced coma or you happen to be a Troll, there is a new client gracing FUMBBL. Kalimar’s new fantasy football client includes, not only new rules and improvements, but customization options that will allow players to change the look of their teams. In anticipation of this, the GLN will offer articles for new and would-be pixel painters. This series aims to take you from the basics through to creating icons from scratch.

While I haven’t picked up a brush in many ages, painting icons is very similar in many ways. You need to prepare them properly, choose your colours, add shadows and highlights, and sometimes even modify them or build one from scratch. If you can paint miniatures, it is likely you can paint icons too!

Part 1: Getting Started

The Icon (Miniature)
As mentioned, icons are just like miniatures in many ways, but even smaller. Instead of being measured in mm they are measured in pixels, and oddly enough, the standard ffb icon is 28 pixels high, similar in scale to a standard miniature. The icons are GIF files which can be up to 256 colours and allow you to have transparency so they look like they are on the field.

Prepping Your Icon
At first, it is recommended that you start with existing icons and learn to work with them to hone your skills. Later on we will break out the ‘green stuff’ and do some scratch builds.

So, you’ve just picked up a nicely painted team of Humans from an ffbay auction, but they aren’t your team’s colours. What now? The first thing to do is prep them for repainting. To do this, first open them in Photoshop* and convert them to RGB. If you don’t you will be limited to the 256 (or less) colours currently used. Select Image > Mode > RGB.

Having done this it is best to save your ‘primed’ icon as a .psd.

*This series will assume that the reader is using Adobe Photoshop to edit their icons. You should be able to achieve similar results with a free program such as Gimp.

Repainting the Livery You’ve decided that red just isn’t your colour, nor is it the colour of the Lavino Fighting Hellfishes, Jan Mattys’ legendary Human squad. So break out your pixel brush, it is painting time!

The first step is to select an area that you plan to recolour with either the marquee selection tool or the wand. It isn’t necessary at this point to get all the areas to be recoloured, or be completely accurate. Having made the selection, select Layers > Image Adjustment Layer > Hue/Saturation. The first thing you need to do is click on ‘colourize’. Having done this you will likely want to bring up the saturation and then adjust the hue to find the right colour. Going back to the saturation, and lightness if necessary, play with the setting until you find a colour you are happy with. N.B. Using extreme settings for saturation, and especially lightness, can cause you to lose a lot of the highlighting and shading in the icon. Just as in a regular mini, the highlights and shadows are key to the icon looking good, so be careful.

TIP: You will likely be doing multiple icons with the same colour so it is helpful to write down your settings. If you forget, you can open the layer again and check them.

In this case, we have chosen the Hellfishes customary orange as the base colour. Click OK.

What we have created is a new layer that affects the hue and saturation of the layers below it, but only where the mask we have created is. The benefit of this is that it is non-destructive to the original icon, we can double-click the layer and easily change the colour at any time, and we can alter the mask layer to choose what we want to colourize.

We will now colour the rest of the icon’s uniform using the mask layer. Click on the mask layer to activate it and choose the pencil tool. In the mask layer you only use black or white. White is used to add to the area being colourized, and black to remove the colour where you don't want it.

TIP: While you tend to use a very small 1 or 2 pixel pencil tool, sometimes you want it larger. You can easily make the brush bigger with the [ and ] keys.

Black and White
Adding black, white, greys, or very dark or light colours to your uniform is a bit trickier than colourizing, but not much. We will add some white trim to the liveries by following the same steps as above and creating a new hue and saturation layer. The only setting we need to adjust here is saturation. Bring it right down to zero and click OK. Again, you pain the areas you want white with you pencil tool.

Now to get the white we are looking for choose Layers > New Adjustment Layer >Levels. Before you click OK, make sure you check Group With Previous Layer so it only affects the areas in the mask of the hue and saturation layer. To attain the white desired, slide the right level marker to the left until you are happy with the colour. It is important to not go too far and lose the shadowing. Moving the shadows in and midtones might help too. This will be trial and error at first until you find a setting you are happy with.

Home Versus Away When you play, you always appear as the home team (red side) while to your opponent you are the away team (blue side). For the spectators, you could be either. To ensure that everyone sees you it is important to make a set for both home and away. Always make the home set first, then the away set is easy. In this case we won’t worry about changing colours because you want your unique uniforms to be visible to everyone. (And if they don’t want to view you in all your glory, they can default to the standard icons.)

Open your .psd file(s) and select Image > Rotate Canvas > Flip Canvas Horizontal. Then save the icon with another name.

Saving Your Work (Clear-coating)
Once you’ve recoloured your team you need to save them before you can send them out onto the pitch. Having prepped the home and away squads, you are ready to make them all into GIF files. Open the files and select File > Save For Web. Choose GIF and ensure that transparency is selected. Click OK.

Your custom team is now ready to take the field. (Once the site is configured to do so, which unfortunately it isn’t quite yet.) Get out there and have fun!

Next issue we will dig into the bit box as we add more customization to our miniatures, ... er ..., icons.