今日教程｜像素畫場(chǎng)景 Mockup 制作流程（Aseprite）

本輪關(guān)鍵詞：像素 UI / 場(chǎng)景 Mockup。

做游戲宣傳或同人圖時(shí)，經(jīng)常需要一張“像游戲畫面”的像素 Mockup：角色、敵人、UI 和環(huán)境擠在一張圖里。

我按 itch.io 上 imonk 的分享自己走了一遍：只用 Aseprite 從灰度草圖到疊加層上色、再精簡(jiǎn)色數(shù)與色相偏移，流程清晰、出圖也快。

下面把步驟和要點(diǎn)整理成一篇，方便直接照著做。

原文鏈接：https://itch.io/t/5702967/pixel-tutorial-creating-pixel-art-mockups[1]

一、腦暴與構(gòu)圖

Mockup 的畫布有限，不可能塞下整關(guān)，所以要先想清楚：哪些元素必須有，哪些可以舍棄。

至少要有一個(gè)玩家角色、若干敵人、UI 元素，以及能代表場(chǎng)景或關(guān)卡的環(huán)境元素；其余細(xì)節(jié)可以邊畫邊加，但主體不齊就別硬上色，否則很容易畫到一半發(fā)現(xiàn)構(gòu)圖不對(duì)又要重來。

如果是改編已有游戲（例如某作的某一關(guān)），腦暴會(huì)輕松很多——只要在像素風(fēng)格下選出最有代表性的東西即可；若是原創(chuàng)構(gòu)圖，建議先在小圖或草稿層上試幾個(gè)版式，再定稿。

示例：Maximo: Ghosts to Glory 地獄關(guān) Mockup

示例：Dark Souls 伊札里斯場(chǎng)景

示例：Gauntlet Dark Legacy 嘉年華關(guān)

二、灰度草圖（Value Sketching）

不必一上來就選色。

先用純灰度（或單色）把整張 Mockup 的明暗、構(gòu)圖和細(xì)節(jié)都畫出來，不追求完美，只要“該有的形狀和光影都有”即可。

這樣可以專心管造型與光影，避免一邊想顏色一邊想結(jié)構(gòu)導(dǎo)致手忙腳亂。

多開幾個(gè)圖層沒關(guān)系，例如：一層畫場(chǎng)景與道具、一層畫角色與敵人、一層畫 UI 框與按鈕。

三、疊加層上色（Coloring）

灰度定好后，不要直接在灰度層上涂色，也不要一個(gè)像素一個(gè)像素手動(dòng)選每個(gè)明度的色。

在 Aseprite 里新建一兩個(gè)圖層，把混合模式設(shè)為疊加（Overlay），不透明度調(diào)到約 50%，然后在這些層上只涂基礎(chǔ)色：草→綠、木頭→棕、金屬→灰、金→黃橙、石頭→灰/棕/紅、皮膚→棕/白/黃褐等。

疊加模式會(huì)自動(dòng)把這些基礎(chǔ)色“疊”在灰度光影上，你就不用再手動(dòng)畫每一階的明暗色。

例如 Gauntlet 風(fēng)格的 UI 元素，先保持灰度：

在疊加層上涂上基礎(chǔ)色（圖中暫時(shí)隱藏了 UI 線框以便看清色塊）：

再把底下的 UI 層打開，就得到帶光影的彩色稿，接下來只要做清理與微調(diào)：

其他 Mockup 未精修前也可以用同樣方式先鋪一版顏色：

四、精簡(jiǎn)色數(shù)與清理（Polish）

疊加上色會(huì)產(chǎn)生很多“肉眼不易分辨、但確實(shí)存在”的過渡色，色數(shù)一多畫面容易臟、也偏離像素畫的簡(jiǎn)潔感。

新建一個(gè)精修層，用 Aseprite 的魔棒（容差約 10）選中相近顏色的像素塊，把它們合并成少數(shù)幾個(gè)主色，讓色板更干凈、對(duì)比更明確。

下圖是過多相近色（以及 jpeg 壓縮產(chǎn)生的雜色）的例子：

用魔棒選區(qū)合并后，色塊更清晰：

五、色相偏移（Hue-shifting）

疊加層不會(huì)自動(dòng)做色相偏移（陰影偏冷/高光偏暖等），需要手動(dòng)補(bǔ)。

同樣可以配合魔棒：選中同一明度或同一色塊的像素，再微調(diào)色相。

例如陰影里加一點(diǎn)紫、高光里加一點(diǎn)黃，或根據(jù)場(chǎng)景光源（蠟燭綠光、藍(lán)色法術(shù)球等）給相鄰物體加上環(huán)境色。

示例：白色骷髏在綠色蠟燭光下帶綠高光：

紅色小怪被藍(lán)色能量球照到，帶藍(lán)色光感：

最后再整體檢查一遍，修掉錯(cuò)線、漏色和雜點(diǎn)即可。

小結(jié)

這套流程的重點(diǎn)是：先灰度定構(gòu)圖與光影，再用疊加層快速鋪基礎(chǔ)色，最后用魔棒精簡(jiǎn)色數(shù)并手動(dòng)做色相偏移。

不追求一次畫到完美，而是分階段：腦暴→灰度→上色→精修→色相與細(xì)節(jié)。

用 Aseprite 和鼠標(biāo)就能在較短時(shí)間內(nèi)產(chǎn)出含角色、敵人、UI 和場(chǎng)景的像素 Mockup，適合做同人圖、宣傳圖或關(guān)卡預(yù)覽。

若你還沒試過疊加層上色，可以從一張小 Mockup 開始練一輪，再根據(jù)自己的習(xí)慣調(diào)整圖層與容差。

參考資料

https://itch.io/t/5702967/pixel-tutorial-creating-pixel-art-mockups: https://itch.io/t/5702967/pixel-tutorial-creating-pixel-art-mockups