VectorPaint box illustration: build consistent perspective from three planes

English translation of the Chinese original, translated on 2026-10-23. 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.

Three flat shapes can form a box with a sense of volume; you do not need to learn complex 3D software first. In this exercise, use VectorPaint's Pen tool, fills and node editing to draw a simplified cardboard box. Focus on matching shared edges, keeping parallel directions consistent, and making the light and dark faces clear. It is a two-dimensional illustration: the volume comes from arranging the faces by hand.

Establish references for the three directions

Create an 800×700 px canvas. Position the box a little above the center, leaving room for a shadow beneath it. Establish three directions: upward to the left, upward to the right, and vertical. Ordinary reference lines or a grid can help you judge them. This is an approximate isometric composition chosen for practice; a hand-drawn illustration is not an engineering drawing.

Sketch a vertical central edge, then extend lines diagonally upward left and right from its top. Use similar slopes and optionally equal lengths. Compare the broad directions first, leaving tape and labels until later so details do not distract.

Draw the top face with four vertices

Select the Pen tool and click the front midpoint, left vertex, rear vertex, and right vertex, then return to the start to close the diamond-shaped top. Apply a light fill and disable the stroke initially, checking that the four edges form a clear plane.

If the top looks twisted, check whether opposite edges have similar directions. Move the rear node slightly with the node tool to balance both sides. Do not add several nodes along one straight edge to repair its slope; four clear corners usually control this simple shape better.

Create the left and right faces separately

From the top plane's front midpoint, establish the box height downward, then extend both outer side vertices down equally. Connect each side into a quadrilateral with the Pen tool, using a midtone on the left and a darker color on the right. Top, left, and right planes should share corresponding edges.

View all three faces together first. If the central vertical edge leans, the box may look as though it is tipping; if the outer heights differ, its base may look unstable. Adjust the corresponding nodes first, then check that adjacent faces still meet. Moving a shared vertex means checking all the faces connected to it.

Check the seams instead of hiding them with thick strokes

Zoom in where the three planes meet. For thin white gaps, check matching node positions and any unwanted stroke changing boundaries. Do not immediately add a thick outer outline to hide the issue; it may reappear after recoloring or export.

You can extend a rear face slightly beneath a front face and use their overlap to create a clean edge, provided you know which face is on top. For simple geometry like this, accurate shared positions are usually easiest to maintain. Check again at normal size so that you do not spend time chasing display hairlines visible only at extreme magnification.

Use tape to show the direction of a surface

Add a narrow strip for tape on top, its long edges following one of the plane's main directions. At the front edge, add a matching short section on the front plane to show the tape crossing the fold. Keep both as separate shapes aligned with their respective planes.

Give the tape a color close to the cardboard, with just a slight difference; strong contrast could distract from the box. For a label, start with a simple rectangle and a few short lines rather than immediately rotating real text into complex perspective. Its edges should follow the direction of the face it sits on. A label on an angled side should not suddenly become a horizontal, front-facing rectangle.

Ground the box with a cast shadow

Draw a flattened ellipse or a simple polygon beneath the box, use a light gray, and place it behind all the box faces. Keep the shadow direction consistent with the light source: if the top is brightest, for example, the shadow can extend a little toward the lower right. Suggest it lightly with a solid color first; complex blur is unnecessary.

Keep the shadow close to the base so the box rests on a plane. Too far away suggests floating; too large makes it another subject. Hide it temporarily to check that the box still has volume, then restore it to establish contact. A shadow supports, not replaces, correct shapes and tones among the three planes.

Final checks and variations

Check top, left, right, tape, and shadow in sequence, confirming independent selection. Zoom out for the silhouette and in for shared edges. Save the editable original and PNG preview. For path delivery, also export SVG and inspect seams in the target environment.

Next, change only the height to create a tall box and a shallow box. Move all the relevant lower nodes together rather than merely lengthening the central vertical edge. Alternatively, keep the geometry unchanged and adjust only the shading on the three faces to compare how clearly each combination suggests a light direction. These exercises address shape and color separately, so try to keep them separate.

Frequently asked questions

Why does the box still look flat when its three faces have different colors? Check the shared edges and parallel directions before the shading. When the geometry is inconsistent, stronger shadows only make the error more obvious. Temporarily showing the three faces as light outlines can help reveal directional problems.

Is this an accurate 3D model? This is a hand-drawn two-dimensional illustration, without real three-dimensional measurements or viewpoint calculations. Adjust it to suit the visual goal when using it for explanations, decoration or icons. For packaging production or engineering dimensions, confirm the requirements through the appropriate professional drawing process.

Find a skewed plane with a guide line

If the right side looks unstable, temporarily draw a reference line parallel to the top face's right edge and place it near the right-hand bottom edge. Both should represent the same spatial direction. If they clearly diverge, correct the relevant lower nodes. Remove the ordinary reference line afterward. Comparing two lines makes a directional problem easier to identify than repeatedly changing colors, and helps with the next box too.