@邵飛Design 這篇文章是放在即將出版的書(shū)里，因?yàn)橛奕斯?jié)辭職創(chuàng)辦了一家界面設(shè)計(jì)公司，忙的不可開(kāi)交，所以很久沒(méi)有寫教程與朋友們互動(dòng)了，在此特將一篇教程奉獻(xiàn)出來(lái)，希望可以幫助大家，也提高自己。

有一個(gè)想法

如果你被那些精致的圖標(biāo)吸引了，如果你是一位圖標(biāo)發(fā)燒友，如果你有好的想法正在尋找方法實(shí)現(xiàn)，那么這是一個(gè)很好的起點(diǎn)，因?yàn)槟切┱T人的藝術(shù)表現(xiàn)形式會(huì)誘惑著你不斷的獲取它們。得到這些藝術(shù)表現(xiàn)形式，你不必花去大量的金錢，起初，你只需要有一個(gè)好想法。

當(dāng)我們?cè)跒g覽網(wǎng)頁(yè)，體驗(yàn)APP，使用軟件時(shí)，會(huì)發(fā)現(xiàn)越來(lái)越多的圖標(biāo)都和身邊的事物很相似，日歷、相機(jī)、購(gòu)物車等。沒(méi)錯(cuò)，因?yàn)樵O(shè)計(jì)者會(huì)設(shè)計(jì)出貼近生活的圖標(biāo)，識(shí)別性更高，讓用戶在眼睛掃過(guò)的1到2秒內(nèi)，便知道這個(gè)圖標(biāo)代表著什么。由此結(jié)論，對(duì)于新手設(shè)計(jì)者就可以從身邊、從生活中去尋找素材。

（1-1）

（1-2）

有一個(gè)態(tài)度

我習(xí)慣用筆去記錄生活中的一些有意義或者無(wú)意義的想法，科技發(fā)展很快，現(xiàn)在我只需用iphone的記事本，便可以快速的記錄在等汽車時(shí)突現(xiàn)的想法。記錄久了就會(huì)把它當(dāng)成設(shè)計(jì)清單，哪些可以用平面廣告的形式去表現(xiàn)的更震撼，哪些可以用動(dòng)畫(huà)的形式去表現(xiàn)的更有趣，哪些則是用ICON的形式去表現(xiàn)的更有點(diǎn)擊欲望。

大腦是一個(gè)龐大的庫(kù)，記錄的數(shù)據(jù)多，就會(huì)出現(xiàn)一個(gè)黯淡無(wú)光的點(diǎn)子，因?yàn)殛P(guān)聯(lián)性引出了眾多元素，組成了一個(gè)Good idea，這個(gè)在后期提到制作一個(gè)整體風(fēng)格界面中是非常重要的。

有一張紙一支筆

律師在法庭上會(huì)運(yùn)用自己準(zhǔn)備好的邏輯思維加上強(qiáng)有力的資料證據(jù)去辯論，心理學(xué)家會(huì)恰當(dāng)?shù)氖褂酶鞣N專業(yè)的咨詢技術(shù)，讓來(lái)訪者接納自己，意識(shí)到自身存在的問(wèn)題，而設(shè)計(jì)者起初則是通過(guò)一張紙和一支筆去將自己的想法實(shí)現(xiàn)給自己看，從而去分析此想法的實(shí)施方法與拓展性。圖2-1為我在繪制塑料質(zhì)感的草圖，快速的將想法繪制到紙上，以方便我更好的去研究塑料質(zhì)感的表現(xiàn)形式。

（2-1）

（2-2）

有一個(gè)行為

戰(zhàn)爭(zhēng)前，我們?cè)诤醵芘频拿芏取⒖椎妮p度、武器的鋒利。廝殺時(shí)，需要勇氣、技巧、爆發(fā)力、體力。而戰(zhàn)前，我們?nèi)绾翁暨x出最精良的武器，如何獲得最大的勝率？

我們需要一個(gè)行為，我會(huì)每天給自己指定一個(gè)目標(biāo)，例如每天一標(biāo)，一星期一教程，讓清單因?yàn)槲覀兊男袨槎┎粦?yīng)求。

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

當(dāng)然，繪制圖標(biāo)的標(biāo)準(zhǔn)不能用藝術(shù)品的標(biāo)準(zhǔn)去衡量，好看不是關(guān)鍵，所以我們?cè)诶L制草圖的時(shí)候，不必要擔(dān)心自己的美術(shù)基礎(chǔ)是否扎實(shí)，只要把自己的想法通過(guò)繪制的表現(xiàn)形式展示出來(lái)就可以，因?yàn)槭指迨墙o自己看的，讓我們更加認(rèn)知自己的設(shè)計(jì)是否合理，不是為了畫(huà)出來(lái)裝X的。

當(dāng)我們?cè)诩埳贤瓿勺约旱乃悸泛螅M量的在紙上去修改，如果沒(méi)有定稿，在進(jìn)行軟件實(shí)現(xiàn)的時(shí)候修改會(huì)花費(fèi)大量的時(shí)間。

接下來(lái)讓我們動(dòng)手去實(shí)踐繪制一個(gè)ICON。（以下操作在Photoshop中完成）

（3-1）

練習(xí)上圖（3-1）的質(zhì)感可以讓我們學(xué)習(xí)到如何把握好光影，因?yàn)楹凶佑邪加型埂Ｊ紫任覀冃枰陆ê芏鄬訉⒑凶拥慕Y(jié)構(gòu)繪制出來(lái)，將其拼湊到一起。

（3-2）

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

（3-3）

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

（3-4）

凹凸感的繪制就需要用到“加深”和“減淡”工具，調(diào)整曝光度的參數(shù)，值越大效果越明顯，所以我們?cè)诶L制的時(shí)候，盡量讓曝光度值的參數(shù)設(shè)置小一點(diǎn)，這樣微調(diào)起來(lái)可以拿捏的準(zhǔn)。

（3-5）

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

（3-6）

在網(wǎng)上搜索“皮材質(zhì)”關(guān)鍵字會(huì)出來(lái)很多皮質(zhì)感素材，就可以拿來(lái)用了，直接用圖層疊加到需要添加材質(zhì)的圖層上就可以了。

（3-7）

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

(3-8)

首先觀察物體的投影，我們發(fā)現(xiàn)傳統(tǒng)的高斯模糊或者圖層樣式里的投影根本無(wú)法做到真實(shí)生活中物體的投影，在這里我們使用動(dòng)感模糊，改變它的角度，這樣會(huì)使投影更加真實(shí)。

（3-9）

陰影我用了三層，運(yùn)用了運(yùn)動(dòng)模糊和涂抹工具，可以找個(gè)實(shí)物去觀察它的投影，運(yùn)用多層疊加到一起，讓陰影更加真實(shí)。

（3-10）

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

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

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