Coordinated graphics

VectorPaint geometric portrait: describe features and hair with a few shapes

Build a geometric portrait from the head outline, hairstyle and facial features, controlling symmetry, overlap and recognition at small sizes.

English translation of the Chinese original, translated on . The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained.

A geometric avatar expresses character with few shapes. Instead of tracing a photo, choose head shape, hairstyle, and expression first, then build them with VectorPaint shapes and paths. Draw a fictional character or use an authorized photo reference without copying every detail.

Choose three identifying features first

Write three features to preserve, such as short hair, a round face, and a smile. Create a square 600×600 px canvas, with the head slightly above center and room for shoulders. Use only skin, hair, clothing, and one dark detail color, leaving texture for later.

With a photo reference, observe contours and broad colors before tracing eyelashes. Simplify detail into clear geometric relationships that remain readable at avatar size. Dimensions and palette are exercise choices, adaptable to the character, not universal facial-proportion standards.

Build the head with ellipses and paths

Start the face with an ellipse and refine chin and profile with nodes or separate paths as needed. The sides need not mirror perfectly, but keep the head's center of gravity stable. Draw the neck behind the face and add simple shoulders so it does not look like a floating face.

Overlap naturally connects the head and neck: neck below, face above. Do not outline every color block in dark lines merely to hide overlaps; use fills to express the structure first. Add contour lines only where they help recognition, avoiding excessive black gaps at small sizes.

Arrange hair in front and back sections

Draw the rear hair silhouette first, place the face above it, and add bangs or side locks last. Rear hair defines the overall shape, while front hair connects to the forehead. Separating them prevents hairline edits from disrupting the entire hair mass.

Use the Pen tool at major turning points, keeping each hair section simple. Straight hair can use clearer planes and curls a few rounded undulations rather than dozens of fine lines. Hide facial features briefly and check whether head and hair silhouettes still identify the character. Establish that structure before expression.

Use a shared horizontal reference for facial features

Create two eyes using small ellipses or short lines. Duplicate the first, move it to the other side, and keep equal size. Judge spacing between eyes and face edges, not mathematical symmetry alone. The character's direction can justify intentional offsets.

Use a short line or small color shape for the nose and an open curve for a smile. Keep mouth corners away from face edges and leave space between eyes and bangs. Zoom out after every added part so features do not look fine enlarged but crowd together at normal avatar size.

Add a little depth through overlap and shading

Add a subtle shadow on one side of the face or a darker clothing shape to indicate light direction. Establish one source, such as brighter upper left and darker lower right, before choosing changes. Shading every part distracts; one or two clear depth cues suffice for this exercise.

Place ears behind the face, partly covered by hair. If an ear disappears, inspect stacking and hair coverage before moving it. The relationships among back hair, ears, neck, face, front hair, and features should be clear and explainable.

Check the expression at actual size

Reduce the preview to its intended avatar size. Check that eyes stay distinct, the mouth still reads as a smile, and the main hairstyle remains. If eyes and nose merge, reduce lines or increase spacing before enlarging all features. Higher export resolution cannot conceal an overcrowded composition.

Duplicate a practice version and change only the mouth, comparing neutral and smiling expressions. Keeping other parts unchanged reveals the effect of that small change. Give the preferred version a clear name. Do not leave old alternatives permanently overlapping on one canvas and accidentally export two mouths.

Questions and final checks

Must the avatar be perfectly symmetrical? No. Use symmetry as a stable baseline, then introduce small changes for pose and expression. Arbitrary offsets without a reference can look crooked; purposeful differences add personality.

Why does it look like separate color blocks instead of a person? Check the head-neck-shoulder connection, then eye and mouth positions. Main proportions usually matter more than detail count. Remove shading and decoration temporarily and inspect the broad contours to expose problems.

Finally check both square and circular containers for accidental cropping of the head, face edges, and shoulders. Keep an original with separate components and export a transparent PNG or background version with a clear purpose. Later hair or clothing color changes can then target the appropriate shape without redrawing the whole character.

Test object organization with one palette change

Keep face and features unchanged, replacing only dark-blue clothing with warm orange and the hair with another dark shade. If recoloring clothing changes the face too, inspect whether you selected an object or the entire group. Recolor only the intended part. Once components are easy to locate, save a simple avatar and a color variation as stable originals for later circular-crop work.

Related tutorials and sources

Refining portrait curves, Adapting avatars to circular and square containers.

Based on VectorPaint App Store description and the available feature entry points; Apple release information Checked on October 23, 2026: public version 1.0.7, requiring iOS / iPadOS 17 or later. The dimensions, wording and shapes in this guide are suggested exercises.