Forumwarz is the first "Massively Single-Player" online RPG completely built around Internet culture.

You are currently looking at Flamebate, our community forums. Players can discuss the game here, strategize, and role play as their characters.

You need to be logged in to post and to see the uncensored versions of these forums.

Log in or Learn about Forumwarz

Civil Discussion
Switch to Role-Playing Civil Discussion
Art Making an animated topic icon :: illustrated guide


Avatar: 48966 2011-07-31 19:36:53 -0400

[The Scrotal Safety-

Level 69 Camwhore

Qui est cette chienne

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.


Avatar: 48966 2011-07-31 19:36:53 -0400

[The Scrotal Safety-

Level 69 Camwhore

Qui est cette chienne

Step 4. Making frames.
Save the file into PSD format and open it with ImageReady (or simply “File -> Jump to -> Image Ready”).

Quick info: how GIF animation works for geeky permanoobs:
The animated GIF files consists of frames. Each frame has a specific delay parameter. The smaller is delay, the quicker your frame would blink.

Adjust the layer’s visibility according to “the plot” – we should see the healthy canvas and two hands, hiding at the edges of picture (ok, the previous “initial position” was seemingly incorrect, but I’m too lazy to re-capture the screen). Note that each frame has a separate layer visibility and positioning preferences.

Now copy/paste the initial frame couple of times while moving both hands a little bit each time.
Log in to see images!

Log in to see images! Be patient. Try to make a small enough increment so your movement would look smooth and natural. If you’d try to fit movement in 3 frames it’ll most likely come out too jumpy and unrealistic.
Log in to see images! Maintain the same increment on each frame, unless you want to make an acceleration effect.
Log in to see images!

Now I have to click on that little context menu arrow on the Animation tab and turn off that pesky “New layers visible in all frames” option. Then I’ll duplicate the hands layers and adjust fingers a little to a “clutched” gesture. Now I’ll do the same copy/paste routine a few times but this time we’ll move both the hands and the paper pieces layer.
Log in to see images!

Step 5. Setting timings and saving the animation.
TV and video has 24 frames per second. For GIF you won’t need that much: frames make a natural looking movement at 0,2 delay already (though 0,1 is preferred), so it’s only 5-10 FPS. Your “packshots” (the main text frame) are supposed to stay a little bit longer so player would have enough time to read the topic text. 1,5-2 seconds delay is sufficient.

Select all frames except the last one. Click on the small arrow under any of selected frames and pick the delay (0,1). The packshot delay is gonna be 1 second.
Log in to see images!

Now we probably gonna move the packshot into the start, so that players would read the text immediately upon opening the forum and once then start admiring the animation. That is called usability, son. (honestly I never follow the usability guides, but this is a guide, so we have to do everything A+). Also, most of the times it’s good to loop the animation completely, so your last frame and the first would basically be the same but this time we’ll get away without it.

Open the “Optimize” tab, and play around with colors a little bit to set a minimum amount of colors possible without wasting the picture. For this one I think 32 is sufficient. Set the Palette to Perceptual (no time to explain all the differences, but basically this one is the smallest). Now click “File -> Save Optimized As” and save the file. Here you go.
Log in to see images!

It’s always to check your GIF before submitting it to buildr or wherever and make the according tweaks to timings and frame order. Note that the animation preview in ImageReady tends to be a bit slower than the real one.

Part 3. TL;DR conclusion.

5 DO-S
Log in to see images! Always try to write text manually using a pencil tool rather than typing it with a type tool
Log in to see images! Make the illustration image (if applicable) sharp and clear, preferably draw it yourself with a pencil
Log in to see images! Remember the forum logo and the forum style guidelines – make your idea, colors and artistic style match the forum
Log in to see images! Stick to simple 1-color backgrounds and 1-color text
Log in to see images! Try to make frames quantity (and the overall animation timing) the lowest possible – you don’t want players to watch a whole damn movie on a 60x15 screen.

5 DON’T-S:
Log in to see images! DON’T use anti-aliasing, especially on the text part
Log in to see images! DON’T use any compression.
Log in to see images! DON’T try to fit the big-bum image into the 60x15 area, it’ll come out all blurred and crappy.
Log in to see images! DON’T make the animation too jumpy (don’t make a zero frame timing) unless you wanna induce mbumive epileptic seizures.
Log in to see images! DON’T trust any of these rules – the more you practice, the more exclusions you’ll find. The only thing which can’t be excluded is your taste and the common sense.

And finally, a couple of useful links for you:
Awesome pixelart tutorial:
Another nice tutorial:
And this one is also ok:

Good luck.
Yours unfaithfully,
Inconnu edited this message on 04/30/2009 12:10PM
Internet Delay Chat
Have fun playing!
To chat with other players, you must Join Forumwarz or Log In now!