Shapes play an important role in the UX design process—they can be used to create interface elements like buttons. In this exercise, see how to create a shape and then explore how to use its properties to prototype a tap microinteraction.
- [Instructor] In this exercise we look at the use of shapes…as they apply to micro interactions in After Effects.…To get started, open the 05 shapes file…that's found in your download.…To draw a shape, what you do…is you select one of the shape tools.…They're over here.…I've already got the ellipse tool selected.…Click on the popdown, click and hold.…You have a rectangle, you have a rounded rectangle,…which is really good for buttons,…an ellipse tool, which draws circles, polygon,…odd shaped images, and of course a star tool.…We're going to just choose the ellipse tool.…
We want to fill it with a white color,…so we're going to come over here,…and we're going to double click the fill color,…and just choose white,…and click OK, and we got the fill.…You get some options here for the fill.…If you don't want a fill, you select this.…If you want a linear gradient, select that one.…Or, a radial grid, select that one.…And, you've got a variety of blend modes here.…We're not going to be too concerned about the blend modes.…
- 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.