![]() ![]() If you expand the layers panel and look at the final result, it’s a lot of random little shapes. Now that I’ve got my border turned into a shape, holding Shift and clicking the wrench-along with the Subtract Boolean operation-carves it out as needed.įinally, select the top and bottom copy and use Union to combine them. When it was a border, that was simply a visual effect, one that couldn’t carve into the shape below it. This turns the outline into a shape- which can now be used with a Boolean operation. It’s no longer going to be editable the way it was before-you can still edit points on the shape-but not the individual rectangles and circles. To turn this into a single piece, choose Flatten on the toolbar. Remember, these are all separate pieces displaying as a wrench. Boolean operations in Sketch: Combining multiple images To fix this problem there are a couple of steps to follow. If you change the color to something like pink, that’s much more obvious. You can see the effect right away, but the problem with this is that the wrench on top has a border-it’s not actually cutting into the layer below. Then, switch the position from Center to Outside-you don’t want to cut into the wrench that you’re creating the border around. Choosing white is best in this case so we can preview the effect of cutting out the wrench below. To make sure I have the extra copy on the left selected, go to the Inspector and create a border. To carve a gap between the wrench on top and the wrench behind it, duplicate the image one more time. To make this look even better, rotate the duplicate back so it’s perpendicular to the first. Hold Shift locks this into 15-degree increments.Īt 45 degree, duplicate it with Command + D, and do the same thing in the other direction. Now that it looks more like a wrench, hold Command, position the cursor over the top right corner, and click and drag to rotate. Then drag it over the bottom here before using the Boolean operator Subtract once again. To create this, press O to go back to the oval tool, hold Shift, and drag to create a circle. However, the icon isn’t perfect yet-it’s still missing the hole at the bottom of the wrench. Now, if I press return or double click the wrench, all the shapes are live and ready to be moved and resized. At this point, the image is more clear but the proportions are off-and this is where Boolean operations in Sketch get really cool.īoolean operations in Sketch: Arranging icons and using Subtract ![]() By using the Union function, the 2 shapes get combined into one.Īfter returning to our top rectangle, hold Shift and click what’s becoming our wrench-but this time use the Subtract operation. Then, Boolean operations enter the mix from the top toolbar. Next, we’ll click the bottom of the handle, hold Shift, and click the circle. This is going to be what carves out the top of the wrench. After selecting the handle at the bottom, hold Option and drag it upward to create a duplicate. Boolean operations in Sketch: Combining and subtracting shapesĪt this point, I usually scroll up to give myself some workspace. Once the positioning is correct, it’s time to start combining and subtracting shapes. The red lines shown are smart guides to help show when everything is properly aligned. As you can see in the image above, I can now click and drag to position this circle at the top of our rounded rectangle. I’ve illustrated the long way for instruction purposes here.Īfter that, click and drag while holding Shift to get a perfect circle. Pro tip: Important Sketch shortcuts to use in this case are R for rectangle and O for oval. To hide the top of that shape with the top of our wrench, go to Insert > Shape > Choose oval. Boolean operations in Sketch: Get shapes lined up correctly The bottom matters most in this case, since the top is actually going to be hidden in next steps. Drag Radius to the right-it creates a rounded corner on the top and the bottom. To adjust this, go over to the Inspector on the right hand menu. That’s easy, but the problem is that the corners are sharp and it’s a bit blocky. Go to Insert > Choose shape > Rectangle, and click and drag to create a tall, skinny rectangle. Then we’ll start by creating a handle for our example image, a wrench. To get started, press Command + N to create a new document. In Sketch, the 4 operations are Union, Subtract, Intersect, and Difference.īoolean operations in Sketch: Start with a basic shape Boolean operations give you the power to combine shapes using a ton of different configurations. ![]()
0 Comments
Leave a Reply. |