Niki Jacob - Advertising Art & Design Instructor

Storyboards and Animated GIFs

Animated GIF

What is an animated GIF?

Pronounced gif or jif, the GIF file type was originally designed for graphics, but it’s now most commonly used for simple animated images on the Web. For example, the image below is an animated GIF file.

It might be easiest to think of a GIF as a tiny movie that plays over and over in your web browser. This video from PBS gives a really nice introduction to the history of the GIF file format.

Let's Create an animated GIF from a series of photos

  1. Open up Photoshop
  2. Open Photoshop and go to File > Scripts > Load Files into Stack.
  3. Import a series of photos
  4. Click Browse and locate the photos you want to use. While holding down the Shift key, select all the files and click Open.
  5. Click OK to import the photos into a single-layered file.

Note that a number of new layers have been created in the Layers panel on the right side of your workspace.

These individual layers will become the frames of the animated GIF.

Open the Timeline

  1. Go to Window > Timeline to open the Timeline panel.
  2. Click the arrow on the button in the middle of the panel and select Create Frame Animation. Then click the button to create a new frame animation.
 

Convert layers into animation frames

  1. Click the menu icon from the upper right corner of the Timeline panel. Click Make Frames From Layers.
  2. This will convert all the layers in the Layers panel into individual frames in your animation.
  3. Click the Play button from the bottom of the Timeline panel (or press the Spacebar on your keyboard) to preview the animation.

Note: If your animation is playing in reverse, click the Timeline menu icon again and select Reverse Frames.

 Set the animation to loop

  1. Click the repeat menu from the bottom of the Timeline panel and select Forever. This will create a looping animation.
  2. Click the Play button from the bottom of the Timeline panel (or press the Spacebar on your keyboard) to preview the animation.

Export the animation as a GIF

  1. Go to File > Export > Save for Web (Legacy)…
  2. Select GIF 128 Dithered from the Preset menu.
  3. Select 256 from the Colors menu.
  4. If you are using the GIF online or want to limit the file size of the animation, change Width and Height fields in the Image Size options.
  5. Select Forever from the Looping Options menu.
  6. Click the Preview… button in the lower-left corner of the Export window to preview your GIF in a web browser.
  7. Click Save… and select a destination for your animated GIF file.

Note that you can also use this technique for any layered Photoshop file.

PROJECT

Storyboard to Animated GIF

You will be creating an animated gif of your sketches. Like a flipbook.

STEP 1: You MUST have a storyboard outlining 10-15 frames.
(4 days, in your sketchbook or newsprint, 3″x5″ boxes, render as a sketch-no color)

STEP 2: Create a larger comp for each storyboard, full color. 
(4 days, Marker Comp paper, 5″x7″ boxes, render full color)

STEP 3: When complete take photos of each board.
(2 days, JPGs, save in a single folder on your GDrive.)

STEP 4: When complete use the tutorial above and using your storyboards create in sequence an animated GIF in Photoshop.
(2 days, animated GIF creation)

DELIVERABLES

All sketches must be used. You should have approximately 10-15 layers imported into Photoshop.