Join Andy Needham for an in-depth discussion in this video Add final touches to the Goal section, part of Creating a Mobile App Interface in After Effects.
- [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…
Author
Andy Needham
Released
6/6/2016In 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
Skill Level Intermediate
Duration
Views
-
Introduction
-
Welcome34s
-
-
1. App Plan and Pre-Production
-
The app creation33s
-
Sketch out ideas3m 8s
-
Choose the user journey1m 45s
-
-
2. Explore the App Screens
-
3. Prepare Assets for Animation in After Effects
-
Set up and import artwork5m 14s
-
Create reusable components4m 31s
-
Build the Dashboard tiles6m 26s
-
Build the Dashboard screens7m 25s
-
-
4. Animate in After Effects
-
Animate the Steps screen8m 29s
-
Animate the Friends screen7m 50s
-
5. Build and Export the Sequence
-
Export the final sequence4m 45s
-
Conclusion
-
Next steps1m 9s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Add final touches to the Goal section