照片 / 圖片轉像素藝術 · 免費,在瀏覽器裡完成

照片與圖片轉像素藝術轉換器 — 免費、線上、免登入

把自己的圖片變成像素藝術

在瀏覽器裡上傳照片,免費把它轉成像素藝術。設定輸出尺寸與色彩數,下載乾淨的 PNG — 然後走進用你的作品打造的 3D 像素世界。免登入。

✦遊戲
把這張照片轉成像素藝術: 32×32 的人像

把圖片轉成像素藝術,順序是先降採樣,再縮減調色盤。你把照片拖到頁面上、設定網格、設定色彩數,然後下載 PNG。轉換器在瀏覽器裡的畫布上執行 — 檔案不會上傳,沒有帳號步驟,匯出檔也不帶浮水印。

兩個控制項幾乎決定結果的一切。網格尺寸決定有多少結構能保留下來。色彩數決定有多少色調能保留下來。這兩個設對,其餘的 — 抖動、邊緣清理、匯出倍率 — 都只是微調。設錯的話,再怎麼手動清理都救不回影像。

將照片轉成像素藝術(即時工具)

第一個畫面是拖放區。把 PNG、JPEG、WebP、GIF 或 BMP 拖上去,或點一下開啟檔案選擇器。影像會在本機解碼並繪製到畫布上。手機拍的大照片會先縮成工作副本,長邊只留幾百像素,因為每次移動滑桿都重跑全解析度轉換會讓預覽卡到不能用。

流程很短,而且不破壞原檔:丟檔案、選網格尺寸、選色彩數、看預覽、下載。工具會把工作副本留在記憶體裡,每次設定變更就重跑降採樣與調色盤縮減,所以在匯出之前不會定案。

匯出是 PNG,倍率為 1× 或整數倍。縮放只使用最近鄰。64×64 的結果以 ×8 匯出會是 512×512,裡面是硬邊的 8 像素方塊。之後不要讓這個檔案再經過 JPEG:壓縮偽影會正好落在你剛清乾淨的邊緣上,還會帶進調色盤裡根本沒有的顏色。

最能把圖片變成像素藝術的兩個設定

網格尺寸是輸出裡的格子數。32×32 的轉換有 1,024 個格子,每個格子都是單一平色。降採樣使用區域平均,而不是平滑的雙三次縮放,因為雙三次會在高對比邊緣產生振鈴,留下看起來像雜點的暈光格。這個設定決定最後的人臉還有沒有眼睛。

色彩數是匯出 PNG 裡的不同顏色數量,從 2 到 64。縮減流程是先建立調色盤,再做最近色指定,所以結果是平坦的索引色影像,不是模糊影像。先提高網格,再提高色彩數:更大的網格能救回糊掉的主體,而多出來的顏色通常只會增加雜斑。

  • 網格尺寸16×16 到 256×256,固定級距。這是輸出的格子數;每個格子會變成一個平色。
  • 色彩數匯出調色盤裡有 2 到 64 種不同顏色。顏色越少,形狀會越清楚,因為陰影只能花在相連的區域上。
  • 抖動預設關閉。Floyd–Steinberg 能在低色彩數下重現漸層,但那些雜訊只要再經過任何縮放就會變得很糟。
  • 背景閾值亮度或透明度的截斷值會把接近白色或接近透明的格子變成透明,讓主體落在乾淨的透明背景 PNG 上。
  • 調色盤來源從影像自動產生調色盤,或鎖定成一組固定色階 — 當多個精靈必須共用同一組調色盤時很好用。
  • 匯出倍率1× 到 8×,只使用最近鄰。32×32 的精靈以 ×8 匯出會是 256×256,而且仍然像素精準。
輸出層級:像素藝術會解析成可以走進去的等角 3D 場景。

如何把照片轉成像素藝術

這些步驟的順序很重要。清完調色盤之後才改網格,會讓你剛才的清理全部白費,因為整張影像會重新映射到一組新的格子。

從最終用途往回推。引擎會放大 ×6 的精靈,需要的格子比同一張圖印成海報還少,因為引擎會在螢幕上把每個格子放大。

1

01

挑一張主體清楚的照片。靠著素牆拍的人像,轉換效果遠比遠距離的團體照好。如果主體佔不到畫面三分之一,先裁切 — 轉換器不會幫你做這件事。

