Animating GIFs with Illustrator and Photoshop

    We looked at creating some simple sprite animations using Adobe Illustrator and Photoshop. GIF is a good file format for creating simple pixel art sprites, as GIFs have a low memory usage so can be loaded quickly, they have transparent backgrounds, and they can be animated. I created a simple pixel face in Illustrator, and then by creating different layers, copying and pasting the face over to these layers and changing some details for the next frame of the animation (eg. eyes blinking, smiling), I can easily create an animated sprite.

The four PNG files for each frame of my animation, before they were put together in Photoshop

    The next step is to export these different layers as PNG files, so that they can be put together into an animation cycle in Photoshop. In the export window in Illustrator it gives you some options, the first of which is resolution, which is always 72ppi (pixels per inch) for screen display. The next option is anti-aliasing, which basically means that the pixels on the edge of your image will be smoothed as not to create jagged, harsh edges on your sprites or models. For intricate hand drawn art or models this may be good, but for simple pixel art this will just blur the image, so I chose no anti-aliasing. Then I just checked that background was set to transparent, and exported as a PNG.

    To put these layers into an animated GIF, I loaded them up in Photoshop, and opened the 'Timeline' window. In this window, I created four different frames, and loaded each PNG into it's respective frame. I played around with different delays on each frame to make the GIF animate at the speed I wanted, and when I found the optimal result, I exported it. To export GIFs in Photoshop, I went to 'Save For Web', and changed the file format to GIF. I also lowered the amount of colours in the image, as my sprite didn't have many different colours, and lowering the total amount of colours in the document will decrease the file size and make the image load faster. Once exported, I had an animated GIF that I can post to the web, or use in Gamemaker for a project.

Finished GIF

    This technique is a very quick and easy way to create game art that has character, even with just basic animations.