"今日教程｜像素畫場景 Mockup 制作流程（Aseprite）"

今日教程｜像素畫場景 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 開始練一輪，再根據自己的習慣調整圖層與容差。

參考資料

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