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

2018-01-15 1589 0
這篇文章是放在即將出版的書里,因為愚人節(jié)辭職創(chuàng)辦了一家界面設(shè)計公司,忙的不可開交,所以很久沒有寫教程與朋友們互動了,在此特將一篇教程奉獻出來,希望可以幫助大家,也提高自己。 有一個想法 如果你被那些精致的圖標吸引了,如果你是一位圖標發(fā)燒友,如果你有好的想法正在尋找方法實現(xiàn),那么這是一個很好的起點,因為那些誘人的藝術(shù)表現(xiàn)形式會誘惑著你不斷的獲取它們。得到這些藝術(shù)表現(xiàn)形式,你不必花去大量的金錢,起初,你只需要有一個好想法。 當我們在瀏覽網(wǎng)頁,體驗APP,使用軟件時,會發(fā)現(xiàn)越來越多的圖標都和身邊的事物很相似,日歷、相機、購物車等。沒錯,因為設(shè)計者會設(shè)計出貼近生活的圖標,識別性更高,讓用戶在眼睛掃過的1到2秒內(nèi),便知道這個圖標代表著什么。由此結(jié)論,對于新手設(shè)計者就可以從身邊、從生活中去尋找素材。
(1-1) (1-2) 有一個態(tài)度 我習慣用筆去記錄生活中的一些有意義或者無意義的想法,科技發(fā)展很快,現(xiàn)在我只需用iphone的記事本,便可以快速的記錄在等汽車時突現(xiàn)的想法。記錄久了就會把它當成設(shè)計清單,哪些可以用平面廣告的形式去表現(xiàn)的更震撼,哪些可以用動畫的形式去表現(xiàn)的更有趣,哪些則是用ICON的形式去表現(xiàn)的更有點擊欲望。 大腦是一個龐大的庫,記錄的數(shù)據(jù)多,就會出現(xiàn)一個黯淡無光的點子,因為關(guān)聯(lián)性引出了眾多元素,組成了一個Good idea,這個在后期提到制作一個整體風格界面中是非常重要的。 有一張紙一支筆 律師在法庭上會運用自己準備好的邏輯思維加上強有力的資料證據(jù)去辯論,心理學家會恰當?shù)氖褂酶鞣N專業(yè)的咨詢技術(shù),讓來訪者接納自己,意識到自身存在的問題,而設(shè)計者起初則是通過一張紙和一支筆去將自己的想法實現(xiàn)給自己看,從而去分析此想法的實施方法與拓展性。圖2-1為我在繪制塑料質(zhì)感的草圖,快速的將想法繪制到紙上,以方便我更好的去研究塑料質(zhì)感的表現(xiàn)形式。
(2-1) (2-2) 有一個行為 戰(zhàn)爭前,我們在乎盾牌的密度、盔甲的輕度、武器的鋒利。廝殺時,需要勇氣、技巧、爆發(fā)力、體力。而戰(zhàn)前,我們?nèi)绾翁暨x出最精良的武器,如何獲得最大的勝率? 我們需要一個行為,我會每天給自己指定一個目標,例如每天一標,一星期一教程,讓清單因為我們的行為而供不應求。 每天有大量的設(shè)計愛好者訪問設(shè)計網(wǎng)站,去“學習”別人的好作品,與其說學習,不如說是浪費時間,10%的人會仔細的瀏覽一次并去思考。30%會去把瀏覽過的收藏起來,便于以后瀏覽。60%的人會發(fā)表一些自己的感想與作者互動。80%的人則看看圖,刺激下自己,發(fā)一句:大神,膜拜呀!然后叉了網(wǎng)頁。我只想說這90%的人會在15分鐘內(nèi)忘記所看見的一切。我們需要做1%的人,就是去實踐,不管大神的作品是否牛的想讓你放棄這個行業(yè),也不管自己的功底有多差,去做吧,你會發(fā)現(xiàn)其實大神也不過如此。很多朋友問我如何提高設(shè)計水平,我說了一大堆之后,他們通常會說:你功底好當然能做的好,像我們沒有基礎(chǔ)的就不行了。我很好奇什么是功底,功底是圖層疊加疊出來的,沒有功底就去疊加啊,疊加的多了,自然就有功底了,所以這些借口的背后還是因為沒有行為。 當然,繪制圖標的標準不能用藝術(shù)品的標準去衡量,好看不是關(guān)鍵,所以我們在繪制草圖的時候,不必要擔心自己的美術(shù)基礎(chǔ)是否扎實,只要把自己的想法通過繪制的表現(xiàn)形式展示出來就可以,因為手稿是給自己看的,讓我們更加認知自己的設(shè)計是否合理,不是為了畫出來裝X的。 當我們在紙上完成自己的思路后,盡量的在紙上去修改,如果沒有定稿,在進行軟件實現(xiàn)的時候修改會花費大量的時間。 接下來讓我們動手去實踐繪制一個ICON。(以下操作在Photoshop中完成)
(3-1) 練習上圖(3-1)的質(zhì)感可以讓我們學習到如何把握好光影,因為盒子有凹有凸。首先我們需要新建很多層將盒子的結(jié)構(gòu)繪制出來,將其拼湊到一起。
(3-2) 這些外形都可以用鋼筆工具去實現(xiàn),我們可以先用色塊去表現(xiàn)物體的明暗,背景用灰色,這樣無論是高光和陰影都可以看的見。
(3-3) 用同樣的方法繪制出盒子里的方塊,記得一定要分圖層,便于修改。 (3-4) 凹凸感的繪制就需要用到“加深”和“減淡”工具,調(diào)整曝光度的參數(shù),值越大效果越明顯,所以我們在繪制的時候,盡量讓曝光度值的參數(shù)設(shè)置小一點,這樣微調(diào)起來可以拿捏的準。 (3-5) 一像素的偏移可以起到很大的作用,讓物體看上去更有凹凸感。 (3-6) 在網(wǎng)上搜索“皮材質(zhì)”關(guān)鍵字會出來很多皮質(zhì)感素材,就可以拿來用了,直接用圖層疊加到需要添加材質(zhì)的圖層上就可以了。
(3-7) 增加一些高光,讓方塊更有玻璃的質(zhì)感,更加通透。 (3-8) 首先觀察物體的投影,我們發(fā)現(xiàn)傳統(tǒng)的高斯模糊或者圖層樣式里的投影根本無法做到真實生活中物體的投影,在這里我們使用動感模糊,改變它的角度,這樣會使投影更加真實。
(3-9) 陰影我用了三層,運用了運動模糊和涂抹工具,可以找個實物去觀察它的投影,運用多層疊加到一起,讓陰影更加真實。
(3-10) (3-10)為最終效果,大家可以感覺到對于形態(tài)比較復雜的圖標,圖層混合模式里的效果很難實現(xiàn),這時候就需要我們運用一些微調(diào)工具,例如:加深、減淡、涂抹、橡皮擦、蒙板等。不放過每一粒像素,有時候感覺自己畫的圖標有問題,突破不了,不是手法的問題,很多是缺少觀察。希望大家多嘗試,試著運用以上的技巧把缺少的那塊補上吧! 


13
評論區(qū)(0)
正在加載評論...