Trick or treat! Animated GIF



This post will briefly explain how to make a flashing image of monsters.

First, create a new file in Adobe Illustrator. I decided to make 500 x 500 pixel image with 72 dpi (for web) in RGB (for screen).


Next, make a circle as a template and create different characters in the illustrator using line, shape, and pen tool on the template. Here’s an example of a pumpkin:02_facetemplate 03_makepumpkin

When satisfied with the result, go to File > Export and save the image as JPEG. When you save, remember to keep the resolution in 72 ppi. Default is set to be in 300 ppi. 04_exportinjpg > 05_jpegoptions

Repeat above steps to create few characters. I made 10 different ones. Here’s what all of mine looks like:06_imagesareready 

Now I have 10 images ready to put together as an animated GIF. Open Photoshop, and go to File > Scripts > Load Files Into Stack. Click on Browse, and grab all the images to put together and hit OK.07_loadimages

When those files open in a stack, a new photoshop document with 10 layers will be created. Drag the layers up and down in the order of how the animation should run.08_layersinorder

When All the layers are prepared, it’s time to put them in each frames. Go to Window > Timeline, or Window > Animation depending on your Photoshop version.09_timeline A small window will pop up on the bottom of the screen. Click on the drop down menu on the upper right corner, and click Make Frames From Layers.

Here’s all the frames created from 10 layers. For each frame, you can change the duration time. I chose 0.07 second for each frame. Click on the Play button at the buttom to preview if you like the speed.10_framesfromlayers

When satisfied with the result, go to File > Save for Web. Here, you can change the palette of colors – 32, 64, or 128 bit. This will determine the file size like how the changing of the output image size will do. Before pressing Save, it’s always good to click on Preview on the bottom left to final check everything. It will not only show you how the GIF is going to look like, but also its file size and other info. After checking, click on Save.




One thought on “Trick or treat! Animated GIF”

Comments are closed.

%d bloggers like this: