Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:42 minutes
Going beyond the basics with invision studio 400x277
  • Overview
  • Transcript

2.2 Boolean Operations

Boolean operations are methods for combining shapes and are common in many design applications. Studio is a vector editing application, so you can draw custom shapes by hand, but you can also create them by using boolean operations to combine other shapes.

2.2 Boolean Operations

Boolean operations are basically methods for combining shapes. In Studio, you can draw custom shapes by hand because it is a vector editing application. But you can also create those by combining simpler shapes. So let's see what we can do with these. First of all, we have four Boolean operation available in studio. Those are applicable when you have one or more shapes selected. You can find them on the top toolbar here. We have the union, subtract, intersect and exclude. So let's go through each one of them and see what they're all about. First is union. Now a union will basically merge two shapes together. To give you an example, I have two very basic shapes here, a rectangle and a triangle on Point A, and I want to get to Point B where I have an arrow pointing right. Well, to create this from these two shapes, we'll do the following. First, we'll rotate this triangle. Then we'll select both. We'll align them vertically. Then we'll move this rectangle so it touches the triangle here. So actually, zoom in a little bit closer like that, and then I'll select the both shapes and I'm gonna hit Union. So that's gonna create a single shape, which I then can edit by giving it a color, a border, if I want, a shadow, and so on. So it's that easy, going from those two random shapes to this more complex one. And this is actually much faster to do than drawing them by hand. Next up we have subtract. So again, I prepared an example here. We have kind of a semi-circle, a full circle, and two smaller circles, and we want to get this smiley face icon. So to do that, I'm gonna take this semicircle and I'm gonna position it 15 pixels from the bottom, and I'm gonna take the eyes, I'm gonna position them 30 pixels from the top. And I'm also gonna align them with the edges, Of the semicircle, the mouth. I'm just gonna push them in by 5 pixels each. And then I'm gonna select all of these, and I'm gonna make sure that my main oval, or the actual face, is the layer on the bottom. Because subtract will basically cut out any layer that's on top from the layer on the bottom, okay? So I'm gonna select all of this. I'm gonna hit subtract. And that's gonna cut away, Those smaller elements, like the eyes and the mouth, from the bigger element, which was on the bottom, therefore, creating this simple smiley icon. So that's subtract. Moving on, we have intersect. Now when combining shapes with intersect, only the portions that intersect from both shapes will be preserved, the rest will be discarded. So in my example, I have a series of concentrical circles and a simple square. And that square is exactly half the width of my biggest circle here. So I'm gonna take it, I'm gonna position it exactly like this, so that the bottom left corner is right in the middle of my circles. I'm gonna select both, and I'm gonna hit intersect. And that will allow me to only get the parts of the two shapes that intersect or that overlap. Therefore, creating this WI-FI icon. Do a quick rotate, and we have an icon. So that was intersect. The final boolean operation is called exclude. So exclude is the exact opposite of intersect. It's gonna keep only the elements that don't overlap from the shapes. So starting with these three basic shapes, and by using the exclude boolean operation, I'm gonna create this ribbon icon. So here's how you do that. First, you bring these two icons together, make sure they are properly centered. And then, what parts of these don't overlap? Well, it's this red ring. So I can achieve the exact same effect with subtract, but also with exclude. So I'm gonna hit this and now I have a perfect doughnut. For this bit, let's start by aligning it with our doughnut. And I'm gonna zoom in here and I'm gonna create another rectangle that's 25 pixels in width. So exactly half the width of my main blue rectangle. This is just the guide. So now I'm gonna double-click to enter Vector editing mode. And I'm gonna hover, with my mouse, on the line here to add an extra point. And I'm gonna add it exactly in the middle. So one here, and one here at the bottom. And with this selected, I can move it so that it matches with the one on the top. Okay, now I can delete my guide and I can go back in, I can select this, I can nudge it down 10 pixels and also make it rounded. And I'm gonna select this one, nudge it up, one, two, three, so 30 pixels. And, I'm gonna keep it as a straight corner. So, now let's zoom out. I'm gonna move this up just like that. And I'm gonna select both shapes, and i'm also going to use exclude because exclude keeps the items that don't overlap. And in our case, nothing here overlaps. So, exclude and we now have a single shape. If some shapes were to overlap, like for example this, I would get this result. Obviously, not what we want. And it's that easy, you saw just by using basic shapes, how to create some more complex ones using boolean operations. Now let's say that you want to take the icons you created in this lesson or other elements and reuse them in your document or even share them with your team. Well, that's something you can easily do with components and we'll cover it in the next lesson.

Back to the top