It seems to me that the vast majority of buildrs are having a slight difficulties with topic icons. The submissions we see every week are low quality, uncreative and simply boring. In this article I’ll try to explain a basic tips and tricks for making a good 60x15 pixel art. But before I start, we have to agree upon two things. First: I’m not a native speaker, so naturally my Engrish is sometimes hard to understand. I’ll make it as simple as possible. Second: I work with professional Adobe software, which probably not everyone has. But the basics are simple for every program you might use, so please try to adjust these advices to your software if there are not directly applicable.

Part 1. Theory

The size of topic icons is 60x15 pixels, which gives us a really small area to work on. This means the output file would be really small, so basically you don’t wanna mess with compression at all.

A little math explanation for you, geeks.

A 256 color palette (which is definitely too much for a normal topic icon) takes only 2 bytes per pixel to store it’s color. Your picture is 60x15=900 pixels, so if we disregard the system info such as GIF header and so on, the final size of static 1-frame GIF would be roughly 1,8 Kb. This is way to small for a 100Kb limit so forget about that and do whatever you like without any compression.

On the other hand this means you have to be as clear as possible while picturing your idea and make it as vibrant as possible. Basically given this size image looks clean enough only if you don’t use any anti-aliasing at all. So forget about brushes – your main tool should be pencil at all times.

Plan the image you’re working on as full as possible. Consider on whether you’d like it to be static or animated, which colors you wanna use (this probably depends on the forum’s style) and what is most important the idea behind this whole ****. Collect the best possible (public domain, of course) working materials for your image – small icons, pixel font samples or whatever (if you’re too lazy to do it yourself) and go ahead.

Part 2. Practice

Remember that Teachings of Goatse forum? The icons I’ve done aren’t good quality at all, but definitely are idea-oriented so they’ll prolly be a good example. And of course I’d be happy if after reading this guide (and hopefully couple others) you, guys, would submit shiny professional-looking topic icons in comparison to this lame and dull piece of **** Log in to see images!

Step 1. The idea.

Ok, goatse is about stretching. Those three topics don’t differ that much from each other so it’s ok to use the same visual effect for all of them. I had the logo already (yellow parchment theme) so the effect turned out plain and simple – stretch the parchment apart to reveal the shocking truth… Oh well, that’s only a topic name.

This part also answer a simple consideration between animated and static. I definitely need animation to demonstrate this idea. Note that not every idea need animated implementation, sometimes it’s much better to make a clean and simple icon and write some text. But hell, animation gives so much more upvotes Log in to see images!

Step 2. Working materials.

Ok, what we gonna need is a simple hand icon and some background to represent a bootyhole (JB, nothing personal) after The Great Stretch.

Background image doesn’t matter that much (because it’d be hidden under the parchment and it’s gonna be blurred anyways) but what I’m pretty sure of is the brown color. I got some random image (i.e. this one), cropped it to 60x15, stretched the walls a little bit to match proportions and used a Hue/Saturation tool to match the color.

Log in to see images!

Without any considerations I took a PS pan icon but if I’d follow my own advices I’d rather use Quick Google search with “small images” option which promptly reveals (or better reminds) a well-known grab hand icon. So anyway I took that hand, colorized it the same way and stretched the wrist.

Log in to see images!

Step 3. Final tweaks.

Canvas is easy to make using a Texturizer tool (Filter -> Texture -> Texturizer [canvas]). Duplicating and flipping the hand, setting them on initial position… ok, done.

Log in to see images!

Now the text. The smallest possible (yet readable) pixel letters should be 3x5 pixels. Of course, there are bigger size (i.e. standard browser 5x7) options, but I prefer this one, because it gives more space for animation. Try to pick either white or black color for text so it would be as readable as possible.

Log in to see images!

Finally, the parchment rupture part. I copied the canvas layer and separated it in two halves while gnawing out a small diamond-shaped piece.

Log in to see images!

Seems like we’re ready for the animation.