如何用 Pixellate 在线制作并导出像素画?

打开 Pixellate（pixelated.vercel.app）后，第一件事是设定网格尺寸，然后逐格上色，画完用 Save image 导出图片。它是一款基于 HTML5 Canvas 的像素画与动画创作工具，属于 PWA，可离线使用，也支持安装到设备上像本地应用一样打开，对手机触控操作友好。适合想快速画一张像素画、又不想安装专业绘图软件的人；如果你需要图层、复杂笔刷或精细的动画时间轴，它可能不够用。

第一步：设定画布网格尺寸

进入页面后会出现尺寸设置界面，需要填写 X 和 Y 两个数值，确认后进入画布。

• X 和 Y 决定画布的像素格数量，也就是这幅画的分辨率。
• 格子数越多，能画的细节越多，但每一格越小，手机上操作越费手指。
• 这个尺寸在开始作画后不易更改，所以先想清楚用途：做头像、图标可以选小尺寸，做场景插画再选大一些。

选好尺寸点确认（界面上的 OK），就进入绘图界面。

第二步：逐格上色

像素画的基本单位是格子，每一格填一种颜色，靠格子的排列组合形成图案。

• 在网格上点选或拖动，给经过的格子填上当前颜色。
• 先铺大色块确定轮廓，再处理边缘和细节，比一开始就抠单格更高效。
• 画错了通常用擦除或重新填色覆盖，具体操作以界面实际按钮为准。

移动设备上的注意事项

Pixellate 是移动友好的，但在手机上作画有两点要留意：

• 手指比鼠标粗，容易误触相邻格子，画小尺寸画布时更明显，可以适当放大画布再操作。
• 触控拖动会连续填色，画直线或边界时放慢速度，避免涂出界。

第三步：区分 New、Save 和 Save image

界面顶部有 New、Save、Save image 等按钮，作用不同，用错可能丢失作品：

关键点是：Save 是保存作品状态，Save image 才是导出成图片。想发到社交平台或存进相册，用 Save image；想之后回来继续改，用 Save。在点 New 之前先确认作品已保存或已导出。

第四步：安装为 PWA，实现离线使用

Pixellate 是渐进式 Web 应用（PWA），具备离线兼容能力，也可以安装到设备上。

• 页面上有 Install PWA 入口，点击后按浏览器提示完成安装。
• 安装后可以从桌面图标直接打开，体验接近本地应用，不必每次输入网址。
• 安装并加载过后，即使断网也能继续使用，适合在没有网络的环境下作画。

不同浏览器对 PWA 安装的支持程度不一样，如果找不到安装入口，可以换用支持该功能的浏览器再试。

常见卡点

• 尺寸选错：开始后不易更改，只能新建重画，所以第一步别急着点确认。
• 误点 New：新建前先 Save 或 Save image，避免辛苦画的内容被清空。
• 把 Save 当成导出：Save 保存的是作品，要拿到图片文件必须用 Save image。
• 手机上画不准：放大画布、放慢拖动速度，或改用触控笔。
• 离线打不开：需要先联网加载过一次并完成 PWA 安装，之后才能离线使用。

按这个顺序走一遍：设尺寸 → 逐格上色 → Save 保存 → Save image 导出 → 需要时 Install PWA，就能从零完成一幅像素画并拿到图片文件。