# VectorPaint creative process: a sunset mountain scene in three colours

Language: en
Canonical: [VectorPaint creative process: a sunset mountain scene in three colours](<https://allluckly.cn/en/works/vectorpaint-geometric-sunset/>)
中文：[中文 HTML](<https://allluckly.cn/works/vectorpaint-geometric-sunset/>)
English: [English HTML](<https://allluckly.cn/en/works/vectorpaint-geometric-sunset/>)
Published: 2026-10-23T02:33:05+08:00
Modified: 2026-10-23T09:27:50+08:00
Author: Bison

Start with a square canvas, close an octagon and two triangles with the pen, then set fills, turn off strokes and export PNG.

English translation of the [Chinese original](<https://allluckly.cn/works/vectorpaint-geometric-sunset/>), translated on 2026-10-23. Original publication dates, attribution, code and version notes are retained.

[Video](<https://allluckly.cn/assets/videos/vectorpaint-geometric-sunset.mp4>)

[English steps](<https://allluckly.cn/assets/videos/vectorpaint-geometric-sunset.en.vtt>)

[中文步骤](<https://allluckly.cn/assets/videos/vectorpaint-geometric-sunset.zh-CN.vtt>)

[Poster](<https://allluckly.cn/assets/images/works/vectorpaint-geometric-sunset.png>)

On a 1080×1080 square canvas, close an amber octagonal sun and two blue and purple triangular mountains point by point with the pen. Turn off strokes, then export PNG with a white background. Real iPhone Duo simulator interaction with waiting removed and selected steps sped up.

Recorded in an iPhone Duo simulator using a local VectorPaint build, 1.0.7 (build 6), with a Chinese interface. These are excerpts of real app interaction; selected clips play at 1.1–1.5× speed. No narration; English and Chinese step subtitles are available. The finished image below was exported directly from the app. Store-version features and layouts may differ.

Sunset Mountains uses only three colour shapes. The sun keeps eight corners, the two mountains have different heights and the white canvas has no added texture. The exercise is about placing shapes and seeing how a later object covers an earlier one.

## Keep the composition simple

Create a square **1080×1080 px** canvas and give it a name you can find again. The canvas already exists when the video starts; every subsequent shape is drawn point by point inside VectorPaint.

Leave roughly the lower quarter empty. Place the sun in the upper half, slightly right of centre; put the taller blue peak on the left and the lower purple one on the right. The shapes do not have to fill the canvas. Empty space makes the edges clearer.

This session uses Amber, Blue and Purple directly from Favourite Palette. Draw the composition first; it is easy to try your preferred colours afterwards.

## Close the sun with eight points

Choose the pen and tap eight nodes around the sun: top, upper right, right, lower right, bottom, lower left, left and upper left. Tap the first node again to close. No curves are dragged out, so the result is an angular octagon.

The sun is about half the canvas width. The nodes need not be mathematically equidistant, but balance its left and right extents. The temporary fill before closing may look like an irregular fan; continue around the outline to complete it.

Select the whole sun, open **Object Properties → Appearance** and turn off Enable Stroke. Find Favourite Palette below, confirm that the colour targets Fill, then tap Amber. If nothing changes, check the panel title: edit the selected object rather than the default style for the next path.

## Give both mountains a common baseline

Keep the pen and draw a triangle at the lower left: left end, peak and right end, then return to the start. Put the peak just below the sun’s centre and the baseline about three-quarters down the canvas. Turn off the stroke and set the fill to blue.

Let the blue mountain cover part of the sun to establish depth. Keep this overlap; there is no need to cut the sun or make a mask.

Place the second mountain on the right, with a slightly lower peak. Extend its left end into the blue mountain and put its right end near the canvas edge. Match the first mountain’s baseline, close the path, fill purple and remove the stroke. The later purple object covers part of the blue one, making a slope between the colours.

If the mountains merge visually, first increase the colour difference, then compare peak heights. If a small uneven edge appears along the bottom, move the bottom nodes rather than hiding it under a thick line. Continue with the [pen and paths tutorial](<https://allluckly.cn/en/guides/vectorpaint-pen-curves/>) for node editing.

## Return to the whole composition

Switch to the selection tool and tap an empty canvas area to deselect, removing the node handles. Check three things: breathing room above the sun, space between the mountains and canvas edges, and one straight baseline across the blue and purple shapes.

Leave out gradients and text for now. Three flat colours are enough to describe the sunset and mountains. For another version, move only the sun or replace its octagon with a circle and compare. To add a title and develop a poster, see the [geometric poster tutorial](<https://allluckly.cn/en/guides/vectorpaint-geometric-poster/>).

## Save the original and export a white-background PNG

After checking the Saved indicator, open **Export & Share → PNG Image**. This session uses Full Canvas, 1× scale, 1080×1080 px and a white background. Tap Export PNG, then use Save to Files when the file appears in the system share sheet.

White suits this small square image and its empty space. To place the mountains over another design, export an additional transparent version, while keeping the editable original. For different uses, see [PNG, SVG and PDF export options](<https://allluckly.cn/en/guides/vectorpaint-export-formats/>).

The image below is the PNG exported from VectorPaint in this session, with the complete canvas retained.

![Native VectorPaint Sunset Mountains export: a white background, amber octagonal sun and two blue and purple mountain peaks](<https://allluckly.cn/assets/images/works/vectorpaint-geometric-sunset.png>)

[Open the 1080×1080 finished image](<https://allluckly.cn/assets/images/works/vectorpaint-geometric-sunset.png>) · [Continue with fills and strokes](<https://allluckly.cn/en/guides/vectorpaint-fill-stroke/>)