Sketch’s “boolean operations” allow us to create complex paths by combining existing shapes. Let’s learn how to make the most of them by designing an icon in this screencast tutorial.
Watch Screencast
What Are Boolean Operations?
“Boolean”, in terms of computer programming, is a data type which can be either “true” or “false”. In terms of graphics applications like Sketch, we use “boolean” to describe how shapes are combined, using values such as “and”, “or”, “not” etc.
You’ll sometimes hear boolean operations referred to as “Pathfinder” tools, and the options available are:
- Union: Where the result is the sum of both paths’ areas.
- Subtract: Where the area of the top path is removed from the one underneath.
- Intersect: Which leaves the area where the original shapes overlap.
- Difference: Effectively the opposite of “intersect”, leaving the parts where the original paths don’t overlap.
Using Boolean Operations
Creating complex shapes is something you’ll inevitably come across in icon design, so let’s take a look at how boolean tools can help us.
For example, in trying to recreate this anchor icon, we might begin with two circle shapes, the uppermost of which we’ll subtract from the lower.
After some more subtraction, we’ll add some triangles to the end of our anchor’s base, using the union operation to combine all three shapes into one.
Editing
You may have heard the term “non-destructive” design, which refers to a way of working in graphics applications which doesn’t destroy vital information as you go along. Here, for example, you might think we’d have a problem if we wanted to make our triangles larger, but thanks to Sketch’s non-destructive techniques we haven’t burned our bridges.
Each object within this Combined Shape is still accessible as its own layer, so isolating and editing the triangles is no problem:
Ultimately, when your shapes are all created, combined, subtracted, intersected, whatever you need to do, you can click Flatten to remove isolating capabilities. Much like Adobe Illustrator’s Expand option, this will leave you with single complex paths, which might be more appropriate for distributing your icon.
Conclusion
Sketch’s four boolean operations allow us to build complex paths by combining shapes in different ways. As we demonstrated, they’re very useful for icon design. Use them today!
Useful Links
- Sketch boolean operation docs
- Quick Tip: How to Use Sketch’s Updated Symbols
- 2 Quick Methods for Creating Pie Charts in Sketch
