8.3 - Timeline Animation in Illustrator & Photoshop
Enroll to start learning
Youβve not yet enrolled in this course. Please enroll for free to listen to audio lessons, classroom podcasts and take practice test.
Interactive Audio Lesson
Listen to a student-teacher conversation explaining the topic in a relatable way.
Exporting Artboards from Illustrator
π Unlock Audio Lesson
Sign up and enroll to listen to this audio lesson
To begin our timeline animation, we first need to export our artboards from Illustrator as PNG files. This ensures high quality when we bring them into Photoshop. Can anyone tell me the steps to export artboards?
You go to the 'File' menu and select 'Export'!
That's correct! You will select 'Export As' and choose the PNG format. Donβt forget to set the resolution to a suitable size, like 300 dpi. What's the benefit of using PNG for our animation?
PNG supports transparency, which is important for animations!
Exactly! Keeping the background transparent allows our animations to blend seamlessly with different backgrounds. Now, once we're done exporting, whatβs our next step?
We need to open Photoshop and create a new timeline animation!
Correct! Letβs summarize: We first export our artboards from Illustrator as PNG files, ensuring transparency and high quality.
Creating Frame Animation in Photoshop
π Unlock Audio Lesson
Sign up and enroll to listen to this audio lesson
Now that weβve exported our images, letβs create a frame animation in Photoshop. Who can tell me where to find the Timeline panel?
It's under the Window menu! You select 'Timeline'.
Thatβs right! After opening the Timeline panel, weβll select βCreate Frame Animationβ. What do we need to do next?
We should import the PNG sequence!
Good point! When importing the sequence, make sure you set the correct frame delay for each frame so the animation feels smooth. Whatβs a typical frame delay we might use?
Around 0.2 seconds is usually good for micro-interactions!
Exactly! After setting the frame delays and adjusting our animation, whatβs our final step?
We need to export it as a GIF!
Right! We can do that by selecting 'File', then 'Export', and using the 'Save for Web' option. Remember, we want to optimize our GIF for web use!
Introduction & Overview
Read summaries of the section's main ideas at different levels of detail.
Quick Overview
Standard
In this section, students will learn how to export artboards from Illustrator and create frame animations in Photoshop. Key steps include exporting PNG sequences and setting frame delays to achieve smooth animations.
Detailed
Timeline Animation in Illustrator & Photoshop
This section focuses on the techniques necessary to create timeline animations using Adobe Illustrator and Photoshop. The animation process starts in Illustrator, where sequential artboards are exported as PNG files. These files are then imported into Photoshop, leveraging its Timeline panel to create a frame animation.
Key Steps:
- Export from Illustrator: Artboards should be exported sequentially as PNG images to maintain clarity and quality in the animation.
- Use of Photoshop: Open Photoshop and access the Timeline panel to begin creating the frame animation.
- Importing the PNG Sequence: When importing the PNG sequence, it is crucial to set appropriate frame delays (e.g., 0.2 seconds) for smooth playback.
- GIF Export: Once the animation is complete, it can be exported as a GIF using the Save for Web option, ensuring the file size remains manageable for online use.
The ability to animate graphics enhances the interactivity and engagement of digital prototypes, making this skill essential for designers.
Audio Book
Dive deep into the subject with an immersive audiobook experience.
Exporting Artboards from Illustrator
Chapter 1 of 3
π Unlock Audio Chapter
Sign up and enroll to access the full audio experience
Chapter Content
- In Illustrator, export sequential artboards as PNGs.
Detailed Explanation
To start creating animations, you first need to export your artboards from Adobe Illustrator in a suitable format. PNG is a popular choice because it maintains the quality of images with transparency support. This process involves selecting the artboards you want to export and saving them sequentially as PNG files, which can then be used as frames for your animation.
Examples & Analogies
Think of this step like taking a sequence of photographs for a flipbook. Each picture represents a different stage of your drawing, and together they create a moving story when flipped through quickly.
Creating Frame Animation in Photoshop
Chapter 2 of 3
π Unlock Audio Chapter
Sign up and enroll to access the full audio experience
Chapter Content
- Open Photoshop β Timeline panel β Create Frame Animation.
Detailed Explanation
Once you have your PNG files, open Adobe Photoshop and locate the Timeline panel. Here, you select 'Create Frame Animation.' This sets up the framework for your animation, allowing you to import your previously exported PNG sequence as individual frames. This is akin to a slideshow where each slide appears at a set time, creating a perception of motion when played back in succession.
Examples & Analogies
Imagine you're creating a slideshow for a school presentation. Just like you would add each slide to the presentation in order, you're adding each image to the timeline in Photoshop to form a cohesive animation.
Importing PNG Sequence and Adjusting Frame Delays
Chapter 3 of 3
π Unlock Audio Chapter
Sign up and enroll to access the full audio experience
Chapter Content
- Import PNG sequence β set frame delays (e.g., 0.2 s) β Export via File β Export β Save for Web (GIF).
Detailed Explanation
After creating your frame animation, the next step is to import your PNG files into the timeline, which allows you to specify how long each frame should display. A common delay time is 0.2 seconds, but this can be adjusted based on the rhythm of the animation you're aiming for. Once satisfied, you can export your work as a GIF using the 'Save for Web' option, which compresses the file for easier sharing and viewing online.
Examples & Analogies
Think of it like timing the pages of a cartoon. If you flip too fast, you lose the essence of the story; if too slow, it becomes boring. Finding the perfect speed for each frame shapes the viewer's experience, much like a well-timed film sequence.
Key Concepts
-
Export Sequential Artboards: Exporting multiple artboards in sequence as PNGs to maintain quality during animation.
-
Frame Animation Setup: Using the Timeline panel in Photoshop to create a sequence of frames.
-
Optimizing GIFs: The process of ensuring the final animation is web-ready and optimized for fast loading.
Examples & Applications
When creating a simple web banner animation, you might export each frame of your design to capture different states of your graphics.
In a product showcase, sequential images of a product interacting will be animated into a fluid GIF showing off its features.
Memory Aids
Interactive tools to help you remember key concepts
Rhymes
Export PNG to make it gleam, use Photoshop to fulfill your dream.
Stories
Imagine a traveler who takes snapshots as he journeys. Each snapshot represents different frames of his adventure, just like artboards in Illustrator. When he returns, he arranges those snapshots in a photo album to create a story β that's your animation!
Memory Tools
P.E.F. β Remember it as Prepare, Export, Frame. This helps you remember the steps to create animation.
Acronyms
G.I.F. β Graphics In Frames, to remember the essence of GIF animations.
Flash Cards
Glossary
- Artboard
A defined area in design software where designs and visuals are created.
- Frame Animation
A method of animation where different images are displayed in sequence to create motion.
- GIF
A graphic interchange format that supports both static and animated images.
- Timeline Panel
A panel in Photoshop that allows for managing frames and layers for animations.
Reference links
Supplementary resources to enhance your learning experience.