Shapes, layers and editing

Concepts applied to the window garden and criteria for adapting it.

Use this material to consult the example’s decisions. Editable SVGs are in the course kit; stage images help compare the effect of each change.

Build an object from simple shapes

Start with the pot: a tapered body, top ellipse and dark rim band. In the example, the body spans x=407 to 645 at y=762 and narrows toward x=430 and 622 near y=929. A gentle curve closes the base. These are drawing coordinates, not dimensions of a physical pot.

In Inkscape, draw rectangles and ellipses with their dedicated tools. For a custom shape, use Bézier: clicks create straight segments; dragging while placing a node sets curve handles. Close the path by returning to its first node. Set a terracotta fill and no stroke paint when you want the color boundary alone to define the edge.

In another editor, look for the same functions: create shape, transform, fill and edit points. Do not convert every shape into a path unnecessarily: a parametric rectangle retains useful corner controls. Convert when you need geometry beyond those controls.

Draw leaves with few nodes and useful handles

A leaf can be described by two curved segments: one from base to tip and another from tip to base. In the diagram, squares mark segment endpoints; circles mark control points. The curve passes through endpoints but usually does not pass through controls.

In Inkscape, select the path with the Node tool. Move a node to change a structural point in the silhouette; move a handle to change the direction and reach of the nearby curve. A tip may have an intentional corner while its sides remain smooth. More nodes do not automatically make a leaf more natural: they can create hard-to-control ripples.

Compare the same shape as an outline and as a fill in the diagram. Then change only one handle in the practice SVG. Observe where the silhouette changes and whether the tip still reads clearly. For a smooth join, check alignment of the handles of the meeting segments; for a corner, preserve the break.

Why two handles can replace many points

A cubic Bézier combines four points: start P0, control P1, control P2 and end P3. Controls determine how the curve leaves its first endpoint and reaches the second. They are not points the line must pass through. This explains why dragging a handle away from the outline still changes the leaf.

The diagram’s first segment runs from P0=(180,420) to P3=(410,200), with P1=(130,280) and P2=(285,165). Screen coordinates increase downward, so a smaller Y moves upward. The first control above/left sends the curve out of its base in that direction; the final control above/left makes it approach the tip from above/left. The second segment returns to the base along the other side. There are two curves and two joining nodes, with independent handles at each join.

A calculation that explains handle influence

For t between 0 and 1, B(t)=(1−t)³P0 + 3(1−t)²tP1 + 3(1−t)t²P2 + t³P3. You do not need to program this expression to draw. It shows that a point on the curve combines all four controls with weights that change along the segment.

At t=0.5, the weights are 1/8, 3/8, 3/8 and 1/8. Applied to the diagram, they give B=(229.375,244.375). The simple midpoint of the endpoints would be (295,310), a different location. The leaf’s bulge appears because controls pull the trajectory away from a straight line. If only P1 moves upward by 20 units, the point at t=0.5 rises 7.5 units: 20 × 3/8. The influence is not a uniform translation of the entire leaf.

Compare edits by purpose

To narrow the leaf, bring handles closer to the line between endpoints; to widen one side, move that segment’s controls farther away. To lengthen the entire leaf, transform the object or move its tip, then reassess curvature. These operations answer different questions. Adding a node creates more local control, useful at a meaningful change of direction, but also more relationships to manage.

At a smooth join, incoming and outgoing handles need compatible directions; different lengths can still change curvature. At a corner, they can point in different directions. The diagram’s leaf tip is an intentional corner. Making every node smooth may erase the shape’s character, just as making every node a corner may produce unwanted breaks.

Use outline view to investigate geometry and the filled shape to judge silhouette. These provide complementary evidence: a mathematically smooth curve may be a characterless leaf, while a cornered tip may be exactly the intended result. The limit is visual and editorial, not a competition to use the fewest possible nodes.

Separate fill, stroke and transparency

Fill occupies a shape’s area; stroke follows its path. Leaves use green fill without a stroke; veins are open paths with no fill and a light 3-unit stroke. The can handle is an unfilled ellipse with a thick stroke.

In Fill and Stroke, check the separate tabs before changing color. An open path with a fill can show an implicitly closed region you did not intend. For a line, use no fill and choose stroke width and cap style. For a solid color shape, close the path and choose its fill.

When the image is reduced by half, a 3-unit vein becomes about 1.5 pixels wide. If it disappears, zooming into the editor does not fix the small output; increase relative thickness, simplify or remove the detail. Fill and stroke must work at viewing size.

