Masks still behave like any other masks inside of other design programs, but with InVision Studio they now have the ability to do so much more with motion. Follow Drew Bridewell in this video to get a quick view into masks and how far you can take them inside of InVision Studio.
- [Instructor] Masking inside of any design tool…is essential, so inside of InVision Studio…it's a little bit more fun because you get to animate…from one state to another state.…So let me show you what that is.…So I have an image here where this image…is zoomed in to this graphic…and then on the second state this image…is zoomed a lot further out.…It reveals a lot more of that image.…So typically inside of a design tool…you would just be able to mask that,…but what about that transition…from one state to another state.…
So inside of InVision I'm going to preview this example file…and show you why this works.…So as I click this element it's going to reveal so much more…and because I shift it over the image…you can see that transition.…That's why mask inside of InVision is really cool,…but let's start from the beginning.…So masking an image, you need to simply…select an image and I'll start with this image down here.…I'm gonna copy it by cmd + C…come up to another art board, Home…and paste it in.…
Now all I need to do is hit alt + cmd + Arrow down…
Author
Released
9/19/2018- Navigating the interface
- Best practices for importing from Sketch
- Drawing, editing, and formatting shapes
- Managing layers
- Rapid prototyping
- Advanced animation
- Percentage-based scaling
- Creating, adding, and editing components
- Sharing and presenting your work
Skill Level Beginner
Duration
Views
Related Courses
-
InVision for UX Design
with Emmanuel Henri1h 1m Intermediate -
InVision Craft for UX Design
with Emmanuel Henri45m 50s Intermediate -
InVision Studio First Look
with Emmanuel Henri40m 30s Beginner
-
Introduction
-
1. A Tour of Studio
-
The welcome window1m 19s
-
The anatomy of a document1m 27s
-
A tour of the interface3m 56s
-
Saving Studio files2m 9s
-
-
2. Importing from Sketch
-
3. Screen Design
-
Managing layers2m 21s
-
Using Boolean operations5m 8s
-
Masking layers2m 5s
-
4. Rapid Prototyping
-
Linking screens1m 58s
-
Previewing your prototype2m 31s
-
-
5. Advanced Animation
-
Using the Motion transition4m 27s
-
-
6. Working with Components
-
Component overrides2m 54s
-
7. Responsive Layout
-
Pinning elements3m 22s
-
-
8. Collaboration
-
Making layers exportable1m 17s
-
-
Conclusion
-
Next steps1m 43s
-
- 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.
CancelTake 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.
Share this video
Embed this video
Video: Masking layers