Harnessing Vector Awesomeness in Sketch
Vector shapes are Sketch’s flagship feature. Learn how to master them.
If you’ve opened this article, I’m assuming you have a basic understanding of both vectors and Bohemian Coding’s design app: Sketch.
I’m going to teach you some secrets of Sketch power users, including how to customize and combine basic shapes into your own illustrations, letterforms, or icons; how to address technical issues that can be totally bewildering even to professional designers; and how to leverage several tips and best practices for your workflow. We’ll start with a few fundamentals and work up to the more complex stuff.
How to Make a Vector Shape
So how do you create a vector shape? Sketch gives you a handful of ways—in fact, aside from imported images, everything created inside Sketch will be a vector shape!
Insert Shape
The easiest way to create a vector object is by inserting one of Sketch’s preset geometric shapes—such as a rectangle, circle(“oval”), or star. Some of these have special parameters such as how many points are on the star, or how round the rectangle’s corners are. The keyboard shortcuts “R” and “O” can dramatically speed up your process.
The Pencil Tool
If you have a Wacom tablet this freeform line drawing tool may be useful to you. It follows your cursor, then smooths out the line into a reasonably clean vector shape. In my 2 years with Sketch however, I’ve never had to use it!
Text Objects
You can turn text into vector shapes using “Sketch’s Convert Text to Outlines” function (⌘⇧O). Text objects in Sketch are kinda vector shapes. Although text is comprised of vector letters, they have have been wrapped up into an editable text object. Editing the text object allows you to type rather than edit the shape of each letter. For the many scenarios when you’ve finished editing the text and want to tweak the actual letterforms, this function allows you to convert the text object into a proper vector shape.
Lines & Borders
You can insert a straight line with the Line tool (keyboard shortcut “L”), or use the Pen or Vector tools for a more complex path. Lines operate in much the same way—they are just vector shapes that use a border instead of a fill color. It’s exactly the same as having a border on a rectangle or a circle, except that the shape isn’t “closed”—it has distinct beginning and end points. Borders offer a lot of flexibility, but sometimes you’ll need to customize its shape, or be able to scale it without the border remaining the same thickness. Sketch’s “Vectorize Stroke” function will turn any line or border into a proper vector shape.
The Vector Tool
If you’re looking for a bit more flexibility, the Vector tool gives you complete control over creating any shape. Select the tool (or hit V on your keyboard) and proceed to place vector points wherever you want on the canvas. Most of the time you’ll want to close the shape by clicking the first point you created. If you’re aiming to create a line rather than a filled-in shape however, simply hit the “Enter/Return” key when you’re finished.
Remember that these points will only snap to full-pixel positions if you’ve selected that option from the dropdown in the Inspector (see screenshot). If you’ve already created a shape with points at odd decimal positions, you can use Layer > Round to Nearest Pixel Edge from the menu bar to re-position every point on the shape to the nearest full-pixel value.
Editing a Shape
Oftentimes a basic rectangle or circle shape can be the best starting point for crafting a more complex shape. Select any shape and click “Edit” in the toolbar (or hit the “Enter/Return” key) to edit each of its vector points. With this level of control you can round just the top two corners of a rectangle, or convert a circle’s bottom point from a curve to a hard angle to make a pin on a map. If you haven’t already, take a moment to experiment with editing basic shapes in this way.
Combining Shapes
In order to create most icons, letterforms, or other designs, you will need to combine multiple shapes. The two common ways of doing this are by adding shapes together as a “Union” or by cutting one shape out from the other: “Subtract”.
Whenever you select multiple vector shapes you can access the “Union” and “Subtract” functions in Sketch’s toolbar or in the menu bar under Layer > Combine. There are two other boolean operations that you can use to combine shapes—“Intersect” and “Difference”—and while these can be useful from time to time, most scenarios only require a basic “Union” or “Subtract”.
The great part about how Sketch combines shapes is that each original shape is still available to you—they’ve become “sub-paths” on a master shape. To see a combined shape’s sub-paths, you can click the little “thread” arrow next to the master shape in the Layers List. Not only do sub-paths make editing the shape easier, but they bring up an important consideration:
Order Matters!
The order in which sub-paths are arranged will affect how they are combined. When you’ve only got two sub-paths it may not be an issue, but any more than two and you may need to give it some thought. It’s hard to specify an all-encompassing rule to abide by when you’re re-ordering sub-paths, but here are 2 things to consider.
- Go from big to small. Start with the big shapes, then stack the smaller shapes on top of that. This is particularly important for smaller shapes that are subtracted from a larger shape.
- Consider “how would I construct this in real life?” Imagine a white table as your canvas, pieces of colored paper for the Union/additive shapes, and pieces of white paper for the subtracted shapes. How would you order the layers if you were stacking them as paper shapes on top of each other?
Find an icon on your computer or phone and take a moment to recreate it in Sketch. Chances are it’s comprised of simple shapes combined together!
What I Wish Someone Had Told Me:
Sometimes when combining shapes you will get an odd result that can’t be fixed by re-ordering the sub-paths. One of the most common situations is combining shapes as a “Union” only to see the result look like a “Difference” operation (both shapes are visible but overlapping areas are subtracted).
It turns out that vector shapes—even closed ones—have beginning and end points and a direction. It’s as though your shape is a stencil and the computer needs to know where to start tracing and which direction to follow.
When you combine shapes that overlap while going different directions, the computer/Sketch may freak out! There are various reasons that the directions can be different, but the solution is always the same.
- First, remove the subpath from the shape by dragging it outside of the master layer in the Layers List, or by selecting the master shape and navigating to Layers > Paths > Split from the menu bar.
- Second, select the shape with a different direction and navigate to Layers > Paths > Reverse Order. This essentially switches the beginning point with the end point—reversing the direction.
- Combine it with the other shape(s) again. Voila!
It took me many many hours of frustration to figure this out. I hope I’ve spared you!
Flattening shapes
Being able to edit each sub-path in a greater shape offers you tremendous flexibility while working on your designs. As long as you’re working with a design in Sketch you can have this luxury, although as soon as you export your vector shape into another format like SVG or PDF, all of the sub-paths will be “flattened” into as few shapes as possible. Sketch also has a button to flatten a shape with multiple sub-paths at any time. Here’s how it works:
- Shapes whose edges intersect with those of another shape will be “flattened” into a single shape. Multiple sub-paths become one.
- Shapes whose edges never intersect with those of another shape will remain as “Union” or “Subtract” sub-paths. For example, the letter “p” will always be comprised of two sub-paths: one for the outside of the letter including the descender, and one for the inside circular shape (being subtracted from the former). The same is true for the letter “i”. When you try to flatten a shape like this, Sketch will warn you that there will still be multiple subpaths on the flattened version. That’s really a non-issue.
Ok, so why on earth would you Flatten a shape?
- When you have a couple sub-shapes that intersect, you may want to flatten them in order to make the whole shape as clean and continuous as possible. Whether that’s removing extraneous vector points or refining the bezier curves, it’s a good idea to tidy up your final vector shape.
- Before you export a shape as an SVG or PDF, flatten it to see what the final result of the shape will be after export. This may also give you an opportunity to delete a few extraneous vector points on your shape, which will reduce the SVG or PDF’s filesize.
- Any time you Rotate or Flip a vector shape in Sketch, you will have the opportunity to flatten it. This can be useful when you’ve applied Rotate or Flip to a shape but don’t want that transformation to also be applied to the styling (fill, border, shadows). For example, if you flip a shape horizontally then applied a shadow offset by 4px to the left, the flip transform would render that shadow as being 4px to the right. Flatten fixes this by giving you an identical shape without any transformations.
One thing to note is that any vector points that had a “border radius” (a rounded corner) will be flattened into two points with bezier curves. Border radius is not a part of every vector specification, although SVG supports it and will retain the same rounded points after export.
One last thing… a tip.
I strongly advise you to create a hidden duplicate of any combined shape before you flatten it. As soon as you flatten multiple sub-paths into one there’s no going back. I encourage you to do the same with lines or borders before you use Vectorize Stroke, and with text objects before you “Convert to Outlines”. Who knows what changes you might need to make in the future, so always: duplicate before you flatten/vectorize.
Now go forth and make some cool vector shapes!
Be the first to know when I publish new design articles and resources.
I just released Sketch Master — online training courses for professionals learning Sketch. You’ll learn tons of tricks and practical workflows, by designing real-world UI/UX and app icon projects.
