Loading the lesson
Loading the lesson
Search AllRounder.ai
Search the courses, subjects, tracks, games and features, or jump straight to a page.
Search the courses, subjects, tracks, games and features, or jump straight to a page.
Learn it your way
A short class with Sarah and her students. The other ways are under More.
Sign up free to listen. Transcripts are free to read.
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.
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!
Exporting multiple artboards in sequence as PNGs to maintain quality during animation.
Using the Timeline panel in Photoshop to create a sequence of frames.
The process of ensuring the final animation is web-ready and optimized for fast loading.
Export PNG to make it gleam, use Photoshop to fulfill your dream.
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!
P.E.F. – Remember it as Prepare, Export, Frame. This helps you remember the steps to create animation.
G.I.F. – Graphics In Frames, to remember the essence of GIF animations.
Term
Illustrator Export
Click to flip
Term
Timeline Animation
Click to flip
Term
GIF Optimization
Click to flip
A defined area in design software where designs and visuals are created.
A method of animation where different images are displayed in sequence to create motion.
A graphic interchange format that supports both static and animated images.
A panel in Photoshop that allows for managing frames and layers for animations.
This section covers the process of creating timeline animations using Adobe Illustrator and Photoshop, emphasizing the steps involved in exporting and animating graphics.
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.
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.
The ability to animate graphics enhances the interactivity and engagement of digital prototypes, making this skill essential for designers.