Skip to content
Browse the knowledge base

Rule

rules://63-trees-and-foliage

Trees and foliage

A tree drawn leaf by leaf becomes noise, and a tree shaded with one smooth radial gradient becomes a pillow with a dark ring. Both read as "generated". Real foliage is a few lit volumes with ragged edges and quiet interiors, and conifers, palms and background trees each obey a different recipe. This file covers the crown, trunk and tree types; ground cover and rocks are rules://65-ground-rocks-grass, leaves in the wind rules://45-secondary-motion, falling leaves rules://82-particles-and-weather.

On this page

Rules

#

Shape and light

  1. Order: silhouette → light → detail. The silhouette must read as a tree when filled flat black. Light must show volume with the fewest colours. Detail comes last and only on borders.
  2. A crown is a handful of spheres glued together, not thousands of leaves. Treat the mass as one volume: light cluster on the upper left, core shadow band, reflected light along the bottom edge, then cut the silhouette with notches. Squint: you should see big light and shadow masses.
  3. No pillow shading: no concentric rings, no dark outline ring, no smooth dome gradient. Shade each bundle once (rim, body, shade). Where bundles meet, the contrast between neighbours replaces outlines (Tsugumo's tree: where one sphere's shadow side ends, the next one's lit side begins).
  4. Nearly half of the crown gradient is the light green, so the eye has resting areas. Highlights are 8–10 blob-shaped patches 3–6 px wide on the upper half, never a smooth fade. The dark rim is thick on the lower right and thin on the lit side; the darkest entry sits only along the bottom edge.
  5. Warm light, cold shadow. The ramp travels about 165° of hue from violet-blue shadow to yellow-green highlight (measured: #181425 #262b44 #193c3e #265c42 #3e8948 #63c74d #a5de5f). A working crown uses the last 4–5. Shadows are dark blue-green or purple-green, never yellow (rules://20-color-for-pixel-art).
  6. Edges: ragged 1–3 px notches, never a smooth ellipse. Detail the borders, keep the interior clean, no orphan pixels, one leaf pattern for the whole tree, and repeated arrangements instead of random ones. Too much variation is noise.
  7. Backlit foliage glows: saturation 80–95, hue 70–85° yellow-green, value 65–90, more saturated than the same leaf lit from the front. Front-lit waxy leaves are lighter and less saturated, with 1-px glints.
  8. Gaps in the canopy show sky slightly darker than the open sky (fine twigs cross the gap): 1–3 px notches one value step down, sizes 1×1, 2×1, 2×2, rarely 3×3, never in a regular pattern. Dense summer crowns have few gaps, early spring crowns many.

Modular crowns

  1. Build one bundle (a round leaf cluster) and stack copies as light / mid / dark by shifting every colour one notch up or down the shared ramp. Light goes on top-left, dark bottom-right. Each bundle: ball-like outline, 4–5 colours, leaf clusters equal in shape, size and spacing. One odd cluster reveals the repetition; if the stack fails, redesign the bundle.
  2. Pick one leaf unit per tree: 2×2 squares that touch but do not overlap, oriented trapezoid leaves (up at the crown's top, rotating downward), or circles. Do not mix.

Tree types

  1. Deciduous: bundles on a trunk, ragged lower edge, a few sky gaps. Trunk is a cylinder with vertical bark striping (widest stripe in the centre), a root flare, cracks and a knot placed by hand. Shade the trunk light/dark first, cracks second, light points last.
  2. Conifer: not repeatable bundles; every tier is unique. Stick guide → tiers top to bottom (upper tiers overlap lower ones, so start at the top) → one fill and one edge colour → mirror the side branches → shade as light / medium / dark groups. Each tier casts a shadow on the one below. Trees from gradient-filled cones look like shiny paper. Conifers read as austere or dangerous, deciduous crowns as open.
  3. Palm: a leaning, slightly curved trunk with ring marks every 2–3 rows, tapering at the top; 5–7 fronds radiating from one point as arcs that rise then droop, 2–3 px thick with a light top edge, a ragged underside; 1–2 dark px of coconuts at the crown; fronds overlap the trunk at the top.

Distance, stands, tiles

  1. Background trees are blobs: a dark blob with a lighter highlight reads as a tree at any distance. Leaf detail only on foreground trees; the farthest trees are one or two light blue-green entries (rules://60-skies-and-atmosphere 14–19). In a stand, draw three foreground trees in full and suggest the forest with a flat two-value mass behind: no individual trunks. One unusual tree in a regular forest is the focal point.
  2. In tile maps trees are multi-tile objects (16×16 pieces). Author extra tiles holding parts of two trees so stands pack without gaps; round symmetric trees stagger into a dense forest, asymmetric ones mark points of interest, colour swaps give variety. Shift tree-line tiles so no tree is cut at a seam.
  3. Cast shadow: short, one side (down-right for upper-left light), baked into the sprite when it fits the frame, a separate shadow tile otherwise.
  4. Wind (rules://45-secondary-motion): waving = each leaf ball up-right 1 px, down 1 px, left 1 px, back, in sequence along the wind, 0.2 s per frame; rustling = 4 frames, each leaf in 2–4 positions.

By size

#
Canvas Deciduous Conifer Notes
8 px 6×5 blob + 2×3 trunk, 2 tones each 5×8 triangle, 2 tones (derived) no notches
16 px canopy ≈12 wide, 3 tones, trunk 2–4 px, 1-px base shadow 3 tiers, 4 tones no sky gaps
32 px 5 tones, notches, 1–2 sky gaps, trunk 6 px with 2 cracks 4 tiers, hems, tier shadows bundle ≈ 12 px
64 px 3–5 bundles per crown, 4–5 colours each, one leaf unit unique branches per tier crowns 40–48 px wide

Templates

#

Three bundles stacked light (front, top-left) / mid / dark (behind, right): each bundle is rim + body + shade with a notched edge. Use as a bush, or stack more for a crown.

trees-canopy-stack-30 · 24×19
  • H leaf-highlight
  • L leaf-light
  • M leaf-mid
  • D leaf-dark
  • X leaf-deep
Grid source
H = leaf-highlight #a5de5f
L = leaf-light     #63c74d
M = leaf-mid       #3e8948
D = leaf-dark      #265c42
X = leaf-deep      #193c3e
---
..........HHLL..........
........HHHHHLL.........
.......HHHHHLLLL........
......HHHHHHLLLLL.......
.....HHHHHHLLLLLLM......
.....LHHHLLLLLLLLMD.....
...LLLLLLLLLLLLLLMDDDD..
..LLLLLLLLLLLLLLMMDDDD..
.LLLLLLLLLLLLLLMMMDDDD..
.LLLLLLLLLLLLLMMMMDDDDD.
.LLLLMLLLLLLLMMMMMDDDDXX
.LLMMMMLLLMMMMMMMMMDDDXX
MMMMMMMMMMMMMMMMMMDDDXX.
MMMMMMMMMMMMMMMMMMDDXX..
MMMMMMMMMMMMMMMMMDDXXX..
.MMMMMMMMMMMMMMMDDDXXX..
..MMMMDDMMMMMMMDDDXX....
...DDDDDDMMMMDDDDD......
.....DD...DDDDDDD.......

16 px deciduous tree: 12-wide crown, 3 tones, trunk, 1-px base shadow.

trees-deciduous-16 · 16×18
  • L leaf-light
  • M leaf-mid
  • D leaf-dark
  • T trunk-lit
  • V trunk-shade
  • g ground-shadow
Grid source
L = leaf-light     #63c74d
M = leaf-mid       #3e8948
D = leaf-dark      #265c42
T = trunk-lit      #b57a4a
V = trunk-shade    #5e3a2a
g = ground-shadow  #1f4e3a
---
.....LLLMM......
...LLLMMMMMD....
..LLLLMMMMMMD...
..LLLMMMMMMDD...
.LLLMMMMMMMDD...
.LLMMMMMMMDDD...
.MMMMMMMMDDDD...
.MMMMMMDDDDDD...
..MMMDDDDDDDD...
....DDDDDDD.....
.......TV.......
.......TV.......
.......TV.......
.......TV.......
.......TV.......
......TTVV......
...gggggggggg...
.....gggggg.....

32 px deciduous tree: five leaf tones, ragged lower edge, trunk stripes with cracks, root flare and ground shadow.

trees-deciduous-32 · 32×40
  • H leaf-highlight
  • L leaf-light
  • M leaf-mid
  • D leaf-dark
  • X leaf-deep
  • T trunk-lit
  • U trunk-mid
  • V trunk-shade
  • W trunk-crack
  • g ground-shadow
Grid source
H = leaf-highlight #a5de5f
L = leaf-light     #63c74d
M = leaf-mid       #3e8948
D = leaf-dark      #265c42
X = leaf-deep      #193c3e
T = trunk-lit      #b57a4a
U = trunk-mid      #8a5a3a
V = trunk-shade    #5e3a2a
W = trunk-crack    #3d2a24
g = ground-shadow  #1f4e3a
---
................................
..............LLMM..............
...........LLLLLLMMMM...........
..........LLLLLLLMMMMM..........
.........LLLLLLLLMMMMMD.........
........HHHHLLLLMMMMMMDD........
.......HHHHLLLMMMMMMMMDDD.......
......HHHHHLLLMMMMMMMDDDD.......
......HHHHLLLLMMMMMMMDDDD.......
......LLLLLLLMMMMMMMDDMMDD......
.....LLLLLLLMMMDMMMLLLLLMMM.....
....LLLLLLMMMMDDMMLLLLLLMMMM....
....LLMMMMMMMDDDLMMMLLLMMMMMD...
..LLLLLMMMMMDDDLLMMMMDLMMMMMD...
..LLLLLLDDDDDDLLLMMMMDDMMMMDD...
...LLLMMMLLLLLLLMMMMMDDMMMDDDD..
.MMMMMMMLLLLLLLMMMMMMDDDMMDDDDX.
.MMMMMMMLLLLLLMMMMMMMMMDDDDDDXX.
..MMMMMMMLLLMMMMMMMMMMMDDDXDX...
...MMMMMMMMMMMMMMMMMMMDDDDXXXX..
...DDDDMMMMMMMMMMMMMMDDDDDXXXX..
...DDDDDMMMMMMMMMMMMDDDDDXXX....
....DDDDMMMMMMMDDDDDDDDDXXXX....
.......DDMMMDDDDDDDDDDDXXXXX....
........DDDDDDDDDDDDDXXXXXX.....
.........DDDDTTUUVVXXXXXXXX.....
..........DDDTTUUVVXXXXXXXX.....
............TTTUUVVXXXXXXX......
.............TTWUVV.............
.............TTWUVV.............
.............TTUUVV.............
.............TTUUWV.............
.............TTUUWV.............
.............TTUUVV.............
.............TTUUVV.............
..........ggTTTUUUVVgg..........
.....gggggggTTTUUUVVggggggg.....
....ggggggggTTTUUUVVgggggggg....
......gggggggggggggggggggg......
............gggggggg............

16 px conifer: three tiers, each with a dark underside.

trees-pine-16 · 13×16
  • H leaf-highlight
  • L leaf-light
  • M leaf-mid
  • D leaf-dark
  • X leaf-deep
  • U trunk-mid
  • V trunk-shade
Grid source
H = leaf-highlight #a5de5f
L = leaf-light     #63c74d
M = leaf-mid       #3e8948
D = leaf-dark      #265c42
X = leaf-deep      #193c3e
U = trunk-mid      #8a5a3a
V = trunk-shade    #5e3a2a
---
......H......
.....LMD.....
....LLMMD....
...LLLMMDD...
......D......
.....LMD.....
....LLMMD....
...LLLMMDD...
..LLLLMMMDD..
......D......
.....LMD.....
....LLMMD....
...LLLMMDD...
.LLLLLMMDXXX.
.....UUV.....
.....UUV.....

32 px conifer: four tiers, tier shadows, ragged hems, trunk and ground shadow.

trees-pine-32 · 27×33
  • H leaf-highlight
  • L leaf-light
  • M leaf-mid
  • D leaf-dark
  • X leaf-deep
  • U trunk-mid
  • V trunk-shade
  • g ground-shadow
Grid source
H = leaf-highlight #a5de5f
L = leaf-light     #63c74d
M = leaf-mid       #3e8948
D = leaf-dark      #265c42
X = leaf-deep      #193c3e
U = trunk-mid      #8a5a3a
V = trunk-shade    #5e3a2a
g = ground-shadow  #1f4e3a
---
.............H.............
............LMD............
...........LLMD............
...........LLMDD...........
..........LLMMDDD..........
.........LLLMMDDD..........
........MMMDDDXXXXX........
...........MMDDD...........
..........LLMMDD...........
..........LLMMDDD..........
.........LLLMMDDDD.........
........LLLLMMDDDD.........
........LLLLMMDDDDDD.......
......MMMMDDDDDXXXXXXX.....
..........MMMDDDD..........
.........LLLMMDDDD.........
........LLLLMMDDDD.........
........LLLLMMDDDDDD.......
......LLLLLMMMDDDDDDD......
.....LLLLLLMMMDDDDDDDD.....
....MMMMMDDDDDDXXXXXXXXX...
.........MMMMDDDDD.........
........LLLLMMDDDDD........
.......LLLLMMMDDDDDD.......
......LLLLLMMMDDDDDD.......
.....LLLLLLMMMDDDDDDDD.....
...LLLLLLLMMMMDDDDDDDDD....
..MMMMMMDDDDDDDXXXXXXXXXXX.
............UUV............
............UUV............
............UUV............
.......ggggggggggggggg.....
.........ggggggggggg.......

Palm: curved ringed trunk, five drooping fronds and coconuts, ground shadow.

trees-palm-32 · 29×31
  • L leaf-light
  • M leaf-mid
  • D leaf-dark
  • T trunk-lit
  • U trunk-mid
  • V trunk-shade
  • W trunk-crack
  • g ground-shadow
Grid source
L = leaf-light     #63c74d
M = leaf-mid       #3e8948
D = leaf-dark      #265c42
T = trunk-lit      #b57a4a
U = trunk-mid      #8a5a3a
V = trunk-shade    #5e3a2a
W = trunk-crack    #3d2a24
g = ground-shadow  #1f4e3a
---
.............................
.............................
.............LLL.............
............LMMML............
......LLLLL..MMM..LLLL.......
.....LLMMMMLLMMMLLMMMMLL.....
....LLMMMMMMMLMLMMMMMMMLL....
....LMMMDMDMMMMMMMDMDMMML....
...LLMMMMMMMMMMMMMMMMMMMLL...
..LLMMD.D.DMMWTWVMD.D.DMMLL..
.LLMM........MWWW.......MMLL.
.LM...........TUV.........ML.
LL...........TUV...........LL
LM...........UWW...........ML
M............TUV............M
.............TUV.............
.............UWW.............
............TUV..............
............TUV..............
............UWW..............
............TUV..............
............TUV..............
............UWW..............
...........TUV...............
...........TUV...............
...........UWW...............
...........TUUV..............
...........TUUV..............
...........UWWW..............
......ggggggggggggg..........
........ggggggggg............

Top-down (3/4 view) tree: dark lower right, shadow cast to the lower right, trunk peeking under the crown.

trees-topdown-24 · 24×24
  • H leaf-highlight
  • L leaf-light
  • M leaf-mid
  • D leaf-dark
  • X leaf-deep
  • U trunk-mid
  • V trunk-shade
  • g ground-shadow
Grid source
H = leaf-highlight #a5de5f
L = leaf-light     #63c74d
M = leaf-mid       #3e8948
D = leaf-dark      #265c42
X = leaf-deep      #193c3e
U = trunk-mid      #8a5a3a
V = trunk-shade    #5e3a2a
g = ground-shadow  #1f4e3a
---
........................
.........LLMM...........
.......HLLLLMMM.........
.....HHHHLLLMMMMD.......
....HHHHLLLMMMMMDD......
....HHHLLLMMMMMMDD......
...LLLLLLLMMDMMLLMM.....
..LLLLLLLMMMDMMDLMMMD...
..LLLLLMMMMDMMMDDMMMD...
.LLLMMMMMMDDMMMDDMMMDD..
.MLLMMMMDDDMMMMMDDMDDD..
.MMMMMLDDMMMMMMMDDDDDD..
.MMMMMMMMMMMMMMDDDDXDD..
..MMMMMMMMMMMMDDDDXXX...
...DMMMMMMDDDDDDDXXXX...
....DDDDDDDDDDDDXXXXX...
.....DDDDDDDDDDXXXX.....
......DDDDDXXXXXXXXgg...
......ggXXXXXXXXXXXgggg.
.....gggggUUVXXXXggggggg
.....gggggUUVggggggggggg
......ggggUUVgggggggggg.
.........ggggggggggg....
........................

Procedure

#
  1. sprite_info; pick the projection (side, top-down, iso), size and light side. Palette: a 4–5 step leaf ramp with hue travel (palette op ramp), a trunk ramp of 3, and a ground-shadow entry.
  2. Layers: shadow, trunk, crown. Crown goes above the trunk so branches read as inside it.
  3. Silhouette: draw a bundle or the crown with draw op ellipse/polyline in the mid green. Check the black-fill read with look op preview.
  4. Light: add the upper-left rim and highlight patches (rule 4) with draw op pixels, then the shade band, then the darkest entry on the bottom edge only. Use recolor op shade for the second and third bundle copies.
  5. Notches along the edge, sky gaps, one leaf pattern on the borders (rules 6, 8). Trunk: stripes, cracks, flare.
  6. Conifers and palms: follow rules 12 and 13, draw tiers and fronds top to bottom.
  7. look op preview and ascii; recolor op desaturate on a copy to check value order; validate for strays. For stands, tile the tree in look at 3× and check the seam.

Mistakes

#
Symptom Cause Fix
Round ball with concentric rings Pillow shading Bundles with rim / body / shade; light patches as blobs
Crown is noise Every leaf drawn One leaf pattern, borders detailed, interior flat
Conifer looks like shiny paper Gradient fill on a cone Flat tiers, tier shadows, ragged hems
Every tree identical One sprite repeated Odd counts, colour swaps, one unique focal tree
Trunk is a straight pole No flare, no striping Root flare, widest stripe centred, cracks
Tree floats on the ground No contact shadow Ground shadow or dark base row
Yellow in the shadows Value-only ramp Blue-green and purple-green darks
Distant forest has trunks and leaves Foreground detail used far away Flat blob, one highlight, sky colour
Tree cut at tile seam Tile not shifted Shift the tile; add a variation tile

Review

#
  • Fills black: still a tree (type recognisable: round crown, tiers, fronds).
  • Light from one side; highlight in patches; darkest entry only at the bottom edge; shadows are cool.
  • Edge is ragged by 1–3 px; interior is clean; no orphan pixels; one leaf pattern.
  • Trunk has flare, stripes and a contact shadow; conifer tiers differ; palm fronds droop.
  • Background trees are blobs with ≤2 tones; stands use odd numbers and one unique tree.

Sources

#
  • saint11 tutorials: Vegetation 1, 2, 3 and Wood (ramp, light, silhouette); Thespian canopy-by-erasing method.
  • Slynyrd Pixelblog PB44 Top Down Trees (bundle method, conifer), PB21 Top Down Objects, PB15 Plant Life, PB33 Wind Effects, PB54 (iso tree).
  • Tsugumo's tree walkthrough (overlapping spheres); Final Boss Blues leaf clusters; TinyBird tree tiles; Derek Yu tutorial notes on crowns.
  • Gurney, Color and Light, transmitted light pp. 152–153, foliage against sky pp. 188–189.
  • Solarski, Drawing Basics and Video Game Art, Advanced Lighting (tree mass as a sphere).
  • Mateu-Mestre, Framed Ink, tree vs forest and the unique tree pp. 45, 48; Silber, Pixel Art for Game Developers, pp. 177–179.