How-to: Create an Animated Meme [GIF]


By Isaac Adams-Hands

For those unfamiliar with memes. It is a technique used by artists to create images that are funny, artistic and/or thought-provoking. Which are then shared on the internet, usually through social media, message boards, and social bookmarking sites for images (like FFFFOUND!).

One popular technique is to animate the meme. The most common process is by creating an animated GIF. This is because GIF’s are light, portable, and accessible on any mobile device.

The easiest non-technical explanation of an animated GIF is by referencing old hand-made flip books. It uses the same method, but using computer animation:


What you will need

1. Photoshop
2. Time
3. Patience
4. Several images

Exercise files: Feel free to work along, using a ZIP folder of the images used, or with a completed PSD of the tutorial (if you learn better that way).

Steps in creating an animated GIF:

1. Open Photoshop and make sure “Animation” is enabled

Menu bar >> Photoshop >> Window >> Animation


2. Consolidate your images

A. Open the images you wish you use for the animated GIF
B. Create a New Image (⌘+N)
C. Add / Drag all of the images in order to the new image

3. Align Images

Select the image layers and background, then use the vertical and horizontal alignment tool

4. Create Animation Layers

Deselect all image layers, then using the duplicate frames button animation button Create the appropriate number of animation frames.

If you don’t deselect the image layers before creating new frames, you will need to manually deselect individual images for every frame set.

animation layer

5. Correlate the related Frames to Images

To make the animation run smoothly, you need to correlate the related frames to images.

(e.g. Image Layer #9 must be visible on Animation Frame #9)

correlating layers and frames

6. GIF Settings

The Loop count should be “Forever” and set the Frame rate to correlate with your animation (i.e. 0.1 seconds)

7. Save the finished product for Web

Photoshop >> File >> Save for Web & Devices…

save for web

Settings: GIF >> 256 Colors (click to enlarge)
save-for-web settings

8. The Finished Product

animated cat massage

Creative Examples: