Free

Free coded apps to suit all. No sign up, no email, usable offline, updates when I can, feedback welcome. Send feedback

How-to

How to draw vector shapes and combine them

Draw shapes with the Shape and Pen tools in Paint by Zaweba, then join or cut them with Unite, Subtract Front, Intersect and Exclude Overlapping.

How to draw vector shapes and combine them

Vector shapes are drawn in Paint by Zaweba with the Shape tools and the Pen tools, and combined with the boolean commands on the Vector menu: Unite, Subtract Front, Intersect and Exclude Overlapping Shapes. Each shape is its own layer with an editable outline, so you can resize it, recolour it or change its corners without any loss of sharpness.

Building a logo, an icon or a simple illustration this way is quicker than drawing every outline by hand. You put together simple pieces, such as circles, rectangles and stars, and then merge or cut them into the final form.

The shapes you can draw

The Shape tool covers a rectangle with separate radii for each corner, an ellipse, a triangle, a line, a banner, a gear, a cross, a ring and more. While you drag, the width and height show live, so you can hit an exact size. The Line tool has a weight and arrowheads at either end, which is handy for diagrams.

There are smart shapes as well, among them a cloud, crescent, teardrop, pie, trapezoid, double star, callouts, puzzle piece and a cog with holes. The Custom Shape tool keeps a library, six shapes built in to start, and Save as Custom Shape adds anything you make, so a logo mark you use often is always one click away.

For anything irregular, the Pen tools draw paths point by point with curves between them. Shapes and pen paths sit together happily on the same artboard.

Combining shapes with booleans

Select two or more shape layers, or the path components inside one layer, or a shape and the one below it. Then choose a command from the Vector menu. Unite merges them into one outline. Subtract Front cuts the top shape out of the one beneath, which is how you punch a hole in a ring or bite a crescent out of a circle. Intersect keeps only the overlapping area. Exclude Overlapping Shapes keeps everything except the overlap.

Merge Shape Components then tidies the result into a single clean path. Do that once you are sure, because before merging you can still move the parts around and the boolean result updates.

A small example: draw a circle, then a smaller circle over its upper right edge, select both and use Subtract Front. You now have a crescent moon. Add a double star from the smart shapes, and Unite it with a rectangle to make a badge. Simple pieces get you a long way.

Lining everything up

Align and Distribute line up edges and centres and even out the spacing between shapes. They can work to the selection, to the artboard or to a key object you choose, which stays still while the others move to it. Use the artboard option to centre a logo exactly, and the key object option when one shape is already where you want it.

Getting clean results

Keep a copy of the separate pieces before you merge. Duplicate the layers, hide the copies and merge the visible ones; if the client asks for a slightly bigger hole later, you still have the parts.

Snap shapes to whole pixel sizes for icons that will be shown small, so their edges stay crisp. Give shapes fills and strokes from the shared gradients and colours rather than painting over them, so they remain vector.

When the design is done, File > Export can write the shapes to SVG for the web or a cutter. Paint by Zaweba is free and offline, and it mixes these vector layers with ordinary pixel layers, so you can put a sharp vector logo on top of a photo in the same document.