Baloo Gets a Make-over

The purpose of this tutorial is to help take your icons from average to good, good to great or great to perfect. It may even have some useful tips for those who are experienced icon makers, that will help in your quest for perfection ;)

We are going to assume that you know roughly how to edit an icon and save as a transparent 80x80 gif of 5k or less. So from this point we are going to eliminate all the little issues we see crop up every day and help you fine tune your icon to the best it can be based on what we are looking for in quality.

some of these images are double the normal size so the problem areas are much easier to see.

Poor Baloo has a serious case of stay pixels here, exacerbated by a white matte. These pixels are invisible right up until you save the image when they get filled in with whatever matte you have set. Please do remove as many strays as you can, even if the are invisible when on the proper background, as they use up valuable size and will look terrible if the boards ever change their background colour.

To make sure you can see and remove strays, you can apply a stroke to the image, before saving, which highlights the stray pixels making them very quick and easy to delete. You can find the stroke option in the filters menu, accessed through either the little "f" under the layers menu or through using - layer-> layer style-> stroke... on the top menus.

The stroke menu looks like this and the settings can be left as default, just select ok to apply.

And this is what Baloo will turn into, poor poor Baloo :(

You can now simply use the eraser tool and delete all the red by hand, including any odd colours around the edges of Baloo until he looks like this. It may looks like an awful lot of red, but it is actually just  magnifying every stray pixel. The stoke is set to 3 pixels, so it's effectively adding a 3 pixel radius to every one stray, so it looks much worse than it really is, once one pixel is gone, all the red that is attached to it instantly goes too. Remember to turn off the stoke before saving :)

Okay, so we've saved again, and all that extra stuff is gone but we still have a white border around the image, ick.

Go into file -> save for web -> you will see the word matte, for now change it to none (if it isn't already on none) so you can see what happens next :)

Here he is saved with the matte set to none, what happens here is that PS will fill in the semi transparent squares with their own base colour making them 100 solid and this causes the “assy” or "jaggy" look.

This time save with the matte set to B1B3BC, see how much smoother the edges of the icon are? But hold on, where has the top of his head gone??? This is a horribly common problem that I want to quickly cover. Sometimes you may want to iconate an image that doesn't have all of it's parts in view on the original image, this can often be fixed with a soft blend in the case of arms and legs (see below for soft blending) but with heads, it needs a little more work. If you have the artistic ability, you can simply draw the head back in, if not, then please, don not bother submitting the icon. We do not accept icons with missing heads or cut off at bad angles, re-drawing or mix and matching with another similar image is the only way I know to fix this. Please feel free to ask someone to help you fill in the missing parts if you feel you can't live without the icon :)

Next we'll quickly cover drop shadows, this can bring with it another common problem, the shadow gets cut off, but first, look, more stray pixels we didn't previously notice...

So a quick tidy up of the edges once more will clean that up nicely and we can then fix the shadow...

The first and simplest way is to change the size of the shadow, just reduce the distance and size down from 5 until the shadow blends softly into the background instead of being chopped off.

Alternatively, if you can, just move the image in the opposite direction from the direction of the shadow, making sure not to cut that head off again ;) If You don't have room to do this, then the next solution is to simply resize the image by doing an edit -> transform -> scale... Grab the corner where the shadow is on both sides, in this case bottom left, and while holding down shift,  drag it to a slightly smaller size, the shift will ensure that you keep the correct proportions.

There, a proper drop shadow, the same problem can occur with outer glows, bevels etc, the fixes are pretty much the same, glows and shadows are the worst culprits though, so please watch for them and if in doubt, always check the icon tester to be certain.

So we have his head back on and we've taken the shadow back off  and we are sat with an icon we can happily submit, but is it perfect? No! Look at the bottom half of the image, two boxy corners, okay, it would be accepted like this, but at some point in the future, one of the iconators would come along and change it in the their quest for the perfect icon database, so what can you do now to save us lots of work further down the line...

Soften it! This is really simple and there is more than one look you can achieve, this image is a box soften...

and this one uses a circle soften. You can also do it by hand with a soft eraser and a brief run over with the blur tool, it is all down to personal preference.

To do the box method, use the box select tool and select an area one pixel in on the sides you wish to soften, in this sample, right, left and bottom...

Now go to select -> feather -> and set it to two pixels, then select -> inverse -> and click on delete twice, if your matte is still set correctly, your icon will look something like this when you save it...

For a more curved look, do pretty much the same using the circle select tool, but don't be confined by the size of the box, start your select outside at the far left and drag in until you have a nice gentle curve around the area you want to soften, the red squiggle shows roughly where I started dragging from for this select area. (don't forget that one pixel gap between the select and the edge of the box, if you don't have it, the select area will "stick" to that edge when you try to feather it)

Well, that's pretty much it, obviously there are more advanced techniques to play with using filters, effects, animations, etc, but I really just wanted to cover the basics as that is where I most often see things that need fixing. I hope this has been of some help to you, please feel free to let me know if you see any glaring errors or if you think of something I might have missed. Happy Iconating :)