Join Andy Needham for an in-depth discussion in this video Fix the header and footer, part of After Effects: Creating a Mobile App Interface.
- View Offline
- [Voiceover] In the previous movie, we identified…that we need to fix the header and footer in place.…First, take a look at how we do that.…I'm gonna grab the header, and footer,…and maybe the title,…because that seems to be clashing as well,…from our dashboard comp, Dashboard One.…So we'll select these...…Until the bottom, and I'm gonna copy them.…I'm gonna right-click and just make these guide layers…so that there's still a reference…for if we ever come back to this comp,…but they won't render.…
And as you can see, we've got that icon…to indicate guide layers.…So, we'll go back into the main sequence…and just paste them on top of everything.…I'm gonna give them a color,…just so we can identify them easily.…And now, when we slide over,…we've got our header and footer in place.…You can see now, we've got another issue,…which is, the title of the Steps screen…is clashing with the Today.…
So let's fix that.…Let's go into the Steps screen.…We'll make the header a guide layer.…Gonna make this Title-Steps a guide layer, also.…
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