請問這種舊日系遊戲中像素畫風的圖片是如何做到的？

12-11

就是這種風格的畫風，在小時候的遊戲里很多都是這樣的RPG和人物角色。這種風格有沒有什麼專業的學名？如果我想把一張高清圖片變成這種畫風，又該如何操作？

在歐美的話這叫Pixel Art。。起源於早起的遊戲系統。
現在也有很多遊戲在使用，例如移植版的FF1-6，以及電腦上的修女救父等等。。

因為是一種藝術形式，拿圖片做不是不可以，但是效果不會很好。。。
方法大致如下：

找一張圖片（細節別太複雜）

稍微模糊一下

把圖片大小縮小若干倍（例如10倍）

然後選擇鉛筆工具（不能用刷子）進行修改

直接縮小，而不要使用馬薩克工具，因為你編輯的時候是一個一個像素編輯，而馬賽克濾鏡不會給你真的像素。

歸根到底，最好還是要原創。

畫像素畫的軟體，我來推薦個可能不那麼主流的，Fireworks.

一些形狀可以直接用 Fireworks 的矢量工具畫，然後將抗鋸齒模式調成「無」，就能獲得「像素感」，而不必一個一個點、一根一根線地畫；有必要時，可以將矢量對象平面化然後當作點陣圖編輯。Fireworks 比 Photoshop 輕量，而比 Pixen 這樣的專門像素畫軟體更強大，而且矢量對象也相對容易修改。

上個例子。我的 Twitter 頭像就是用 Fireworks 畫的，純矢量。

推薦一個 OS X 下的（曾經是）開源軟體（當然 MAS 上是賣錢的），叫做 Pixen;

我以前經常直接用它畫像素風的 UI。
Pixen/Pixen · GitHubgithub 鏈接，目前由於大家只 star 不 pull request……已經不更新到 git 上了……

你是問手畫還是問自動化生成？
自動化生成的演算法在 2013 年發到了 SIGGRAPH：Content-Adaptive Image Downscaling
下面是論文裡面的幾個截圖

【教程多圖】

windows上自帶的畫板就能做到，簡單易學，包教包會。
因為對於像素畫有愛好~我也來分享一下小經驗，希望更多的小夥伴加入我們的像素大家庭。
教三幅簡單的像素畫。

簡單版精靈球。

複雜版精靈球。

魔性可達鴨の凝視
=== === ===
來更新一下~
=== === ===
【準備】

用的win7自帶的畫板，感覺XP的版本實在一些，隱藏的比較深，不過大家小時候肯定玩過吧。

就是這個。

打開後先勾選【網格線】，畫畫的時候作為輔助，不過畫多了也可以不用的啦，畢竟看起來頭暈。

ctrl鍵+滑鼠滑輪可以快速調整大小。（畫板中對於Ps、Ai的快捷鍵不通用，這點非常不方便）調整到畫面最小。

右下角拉伸畫布到40*40。這個看要畫的的大小定，不過畫普通圖片我一般都在 25~50。

在工具裡面選擇【鉛筆】

【粗細】選擇最細的。
--- --- ---
【簡單精靈球】

因為原圖很簡單，占的畫板面積小，就用2*2的作為一個像素單位。

用【選擇】勾選【透明選擇】之後框選2*2的單位方塊。開始畫輪廓。

就不停地ctrl C+ctrl V移動一下位置就行了。

選擇【顏料桶】上色。

上色，畫出高光。

關閉【網格線】選項。保存。
--- --- ---
【複雜精靈球】

圓的都可以很偷懶畫一小塊複製旋轉就行。

調整顏色就完成了。
--- --- ---
【可達鴨】

找一張比較小的圖，很糊也不要緊，放在畫板邊上對著原圖畫。

在畫中間畫一個十字用來定位。然後用灰色隨意畫出大致形狀，線條位置。

用黑色畫可達鴨的線條。注意不要出現下面這種線條↓↓↓

不能連起來，不然後面會很醜。

