遊戲中的圖標怎麼設計出來的？

作者：鄧傑（Jack）

炎炎夏日已經到來，馬上就進入暑期時間，還記得小時候暑假是最舒服的，可以和朋友整天打遊戲，出去瘋玩，渴了就喝北冰洋汽水，熱了吃綠舌頭、娃娃頭雪糕，晚上和大人們一起看射鵰英雄傳。

那時候沒有智能手機和網路，生活簡單節奏慢，挺好噠~

來，入正題，我們本次每周一練的是-粉色冰棒

在遊戲公司研發項目，我們需要給項目組製作相應的遊戲UI界面、圖標，而圖標的設計製作需要和界面的風格和配色相互呼應。

尤其是圖片的大小尺寸，往往根據使用不同，繪製尺寸需要300-1500大小，比如正常圖標通常是300-500像素就夠了，而logo、徽章、特賣商品需要繪製1000左右甚至更大尺寸。

外包上線項目《蒼之紀元》-已授權可展示

我們通常在繪製草圖階段就會把大圖和小圖同時放PS軟體中一起檢查識別度、項目匹配，在繪製時候就會注意細節的設計等問題。

外包上線項目《蒼之紀元》-已授權可展示

所以如果是新人，在入行初期養成良好的工作習慣往往會提高工作效率也會更加容易畫出好的品質作品。

案例分享：

相信很多設計朋友在工作中都會收到各類奇葩的工作需求，比如沒有參考圖，沒有尺寸，沒有設計說明等三無產品，但是——我們必須給出一個碉堡的設計出來。

另外除此之外可能整個工作過程也是沒有人幫助、沒有領導拍板、沒有同事交流等囧境……

下面情節如有雷同，不是巧合，是緣分！

某個周五快要下班的晚上，我手機工作群收到了項目同事的工作需求，關鍵是當晚必須要！！

於是我放下背包重新打開電腦，開始拚命收集素材加速幹活，

（這也是很多設計師沒有女/男朋友的主要原因，加班太多）

生活中很多不明白的事情我喜歡多動手網上找，

一會時間我就明白為啥叫綠舌頭了。

好有魔性的冰棒~

原來如此？！

幾分鐘後我已經找了很多參考圖，心裡也有了大致的設計思路。

繪製圖標我喜歡畫的大一些，避免遊戲項目做HD（高清）版本，如果畫太小要重畫。

打開photoshop新建一個1000x1000像素大小的畫布，解析度72就可以。

簡單的繪製一下我們需要繪製的圖標草圖，個人一般喜歡用ps自帶的硬邊筆刷。

按照素材做了一個綠舌頭版本，

總是看著很奇怪，這是為啥呢？？

既然項目都說了只要項目合適，顏色可以自定義。

於是換了下顏色，試試粉紅色版本

這邊草圖大家可以把大體的明暗關係簡單刻畫下，

這樣心裡有數後期畫成啥樣。

截圖是我個人筆刷，前面4-5個筆刷使用頻率最高的，硬邊筆刷、噴筆、升級版19號筆刷、特效筆刷等。

（建議小夥伴花一些時間整理自己常用的筆刷，這樣會大大提高我們日後工作效率）

使用漸變工具或者平塗加噴筆都可以得到下面效果，

這邊建議大家可以先鋼筆勾勒一下繪製區域，

這樣畫出來的圖標更加精美喲~

因為冰棒是通透感比較強的材質，我們可以畫出一些木棒，這樣顯得更棒。

這邊繪製使用了選區加畫筆工具

增加質感，添加了一些冰棒的反光，完善材質效果。

同樣是選區加噴筆繪製

這部增加了冰棒底部反光

增加了環境色，讓圖標看上去顏色不單調，反光處用了一點藍色冷光做顏色互補。

注意圖層畫筆用噴筆，疊加效果

增加高光，鋼筆勾勒整個高光，然後做一個蒙版，畫筆上下和中間部分擦一下即可得到這樣效果。

進一步完善細節，增加反光和次要高光

增加折射和水滴細節，這樣冰棒更有真實性

水滴的細節大圖，需要使用畫筆手繪刻畫

請注意分層，避免工作中的返工

細節光影和高光不能少

接下來我們畫木棒，注意這邊投影我後面給一點模糊，細節會更美妙

刻畫出木棒的厚度，注意反光和邊緣轉折厚度

給了2像素的高光，這樣木棒看著更自然，不會像個「紙片」

給了點小細節—透光，

整體調整，給了一點輝光，這樣圖標看上去更棒

背景是用漸變工具拉的，簡單出效果

整體飽和度和細節小小調整了下

我們圖標就畫好了？

還記得我們之前教過的，畫好了圖標需要和整體界面和其它圖標品質、細節搭配檢查，這樣才能判斷是否是一個合格的圖標設計作品。

把畫好的圖標放到我們實際項目中的界面中去，檢查配色、風格和識別度。

作者：ET

當前圖標為選中態，選中時候會比正常圖標放大一些。

這個時候如果細節畫的過多或者太碎需要取捨修改，

如果比例、配色、識別度、風格都沒問題，那麼很容易就通過了。

課後練習：

請根據上面說的檢查圖標設計定律，請選出下面每組你認為最棒的編號。

請大聲告訴我答案是？

謝謝，下期見。

-------------------------

往期精華文章導讀：

8年UI設計經驗，總結出這一本書。

這個人偷偷為你工作了9個月，只為了讓你不用擔心被罰款幾萬元！

設計一個logo500塊那麼貴？淘寶35塊錢就有了。

-END-

越努力，越幸運。

這裡是龐門正道。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！