用眼睛捕捉每一粒像素：圖標可以這樣畫

@邵飛Design 這篇文章是放在即將出版的書里，因為愚人節辭職創辦了一家界面設計公司，忙的不可開交，所以很久沒有寫教程與朋友們互動了，在此特將一篇教程奉獻出來，希望可以幫助大家，也提高自己。

有一個想法

如果你被那些精致的圖標吸引了，如果你是一位圖標發燒友，如果你有好的想法正在尋找方法實現，那么這是一個很好的起點，因為那些誘人的藝術表現形式會誘惑著你不斷的獲取它們。得到這些藝術表現形式，你不必花去大量的金錢，起初，你只需要有一個好想法。

當我們在瀏覽網頁，體驗APP，使用軟件時，會發現越來越多的圖標都和身邊的事物很相似，日歷、相機、購物車等。沒錯，因為設計者會設計出貼近生活的圖標，識別性更高，讓用戶在眼睛掃過的1到2秒內，便知道這個圖標代表著什么。由此結論，對于新手設計者就可以從身邊、從生活中去尋找素材。

（1-1）

（1-2）

有一個態度

我習慣用筆去記錄生活中的一些有意義或者無意義的想法，科技發展很快，現在我只需用iphone的記事本，便可以快速的記錄在等汽車時突現的想法。記錄久了就會把它當成設計清單，哪些可以用平面廣告的形式去表現的更震撼，哪些可以用動畫的形式去表現的更有趣，哪些則是用ICON的形式去表現的更有點擊欲望。

大腦是一個龐大的庫，記錄的數據多，就會出現一個黯淡無光的點子，因為關聯性引出了眾多元素，組成了一個Good idea，這個在后期提到制作一個整體風格界面中是非常重要的。

有一張紙一支筆

律師在法庭上會運用自己準備好的邏輯思維加上強有力的資料證據去辯論，心理學家會恰當的使用各種專業的咨詢技術，讓來訪者接納自己，意識到自身存在的問題，而設計者起初則是通過一張紙和一支筆去將自己的想法實現給自己看，從而去分析此想法的實施方法與拓展性。圖2-1為我在繪制塑料質感的草圖，快速的將想法繪制到紙上，以方便我更好的去研究塑料質感的表現形式。

（2-1）

（2-2）

有一個行為

戰爭前，我們在乎盾牌的密度、盔甲的輕度、武器的鋒利。廝殺時，需要勇氣、技巧、爆發力、體力。而戰前，我們如何挑選出最精良的武器，如何獲得最大的勝率？

我們需要一個行為，我會每天給自己指定一個目標，例如每天一標，一星期一教程，讓清單因為我們的行為而供不應求。

每天有大量的設計愛好者訪問設計網站，去“學習”別人的好作品，與其說學習，不如說是浪費時間，10%的人會仔細的瀏覽一次并去思考。30%會去把瀏覽過的收藏起來，便于以后瀏覽。60%的人會發表一些自己的感想與作者互動。80%的人則看看圖，刺激下自己，發一句：大神，膜拜呀！然后叉了網頁。我只想說這90%的人會在15分鐘內忘記所看見的一切。我們需要做1%的人，就是去實踐，不管大神的作品是否牛的想讓你放棄這個行業，也不管自己的功底有多差，去做吧，你會發現其實大神也不過如此。很多朋友問我如何提高設計水平，我說了一大堆之后，他們通常會說：你功底好當然能做的好，像我們沒有基礎的就不行了。我很好奇什么是功底，功底是圖層疊加疊出來的，沒有功底就去疊加啊，疊加的多了，自然就有功底了，所以這些借口的背后還是因為沒有行為。

當然，繪制圖標的標準不能用藝術品的標準去衡量，好看不是關鍵，所以我們在繪制草圖的時候，不必要擔心自己的美術基礎是否扎實，只要把自己的想法通過繪制的表現形式展示出來就可以，因為手稿是給自己看的，讓我們更加認知自己的設計是否合理，不是為了畫出來裝X的。

當我們在紙上完成自己的思路后，盡量的在紙上去修改，如果沒有定稿，在進行軟件實現的時候修改會花費大量的時間。

接下來讓我們動手去實踐繪制一個ICON。（以下操作在Photoshop中完成）

（3-1）

練習上圖（3-1）的質感可以讓我們學習到如何把握好光影，因為盒子有凹有凸。首先我們需要新建很多層將盒子的結構繪制出來，將其拼湊到一起。

（3-2）

這些外形都可以用鋼筆工具去實現，我們可以先用色塊去表現物體的明暗，背景用灰色，這樣無論是高光和陰影都可以看的見。

（3-3）

用同樣的方法繪制出盒子里的方塊，記得一定要分圖層，便于修改。

（3-4）

凹凸感的繪制就需要用到“加深”和“減淡”工具，調整曝光度的參數，值越大效果越明顯，所以我們在繪制的時候，盡量讓曝光度值的參數設置小一點，這樣微調起來可以拿捏的準。

（3-5）

一像素的偏移可以起到很大的作用，讓物體看上去更有凹凸感。

（3-6）

在網上搜索“皮材質”關鍵字會出來很多皮質感素材，就可以拿來用了，直接用圖層疊加到需要添加材質的圖層上就可以了。

（3-7）

增加一些高光，讓方塊更有玻璃的質感，更加通透。

(3-8)

首先觀察物體的投影，我們發現傳統的高斯模糊或者圖層樣式里的投影根本無法做到真實生活中物體的投影，在這里我們使用動感模糊，改變它的角度，這樣會使投影更加真實。

（3-9）

陰影我用了三層，運用了運動模糊和涂抹工具，可以找個實物去觀察它的投影，運用多層疊加到一起，讓陰影更加真實。

（3-10）

（3-10）為最終效果，大家可以感覺到對于形態比較復雜的圖標，圖層混合模式里的效果很難實現，這時候就需要我們運用一些微調工具，例如：加深、減淡、涂抹、橡皮擦、蒙板等。不放過每一粒像素，有時候感覺自己畫的圖標有問題，突破不了，不是手法的問題，很多是缺少觀察。希望大家多嘗試，試著運用以上的技巧把缺少的那塊補上吧！

原文地址：sparkdesign.cn
文章作者：@邵飛Design（推薦關注）

 
================關于優設網================
“優設網uisdc.com“是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量28萬的人氣微博@優秀網頁設計?，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎？
添加?優秀網頁設計?微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：