Use order, groups and layers to control the scene

Objects drawn later appear above earlier ones. In the garden, the window sits behind the plant; stems sit behind leaves; the pot hides the stem’s lower end. This ordering suggests depth without requiring realistic perspective.

A layer organizes a broad stage or region; a group keeps related objects together. The final SVG has named layers: Background, Window, Table, Cast shadow, Stems, Leaves, Pot, Watering can and Light and details. Open Inkscape’s Layers and Objects panel to locate, hide or lock parts. Locking the background avoids selecting it while trying to move a leaf.

Grouping does not merge geometry. Enter a group to edit one part and leave it to transform the assembly. Uniting paths is a different operation and can remove shape independence. To move plant and pot together, also group their stems and associated details; check shadows and veins, which do not follow a leaf merely because they appear on top of it.

Contain detail with a clip or mask

The sun and landscape extend beyond the window arch in their original shapes. A clip uses the window outline to show only the inside region. The pot’s shadow is also clipped to its body. This lets you adjust landscape or shadow without redrawing the boundary for every version.

In Inkscape, place a copy of the clipping shape above the content, select both and use Object → Clip → Set. Keep another copy if you also need a visible window outline. A clip controls the boundary; a mask can also control gradual transparency. They are not interchangeable terms.

In Krita, a transparency mask on a paint layer uses white to show, black to hide and gray for partial visibility. Paint white to restore a hidden region. In any editor, check whether you are editing the content or the mask; painting on the wrong layer is a common reason a color seems not to appear.

Preserve the source and experiment in copies

Keep the editable SVG as your source and choose names that explain versions: garden-base.svg, garden-cool-palette.svg, garden-final.svg. “Final-final2” does not explain a change. The kit separates shape plan, flat colors and finish so that comparisons are explicit.

Before testing clipping, path unions or a major proportion change, save a copy. Inside the file, lock what you are not editing and name groups by content. You need not keep a layer for every click; organize by what you may want to move, recolor or hide together.

Exporting PNG does not replace saving the source. When a change works, record the decision it resolved in one sentence: “darkened leaves to separate them from the sky.” This helps learning and later editing; it is not a requirement to keep a history in the platform.

Transfer the concepts to raster painting

To paint the same idea in Krita, start with a square document at the output size or larger as needed. Separate sketch, broad colors and details into paint layers. Use a solid brush to establish masses before adding texture. A transparency mask helps hide edges without deleting the original painting.

You may also open SVG in a vector layer according to the editor’s features, but check shapes and clips. Importing only the PNG as a reference gives you a flattened image; it does not preserve separate pot and leaf objects. Painting over it can be a valid choice when you know what remains editable.

The transferable concept is separating decisions: shape, color, light and detail. The action changes: a handle adjusts a vector curve; a brush changes pixels. A tablet and pressure sensitivity can help brushwork, but they are not required to understand composition or edit the vector example with a mouse.

Ask AI for help with a bounded visual decision

A useful request describes intent, preserved parts and a review criterion: “Suggest three palettes for a calm plant-by-the-window scene; preserve contrast between leaves and sky; explain each color’s role.” This gives you alternatives to judge rather than a list of adjectives without application.

For code-based SVG edits, work on a copy and request a small change, such as recoloring the pot while preserving IDs, curves and layers. Reopen the file, compare geometry and check that no external images, fonts or scripts were added. Valid XML does not prove that the composition improved.

A generated image may help explore a direction, but it does not automatically explain layered editing. Distinguish visual reference, final raster and vector source. Do not send client work, faces or restricted assets to a service without understanding authorization and terms. You can practise a request on this course’s original example without personal data.

Diagnose selection, clipping and color at the right level

“I cannot select the leaf”: check locked layers, objects above it and whether you are inside the correct group. Use the object panel to choose by name. “The leaf became a strange polygon”: check the selected path, nodes and handles before adding points.

“My color does not appear”: check fill versus stroke, opacity, hidden layers and whether you edited the mask instead. “A detail disappeared”: it may be behind another object or outside a clip. Release the clip in a copy to investigate; do not delete its control shape without understanding its function.

“The export is cropped”: check whether you exported Page, Drawing or Selection. “The edge looks jagged”: inspect raster resolution and zoom; vectors also become pixels when displayed. Change one variable at a time and compare with the source before rebuilding the entire scene.

References

Sources checked 2026-09-26.

Abrir as checklists da trilha →