In this video, learn how to create the navigation bar by building icons. Andy demonstrates how to create a shield by combining simple shapes and paths, an icon which represents friends and a simple gear for settings. The tools covered include shapes, the Pen tool, and the Pathfinder.
- [Narrator] In this movie, we're…going to focus on creating the navigation bar…that goes along the bottom of each screen.…So let's just find a sketch, we're going to…unlock this one here, and press command c.…And then in our nav bar working document…that we have here I'm going to create a new layer…and press command v to paste it in.…And we'll just move this up, all the way…up to the top here.…
And I'm going to press m on the keyboard,…to our rectangle that encompasses the sketch.…Press v, select both, and command seven,…and that's going to create a clicking mask.…And now all we can do, we're just…focusing on the buttons that we need to create.…The first one, we've already done.…This is based on the logo.…So I just thought I'd add it in already.…And what we're going to focus on is these remaining three.…So we'll lock that layer, move it down to the bottom,…and in our layer two here, which is…where we're going to create these icons,…we're going to begin with the shield.…
So I'll zoom in.…And I'm going to zoom into this section here.…
Learn how to animate the prototype by watching Andy's follow-up course, Creating a Mobile App Interface in After Effects.
- Planning the app
- Sketching ideas
- Designing reusable components
- Converting artwork to symbols
- Completing the app screens
- Exporting artboards
- Preparing for animation