2

02

裁到主體,並盡量用正方形。精靈、圖示和建造計畫都假設 1:1。轉換後才裁切,會浪費你已經花掉的格子。

3

03

選一個符合輸出用途的網格:角色精靈用 32×32,圖示用 64×64,桌布用 128×128 或更大。先測試 16×16:把照片縮到寬 16 像素;如果在那裡輪廓已經看不懂,轉換後也一樣看不懂。

4

04

設定色彩數。角色從 8 到 12 開始,圖示 16 到 24,桌布 32 到 48。如果預覽看起來糊糊的,先提高網格,再提高色彩數。

5

05

轉換並下載 PNG。如果遊戲引擎會縮放精靈,使用 ×1;如果你需要可以直接貼出去的檔案,使用 ×4 或 ×8。

6

06

檢查調色盤。用像素編輯器開啟 PNG,讀取色彩數。它應該等於你設定的數字。如果更高,代表匯出時有東西重新取樣了,通常是啟用了平滑插值的縮放。

7

07

手動清理。移除看起來像雜訊的孤立格子,把輪廓拉直,確認光線來自同一個方向。轉換會移除資訊;它不會無中生有變出細節。

輸出尺寸與色彩數

16×16 的網格是 256 個格子。每個格子都是一個決定,沒有空間留給不承載任何資訊的格子。如果你把 64 色花在這 256 個格子上,平均每個顏色只覆蓋約四個格子。那是雜斑,不是陰影。

調色盤要讀起來像陰影,前提是同一個色階顏色覆蓋一塊相連區域:臉頰、下顎線、布料皺褶。把色彩數想成分配給各區域的預算,而不是一直推、推到預覽看起來比較順眼的滑桿。

把圖片轉成像素藝術時,哪裡最容易出錯

最常見的失敗,是在小網格上把色彩數設得太高。結果在 400% 縮放的預覽裡看起來還可以,一旦在遊戲或聊天視窗以 1× 顯示,就變成髒點。

第二個是在低網格上開抖動。抖動雜訊的設計,是在完整尺寸下讓眼睛平均掉;但在放大檢視的 32×32 精靈上,它就只是一堆錯的像素,而你現在得一個一個擦掉。

第三個是非整數的匯出倍率。32×32 的結果用 ×3 匯出是 96×96,沒問題;分數倍率會產生寬度不均的格子,看起來像一張爛截圖。第四個是壓縮過的來源:已經被重度壓縮的 JPEG,區塊失真早就壓進去了,而量化會忠實地把這些失真重現成一堆幾乎重複的顏色。

網格典型主體色彩預算哪裡會出問題
16×16物品圖示、單一物件、圖磚4–8總共 256 個格子。一張臉沒有空間同時放兩隻眼睛和一張嘴。兩個主體會變成一團看不懂的汙漬。
32×32角色精靈、小型頭像8–16髮絲、文字和細眼鏡框會消失。輪廓必須只有一格寬,否則會吃掉內部空間。
64×64應用程式圖示、人像、道具16–32背景紋理開始跟主體搶注意力。雜亂的背景會變成雜訊,必須壓平。
128×128桌布、海報、牆面藝術32–48這時網格已經比大多數裁切後的手機照片細節還細,所以轉換會重現相機雜訊。
256×256大型桌布、世界紋理、建造計畫48–64只有在來源銳利時才值得。寬度超過大約 128 格之後,轉換器大多只是在展示照片的雜訊。

「把圖片變成像素藝術」與「照片轉像素藝術」的差異

這兩個詞在搜尋裡會回傳不同結果,但描述的是同一個操作。一個借用「圖片」這個詞,另一個借用相機。兩者都不會改變轉換器做的事:降採樣到網格、縮減成調色盤、匯出。

在這個頁面上,它們是同一個動作、同一個工具。預設是 64×64 網格、32 色,對桌布或大型圖示來說是安全的中間值。先動網格,再動色彩。

