Getting started

VectorPaint shape practice: build a little house from rectangles and circles

Draw a house to practise rectangles, ellipses, selection, dimensions, stacking and proportions before moving to complex path editing.

English translation of the Chinese original, translated on . The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained.

Draw a house to practise rectangles, ellipses, selection, dimensions, stacking and proportions before moving to complex path editing.

Prepare an exercise with only six objects

Create a 600×600 px square canvas and name the work Cottage_Geometry_Practice. Use only one wall rectangle, one roof path, two windows, one door, and one sun. Limiting the object count makes the result of every selection and move easy to understand. Leave out textures, photos, and text for now, and consider decoration only after the basic silhouette is complete. The coordinates in this article are composition references; adjust them to the proportions of the canvas you see.

Draw the wall first to establish a size reference

Choose the rectangle in the shape and path tools and draw a wall approximately 300×240 in the lower half of the canvas, leaving roughly equal space on both sides. After creating it, return to the selection tool and select only the wall before moving or resizing it. Beginners who remain in the rectangle tool can accidentally draw another rectangle when trying to move the first one. Checking the selection boundary and confirming the target matters more than reaching a perfect position in one drag.

Distinguish a circle from an ellipse

Use the ellipse tool to draw a sun with a target width and height of about 80 each. Different dimensions produce an ellipse, which is still a valid vector shape. The tool's name does not mean it cannot draw a circle: a circle simply has equal width and height. For a regular circle, compare the dimensions or use a reference grid. Do not assume that gesture constraints work identically on every device. Place the sun at the upper right with a small gap between it and the roof.

Add the roof with a simple path

Choose the pen and click the roof's lower-left, top, and lower-right corners in order, then return to the starting point to close the path. Aim for a width of about 360 and a height of about 150, slightly wider than the wall to create eaves. Start with a solid fill and turn off any unnecessary stroke. If an unwanted segment appears, check the point order and closing position instead of adding random nodes to hide the problem. Continuous pen curves have a separate tutorial; here, practice only a straight-sided triangle.

Duplicate similar parts and check their stacking order

Create a window approximately 70×80 on the wall. Set its color and position before duplicating it and moving the copy to the other side. Make the two windows roughly symmetrical while leaving room for the door. If the wall hides a window, check object stacking order or its layer instead of creating another window because you cannot see it. Duplication creates another editable object; still check the current selection before moving it.

Use color to establish just three levels

Choose a mid-brightness wall color, a dark roof, and light windows so the subject stands apart from the background. You can limit the palette to warm white, dark blue, and orange-yellow, using the roof color for the door if needed. Judge the grayscale hierarchy first so the windows and wall are not too similar. Avoid a heavy stroke on every object. Silhouettes, empty space, and color shapes should have a clear visual hierarchy.

Which proportion should you adjust first when the structure looks awkward?

Temporarily make the cottage a single dark color, disregard the window and door colors, and examine only the overall wall-and-roof silhouette. A roof that is too narrow makes the house look as if it has no eaves; a wall that is too tall makes the design slender; a sun touching the roof may read as part of it. These are shape and spacing problems that shadows cannot solve. Change just one proportion at a time—for example, widen the roof slightly while leaving everything else in place—then check whether the result is clearer.

You can also check window placement with a simple relationship: compare the gap between the windows with the distances from each window to the left and right wall edges. The distances need not all match, but differences should be intentional. If the second window is a copy of the first, confirm that their sizes still match and that moving it did not accidentally resize it. The door and windows need not share one height. Placing the door closer to the bottom and the windows in the upper-middle wall usually makes the house structure easier to read in this exercise.

Finally, reduce the work to thumbnail size. If the door and windows merge into a blob, remove fine window-grid lines or reduce the decoration first. A recognizable overall silhouette matters more for this introductory geometry exercise than including every architectural detail.

Final checks and an editability review

Zoom out to approximately the final display size and confirm that the cottage remains recognizable and the door and windows are not crowded against the edges. Select the wall, windows, and sun separately to check that each can be adjusted independently. If you first turn the whole work into a PNG and import it again, you can select only the image; the original geometric object relationships are not restored automatically. Save the editable original and export a separate preview, leaving room to change colors and proportions next time.

Further exercise: turn one cottage into two compositions

  1. Keep an original copy, move the sun to the upper-left corner, and observe the balance between left and right. Restore its original position for comparison without also changing its color and size.

  2. Duplicate the windows to make three narrow windows while keeping their combined width roughly unchanged. Compare whether the two-window or three-window version is clearer at a small size.

  3. In another copy, remove all strokes and express the structure using color shapes alone. Check that adjacent objects still differ sufficiently in brightness.

Frequently asked questions

What if I cannot draw a perfect circle?

First check whether the width and height are equal, then check whether you accidentally stretched the shape with the selection tool. Use equal target dimensions or a grid reference. There is no need to add nodes and gradually reshape an ellipse into a circle.

Has an object disappeared if I cannot select it?

First check layer visibility, locking, and stacking order. An overlapping wall may hide a window, or you may have selected a group. Locate the object before adjusting it to avoid creating duplicate parts.

Why does the drawing not resemble a real building?

This exercise uses simplified shapes to represent a house; it does not require architectural detail. Check the proportions and placement of the wall, roof, door, and windows before deciding whether to add decoration. Details have a clear purpose once the silhouette is readable.

Read next

Sources and scope

This article is based on VectorPaint App Store description and the available feature entry points; Apple’s public release information Checked on October 22, 2026, for version 1.0.7, requiring iOS / iPadOS 17.0 or later. The interface may vary by device and version. Dimensions, colours and wording are exercise suggestions; confirm the requirements for your actual use.