今日教程｜像素画场景 Mockup 制作流程（Aseprite）

本轮关键词：像素 UI / 场景 Mockup。做游戏宣传或同人图时，经常需要一张“像游戏画面”的像素 Mockup：角色、敌人、UI 和环境挤在一张图里。

我按 itch.io 上 imonk 的分享自己走了一遍：只用 Aseprite 从灰度草图到叠加层上色、再精简色数与色相偏移，流程清晰、出图也快。下面把步骤和要点整理成一篇，方便直接照着做。

原文链接：https://itch.io/t/5702967/pixel-tutorial-creating-pixel-art-mockups[1]一、脑暴与构图Mockup 的画布有限，不可能塞下整关，所以要先想清楚：哪些元素必须有，哪些可以舍弃。

至少要有一个玩家角色、若干敌人、UI 元素，以及能代表场景或关卡的环境元素；其余细节可以边画边加，但主体不齐就别硬上色，否则很容易画到一半发现构图不对又要重来。如果是改编已有游戏（例如某作的某一关），脑暴会轻松很多——只要在像素风格下选出最有代表性的东西即可；若是原创构图，建议先在小图或草稿层上试几个版式，再定稿。

示例：Maximo: Ghosts to Glory 地狱关 Mockup示例：Dark Souls 伊札里斯场景示例：Gauntlet Dark Legacy 嘉年华关二、灰度草图（Value Sketching）不必一上来就选色。先用纯灰度（或单色）把整张 Mockup 的明暗、构图和细节都画出来，不追求完美，只要“该有的形状和光影都有”即可。

这样可以专心管造型与光影，避免一边想颜色一边想结构导致手忙脚乱。多开几个图层没关系，例如：一层画场景与道具、一层画角色与敌人、一层画 UI 框与按钮。

三、叠加层上色（Coloring）灰度定好后，不要直接在灰度层上涂色，也不要一个像素一个像素手动选每个明度的色。在 Aseprite 里新建一两个图层，把混合模式设为 叠加（Overlay），不透明度调到约 50%，然后在这些层上只涂基础色：草→绿、木头→棕、金属→灰、金→黄橙、石头→灰/棕/红、皮肤→棕/白/黄褐等。

叠加模式会自动把这些基础色“叠”在灰度光影上，你就不用再手动画每一阶的明暗色。例如 Gauntlet 风格的 UI 元素，先保持灰度：在叠加层上涂上基础色（图中暂时隐藏了 UI 线框以便看清色块）：再把底下的 UI 层打开，就得到带光影的彩色稿，

接下来只要做清理与微调：其他 Mockup 未精修前也可以用同样方式先铺一版颜色：四、精简色数与清理（Polish）叠加上色会产生很多“肉眼不易分辨、但确实存在”的过渡色，色数一多画面容易脏、也偏离像素画的简洁感。

新建一个精修层，用 Aseprite 的魔棒（容差约 10）选中相近颜色的像素块，把它们合并成少数几个主色，让色板更干净、对比更明确。下图是过多相近色（以及 jpeg 压缩产生的杂色）的例子：用魔棒选区合并后，色块更清晰：五、色相偏移（Hue-shifting）叠加层不会自动做色相偏移（阴影偏冷/高光偏暖等），需要手动补。

同样可以配合魔棒：选中同一明度或同一色块的像素，再微调色相。例如阴影里加一点紫、高光里加一点黄，或根据场景光源（蜡烛绿光、蓝色法术球等）给相邻物体加上环境色。

示例：白色骷髅在绿色蜡烛光下带绿高光：红色小怪被蓝色能量球照到，带蓝色光感：最后再整体检查一遍，修掉错线、漏色和杂点即可。小结这套流程的重点是：先灰度定构图与光影，再用叠加层快速铺基础色，最后用魔棒精简色数并手动做色相偏移。

不追求一次画到完美，而是分阶段：脑暴→灰度→上色→精修→色相与细节。用 Aseprite 和鼠标就能在较短时间内产出含角色、敌人、UI 和场景的像素 Mockup，适合做同人图、宣传图或关卡预览。

若你还没试过叠加层上色，可以从一张小 Mockup 开始练一轮，再根据自己的习惯调整图层与容差。

参考资料[1]https://itch.io/t/5702967/pixel-tutorial-creating-pixel-art-mockups: https://itch.io/t/5702967/pixel-tutorial-creating-pixel-art-mockups