Objective

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

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 After Effects for more complex animation). Because GIF is 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. download starter files
2. turn on Tekton using Font Agent Pro
3. launch Photoshop
4. open "fire.psd"; select all, copy
5. file > new "meat.psd" (468 x 60, 72 ppi, RGB, white background)
6. retouch, dupe, merge, level, rename layer "fire"
7. open "famous logo.psd", level, retouch, crop
8. select the white type (channels, cmd-click on thumbnail, return to layers)
9. copy only logo art, paste into "meat.psd", fill with orange, resize, rename layer "logo"
10. copy/paste tagline, fill with yellow, resize, rename layer "tagline"
11. add both colors to swatches
12. 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. "fire" layer: layer mode = multiply, adjust levels
5. duplicate "fire" layer 2x
6. "fire copy" layer: filter > distort > shear (hide other "fire" layers)
7. "fire copy 2" layer: filter > distort > shear (go in other direction)

create the animation

1. reveal only "M dull " and "EAT" layers
2. window > timeline
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 a fire layer (.5 sec)
7. in frame #12: reveal the other fire 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 (flyout menu)

optimize the animation

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

publish the animation

1. launch dreamweaver (double-click STE file)
2. window > files: RMB local root folder > new file "meat.html"; open file
3. format = paragraph (RETURN)
4. insert > image: "meat.gif" (inside <p>)
5. window > CSS designer: add selectors (source=<style>): 
   • body: bg=white (or color of your choice)
   • .center: text: text-align=center
   • .centerVertical: layout: display=table-cell; text: vertical align=middle 
   • .centerVerticalWrapper: layout: width/height=100%, display=table
   • html, body: layout: height=100%
6. select <p>: class=center
7. select <body>
8. insert > layout objects > div tag: wraparound, class=centerVertical
9. insert > layout objects > div tag: wraparound, class=centerVerticalWrapper
10. file > preview in browser (opt+F12)
11. link HTML file from your process page and publish