How to get Clipping and Masking to work.
But how do i achieve something like this?
I want it to be able to "mask" itself depending the border corner.
The border could change to a different radius, or I might suddenly want a custom shape.
Re: How to get Clipping and Masking to work.
Hi LinxSay! Dorian here!
The two different approaches that I personally like to take for this are dependent on whether the desired result contains a uniform shape, or a non-uniform custom shape:
I've just created a short video to show you both, which you can watch here:
METHOD 1
In the first part, I perform clipping with a Uniform shape (in this case, a rectangle with rounded corners).
To achieve this, all you need to do is select the Element you want to clip, and in its Properties, find the 'Clip' Property.
From there, you can pick from a selection of shape types, many of which have a wide selection of sub-Properties that can give you a ton of granular control over the form of the shapes themselves.
What I really love about this solution is how procedural it is, and it makes it very easy to adjust, or change your mind at any time in a highly-controlled 'numerical' manner. (as in the video, how easily I switch from a 256px radius to a 64px radius)
METHOD 2
In the second part, I perform a clipping using a completely custom shape drawn directly in Studio.
It's worth noting that you don't necessarily have to draw the shape in Studio with the Path tool as I did in the video. You can bring in any shape from either importing an .svg file, or from copy-pasting in vectors from Figma, Illustrator, Affnity Designer, and many more. More information on this process can be found at 📘 Path Import Features.
Whether you import a shape, or whether you draw it yourself, the steps after to make the clipping happen are exactly the same:
All you need to do is use [Shift+Click] to multi-select the Path, and the Element you want to be clipped.
With both selected, if you then right-click on the Path, under the 'Path' category, you can then select 'Make clipping path', and it will create a Path-shaped mask on your Element.
If you ever want to remove this mask from the Element, you can then just head to the 'Clip' Property (in the same location as we did in the first method), and just select 'None' from the dropdown there.
And that's it! Let us know if there's anything else, and we'd be happy to continue!
- Dorian
The two different approaches that I personally like to take for this are dependent on whether the desired result contains a uniform shape, or a non-uniform custom shape:
I've just created a short video to show you both, which you can watch here:
METHOD 1
In the first part, I perform clipping with a Uniform shape (in this case, a rectangle with rounded corners).
To achieve this, all you need to do is select the Element you want to clip, and in its Properties, find the 'Clip' Property.
From there, you can pick from a selection of shape types, many of which have a wide selection of sub-Properties that can give you a ton of granular control over the form of the shapes themselves.
What I really love about this solution is how procedural it is, and it makes it very easy to adjust, or change your mind at any time in a highly-controlled 'numerical' manner. (as in the video, how easily I switch from a 256px radius to a 64px radius)
METHOD 2
In the second part, I perform a clipping using a completely custom shape drawn directly in Studio.
It's worth noting that you don't necessarily have to draw the shape in Studio with the Path tool as I did in the video. You can bring in any shape from either importing an .svg file, or from copy-pasting in vectors from Figma, Illustrator, Affnity Designer, and many more. More information on this process can be found at 📘 Path Import Features.
Whether you import a shape, or whether you draw it yourself, the steps after to make the clipping happen are exactly the same:
All you need to do is use [Shift+Click] to multi-select the Path, and the Element you want to be clipped.
With both selected, if you then right-click on the Path, under the 'Path' category, you can then select 'Make clipping path', and it will create a Path-shaped mask on your Element.
If you ever want to remove this mask from the Element, you can then just head to the 'Clip' Property (in the same location as we did in the first method), and just select 'None' from the dropdown there.
And that's it! Let us know if there's anything else, and we'd be happy to continue!
- Dorian
Who is online
Users browsing this forum: No registered users and 5 guests