用【顏料桶】工具選擇灰色倒一下，然後再選擇右擊灰色的地方就可以只剩黑色線條啦。
這裡說一下【顏色1】、【顏色2】的作用，前者是當前使用的顏色，後者是背景色，後者影響到【橡皮】【選擇】等工具的使用，後面在【鉛筆】也會用到，左鍵【顏色1】、右鍵就是【顏色2】很方便。

修改、調整。

上色。不要吐槽顏色。。。色板上直接選的。。

陰影上色。

【顏色1】作為陰影，【顏色2】是可達鴨的顏色，這樣可以滑鼠左右隨意修改。

取消【網格線】，繼續調整，這裡鴨嘴小了點就拉大了一個像素，最後保存。

小圖看起來就不會有明顯鋸齒感啦，是不是又回到了玩GBA的感覺！

羞恥圖發錯了
找不到那個教程了...
有知友說get到了不得了的技能
就讓這個錯誤羞恥的掛著造福人類把...

這種叫做 8bit像素風格 是原來電腦顯示解析度比較低的時候的一種圖像的處理方法。如果高清圖片想變成這種風格，兩種方法，第一個縮小圖片尺寸，像素低的時候放大就是這個樣子的了。另外的是用濾鏡——像素化——馬賽克

通過調整單元格大小來得到你想要的效果。

這兩種方式都會使圖像產生一定程度上的模糊。
最好的方法是用鉛筆自己填像素格子。
不過雖然這樣說，我們還是可以用這種方法做出一些還算好玩的東西

簡單說就是：
勾線、填色、添加陰影、添加高光、休整五個步驟。
你可以google一下： pixel art tuts，有很多教程。
PIXEL ART TUTORIALS

The Pixel Art Tutorial (cure / pixeljoint)
HUGE Collection of Pixel Art Tutorials (pixeljoint)
Pixel Art Tutorials (Derek Yu)
Pixel Art Tutorial (Natomic / Mark)
Big Collection of Pixel Art Tutorials (Gas 13)
Pixel Art (drbubu)
Pixel Tutorial (Final Boss Blues)

Pixel Art Tutorials (deviantART)
More Pixel Art Tutorials (TIGSource Forums)
Even More Pixel Art Tutorials (Pixel-Zone / Some dead links…)
Learning Pixel Art (Black Golem)
A Beginner』s Guide To Spriting (TIGSource Forums)
2D Tile Art Basics (Flash Game Dojo)

PIXEL ART INSPIRATION

HUGE collection of Pixel Art, Mockups and more from TIGSource forums!!
Tzigla (a place for collaborative pixelated drawings in 100×100 pixel squares)
Pixel Art Mega Thread (Something Awful Forums)
Pixel Art Rebirth In Digital Animations (Game Comments)
Hall of Fame for Games Featuring Outstanding Pixel Art (TIGSource Forums)

這個軟體滿足你的要求

嗯以前在自己專業內的話題里答過一個類似的題，其實是相同的思路，在這裡再和大家分享一下吧~
繪製這種像素畫風格使用的是Adobe Illustrator里的「創建對象馬賽克」命令，感覺最終效果會好一些，所以後期加工的工作量應該會有所減少。
這裡就用魔法少女小圓中的學姐（侵刪）來舉個栗子吧= =

首先在AI里置入圖片
然後選擇「對象」→「柵格化」，默認設置就可以了
接著「對象」→「創建對象馬賽克」

其中有幾個選項解釋一下：
1）新建大小：生成的馬賽克圖案的尺寸，要是和原圖一樣大就不用管；
2）拼貼間距：每個馬賽克單元之間的距離，為0則馬賽克之間無縫隙，數值越大縫隙越大；
3）拼貼數量：就是對柵格化圖像進行水平和縱向細分的份數，份數越多當然每個馬賽克單元越小；
4）使用比率：如果想生成的馬賽克是正方形的話，在生成前要單擊一下這個按鈕，之後AI會對拼貼數量的高度和寬度數值進行調整，保證生成的是正方形馬賽克；
面板設置後點「確定」就好，如果不滿意可以再對拼貼數量進行調整。這樣打碼的學姐就完成了（= =好像哪裡不對）。。。