Enrol to start learning
Reading is open to everyone. Enrolling is free, and it is what unlocks the audio lessons, practice tests and progress tracking.
8.3. Timeline Animation in Illustrator & Photoshop
Interactive Audio Lesson
Unlock the classroom podcast
The transcript is above and free to read. A free account plays the conversation back.
Create a free account
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.
Unlock the classroom podcast
The transcript is above and free to read. A free account plays the conversation back.
Create a free account
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!
Overview
Short Summary
This section covers the process of creating timeline animations using Adobe Illustrator and Photoshop, emphasizing the steps involved in exporting and animating graphics.
Medium Summary
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 Summary
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
Unlock the audio lesson
The script is above and free to read. A free account plays it back, in the voice you pick.
Create a free account- 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.
Unlock the audio lesson
The script is above and free to read. A free account plays it back, in the voice you pick.
Create a free account- 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.
Unlock the audio lesson
The script is above and free to read. A free account plays it back, in the voice you pick.
Create a free account- 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
Core takeaways and short definitions to help you quickly recall the key ideas from this section.
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
Step-by-step examples to apply the section's ideas and test your understanding.
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
Stories
Memory Tools
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.