Having gone ahead and built the remaining screens using techniques he has taught previously, Andy Needham, motion graphics artist and animation director takes you through the new screens recapping some of the steps he took to create them. Together you swap out the placeholder logo in the header and complete the Friends screen by adding profile pictures.
- [Voiceover] I've gone ahead and built out the remaining…steps in Friends screens using techniques that we've already…learned in the previous movies.…You can pause the video here and create your own versions…using the exercise files provided,…or just take a look at what I've done.…I'm just going to mention a few things here,…and call out a few exercise files that will help you…complete the task.…Let's have a look at the Friends screen first.…You can see that we've got…individual layers for each friend,…and these are based on a…initial template that I made.…
We're going to add a profile picture to each one,…and I'll show you that in a minute.…I created a new footer,…and I'm going to show you that here,…where the friends is highlighted.…In the dashboard we have the dashboard button highlighted.…I've organized some of these things into a global folder,…so you can see that in there.…Let's move over to steps,…and if you remember in the illustrator file,…if we just switch over and have a look at that,…there wasn't a lot of information here.…
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