Trick or treat! Animated GIF

TRICK OR TREAT!

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: 

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.  > 

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

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.

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.

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. 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.

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.

DONE!