Join Andy Needham for an in-depth discussion in this video Add final touches to the Goal section, part of After Effects: Creating a Mobile App Interface.
- View Offline
- [Voiceover] Continuing from where we left off previously,…we're going to finish up the animation for the goal section.…So let's just add a bit of color to the percentage.…We can do that selecting it and just adding our color too.…And what we want to do now is create the circular effect…that we have in our illustrator file here.…So what we have is a circle…that represents the whole of the goal.…This would be 100%.…And this will be using our green color.…
That represents where we're up to in the goal.…So this will be about 66%.…So let's create those now.…I'm gonna create a new solid,…and I'll just make it the comp size.…And I might fill it with this green color.…In fact, we're gonna use an effect called circle.…So, if you're in your effects and presets,…we can type in "circle" and it will be…under the "generate effects".…And when we add that to our layer it's over here…so that we can use the center to bring it up,…and the radius to expand it.…
And what we'll do is we'll just press "t"…on our white solid layer and just…
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