詞句大家的意思工具裡要改什麼
把圖片變成像素藝術一般性的需求。任何圖片進、任何圖片出,通常是裝飾性用途。不用改。預設網格 64×64,色彩數 32。
照片轉像素藝術用相機詞彙描述的同一個動作。通常是人像、寵物或車。不用改。這種情況更常用到背景閾值。
圖片轉像素藝術同樣的需求,有時其實是指向量描摹。不用改,除非使用者要的是向量輸出,而這個工具不產向量。
把照片像素化有時指的是馬賽克或模糊覆蓋,而不是縮減調色盤。如果你真正想要的是馬賽克,就用低網格搭高色彩數。
8 位元 / 16 位元 濾鏡從舊硬體借來的色彩深度說法。鎖定固定色階,不要用自動調色盤,才能得到那個特定限制。

Minecraft 用的圖片轉像素藝術

Minecraft 的轉換會打破平常的規則,因為輸出不是一張圖,而是一份建造計畫。網格是方塊數量,不是像素數量:64×64 的轉換是一面寬 64 方塊的牆,4,096 個材料方塊。調色盤不是轉換器選的 — 而是你願意蒐集什麼方塊。生存模式裡這組很小。創造模式裡大一些,但仍然有限,而且分佈在各色系之間並不平均。

第二個限制就是為什麼照片需要的方塊數比精靈高。精靈可以在臉部花 16 色。羊毛、混凝土和陶瓦砌成的牆,同一色系可能只給你四個可用的階調,而地形方塊又會加上自己的紋理,跟平色打架。細節只能靠解析度來撐:方塊數加倍,方塊成本變四倍,而這常常是讓特徵保持可讀的唯一方法。

依照你真正願意放置的方塊數來規劃網格。32×32 的牆是 1,024 個方塊,大概是一段長時間的施工。128×128 的牆每層是 16,384 個方塊,還不包含為了陰影加的第二層。匯出 PNG,然後在放置時把它當成逐格參考,不要想全靠腦袋記。

把照片像素對應到方塊

先把照片轉成小網格,再把調色盤限制在允許的方塊清單裡,讓影像中的每個顏色都能對應到某個可放置的方塊。有用的輸出不只是影像,而是材料清單:每種方塊需要多少個,並依數量排序。這會把一張圖變成採購清單。

分層建造。第一層用最暗的色調打出輪廓,第二層是中間調,第三層是亮部與任何單格細節。如果建造範本有幫助,就從像 Mini World 這樣的小型像素風格世界開始,把它的紋理換成你自己的轉換結果,這樣比例、相機高度和方塊密度都已經正確。

可以用轉換結果做出的東西

先選輸出,再選設定,因為每種輸出都會強加一個凌駕其他考量的限制。

引擎會放大的精靈,需要的格子和顏色都比同一張圖拿來當海報少。會重複的圖磚,邊緣必須先接得起來,其他東西才值得修。

  • 遊戲精靈限制:小網格、低色彩數。32×32 以下、16 色以下,放在透明背景上。再大就會佔用圖集空間,而且在這個尺寸加的細節,在螢幕上以 1× 顯示時會消失。
  • 圖示或頭像限制:中等網格、高對比。64×64 到 128×128,24 到 32 色。圖示會以很小的尺寸、從一段距離被讀取,所以主體與背景的對比比陰影更重要。
  • 桌布限制:大網格、多色。128×128 以上,32 到 64 色。觀看者不會把桌布縮小,所以細格子能保留下來;這裡的風險是相機雜訊,不是細節流失。
  • 世界紋理或圖磚限制:無接縫。左邊必須接右邊,上邊必須接下邊。轉換可平鋪的來源,或在轉換前把影像沿兩軸鏡射,再手動修補接縫。

從 2D 轉換到可以走進去的像素世界

你下載的 PNG 既是影像,也是貼圖。3D 遊戲建構器會讀取 PNG,把它註冊成材質,套用到場景裡的幾何上。以整數倍率貼到平面上,像素就會保持方形。如果你希望邊緣銳利,而不是在遠處柔和混色,就把貼圖篩選設成最近鄰,並關閉貼圖的多層細節。

下面嵌入的場景就是在瀏覽器裡執行,用的正是這種紋理。你看到的是用小型像素 PNG 上紋理的牆、地板和道具,來源網格被當成真正的解析度單位:每個像素在表面上就是一個方塊。場景裡的角色精靈也遵循同一條規則 — 小網格、小調色盤、固定相機高度。Agent Sprite Forge 產生的角色精靈就是這種格式,而且跟環境坐在同一套紋素網格上。

