Skip to Content
博客调到它在画布上坐稳

调到它在画布上坐稳

图标难看,多半不是 Logo 差。

是它在方框里偏上、贴边、或者底色把字形吃掉了。第一版测试就只做这件事:缩放、旋转、圆角、内边距、底色。后面才加偏移和 WEBP。

Zapicon · 编辑
1024
canvas ≠ export size

左侧改参数,右侧立刻看见。画布 512 / 1024 / 2048 只影响预览。

先改占比,再改装饰

大小 管前景占画布多少。内边距 管它离边缘多远。Android 自适应图标要多留,系统遮罩会吃边。iOS 开 Squircle 后再留一点,见 Squircle 不是圆角

偏移 是 2025-12-18 加上的。字形光学中心不在几何中心时,用水平 / 垂直位移,不要靠透明像素硬垫。

旋转 少用。App 图标几乎不斜。斜了,16px 任务栏上先糊。

底可以是纯色、渐变、透明。iOS 不要透明。Windows 任务栏可以。

源图支持 PNG / JPG / WEBP / SVG。SVG 会先栅格化。太小的位图,先走 4× 放大

画布不是导出尺寸

512 预览快。1024 日常够。2048 看细节。导出时各平台仍按自己的规范出图。别把「我开了 2048」写成「我导出了 2048 给所有平台」。

完整控件见 可视化编辑器

不要做的

  • 不要用透明边框当内边距。用内边距控件。
  • 不要为「稍微高一点」去改源图。用偏移。
  • 不要在 16px 上看不见时,只把大小拉到 100%。先看 设备预览

下一步:二十五套预设辅助线不进包