Guides / Design tips

Hand-drawn look in 3 tricks: ink lines, simple characters, crayon color clash, plus an AI prompt

No drawing skills needed: wobbly ink lines in Procreate or Illustrator, a 3-shape character, crayon colors offset 4 to 6 px, and AI art turned into vectors.

Watch the reel on InstagramComment #手繪 to get this guide

A hand-drawn look is not about drawing well. It comes from three small details: lines that wobble a little, very simple characters, and colors printed slightly off on purpose. Here are the tool settings and steps for the 3 tricks from the Reel.
At the end you'll find an AI prompt, plus how to turn an AI image into a vector you can recolor.

011. Ink lines: they don't need to be straight, let the end wobble

Lines are the first key to a hand-drawn look. A perfect computer-drawn line looks like a vector right away. A little wobble and some change in thickness give it a human touch.

  1. Procreate: Brush Library > Inking > Studio Pen. Keep pressure on: press hard at the start, ease off at the end.
  2. Illustrator: draw with the Pencil tool and set Smoothness low, so the lines keep the wobble of your hand.
  3. Lines don't need to be straight. You can leave closed shapes open on purpose, with a small gap.
  4. Draw each line in one stroke. Don't go back over it. A line traced twice looks stiff.
Four hand-drawn icons in black ink lines only: a milk tea cup, a pineapple bun, a cat, a sun
Our line art from the Reel: the lines wobble a little, and the thickness is not perfectly even.

022. Simple character: round body, two dot eyes, one smile line

The simpler the character, the cuter it is, and the easier it is to reuse across pages.

  1. Body: one circle or oval. No arms or legs needed.
  2. Eyes: two black dots. Set them a little far apart for a goofy, cute look.
  3. Mouth: one smile line, no wider than the distance between the eyes.
  4. Blush: two small pink circles below and outside the eyes. The personality shows right away.
  5. Give the same character new expressions and accessories (a hat, glasses, a little flag) and you have a whole set.
A pink hand-drawn cat: simple eyes, one smile line, two blush marks
The cat from the Reel: eyes, one smile line and two blush marks. Few lines, but plenty of personality.

033. Crayon color clash: offset the color from the lines on purpose

  1. Pick 3 to 4 highly saturated colors from different color families. The clash gives you the playful crayon feel.
  2. Put the color fills and the line art on separate layers.
  3. Move the whole color layer 4 to 6 px in one direction, like a print where the colors didn't line up.
  4. Add a crayon or pastel texture to the color layer (in Procreate, fill directly with a crayon brush; in Photoshop, add a texture layer set to Multiply).

Keep the offset direction the same across the whole piece: all down-right or all up-left. If each color block goes a different way, it looks badly drawn, not like a style.

Four hand-drawn icons filled with crayon-textured color, all offset down and to the right
The color fills have crayon grain and all shift a little down-right, like a misaligned print.

04Generate it with AI, then turn it into a vector

No time to draw? Generate a base image with AI first. English prompts work best. Replace [your product] with what you want to draw.

Hand-drawn mascot prompt (English)
hand-drawn doodle mascot of [your product], wobbly black ink outline, crayon texture fill, bright clashing colours, off-register print, white background
Reel frame: an AI prompt card above three hand-drawn stickers of a sun, a cat and a milk tea cup
The AI prompt card from the Reel. The three stickers are our own code-drawn examples, not AI-generated images.
  1. Place the generated PNG in Illustrator.
  2. Select the image and click Image Trace in the Control panel at the top. Choose the 6 Colors or 16 Colors preset.
  3. Click Expand. The image becomes vector paths you can select and recolor one by one.
  4. Use Select > Same > Fill Color to select every path of one color at once and recolor them together.

Sources

Related guides