Guide for creating animated GIFs

Ok, here's another brief tutorial on preparing sprite graphics before applying them to the GIF, along with how to properly apply them.

Original sprite sheet:

Start by changing the background color to either yellow (#ffff00) or purple (#ff00ff). You should be able to do this in the color palette section of your graphics editor, for Corel its under: Image>Palette>Edit Palette. I'm not sure about Adobe or Gimp, but it can be done.

(Shun: In GIMP you can find the palette editor under Windows>Dockable Dialogs>Colormap>).

This is where you find and eliminate dots and random pixels, I myself have not encountered them as far as sprites are concerned. Now, turn on grid and set it to 8x8 (in some cases 2,4,6,10,12,).

Select the first image in the animation segment, and make sure to check the dimensions (grid lock recommended).

This particular frame is 64x88.

To make sure that all of the frames are the same size, or not, set your grids with to 64, (or 88 if its height).

In some cases, graphics will not always line up, and will have to be manually placed or assembled. I'm using a simple 4 frame animation for this, the complicated stuff you'll have to figure out for yourself. However, this should introduce a few methods that can be used in the process.

Now, lets copy each of the frames to Animation Shop, so that we can review our sprite in animated form. Copy by selecting the image and hitting 'Ctrl+C'. To past after the current frame in Animation Shop, right click on the frame you want the pasted frame to fallow, choose 'Paste' on the menu and 'After Current Frame'.

Note how I kept the yellow background. Once in Animation Shop, run 'View Animation'

As you can see by the way the sprite appears, frame 2 should move 'Up Left' by 1 pixel, and sprite 4 should move 'Down Right' by one pixel. However, it is rather obvious that our sprite doesn't have enough room on the sides, so lets improvise by adding more room.

Select the first frame on the sprite sheet, but this time, select an extra 8 pixels over (sometimes height). Copy and paste it as a new image, we will reuse this picture later, so don't delete it yet.

Set your grids width to 4, and move the sprite over by 4 pixels. Disable grid lock (if its on) and move the frame down by 1 pixel.

Either disable the selection or choose to select all, then copy this frame over as a new animation (disregard the earlier group of frames in Animation Shop).

Now, back in the graphics editor, clear the copied picture that we just created from the first frame, go back to our sprite sheet, select the second frame and paste it into the picture where the first frame was. This time, move it over by 3 pixels, and do not move it down a frame. (Note, we will use this frame 3 times)

Copy the second frame over to Animation Shop and paste it twice after the first frame.

Go back to the graphics editor, we're not done with the second frame yet.

Reselect the frame we just moved, this time move it 'up left' by 1 pixel. Then paste it in between the two frames that we just added to the animation.

We're now done with the second frame, so clear the picture and copy the third frame over, using the same method as the first. "Set your grids width to 4, and move the sprite over by 4 pixels. Disable grid lock (if its on) and move the frame down by 1 pixel."

Add this frame to the animation after the other four frames.

We're done with the third frame, so now we move one to the last frame.

Just like with the second frame, the fourth frame will be used 3 times.

Select and move the frame right 5 pixels and down 1 pixel. The foot should be resting on the bottom, don't worry about that. Copy this frame twice after the other 5 frames.

Now, go back to the frame we just moved in the graphics editor, and move the frame 'up right' 1 pixel.

Copy the frame in between the last two frames on the animation.

Test the animation with 'View Animation'

Almost done. Now, lets remove that annoying yellow background. Animation>Remove Color.

Make sure that 'All frames' is selected, choose the background color with the eyedropper, and set it to 'Transparent opacity'.

Now, select frame 1 and set the display time to 20, do the same with frame 5. Select frame 2 and set the display time to 13, do the same with frame 6. Select frame 3 and set the display time to 15, do the same with frame 7. And select frame 4 and set the display time to 12, do the same with frame 8. To set the display time, choose Animation>Animation Properties.

Test it again with 'View Animation' If your not satisfied with the display time, make your adjustments now.

It's time to Optimize our animation.

As an option, save a palette of the original sprite sheet in your graphics editor.

If you choose to take this course of action, be sure to save the palette as PAL, other formats wont load in Animation Shop.

Also, make sure that you know where the palette file is saved.

Run your optimizer in Animation Shop. File>Optimization Wizard.

On the first page choose 'Animated GIF File', then 'Replace'. On the second page choose 'Customize'.

Make sure that your set to '255 colors' and 'Nearest Color'. If you saved the palette earlier, then load the palette and set it to 'Custom palette', otherwise, set it to 'Optimized Octree'.

Click the 'Optimizations' tab and make sure that everything is deselected, they will screw up the animation if you don't. Click 'OK' and press next until the optimizer is finished. Test it one more time with 'View Animation' And save. The result should look something like this.

As you can see, by copying frames 2 and 4 three times, and altering their positions and display time, you can give the effect that the character is jumping along with the music.