Switches allow the user to enable or disable features in an app or website. In this video, learn how to create a simple switch using two shape layers and a color change when the switch is activated.
- [Instructor] In this exercise,…we're going to create a simple switch.…Switches are a common design pattern in both mobile…and web projects, and they're commonly used to feature…an on or off state for an event, or even an element…on the page or the screen.…For example, in both the iOS and Android operating systems,…you can use a switch to turn WiFi on or off.…The switch can either be tapped,…or you can drag the switch button…to turn the feature on or off.…
In both cases, the button moves…and the background changes color.…And, in this exercise, we're going to do just that.…To get yourself started, open the…03_Switches.aep file in your download.…The fascinating aspect of creating a switch,…in After Effects, is the simple fact that you only need…one object, that's all, and what is that object?…Well, it's a rounded rectangle.…So to get ourselves started,…we're going to select the rounded rectangle tool,…and we're going to click on it,…and we're just going to draw a rounded rectangle.…
And we're going to set the filter weight,…
- 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.