How to Draw a Flat Vector Character in Illustrator (10 Steps, Start to Finish).
A step-by-step guide to building a clean flat vector character in Illustrator — from silhouette to export. No tablet required. Just the workflow that actually sticks.
By the end of this tutorial, you'll have a complete flat-vector character in Illustrator — clean linework, flat fills, and a design you can resize to a bus or shrink to a favicon without losing a pixel of quality. No tablet required. The pen tool will do it all.
Most tutorials skip step 6. That's why yours keeps looking off. I won't skip it.
What you need
Adobe Illustrator 2023 or newer. A rough sketch on paper (phone photo works) — or start drawing directly. 60–90 minutes.
Step 1: Set up your document
New document, 1000×1000px, RGB, 72 ppi. Turn on the grid: View > Show Grid. Set to 100px major, 4 subdivisions. Flat characters built on a grid have better proportions — symmetry is just easier to see. Create two layers: "Sketch" and "Art." Lock "Art" while you work.
Step 2: Block the silhouette first
Don't start with the face. Start with the body shape. Draw the outer silhouette — roughly pear-shaped or slightly boxy, depending on the personality you're building. Use the Pen tool or Blob Brush (Shift+B). It doesn't need to be perfect; you'll refine it in step 4.
Why silhouette first: a flat character only works if it reads as a shape at small sizes. If the silhouette is muddy, no amount of line detail rescues it.
Pro tip: Hold Alt while clicking with the Pen tool to convert a smooth anchor point to a corner. This controls whether your curve flows or breaks — the most useful tool movement in Illustrator.
Step 3: Sketch the face
Place the eyes in the top 40% of the head — higher than feels right. Character design physics: eyes in the upper head read as expressive. Eyes in the center read as realistic and inert. Make the eyes large. Then make the beak or nose larger than the eyes. Exaggeration is the technique, not a stylistic option. Block in the face loosely. Don't trace — draw.
Step 4: Clean linework on the Art layer
Lock Sketch. Click Art. Drop Sketch layer opacity to 40%. Redraw every shape with the Pen tool — deliberate paths, editable anchor points. No Blob Brush here. You'll need those anchor points when you have to make the beak 15% larger at 11pm.
All outlines: 2–3px stroke, same weight everywhere. Uniform stroke weight is what makes flat vector look intentional instead of unfinished.
Common mistake: varying stroke weights between parts. If the arms are 1px and the head is 3px, it reads as a draft. Pick a weight and use it everywhere.
Step 5: Understand fill order before you apply color
This is where beginners lose an hour. The order you stack fills determines whether the character looks right or has mysterious gaps. Stack order, bottom to top: body fill (no stroke) → clothing fills (no stroke) → feature fills: eyes, beak, blush (no stroke) → all outlines (stroke only, no fill). Fills and outlines as separate objects. By keeping them separate, you can edit any color without touching a single line.
Step 6: The group structure that saves everything
Create a group for each body part: head, torso, arms, legs. Inside each group: fill sits below its own outline. When you move an arm, you move the group — fill and outline move together. Without groups, you'll spend 20 minutes clicking at random trying to select the right path.
Shortcut: select all shapes for one part → Cmd/Ctrl+G. Double-click to enter the group and work inside it. This is the step most tutorials skip. It's also the step that makes everything downstream feel logical instead of chaotic.
Step 7: Apply flat color
Set your palette before adding details. Four colors works. Here's one that holds together: cream #F9F2E0 for the body fill, muted yellow #F9C34A for the beak and accents, vintage red #E55B51 for blush and pop elements, black #111111 for all outlines. Warm-cool contrast built in, plus clear light-dark separation between body and detail.
Use Recolor Artwork (Edit > Recolor Artwork) to test variations without changing anything permanently. Click a swatch, drag to a new hue.
Pro tip: Squint at the character, or temporarily desaturate your monitor. If the shapes disappear into each other, your value contrast is too low. Flat color only survives with enough contrast to separate forms.
Step 8: Add the three details that sell it
Blush marks: two circles, warm coral, 25–40% opacity. Position just below the eyes. Push the vintage quality up immediately. Beak highlight: a smaller shape in a lighter version of the beak color, no stroke. Not a gradient — a flat lighter fill in the upper portion. Body shadow: a black ellipse directly below the character, 12–18% opacity, no stroke, at the very bottom of the stack. This one step adds enough depth that the character stops feeling like a sticker floating on nothing.
Step 9: Test at small size
Zoom to 10%, or export a 64×64px PNG preview and look at it on your phone. If the character still reads — silhouette distinct, expression legible — the design works. If it collapses into a blob: your linework is too thin or your color contrast is too low. Go back to step 7. Most people skip this test and then wonder why the character looks bad on a product mockup or shrunk to an Instagram thumbnail. This test takes 60 seconds. Do it.
Step 10: Export
Screen use: Object > Artboards > Export As, PNG, 2× scale (2000×2000px for a 1000px artboard). Web use: File > Save As > SVG. Check "Embed images" if you have linked files. Name your files by character state: character-base.svg, character-smiling.svg, character-waving.svg. You will come back to these files.
If you get stuck
Steps 5–6 are where almost every flat vector problem originates. When something looks wrong, check whether a fill is sitting above its outline, or whether a group is missing or broken. Layer order is the answer 80% of the time.
Next tutorial: Building expression variants — 5 face states from this same base file. Same workflow, faster execution once you know the structure.
Done reading? There’s more where this came from.