Andy Needham, motion graphics artist and animation director shows you how to export your animation as an asset you can share with the world! We use Adobe Photoshop to create a web-ready animated GIF that can be used on sites such as Dibbble, Instagram or Twitter. Andy also mentions how you can get this asset in a format that will work on YouTube and Vimeo.
- [Voiceover] We've created a fantastic animation…which illustrates the functionality…of the activity tracker app.…Now we want to share it,…which brings us to final part of this process:…output.…We're going to export the animation as a Quicktime file,…and from that file we'll create an animated GIF.…So if I show you where I got up to.…I've tweaked this animation a bit,…just changed the animation slightly,…and I also added in the little friend icon…that I've missed out from the interface.…So you can have a look at that.…
And then from there, I wanted to make the animation loop.…because this will just suit a GIF better,…an animated GIF anyway.…I've just changed the ending so that we can now…go back to the beginning of the activity tracker animation.…We'll just see it now…as it finishes the loop.…The friends animate in,…and then all I did was make it so that the screen clears…and then we're back into the day.…So then from there,…if you were to put this on a site like Dribble,…you'd wanna make the output 800 by 600.…
In this course, Andy Needham shows how to create an app interface from scratch using Adobe Illustrator, and then take the finished design into After Effects for animation. This is a start-to-finish project, going from concept sketches to the final product (an animated GIF). The prototype will showcase the navigation and interactive aspects of the app interface and can be used for marketing or gathering client and user feedback.
- Sketching ideas
- Planning ahead: knowing your target output
- Designing screens in Illustrator
- Preparing artwork for After Effects
- Creating reusable components
- Building and animating screens
- Adding transitions and gesture animations
- Exporting the final sequence as an animated GIF