Frame Animation
Demonstration & Discussion
Adobe Illustrator
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Animation & Frames
Animation & Frames
Fundamentally, all animation is simply the changing of imagery over a duration of time.
Animation & Frames
“Flipbook,” IAMCORE, Imgur, Nov. 18 2014 [https://media.giphy.com/media/13bLnxKfsueRPy/giphy.gif]
Animation & Frames
Fundamentally, all animation is simply the changing of imagery over a duration of time.
Animation & Frames
Fundamentally, all animation is simply the changing of imagery over a duration of time.
We know how to use multiple artboards and transforms (like rotate, scale, etc.) to generate consistent imagery.
Animation & Frames
For instance, consider this simple graphic for a loading icon…
Animation & Frames
Animation & Frames
For instance, consider this simple graphic for a loading icon.
With some basic rotation transforms around the center, we can produce multiple artboards that start to suggest an animation sequence…
Animation & Frames
Animation & Frames
Animation & Frames
Animation & Frames
Animation & Frames
Animation & Frames
Animation & Frames
Animation & Frames
Animation & Frames
Animation & Frames
Animation & Frames
Animation & Frames
Animation & Frames
So we know how to use multiple artboards and transforms (like rotate, scale, etc.) to generate consistent imagery.
We just need a file format �that can control time.
Animation & Frames
Animation & Frames
Animation & Frames
The term frame refers to one piece of imagery displayed for one segment of time in an animation sequence.
Animation & Frames
Animation & Frames
The term keyframe derives from traditional animation…
Animation & Frames
The term keyframe derives from traditional animation…
Animation & Frames
The term keyframe derives from traditional animation…
Animation & Frames
The term keyframe derives from traditional animation. The lead animator would illustrate only certain important motion cues (“keyframes”)…
Animation & Frames
The term keyframe derives from traditional animation. The lead animator would illustrate only certain important motion cues (“keyframes”). Assistant animators would complete the frames in between (“tweens”).
Animation & Frames
Animation & Frames
Notice the frame numbers (the circled numbers near the bottom-right corner of the animation)…
Animation & Frames
Notice the frame numbers (the circled numbers near the bottom-right corner of the animation). The numbers aren’t sequential.
Animation & Frames
Notice the frame numbers (the circled numbers near the bottom-right corner of the animation). The numbers aren’t sequential. They jump in sequence…
Animation & Frames
Notice the frame numbers (the circled numbers near the bottom-right corner of the animation). The numbers aren’t sequential. They jump in sequence from frame 4…
Animation & Frames
Notice the frame numbers (the circled numbers near the bottom-right corner of the animation). The numbers aren’t sequential. They jump in sequence from frame 4, to frame 7…
Animation & Frames
Notice the frame numbers (the circled numbers near the bottom-right corner of the animation). The numbers aren’t sequential. They jump in sequence from frame 4, to frame 7, to frame 10…
Animation & Frames
Notice the frame numbers (the circled numbers near the bottom-right corner of the animation). The numbers aren’t sequential. They jump in sequence from frame 4, to frame 7, to frame 10, to frame 18…
Animation & Frames
Notice the frame numbers (the circled numbers near the bottom-right corner of the animation). The numbers aren’t sequential. They jump in sequence from frame 4, to frame 7, to frame 10, to frame 18, to frame 28…
Animation & Frames
Notice the frame numbers (the circled numbers near the bottom-right corner of the animation). The numbers aren’t sequential. They jump in sequence from frame 4, to frame 7, to frame 10, to frame 18, to frame 28, to frame 36…
Animation & Frames
These are the keyframes…
Animation & Frames
These are the keyframes. The assistant animator would be responsible for completing the inbetweens…
Animation & Frames
These are the keyframes. The assistant animator would be responsible for completing the inbetweens or tweens (all of the frames in between the keyframes).
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Paste on All Artboards
Paste on All Artboards
Once we’ve created the basic visual components for our animation sequence, use Paste on All Artboards to ensure that the art is consistently positioned throughout the animation sequence.
Paste on All Artboards
⬤ Illustrator CC File Edit Object Type Select Effect View Window Help
Edit Menu
⬤ Illustrator CC File Edit Object Type Select Effect View Window Help
Edit
Edit Menu
Undo
Redo
_________________________
Cut
Copy
Paste
Paste in Front
Paste in Back
Paste in Place
Paste on All Artboards
Paste
Clear
…
⬤ Illustrator CC File Edit Object Type Select Effect View Window Help
Edit
Edit Menu → Paste on All Artboards
Undo
Redo
_________________________
Cut
Copy
Paste
Paste in Front
Paste in Back
Paste in Place
Paste on All Artboards
Paste
Clear
…
⬤ Illustrator CC File Edit Object Type Select Effect View Window Help
Edit
Paste on All Artboards
Paste on All Artboards
Edit Menu → Paste on All Artboards
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Export for Screens
Export for Screens
When you’ve finished designing each of your frames in Illustrator, use Export for Screens to quickly export all of the artboards out to individual PNG files.
Export for Screens
⬤ Illustrator CC File Edit Object Type Select Effect View Window Help
⬤ Illustrator CC File Edit Object Type Select Effect View Window Help
File
File Menu
File Menu
New…
New from Template…
Open…
Open Recent Files ▶
Browse in Bridge…
_________________________
Close
Save
Save As…
…
_________________________
Export ▶
…
⬤ Illustrator CC File Edit Object Type Select Effect View Window Help
File
File Menu → Export
New…
New from Template…
Open…
Open Recent Files ▶
Browse in Bridge…
_________________________
Close
Save
Save As…
…
_________________________
Export ▶
…
⬤ Illustrator CC File Edit Object Type Select Effect View Window Help
File
Export ▶
File Menu → Export →
Export for Screens…
Export As…
Export for Web (Legacy)…
New…
New from Template…
Open…
Open Recent Files ▶
Browse in Bridge…
_________________________
Close
Save
Save As…
…
_________________________
Export ▶
…
⬤ Illustrator CC File Edit Object Type Select Effect View Window Help
File
Export ▶
File Menu → Export → Export for Screens
Export for Screens…
Export As…
Export for Web (Legacy)…
New…
New from Template…
Open…
Open Recent Files ▶
Browse in Bridge…
_________________________
Close
Save
Save As…
…
_________________________
Export ▶
…
⬤ Illustrator CC File Edit Object Type Select Effect View Window Help
File
Export ▶
Export for Screens…
Export for Screens
File Menu → Export → Export for Screens
Export for Screens
Export for Screens
Be sure that All Artboards �are being exported
Export for Screens
Export for Screens
Click the folder icon to choose the�Location to export the PNG files
Export for Screens
Export for Screens
Be sure that the format selected �for the export is PNG files
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Photoshop Image Stack
Photoshop Image Stack
To create an Image Stack in Photoshop (a single artboard with image information separated in the Layers Palette)…
Photoshop Image Stack
To create an Image Stack in Photoshop (a single artboard with image information separated in the Layers Palette), simply open a file, then drag-and-drop the additional files to place them as new layers in the stack.
Photoshop Image Stack
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Timeline Palette
Timeline Palette
⬤ Photoshop CC File Edit Image Layer Type Select Filter 3D View Window Help
Window Menu
⬤ Photoshop CC File Edit Image Layer Type Select Filter 3D View Window Help
Window
Window Menu
Arrange ▶
Workspace ▶
…
Info
Layer Comps
Layers
Learn
Libraries
Measurement Log
Navigator
Notes
Paragraph
Paragraph Styles
Paths
Properties
Styles
Swatches
Timeline
Tool Presets
…
⬤ Photoshop CC File Edit Image Layer Type Select Filter 3D View Window Help
Window
Window Menu → Timeline
Arrange ▶
Workspace ▶
…
Info
Layer Comps
Layers
Learn
Libraries
Measurement Log
Navigator
Notes
Paragraph
Paragraph Styles
Paths
Properties
Styles
Swatches
✓ Timeline
Tool Presets
…
Timeline
⬤ Photoshop CC File Edit Image Layer Type Select Filter 3D View Window Help
Window
Window Menu → ✓ Timeline
Arrange ▶
Workspace ▶
…
Info
Layer Comps
Layers
Learn
Libraries
Measurement Log
Navigator
Notes
Paragraph
Paragraph Styles
Paths
Properties
Styles
Swatches
✓ Timeline
Tool Presets
…
⬤ Photoshop CC File Edit Image Layer Type Select Filter 3D View Window Help
Window
Timeline Palette
Timeline Palette
Use the Timeline Palette to convert your artboard into a Frame Animation…
Timeline Palette
Timeline Palette
Click on a frame to select it
Timeline Palette
Timeline Palette
Add frames to the timeline �by duplicating the selected frame
Timeline Palette
Timeline Palette
Remove frames from the timeline �by deleting the selected frame
Timeline Palette
Timeline Palette
Be sure that the animation looping �setting is set to Loop Forever
Timeline Palette
Timeline Palette
Test the animation using �the play/stop button
Timeline Palette
Timeline Palette
Control the speed of the animation by increasing or decreasing the Frame Delay for each frame
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Save for Web (Legacy)
File Menu → Export → �Save for Web (Legacy)…
Save for Web (Legacy)
File Menu → Export → �Save for Web (Legacy)…
Save for Web (Legacy)
Use the “Save for Web (Legacy)” export option to save your animation as a GIF file.
Save for Web (Legacy)
Check that the estimated file size of the image won’t be too large…
Save for Web (Legacy)
If the file size is above 2 MB, use the Preset drop-down menu to select a smaller color table (like “GIF 32” or “GIF 64”) to try to reduce the file size.
Save for Web (Legacy)
Make sure that the Looping Options �are set to Forever.
Save for Web (Legacy)
Then click Save…
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
Animation & Frames
Illustrator
Paste on All Artboards
Export for Screens
Photoshop
Image Stack
Timeline Palette
Exporting Animated GIFs/Videos
www.how-to-design.org is an open-source learning resource.
Class material developed by Ian Besler.�
Licensed under a Creative Commons�Attribution-NonCommercial-ShareAlike�4.0 International License.