Creating Animated Gifs

1
Creating Animated Gifs

• Using Photoshop

2
Animation formats

• Although animations appear to move when you view
  them on a computer, the movement is simulated
  from a series of still images.
• You can save animations in two formats
• GIF popular because it doesnt require plug-ins
  and are backwards-compatible with older Web
  browsers
• SWF (Adobe Flash) needs a plug-in

3
Animation Palette

• Frames Displays a preview of the contents of a
  frame
• Frame number Identifies the frame number
• Frame Delay pop-up menu Selects the frame delay
  time
• Looping pop-up menu Selects the looping option
  (how many times to play the animation

4
Animation Palette

• First Frame button Selects the first frame
• Previous Frame button Selects the previous
  frame
• Play/Stop button Plays or stops the animation
• Next frame button Selects the next frame
• Tween button Tweens the animation which tells
  Photoshop to automatically generate frames
  between frames you specify

5
Animation Palette

• Duplicate Current Frame button Duplicates the
  current frame to make a new frame
• Delete Selected Frame button Deletes the
  currently selected frame
• Animation palette menu Provides options for
  creating and editing animations

6
Timing

• Timing of animations is based on how long you
  want the animation to play and number of frames.
• Gif format supports delays between frames and
  allows timing to change within a single
  animation.

7
Timing

• GIF format plays back at different speeds
  depending on the speed of the computers
  processor so you should test on different
  computers
• Animated GIFs display multiple images called
  Frames in a sequence much like a slideshow
• Different frames can have different timings you
  can speed them up or slow them down

8
Looping

• You can instruct animated GIFs to repeat called
  Looping, to play once or to play a specific
  number of times.
• The Looping information is stored in the animated
  GIF, not in the HTML code.

9
Compression Challenges

• Large areas of color compress better than areas
  with a lot of noise or detail
• Photographic images in an animation should be
  saved with lossy compression, which will make a
  substantial file savings.
• Animated GIFs are always larger than static GIFs.
• Files will Stream in, meaning frames will appear
  before the entire file has finished loading.

10
Create Animations from Layer Visibility
11
Animation from a layered image

• To make a file animated you have to have at least
  two frames with differing content.
• One way to create differing content in the frames
  is to turn on and off the visibility of different
  layers in the frames.

12
Unify Layer Visibility

• Use this button to turn on the visibility of a
  new layer and have it turned on in all the frames
  in the Animation palette.

13
Setting Looping and Speed

• Select Forever
• Select Once
• OR, Select Other, and enter the number of times
  you want the animation to play
• Frame Delay Set your speed of each frame or
  select multiple frames
• Set the time delay from the popup menu OR
• Select Other and type in a frame delay value

14
Animation from a Flat image
Select Tween Select your Options
15
Selecting, Duplicating, and Reversing Frames

• These options are found in the Animation palette
  menu
• Select all Frames
• Reverse all Frames
• Paste Frames
• Select frames to duplicate, then Paste
• OR, use the Duplicate Current Frame button at the
  bottom of the Animation palette

16
Tweening with position and layer styles

• Create animations that fade in and out by
  tweening with opacity

17
Optimizing and Saving Animated Gifs

• One of the limitations of the GIF file format is
  that you have to use the same settings for all
  frames. Make sure youre happy with the
  optimization settings for each frame before you
  continue to the next step.

18
Optimizing Animated GIFs

• Save as Images Only, there is no need to save the
  HTML and Images.
• Animated GIFs do not require HTML code to make
  them work in a Web browser.
• You can insert an animated GIF into any HTML
  editor, just like any other GIF.

19
Optimizing Animated GIFs
20
Optimizing Transparent Animated GIFs

• In the Optimization Palette, turn on Transparency
• Save as a Background Image and Check in the
  Browser
• Check Previous and Next frame to check the
  optimization settings

21
Creating an Animated Slideshow

• If you have a series of photographs you want to
  make into a slideshow, you can put the
  photographs into a folder and import the contents
  of the folder as separate frames.
• Once you import the images you can easily use the
  tweening feature to create a cross-fading
  animation.

22
Animated Slideshow

• CS2 File gt Import gt Folder as Frames
• CS3 File gt Scripts gt Load files into Stack
• In Animation Palette menu Select Make Frames
  from Layers