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:
http://www.derekyu.com/?page_id=218
Another nice tutorial:
http://www.natomic.com/hosted/marks/mpat/
And this one is also ok:
http://web.cs.wpi.edu/~claypool/courses/frontiers-06/samples/pixel-artist/default.html

Good luck.
Yours unfaithfully,
Inconnu.
Inconnu edited this message on 04/30/2009 12:10PM