簡單四招!教你快速設計優質的圖標流程!
作者:小狼剁辣椒
總結和分享下對現在比較流行的線性圖標和插畫風圖標的一些思路和方法
源文件:http://pan.baidu.com/s/1bpeCujd
我們在設計或者繪製圖標之前,首先要搞清楚圖標的定義,圖標到底是什麼,為什麼要畫圖標等等。圖標是具有指代意義或者象徵某種特殊含義的圖形,在不同場景下圖標的表達含義也會有不同。
一個好的圖標,應至少具有三個特徵:
1指代性——就是象徵具體某個事物或含義。
2識別性——因為有了指代性,圖標本身應具有一定的識別性和辨識度,避免誤讀、抽象主義等。
3審美性——一個優秀的圖標,在視覺上也應有良好的表現。
現在的圖標風格大致可分為擬物化和扁平化,兩者都有自己的優勢,很難說到底是擬物好,還是扁平好。但在這個信息技術和互聯網快速發展的當今,扁平化快速,簡單,直接的信息表達更能迎合這個時代。
而現流行的扁平化風格主要有以下幾種,設計風格因時代而變,以後甚至會出現更優秀的風格,讓我們拭目以待。
大多數初級的設計師在作一些圖標設計和練習時常常會選用素材/臨摹這種方式,而我認為用素材/臨摹是相對低輸入和低產出的方法,雖然我並不是很排斥這種學習方式,但是我們是否能找到一種高效高產出的學習方法呢?
那麼今天我就以線性圖標和插畫風格的圖標做圖標設計的思路和方法給大家。(以下圖標來源於網路,作者名忘記了,不好意思,如有侵權,請與我取得聯繫)
線性圖標是一種簡約,概括,可以說跟早期的印象主義有一些關係。細節想對比較少,我們這裡稱它為「減法圖標」。細節比較豐富,有一些裝飾元素、描邊風格、色塊填充,材質填充等一系列圖標風格都可以說是插畫圖標,我們在這裡稱它為「加法圖標」。
我們先來看兩張圖,可以充分表達圖標設計的核心:「形」,這是圖標的核心思想。
一個圖標的形決定你表達的圖標的含義,所以經常有一些小夥伴會遇到這樣的問題,「這個圖標不太像啊」「這個圖標是什麼啊」等
那首先,我們在找一些元素或者素材本身的時候,需要確定元素本身的形,就是我們之前強調的圖標本身的識別性。
對應剛才的圖標做了個小練習,分別是咖啡,狗,植物。在一定場景下,結合生活本身,圖標也賦予了更多的含義。比如,咖啡可以代表休息。
那接下去是我具體設計圖標的一些方法。第一步:靈感、素材的收集。
這次練習找的素材是蘋果的五個產品,iphoneipadipodmacbookwacth,你可以百度,也可以去蘋果的官網下載素材。
第二步:思考。在設計任何一個圖標作品時,我們應多思考,多理解。首先我們要去看圖標素材的形體結構。
思考,分解,概括。所有物體都離不開立體幾何的拼接,比如下圖macbook的外輪廓是由一個圓角矩形和長方形組合而成。通過這樣的方法,不管什麼物體,我們都可以對它的外形進行一次幾何分解和組合。得到最終的圖形。
第三步:繪製。機械製圖加減法,這是我自己取的名稱。很多工業設計的同學應該都學過機械製圖,有興趣的同學也可以學習下。加減法,之前有提到,線性圖標風格對應的是減法,插畫風格圖標對應的是加法。
物體本身都可以通過機械製圖的方法去繪製它的不同視角的視圖,我們可以通過學習這種方法,僅僅只需要一個角度的物體用線稿的方式繪製出來,這是繪製圖標的第一步,也是非常重要的一步:「形」的準確性。
這次藉助的設計工具時SKETCH(強烈推薦啊,好處我就不多說了。沒有mac的小夥伴裝個黑蘋果吧,雖然我沒有試過。。。)用到的工具主要為上面幾個:形狀,鋼筆,裁剪。
這是產品的立面圖,通過剛才說的機械製圖原理繪製的圖標。
減法圖標——一些圖標,尤其是移動端,圖標的按鈕大小決定了圖標細節的取捨。線性圖標是圖形的提煉和概括。
加法圖標——細節豐富的插畫圖標。通過添加描邊,填色,漸變,陰影、裝飾等細節來豐富圖標。
同樣,輕擬物也是一種加法的繪製方法,更多的還原物體本身的細節。
第四步:視覺統一。任何一個圖標,大多數情況下是以成組出現的,同一組圖標應保證基本的大小視覺比重統一,風格統一等。
圖標不是畫畫,更多的需要直接表達信息和傳遞信息,圖標設計的整個過程都需要設計師不斷的思考,提煉,才能設計出好看以用的圖標。
※尖頭綁帶設計,簡簡單單
※極簡設計
※設計製作可愛的鋼琴圖標!
※設計圈的各位大拿教你如何精簡生活
※一波優質的簡潔冷淡風高端網頁設計作品欣賞
※純乾貨!設計師教你N招選對廚房水槽
※北歐傢具設計 簡約不簡單
※冷絕緣高溫超導電纜均流優化設計方法研究簡述
※美術字設計步驟詳解教程一
※幾組簡潔優雅的品牌設計作品欣賞
※以「錯綜複雜」的「手工細節」令觀眾驚艷!獨一無二的面料肌理設計!!!
※北歐超簡潔實用的優秀設計
※這樣的設計 簡約而不簡單
※三大點教你簡單又時尚的設計~
※UI設計系列教程資源大放送!喜歡就拿走!
※高級定製服裝設計精品課程(第八期)招生簡章
※極簡設計 建築
※兒童最新簡單馬尾辮設計教程,非常的蘿莉風且實用哦!
※解讀!線性化標誌設計