Browse the knowledge base
5x · Animals and creatures
Skills
- Take any Aseprite request end to end
- Plan a sprite before drawing it
- Design it first — concept sheet and storyboard
- Create a sprite document
- Choose, build and repair a palette
- Draw a sprite
- Shade a sprite
- Rig a character for animation
- Animate a cycle
- Build a tileset
- Review a sprite before calling it done
- Fix or iterate on existing art
- Export game-ready assets
- Submit a finished sprite to the community gallery
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.
Rules
#Shape and light
- 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.
- 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.
- 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).
- 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.
- 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). - 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.
- 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.
- 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
- 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.
- 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
- 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.
- 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.
- 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
- 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-atmosphere14–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. - 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.
- 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.
- 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×19Hleaf-highlightLleaf-lightMleaf-midDleaf-darkXleaf-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×18Lleaf-lightMleaf-midDleaf-darkTtrunk-litVtrunk-shadegground-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×40Hleaf-highlightLleaf-lightMleaf-midDleaf-darkXleaf-deepTtrunk-litUtrunk-midVtrunk-shadeWtrunk-crackgground-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×16Hleaf-highlightLleaf-lightMleaf-midDleaf-darkXleaf-deepUtrunk-midVtrunk-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×33Hleaf-highlightLleaf-lightMleaf-midDleaf-darkXleaf-deepUtrunk-midVtrunk-shadegground-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×31Lleaf-lightMleaf-midDleaf-darkTtrunk-litUtrunk-midVtrunk-shadeWtrunk-crackgground-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×24Hleaf-highlightLleaf-lightMleaf-midDleaf-darkXleaf-deepUtrunk-midVtrunk-shadegground-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
#sprite_info; pick the projection (side, top-down, iso), size and light side. Palette: a 4–5 step leaf ramp with hue travel (paletteopramp), a trunk ramp of 3, and a ground-shadow entry.- Layers:
shadow,trunk,crown. Crown goes above the trunk so branches read as inside it. - Silhouette: draw a bundle or the crown with
drawopellipse/polylinein the mid green. Check the black-fill read withlookoppreview. - Light: add the upper-left rim and highlight patches (rule 4) with
drawoppixels, then the shade band, then the darkest entry on the bottom edge only. Userecoloropshadefor the second and third bundle copies. - Notches along the edge, sky gaps, one leaf pattern on the borders (rules 6, 8). Trunk: stripes, cracks, flare.
- Conifers and palms: follow rules 12 and 13, draw tiers and fronds top to bottom.
lookoppreviewandascii;recoloropdesaturateon a copy to check value order;validatefor strays. For stands, tile the tree inlookat 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.