MakeBead

像素圖編輯器 — 逐像素繪製復古像素藝術

從白紙開始,用256色調色盤逐像素繪製。一像素一像素地放置,或用填充工具快速填充區域。完美適合遊戲精靈、網頁圖標、頭像和復古風格藝術創作。匯出清晰的PNG檔案。

圖片轉換手動設計

我的顏色

儲存你常用的顏色 —— 它們會在所有作品中保留。

自訂顏色

所有顏色 (256)

範本

點擊範本即可載入上方設計器。

如何從零繪製像素畫

1

打開編輯器

預設32×32的空白像素圖布已準備好,可以立即開始。

2

選色並繪製

從256色調色盤選擇顏色,在網格上點擊或拖拽放置像素。

3

優化和調整

用撤銷/重做修正錯誤,用橡皮擦清除,用填充工具補充,隨時可以改變畫布大小。

4

匯出PNG

下載PNG檔案,分享到社交媒體、遊戲或網頁。

功能特色

256色像素專用調色盤

精選256種像素藝術色彩。從經典8位遊戲風格到現代漸變色應有盡有。

精確的像素繪製工具

筆工具單像素繪製、填充桶快速鋪色、取色器採樣、橡皮擦刪除。所有工具都有快捷鍵。

靈活的畫布尺寸

從小型16×16圖標到100×100詳細畫作。任何時候都可以改變大小而不丟失已有內容。

50步撤銷歷史

Ctrl+Z隨時撤銷。大膽嘗試配色和構圖,沒有後顧之憂。

PNG匯出與網格預覽

匯出清晰的PNG檔案,每個像素都是完美的方塊。支援顯示網格線輔助。

瀏覽器即用,完全免費

無需安裝軟體,無需註冊帳户。任何瀏覽器中立即開始繪製。

什麼是像素圖編輯器?

像素圖是電子遊戲的藝術語言——從任天堂紅白機、掌機遊戲到現代獨立遊戲,像素圖通過有意識地放置每一個像素,創造出獨特的、手工感的視覺效果。

像素圖編輯器與普通圖片編輯器完全不同。它有清晰的網格、像素對齐的工具、適合低分辨率的調色盤。你的每一次點擊都是一個有意義的創意決定。

MakeBead的像素圖編輯器給你256色調色盤、精確的繪製工具和一鍵PNG匯出——創建遊戲精靈、網頁圖標、頭像所需的一切都在這裡。

空白畫布上的像素畫基本功

先依用途選畫布尺寸,選定就別再改

像素畫的尺寸是一套約定俗成的規格,而這些規格之所以存在,是因為它們真的好用。16×16 是最經典的圖塊(tile)與精靈圖(sprite)尺寸——紅白機的角色、Minecraft 的物品圖示、網站的 favicon 都是這個大小。32×32 足夠讓角色有臉、有姿勢。64×64 可以畫一張半身像或一隻細節豐富的敵人,100×100 則能畫一整個場景。依照作品的用途來挑尺寸,因為一隻在 64×64 畫好的角色縮到 16×16 只會糊成一團,而一個 16×16 的圖示放大之後,也還是那個 16×16 的圖示,只是變大了而已。

動筆前就先定案。之後再調整尺寸雖然保得住像素,卻保不住構圖:原本填滿 32×32 畫面的角色,到了 64×64 就變成縮在角落的小人。如果你在畫一整組作品——一套圖塊、一組圖示、一隊角色——請為整組決定同一個畫布尺寸,每一張都用它,這樣它們放進遊戲或排在頁面上時,比例才會一致。

調色盤的紀律:色階與色相偏移

256 色的調色盤是一份菜單,不是要達成的目標。大多數完成的精靈圖只用 8 到 16 種顏色,並且排成一組組「色階」(ramp):同一種材質從陰影到亮部的三到五個階段。好的像素畫與扁平的像素畫差別在於,色階不只是一路變亮——它還會偏移色相。陰影往藍或紫偏,亮部往黃或橘偏,所以一件紅衣服的陰影是偏冷的深紅,亮部是偏暖的珊瑚色,而不是單純更粉的紅。

