Free

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

Tips

Editing shapes in the Properties panel of Paint by Zaweba

Change a shape's fill, stroke, dashes, alignment and corners at any time in the Properties panel of Paint by Zaweba, and switch shapes with Shape Edit.

Editing shapes in the Properties panel of Paint by Zaweba

A shape takes seconds to draw. Getting it to look exactly right takes adjusting: the fill colour, the stroke weight, a dashed outline, the corner radius. In Paint by Zaweba shapes stay editable as vectors, so you can make those changes at any point, from the first minute to the last revision a client asks for. The Properties panel is where it happens.

Fills

A shape's fill can be solid, gradient or pattern. Solid is a single colour. Gradient uses any gradient from the shared gradient library, the same gradients the Gradient tool, text and Layer Art use. Pattern fills the shape with a tile from the Patterns library.

Switching between them is instant, so you can try a flat brand colour, a soft gradient and a texture on the same button and compare.

Strokes

The stroke is the outline. Set its colour and weight, and its alignment: inside the edge, centred on it, or outside it. Inside keeps the shape's outer size the same, which matters when it has to fit a grid. Outside wraps round the shape without covering its fill, good for outlines round icons. Centred straddles the edge.

Dashed strokes turn the outline into a dashed or dotted line, and custom dash patterns let you set the lengths of dashes and gaps yourself. Long dashes for a cut line on a coupon, small dots for a playful border, a dash-dot pattern for a technical look.

Corner radii

For rectangles, the Properties panel sets corner radii, including different radii for different corners. Change them at any time, so a design that started with sharp corners can be softened later without redrawing anything.

Shape Edit

Shape Edit switches to the shape you click. On a busy design with many shape layers, it saves hunting through the Layers panel: click the shape on the canvas and its properties are ready to edit.

A way to work

Rough out the layout first with simple shapes and placeholder colours. Once the arrangement is right, go through the shapes and set fills and strokes properly. Because everything stays editable, there is no penalty for leaving the styling until later.

Keep a consistent system. Use the same stroke weight and corner radius across related shapes, such as all the buttons in a set, so the design looks deliberate. If you change your mind, change every shape in the set.

Use stroke alignment to keep sizes exact. If a design has to fit a measured space, inside strokes stop outlines from pushing shapes over their bounds.

Shapes versus pixels

The big advantage of vector shapes over painted ones is that nothing is ever fixed. A shape can be resized without blurring, recoloured without repainting and restyled at any time. For any part of a design you might change, a shape is the better choice. For textured, hand-drawn or photographic elements, pixels are the right tool, and in Paint by Zaweba both sit happily in the same document.

Combined with Layer Art for shadows and glows, and the shared gradient library for colour, the Properties panel makes buttons, badges, banners and icons quick to build and easy to change when the brief does.