一個老實說的限制:3D 表面上的像素紋理,不會隨著相機移動一直保持像素完美。透視會沿著深度把表面不均勻地分割,所以遠牆的格子會被壓成矩形,近牆則會被拉長。像素藝術 3D 場景的處理方式,不是鎖定相機,就是接受距離會改變格子形狀。

讓轉換結果撐過搬到 3D 的過程

使用 2 的次方尺寸 — 32、64、128、256 — 因為它們在表面上能乾淨平鋪,而且在每個貼圖細節層級都能均分。讓各物件的紋素密度保持一致:一面每公尺 128 像素的牆,旁邊放一個每公尺 32 像素的箱子,看起來會像兩款不同的遊戲。

如果紋理會重複,先用它建造之前檢查接縫。在像素編輯器裡把兩份並排,看接合處。大牆上只要有一格不對齊,從場景另一端就看得出來;在影像裡修很便宜,在幾何裡修很貴。

The Cyclops' Island — 一款完全用這種網格藝術打造的像素藝術 3D 遊戲。

更多免費像素工具

如果你已經有照片,就從本頁的轉換器開始。產生器是給沒有照片的時候用的。

  • 線上像素藝術製作器在瀏覽器裡用網格疊加和鎖定調色盤來繪製、編輯轉換後的 PNG,讓清理工作不會超出你設定的色彩預算。
  • AI 像素藝術產生器用文字描述主體,就能取得精靈或場景影像,完全不需要來源照片;對於沒辦法拍乾淨的物件很有用。
  • 像素藝術尺寸指南各種輸出類型對應的網格尺寸與色彩數參考表,給不想實際跑一次轉換、只想看數字的人。

走進它所屬的世界

精靈是一個無處可站的角色。最後一步是別人都沒提供的:把你剛做好的精靈表放進一個有人能走動的世界 — 一座小島、一顆行星、一個下雨的街角。這個網站上的每個世界,都是從一段文字描述做出來,並發布成可以玩的頁面。

常見問題

把圖片變成像素藝術的轉換器免費嗎? +

是的。轉換在你的瀏覽器裡執行,PNG 匯出沒有浮水印,這個頁面也沒有付費層級。

我需要註冊或登入嗎? +

不用。沒有帳號步驟,因為影像從不上傳 — 它會在本機解碼,並繪製到分頁裡的畫布上。

我可以上傳哪些影像格式? +

PNG、JPEG、WebP、GIF(第一幀)和 BMP。只要關閉背景閾值,透明 PNG 就會保留透明通道。

它會移除背景嗎? +

不會自動移除。有個亮度或透明度閾值,可以把接近白色或接近透明的格子變成透明。這在單純、高對比的背景上有效;背景一雜,就會在主體上打出破洞。

我可以自己選調色盤嗎? +

可以。預設是自動調色盤,但你可以把轉換鎖定成固定色階。當多個精靈必須共用同一組調色盤,或你要對上特定的色彩深度限制時,就鎖定它。

上傳有大小限制嗎? +

有實務上的限制,不是硬性上限。非常大的檔案會拖慢預覽,因為每次移動滑桿都會重跑降採樣和量化。上傳前先裁切,或把長邊降到幾千像素。

我可以把結果用在商業用途嗎? +

我們不會對你的匯出加上授權限制或浮水印。限制來自你的來源影像:把你沒有權利的照片拿來轉換,並不會讓你取得它的權利;固定調色盤也可能帶有自己的授權。

我可以把人物照片像素化嗎? +

可以,而且這很常見。使用 32×32 到 64×64 的網格、8 到 16 色,裁切範圍緊貼頭部與肩膀,並且預期眼鏡、牙齒和細小的首飾會消失。輸出是風格化的相似圖像,不是匿名化工具 — 在大網格下,臉仍然可能被認出來。

回到 3D 遊戲建構器

全部 31 個完成的 3D 世界、遊戲和場景都在同一頁 — 每一個都能玩。

平臺: Neta Studio頁面: 照片與圖片轉像素藝術轉換器接著讀: /explore/tool/pixel-art-maker · /explore/tool/ai-pixel-art-generator · /explore/guide/pixel-art-sizes
×