Color, light and visual hierarchy

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.

Choose a palette by function

Start with functions rather than dozens of swatches: background, main subject, support and accent. In the garden, light paper (#F7EBD5) provides breathing room, dark green (#264F42) supports the leaves, terracotta (#CE7154) distinguishes the pot and muted blue (#527A86) separates the can. Sky and landscape use lighter greens; the sun adds a warm accent.

These values are choices for this example, not a compulsory harmony recipe. For a night version, you could darken the background, adjust leaf contrast and change the accent. Randomly changing every color makes improvement hard to identify; change one role at a time.

Save named swatches and reuse them for related shapes. Resolve large areas with flat colors first. Gradients, texture and highlights can follow when they help distinguish material or volume. If the subject only becomes visible after many effects, revisit its basic contrast with the background.

Check light and dark beyond hue

Hue distinguishes families such as green and orange; value concerns how light or dark something reads. Different colors can have similar luminance and become hard to separate when small or desaturated. The value study preserves garden geometry and replaces colors with grays calculated from luminance.

Compare leaf against sky, pot against table and handle against wall. Dark leaves remain dominant; lighter landscape greens stay behind them. If a part disappears, try changing lightness, size or spacing. Not every edge needs maximum contrast: supporting areas can remain quiet.

A grayscale comparison is only a partial diagnosis. It does not simulate every color-vision difference, display or lighting condition. For important information, combine color with shape, position or text. Here, the watering can’s identity also comes from its spout and handle.

Suggest volume with coherent shadows and highlights

The pot has a darker band on its right and two light reflections on its left. Its cast shadow sits below and to the right. These cues suggest dominant light from the front/left even in a flat, stylized scene. The window sun participates in composition; it was not used to physically calculate every shadow.

The pot band is clipped to the body at opacity 0.27, keeping it inside the shape. A short light stripe on the watering can suggests a curved surface. Compare with the flat-color version: the silhouette stays the same, but these marks help distinguish surfaces.

Before adding many effects, choose a light direction and check for contradictory cues. In a deliberately graphic approach, you may depart from realism while keeping the image readable. A gradient will not fix a poor silhouette; an overly dark shadow can look like a separate object pasted onto the pot.

Understand object and group opacity

Opacity reduces the visible contribution of an object or assembly. Two overlapping translucent patches may look stronger at the intersection. If a shadow made from several pieces should have a uniform strength, you may need to group opaque pieces and reduce the group’s opacity.

In the garden, the pot’s cast shadow is one ellipse at opacity 0.55; its internal band uses 0.27. Changing these values adjusts the mark’s strength without replacing its color. Lowering opacity on the entire plant instead lets the background show through leaves and stems, changing the intended effect.

Distinguish opacity from blending mode: Multiply changes the color-combination operation and is not equivalent to reducing opacity. Start with normal blending and flat colors; use another mode when you can describe the desired effect and check it over the destination background.

Why transparency changes when you group

Consider two partially overlapping shapes of the same color over a transparent background. With normal source-over compositing, each shape at alpha 0.5 lets some of the backdrop through. At the intersection, the second shape sits over an area already containing the first shape’s contribution. Combined alpha is 0.5 + 0.5 × (1−0.5) = 0.75. Outside the intersection it remains 0.5. This is why overlap can look stronger.

Now make both shapes opaque, group them and apply opacity 0.5 to the group result. Internal composition is resolved first; the assembly receives opacity afterward. In the simple case of two same-colored shapes, their union has uniform strength, including the intersection. This differs from giving each object opacity 0.5. The W3C specification distinguishes compositing, blending and groups; painting interfaces may additionally offer pass-through or isolated groups, so check your editor’s behavior.

Applying this to the garden

The pot’s cast shadow is one ellipse to avoid seams between patches. If you decide to build it from two ellipses, test two versions: individual opacity and group opacity. Compare their intersection over the light table. You need not change color to investigate the difference; keep color, position and size fixed.

The pot’s internal shadow solves a different problem: its shape extends beyond the visible region and a clip limits where it appears. Clipping answers “where”; opacity answers “with what contribution.” They can be used together. A gradual mask adds spatial variation in visibility, useful for a soft transition but unnecessary for every edge.

Separate drawing problems from compositing problems

If a dark band appears only where two shadows intersect, investigate alpha and grouping. If it appears outside the pot, investigate clipping. If the shadow is uniform but looks like a sticker, investigate shape, placement and relation to light. If it changes when moved over another background, remember that translucency depends on what is behind it.

The numbers above describe alpha, not a promise of identical final color in every application. Color space, blending mode, antialiased edges and export can affect pixels. Also compare the PNG on its destination background. Here, the opaque background lives inside the SVG; a transparent version needs another check on the page where it will appear.

Do not apply group opacity merely for convenience. If pot, leaves and shadows share that group, they may all become translucent. Organize assemblies around the decision you need to control and keep a copy before changing a complex hierarchy.

Add details that survive the viewing size

Veins explain leaf direction, the pot band suggests volume and a fallen leaf occupies a small foreground area. Each detail has a job. Adding texture across every surface would introduce another visual language and might compete with the main shape.

Compare finished and flat versions at large size, then at roughly 300 pixels wide. If veins disappear, the plant should still be recognizable. If the pot merges with the background, resolve mass and contrast before adding tiny marks. Detail should follow hierarchy: subject, supporting objects and background do not need equal attention.

Keep details on a separate layer while deciding. Hiding that layer gives a quick, reversible comparison. Before delivery, check whether a loose detail stayed aligned after its base shape moved: veins and highlights do not automatically follow objects in another layer.

References

Sources checked 2026-09-26.

Abrir as checklists da trilha →