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%。先看 設備預覽。

下一步:二十五套預設、輔助線不進包。

最後更新於