这幅灯塔使用 1080 × 1080 px 的方形画布,作品命名为“海岬灯塔_方形创作”。左边放一轮暖色太阳,下面用紫色山脉和蓝色海面压出地平线;灯塔站在右侧的绿色海岬上,灯室向右伸出一束三角形的光。白色天空留得很宽,塔身也用白色,所以最后给塔身加了一圈黑线。
看起来有圆、有矩形,其实本轮使用的是钢笔逐点绘制闭合路径。太阳是八点围成的多边形,灯室、条带和波光也是各自独立的闭合色块,主要练习的是节点落点、闭合和色块叠放。
演示在 iPhone Duo 模拟器,VectorPaint 本地构建 1.0.7(6)中完成。具体工具位置以视频中的这份构建为准,商店版本可能有所不同。

配色不多,先分出海面和灯塔
录制时使用收藏色板中的黑、白、陶红、琥珀、苔绿、蓝和紫。下表的 HEX 从导出 PNG 的大色块中取样,方便近似复刻。
| 用途 | HEX |
|---|---|
| 太阳、灯室亮面与光束 | #F7B53D |
| 远山 | #875CBA |
| 海面 | #4578D6 |
| 海岬 | #4A7A59 |
| 岩石、屋顶与塔身条带 | #E04C2E |
| 门窗、灯室框与塔身描边 | #000000 |
| 塔身、波光与白色留白 | #FFFFFF |
暖色集中在太阳和灯塔,海面与远山用蓝紫色分开。绿色海岬给白色塔身一个落脚点,右下的暖红岩石再与屋顶和条带呼应。复刻时可以先使用这组颜色,等所有对象完成后再比较换色效果。
先想清楚哪些形状会挡住哪些形状
这幅画的远近关系很简单:太阳最远,山在太阳前面,蓝色海面接在山脚下;绿色海岬和右下的岩石再盖住一部分海面,灯塔落在海岬上。
创作时按这个顺序画大形状,后来新增的色块自然叠到前面。本轮使用 1 个图层、17 个闭合路径对象;门、窗、条带和灯室里的亮面,都可以分别选择。
本轮最终保留的对象可以这样核对:
| 内容 | 对象数量 | 与相邻形状的关系 |
|---|---|---|
| 太阳、远山、海面 | 3 | 山挡住太阳下缘,海面接住山脚 |
| 海岬、前景岩石 | 2 | 盖在海面的右下方 |
| 白色塔身 | 1 | 立在绿色海岬上 |
| 黑色灯室、暖色亮面、三角屋顶 | 3 | 亮面位于黑色灯室内部,屋顶压住上缘 |
| 两条暖红条带 | 2 | 横向穿过塔身 |
| 黑色门和上部窗 | 2 | 分别落在塔身下部与上部 |
| 三段白色波光 | 3 | 散布在左侧海面 |
| 暖色光束 | 1 | 从灯室右侧伸出 |
| 合计 | 17 | 不含中途删除的错误短线 |
可以先只看前五个对象。太阳、山、海、海岬和岩石的关系成立后,哪怕灯塔还没出现,场景也已经能读成海岸。
用钢笔做一个闭合色块
本次反复使用的操作是:选择钢笔,在轮廓的转角位置逐点落下节点,最后回到起点闭合;再给当前对象设置填充颜色,关闭不需要的描边。
这里的重点是“转角”。一块简单的山、一条塔身色带,不需要沿着直线再补许多节点。节点多了,后面选中和修改反而更难。先把轮廓控制在少量清楚的拐点上,闭合后再检查形状。
做完一个对象后,切回选择工具,确认选中的是刚画好的对象,再进入对象属性 → 外观,设置填充并关闭不需要的“启用描边”。在下方“收藏色板”中,确认颜色应用到的是填充,再选择颜色并点“完成”。接着开始下一个对象。小形状集中时,这个确认动作尤其有用:灯室里的黄色亮面与黑色框很接近,塔身条带也会遮住一部分白色塔身。
除塔身以外的 16 个对象都取消了描边,让颜色直接相接。塔身的黑色描边是最后针对塔身单独启用的,宽度为 4 pt。它与白色天空的边界比较弱,加上这圈线以后,塔顶到塔脚的轮廓才连贯起来。
太阳和远山,先定下画面的高低
太阳先画。用八个节点围出一个接近圆形的轮廓,填暖色,取消描边。这个多边形太阳与后面的尖角山脉属于同一种造型语言,不必把边缘修成完全光滑的圆。
远山同样用八个节点闭合,填紫色。山顶有高有低,中间留一段下降再接第二座山。它从太阳前面经过,太阳下缘被挡住,画面便有了第一层遮挡关系。
蓝色海面接在山脚下。先确定水平的海平线,再向下围出一个大的闭合区域,填蓝色。海面要给后来的海岬和灯塔留出足够空间;这一步只负责大色面,暂时不加波纹。
复刻时,可以先检查三个地方:太阳有没有露出足够面积;山脚是否与海面接稳;蓝色区域有没有占据画面下方的主体。小细节都可以放到这三个关系确定之后。
海岬和岩石,给灯塔一个落脚点
绿色海岬从画面下部向右上方抬起,给塔身留出一块较平的位置。它盖住蓝色海面的一角,轮廓不必很碎,用几段折线说明坡面就够了。
右下方再补一块暖红色岩石。它与绿色海岬相接,把画面的下缘收住。这里没有给岩石增加纹理,前景主要靠更大的色块与斜边来支撑灯塔。
这两块形状都用钢笔闭合后填色,并取消描边。完成后,先停下来看看灯塔准备落在哪。塔身如果离海岬边缘太近,轮廓容易显得悬空;塔脚落在绿色内部,关系会更稳。
塔身、灯室和屋顶,分开画会更容易检查
白色塔身是一个上窄下宽的四边形。顶部留给灯室,底部与海岬接触。塔身保持直立,左右边稍微向外张开,不需要在这一阶段处理很多装饰。
接着画黑色灯室,再在里面放一块较小的暖色亮面。黑色在这里是灯室本身的填充,并不只是给黄色方块加一条粗描边。两个独立对象叠放之后,灯室的结构会比较清楚。
上方的屋顶用暖红色三角形。它略宽于灯室,让两边有一点伸出的屋檐。之后在塔身上加两条同样的暖红色条带,再补底部的黑色门和上部的黑色窗。
这些小部分都是分别闭合和填色的对象。屋顶、条带、门窗的顺序,按画面中谁需要盖在谁上面来安排。
本轮的小窗第一次没有顺利闭合,留下了一条不符合预期的线。实际处理是用选择工具选中这条错误线,再用正常删除操作移除;随后把窗画得更高一些,重新闭合填黑。最终 17 个对象里不包含那条已经删除的线。
小窗和波光总是闭合失败,先检查节点间距
细节失败时,不一定是颜色没有设置好。小窗和细长波光的相邻节点太近,起点、转角与闭合点挤在很小的屏幕区域里,会让最后一次点击难以确认。
本轮第一次较细的波光也被删除,随后拉开了节点间距再画。最后保留了三段白色的细长三角形,它们各自独立,没有连成一条长曲线。
照着练习时,可以先放大画布,再画细节;这是视图缩放,不是把作品尺寸改大。先检查闭合轮廓,再填色。如果误生成了短线,选中错误对象删除后重新画,比在很短的线头上反复试点更容易判断。
门窗与波光不必追求越细越好。只要缩回整幅画后,门还像门、窗能从塔身里分出来、白色波光能和蓝色海面拉开,就已经完成了它们的任务。
最后一束光,用三角形把方向指出来
最后补上暖色光束。它的一端收在灯室右侧,另一端向画面右边展开,形成一个清楚的三角形。
光束与太阳、灯室亮面使用同一琥珀色。它是一块单独闭合并填色的三角形。
画完后,最后一次检查塔身与白色天空的边界,才为白色塔身单独启用 4 pt 黑色描边。其余大色块继续保持没有描边的平面效果。
在 iPhone Duo 的三种状态下检查灯塔
完成作品并确认界面显示“已保存”后,在 Device Hub 底部依次切换 Open(展开)→ Partially Open(半折叠)→ Closed(合拢)→ Open。视频最后用模拟器窗口的分步记录展示这组操作,已剪去等待,便于逐步比较。
本次展开时视图显示 56%,半折叠约 29%,合拢后约 27%,重新展开回到 56%。这些百分比属于编辑器视图,作品和 PNG 仍然是 1080 × 1080 px。
每换一种状态,都先等界面稳定,再看三处:灯室的亮面是否被黑框包住,白塔的黑色轮廓是否连贯,三段波光是否仍能各自分开。合拢时左侧工具排列更紧凑,小对象也更难点中;细节闭合不顺手时,回到展开状态再调整,会更容易确认起点和转角。
切换显示屏时出现过短暂黑屏,随后应用正常恢复。本片保留了少量切换画面,并以“设备窗口采样 · 分步演示”标注这种素材形式。
导出时,把画布尺寸和 PNG 像素分开检查
本次应用实际导出的 PNG 为 1080 × 1080 px,白色背景。本页作品图直接使用这份原生导出。
用于继续编辑的原稿和用于网页展示的 PNG,各有用途。原稿保留对象,之后还能分别改灯塔的条带、调整山峰或移动波光;PNG 则把当前画面合成为一张像素图。
进入分享 → 导出与分享 → PNG 图片,范围选择“完整画布”,倍率设为 1×,背景选白色,再点“导出 PNG”。检查预览里的白色天空与画面边缘,再确认 PNG 的实际输出像素。编辑器里的缩放百分比只影响观看,不等于 PNG 的最终尺寸。需要白色天空时,也要检查导出背景设置,避免把留白误当成已经画好的白色背景对象。
导出后把图片单独打开,缩回整幅图检查三件事:白色塔身的黑线是否完整;三段波光有没有连在一起;灯室亮面是否仍然被黑色框包住。再放大检查细节,便能区分是节点轮廓的问题,还是网页把图片显示得太小。
填充与描边的基础操作可接着看填充与描边教程;对象整理见图层与分组。想区分 PNG、SVG 和可编辑原稿,可以看导出格式选择;画布单位和导出像素的关系,见画布尺寸与单位。