系列图形

VectorPaint 天气图标组:统一晴天、阴天与雨天的视觉尺寸

制作三枚天气图标,通过共同基线、线宽、外缘和小尺寸预览建立一套协调的视觉规则。

一枚太阳画得清楚,不代表它与云、雨滴放在一起就像同一套图标。本练习在 VectorPaint 中制作晴、阴、雨三种天气,把重点放在整组的视觉尺寸与重复规则,最后得到可以分别输出的三个图形。

先在同一张画布上建立比较区

新建一张 960×360 px 的横向画布,留出三个约等宽区域,每个区域放一枚图标。先用网格或临时参考矩形标出共同中线与底线,四边保留空白。三个区域只是工作参照,完成前要隐藏或移除普通参考对象。

这次采用深色线条配少量暖黄色,先规定主要线宽与端点样式,再开始画。可以从 4 pt 描边作为观察起点,但最终按展示尺寸调整。云和太阳不必有相同外接框,它们需要的是看起来分量接近,而不是被强行拉成相同轮廓。

用圆与短线画出晴天

用椭圆工具画一个宽高相同的圆,放在第一个区域中央,设为暖黄色填充。另画一条短线作为光芒,设置统一的深色描边和端点。复制短线,再旋转和移动到圆周附近,先完成上下左右四条,观察后再增加斜向光芒。

检查光芒到圆的间隔是否接近,尤其注意斜线的可见长度。不要让复制过程意外改变某几条线的宽度。最后把太阳部件分组,移动一下再撤销,确认没有落下一条光芒。组能帮助后续比较尺寸,但暂时保留各部件可单独修改。

用简单轮廓组织云的起伏

第二个区域用钢笔画一条闭合云形:底部相对平缓,上方由几个不同大小的圆润起伏组成。也可以先用少量圆形作为草稿参照,再沿外轮廓建立一条清楚路径。先让最大的起伏承担主体,左右较小的起伏连接到底部。

切换节点工具检查曲线连接,减少顶部不必要的小波纹。云的宽度可以略大于太阳的圆心部分,但要把太阳光芒也算入比较范围。云底不要紧贴区域下缘,稍后雨天还需要在下面加入雨滴,整组底线应提前留出余量。

从同一朵云扩展出雨天

复制已经完成的云到第三个区域,保持轮廓和描边一致,再适当缩小或上移,为雨滴腾出空间。用钢笔画一个简洁水滴,或者使用三条倾斜短线表达降雨。两种表达选一种即可,避免水滴与雨线同时堆叠造成复杂度突增。

先完成第一滴的形状和颜色,再复制成三滴,调整间距与高低。中间雨滴可以稍低,左右保持呼应。检查雨滴与云底之间还有可见空隙;小尺寸时一旦粘连,可能看起来像云的锯齿边缘。把云和雨滴组成一个完整的雨天组。

调整视觉尺寸而不拉伸图形

将三组放到同一中线附近,先比较最外缘,再比较实色面积。太阳有向外伸出的细线,云有较宽的连续轮廓,雨天还有下垂的细节,因此即使外接框一样大,视觉重量也可能不同。按比例缩放整组,保持圆形和水滴的自然形态。

一次只调整一枚,先让晴天与阴天协调,再加入雨天。若雨天显得过高,可以调整云与雨滴的距离,而不是把整组纵向压扁。把参考框暂时隐藏后再观察,因为读者最终看到的是图标本身,不会看到帮助你排列的几何边界。

用小尺寸检查整组规则

导出一份横向预览,再缩到接近常用界面尺寸,比较三枚是否都能迅速辨认。太阳光芒太密时先减少数量,云的小起伏太碎时先合并曲线,雨滴太细时先增加可见宽度。每种图形可以用不同手段简化,但应保持相同的描边语言。

分别放到浅底和深底上查看,判断是否需要另一组颜色版本。深色描边放在深底上看不清,应该做明确的浅色版本,而不是简单提高整组透明度。记录主要颜色、线宽与最小展示尺寸,下一次增加雪天图标时就有可沿用的参照。

输出、常见问题与完成检查

分别输出时,可把每个完成组复制到同样尺寸的独立画布,保留一致留白,再导出透明 PNG 和需要的 SVG。检查文件名与天气含义对应,并保留整组比较原稿。不要只按对象边界紧贴裁切,否则三枚图放进同一容器后会显得忽大忽小。

三枚图必须严格同宽吗? 不必。先保证容器一致,再按可见面积与辨识度调整图形大小。窄图形可以保留更多侧边空白,不用拉宽来凑数。

雨天总比晴天重怎么办? 先减少云内细节、缩小雨滴或增加间距,再比较整体面积。所有图形同时变细会使原本清楚的太阳也变弱,局部调整更容易找到平衡。完成后请逐个确认轮廓、颜色和透明边缘,再把它们当成同一套作品保存。

为第四种天气试一次扩展

完成三枚以后,可以先只画一枚“多云”草稿:保留同一朵云,把晴天的太阳缩小后放到后方,露出一部分圆和光芒。检查它是否仍沿用原来的线宽、颜色与留白。如果新图需要完全不同的线条才看得清,先回头比较整套规则,而不是让第四枚独自换风格。这个扩展能检验前面建立的共同规则是否足够清楚。

相关教程与资料

对齐与分布基础、透明 PNG 输出。

依据 VectorPaint 官方商店说明与功能入口整理;Apple 版本信息核对日期为 2026 年 10 月 23 日,公开版本 1.0.7,最低系统 iOS / iPadOS 17。文中的尺寸、文案和图形是练习建议。