Objective

To learn advanced Photoshop layering, masking, and GIF animation by recreating the art below:

download starter files

Discussion

Of all the ways to create visual emphasis ("focal point"), movement is the most powerful way to catch the eye. Making things move on the web is easy and can be whole lot of fun. But, please learn to use animation with restraint.

Animation is defined as making inanimate objects come alive. In cartoons, this is done by sequencing drawings that are slightly different from each other (i.e. a "flipbook"). In movies, this is usually done 24 frames a second. In web animation, we can get away with fewer frames.

The GIF file format can handle simple animation (we'll need Flash for more complex animation). Because GIF a pixel format, file size is an issue. Therefore, when designing GIF animation, keep these limitations in mind:

• keep the dimensions of the animation area small
• limit the number of colors (avoid photos, if possible)
• keep the number of frames to a minimum

Procedure

prepping the file

1. launch Photoshop
2. file > new "meat.psd" (468 x 60, 72 ppi, RGB, white background)
3. open "fire.psd"; move into main window; retouch
4. dupe, merge, level, rename layer "fire"
5. open "famous logo.psd", level, retouch, crop
6. select the white type (channels, cmd-click on thumbnail, return to layers)
7. drag selection into main window, fill with orange, resize, rename layer "logo"
8. add type "Legendary Pit Bar-B-Que" (14pt Gill Sans Bold, yellow)
9. make background layer black (cmd+DELETE)

create neon art

1. add type "MEAT" (60pt Tekton Bold Extended)
2. foreground color=yellow, background color=orange
3. hide other layers
4. add layer style "inner glow" (color: foreground to background) (see PDF settings)
5. add layer style "outer glow" (color: orange) (see PDF settings)
6. add layer style "drop shadow" (color: yellow) (see PDF settings)
7. add layer mask, mask out "M", rename layer "EAT"
8. dupe type layer, hide previous layer
9. adjust mask to remove "EAT", rename layer "M"
10. dupe "M" layer again, rename "M dull", hide previous layer
11. hide outer glow & drop shadow effects
12. foreground color=dark red, background color=black
13. edit inner glow effect (double-click), re-apply gradient

make fire

1. foreground color=yellow, background color=orange
2. new layer "gradient", draw gradient (linear, foreground to background)
3. move "gradient" layer to below "fire" layer
4. go to "fire" layer, make layer mode = multiply, adjust levels
5. filter > distort > shear
6. dupe "fire" layer, hide previous layerr
7. filter > distort > shear (go in other direction), rename layer "fire 2"

create the animation

1. reveal only "M dull " and "EAT" layers
2. window > show animation
3. dupe frame #1 nine times (total of 10 frames), reveal "M" layer in even frames
4. play, adjust timing (1,.1,.1,.1,.1,.5,.1,.1,.5,2), play again
5. dupe frame #10 three times
6. in frame #11: reveal "fire 1" layer (.5 sec)
7. in frame #12: reveal "fire 2" layer (.5 sec)
8. in frame #13: reveal "logo" and "legendary" layers (1.5 sec)
9. add fire to end: select frames #11 and #12, copy frames, paste frames after frame #13

optimize

1. go to frame #13 (this frame has the most colors)
2. file > save for web as "meat.gif"
3. choose preset "GIF 128 no dither"
4. window > show color table
5. eye dropper tool: click on important colors, then shift drag in gradient area
6. lock selected colors
7. reduce number of colors to 64
8. drag and drop GIF file on top of browser to preview
9. publish your GIF file on your projects page for grading