先建好色階,再開始畫。為每一種材質挑出中間色調,再選一個陰影色和一個亮部色,讓它們在明度之外也偏移色相,並試著讓同一組色階跨多種材質重複使用——同樣的三個灰色可以同時是盔甲、石頭和雲。當你精靈圖裡的兩個顏色接近到必須放大才分得出來,其中一個就沒有存在的必要。

乾淨的線條:1-2-1 規則與手工抖色

像素畫裡的斜線其實是階梯,而眼睛只有在階梯規律的時候才會把它讀成一條平順的直線。45° 的線是每一階一個像素。更平緩的線則是每一階連續兩個、三個或四個像素——而這些連續段的長度必須全部相同,否則線看起來就是彎的。最經典的錯誤是兩條線交會的轉角多出一個重疊的像素;擦掉它,轉角就會變俐落。畫的時候用單像素寬度的畫筆,並且經常縮小檢視;在 8 倍放大下看不見的鋸齒,在 1 倍下會全部現形。

抖色(dithering)——兩種顏色交錯成的棋盤格——是像素畫在有限調色盤下假造出第三種顏色與漸層的手法。兩個色階之間 50% 的棋盤格,看起來就像是它們中間的那一階;更稀疏的排列則像是更柔和的過渡。把它用在天空、大面積表面的陰影和金屬上;小型精靈圖就別用了,在 16×16 上棋盤格只會看起來像雜訊。

1 倍檢視下的可讀性與剪影測試

作品最終會以原始尺寸、或原始尺寸的整數倍被看見,絕對不會是你作畫時的放大倍率。每隔幾分鐘就把格線關掉、把整張畫布當成一個整體來看;更好的做法是瞇著眼看它。如果細節糊掉之後,姿勢、物件或字母仍然辨認得出來,剪影就是對的。如果不行,再多的陰影也救不了它——先把輪廓修好。

用比填色更深一階的顏色(不是純黑)畫一個像素寬的描邊,能讓精靈圖在任何背景上都清楚可辨。純黑描邊在淺色背景上有效,到了深色背景就消失了;「選擇性描邊」——在形體背光的那一側用深色、迎光的那一側用淺色——是現代像素畫最常用的技法,而只要色階已經建好,用畫筆點對顏色就能做到。

匯出時不要糊掉

PNG 匯出會把畫布上的每一格寫成一個影像像素,不做任何平滑處理,這正是遊戲引擎想要的格式。之後還可能讓它糊掉的,是下一步:縮放。像素畫永遠只用整數倍縮放——2 倍、3 倍、4 倍——並使用最近鄰(nearest-neighbour)內插。在 Unity 裡,是把貼圖的 Filter Mode 設成 Point、Compression 設成 None;在 Godot 裡,是把 texture filter 設成 Nearest;在瀏覽器裡,則是 image-rendering: pixelated。150% 的縮放、或任何雙線性重新取樣,都會把你畫的每一條邊變軟。

留空的格子會匯出成透明,所以精靈圖完全不需要背景色。如果作品是要放上網頁或文件、而不是進遊戲,就以畫布原始尺寸匯出,讓頁面自己去縮放;或是為了列印一次匯出 4 倍——千萬不要用影像編輯軟體的預設設定去縮放 PNG。

更多免費設計工具

想把照片轉換成拼豆圖案,或設計其他手工藝?

常見問題

應該從什麼尺寸開始?

16×16適合小圖標,32×32適合遊戲角色和精靈,64×64用於詳細人物。任何時候都可以改變大小。

怎樣快速填充大面積?

用填充工具(快捷鍵F)點擊,可以快速填充相同顏色的連續區域。

能否匯出為PNG?

完全支援。匯出的PNG非常清晰,每個像素都是完美的方塊。可以用於遊戲、網頁或社交媒體。

完全免費嗎?

是的,100%免費,不限數量。支援直接在瀏覽器創建和匯出。

傳送回饋

發現了 bug、功能缺失,或者只是想打聲招呼?我們閱讀每一則訊息。

或直接寄信: contact@makebead.com