Isometric Illustration

This workbook turns the course into reps. You will set up a real 30-degree grid, build modular objects, lock a consistent light model, and ship a finished tech-explainer scene. Work through each section's exercises in order, fill the worksheets as you go, and keep your saved swatches and components so every later piece stays on-style.

Set up true 30-degree grids in both tools and prove you can tell real isometric from the fakes.

Collect three isometric-style images from Dribbble, Behance, or app store screenshots. For each, measure the angle of the long 'horizontal' edges of any cube and the internal angles of a top face. Decide whether each is true isometric (30 degrees, 120/60 top), dimetric (~26.57 degrees), or fake. Write your reasoning, not just the verdict.

Create a true 30-degree grid in Illustrator using the SSR Action (or the manual Scale 86.602 / Shear / Rotate method) AND a usable iso grid in Figma using a plugin or a pasted grid PNG. Save each as a locked, dimmed background layer named GRID. Take a screenshot of both.

Fill this in once per tool so you can recreate your exact setup later without re-deriving it.

Turn flat shapes into solid, editable isometric objects and start a reusable prop kit.

Build a perfect isometric cube from three faces, then stretch it into a box of a chosen height (remember height stays vertical, only width and depth obey the 30-degree rule). Then combine and subtract boxes to make one piece of furniture (desk, chair, or drawer unit). Keep every face as a separate filled shape, no outlines.

Create at least five reusable props (for example chair, plant, laptop, coffee cup, cardboard box) and save each as an Illustrator symbol or Figma component at a known base scale (for example a 1-unit cube equals 100 pixels). Confirm two props placed side by side are correctly to scale.

Log each object you build so your kit stays organized and consistently scaled.

Lock one light direction, build value trios, ground objects with shadow and AO, and limit your palette.

Choose a single light direction for your scene (top-light is easiest). For every material, build a light/mid/dark trio in HSB: hold hue roughly fixed, step brightness down for shadowed faces, nudge saturation up, and shift hue slightly cool in the dark and warm in the light. Apply the same top-lightest, one-side-mid, opposite-side-darkest logic to every object.

Add a grid-aligned cast shadow (offset opposite the light, 15 to 25 percent opacity, small blur), a tight darker contact shadow where each object meets the floor, and subtle ambient occlusion gradients in inner corners. Compare a before/after of one object with and without grounding.

Record the value trio for each material so your whole scene (and future scenes) stays consistent. Leave any derived contrast notes for after you compare them on canvas.

Compose a full scene with a clear focal point, add explainer conventions, and export it crisp for a portfolio piece.

Assemble your props into one finished scene. Choose a focal element and place it off-center, pick a layout (floating diorama or cutaway room), cluster supporting objects to lead the eye, and use overlap plus detail falloff for depth. Reserve your highest contrast and accent color for the focal element only.

Add at least two explainer conventions to the scene: callout labels with thin leader lines, a cutaway, an exploded view, grid-aligned flow arrows, or numbered step badges. Keep arrows on the 30-degree axes and keep label text upright and legible, not skewed onto the grid.

Plan each export before you produce it so every placement gets the right format and resolution.