Bottom navigation gives the user the ability to use their thumbs for navigation through an app. In this video, learn how to create the design pattern using a Photoshop file that literally drops the project into place in After Effects.
- [Instructor] In this exercise,…we're going to focus on bottom navigation,…which is commonly used to enable the user…to switch between views or modes in an app.…We've all used them.…Select something and the item lights up.…Select something else and the selection lights up…while the previous selection…reverts to its gray or deselect state.…Now, before we get going, I think it is important…that you understand the intimate relationship…between Photoshop and After Effects…because the screen you're looking at here…is nothing more than a simple PSD image…that was imported into After Effects…as a composition that retains its layer styles.…
So, I want to just show you how this was all set up.…It's part of a chalk talk here.…So, I'm going to switch over to Photoshop,…and there is the image.…And if you want to follow along with me, feel free,…because it is the BottomNavigation.psd file…found in the Content folder in your download.…Now, the first thing I want to point out…is that all of the layers are named.…I've got the Image, which is the plane,…
- Prototyping motion
- Using the Graph Editor
- Working with shapes and masks
- Supporting tap, press, and swipe gestures
- Handling pinch and spread gestures
- Designing patterns
- Making navigation, buttons, and breadcrumbs
- Creating progress bars
- Working with modals, menus, and cards
- Zooming content
- Making a floating action button
- Handling text input and cursors
Skill Level Beginner
Modular UX Design with Photoshopwith Jesse Freeman48m 8s Advanced
1. Microinteraction Fundamentals
2. The Common Gestures
3. Design Patterns
Next steps1m 21s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press 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.