1. 首先我們打開PS的編輯,選擇首選項,然后打開參考線選項,我們設(shè)定網(wǎng)格間隔為44px,也就是ios系統(tǒng)中標準圖標的大小。然后設(shè)定子網(wǎng)格為8px。
2. 新建一個800*800px的畫布,按快捷鍵 Ctrl+” 鍵調(diào)出剛才設(shè)定的輔助線?,F(xiàn)在每個方格是44*44px。
3. 打開上篇文章中推導(dǎo)出來的系統(tǒng)圖標柵格系統(tǒng)作為設(shè)計圖標的參考。
4. 這次我們選擇UC頭條的圖標作為原形進行重新設(shè)計。選擇UC頭條的icon作為原型的原因是,5個圖標比較有代表性,分別是圓形圖標、豎長形圖標和異性圖標。唯獨還缺一個正方形圖標,所以我們把第一個首頁圖標換為一個正方形的咨訊圖標。這樣我們就能夠在同一套圖標中對比5種不同形狀的圖標設(shè)計。
風(fēng)格設(shè)計1
首先我們先運用布爾運算做一個套方正的圖標,線條為2px,圖標邊角都采用直角的設(shè)計方式,給人方正硬朗的感覺。我們把這個圖標風(fēng)格作為基礎(chǔ)造型,下邊我們將在這個圖標風(fēng)格上進行不斷地變化,打造出各種不一樣的設(shè)計風(fēng)格。
風(fēng)格設(shè)計2
我們在風(fēng)格1的基礎(chǔ)上優(yōu)化尖角為圓角圖標。圓角大小設(shè)計定為4px,瞬間圖標的感覺就變得圓潤,親切了很多。這種風(fēng)格也就是市面上最常用到的系統(tǒng)圖標設(shè)計風(fēng)格。
風(fēng)格設(shè)計3
在風(fēng)格2的基礎(chǔ)上我們加粗線條為3px的視覺風(fēng)格。由于線條粗細的調(diào)整,整套圖標的感覺已經(jīng)比較粗壯有力,給人非常可靠穩(wěn)定的感覺。
風(fēng)格設(shè)計4
繼續(xù)加粗線條為4px的視覺風(fēng)格,此時圖標已經(jīng)十分粗壯,但是由于是搭配了圓角的設(shè)計,整套圖標反而給人感覺多了一點點可愛的感覺。這個圖標造型基本就是UC頭條的圖標設(shè)計風(fēng)格了。當(dāng)然由于圖標的加粗,我們發(fā)現(xiàn)訂單圖標內(nèi)部的橫桿視覺上已經(jīng)比其他圖標看起來更重,所以在這種時候我們就將圖標內(nèi)的橫杠適當(dāng)?shù)膭h減一個,以保證圖標的整體視覺一致。
風(fēng)格設(shè)計5
我們繼續(xù)在風(fēng)格3的基礎(chǔ)上將每個icon進行斷點,形成斷線風(fēng)格。注意斷點的位置,一般的是在右側(cè)或圖標下方,一般不會出現(xiàn)在左上側(cè)和圖標中心位置。這時圖標多了一個獨特的特性,就是斷點。一個小小的變化就能呈現(xiàn)不同的視覺感覺,看起來更加的與眾不同了。
風(fēng)格設(shè)計6
順著上邊的思路繼續(xù),我們在斷點中間添加一個小圓點,整套圖標又呈現(xiàn)出了不一樣的感覺。會顯得比較時尚有亮點,給人的印象也會更加深刻了。
風(fēng)格設(shè)計7
我們還可以將icon和app的主色進行結(jié)合設(shè)計,將icon設(shè)計成雙色圖標,提取icon一部分線條或色塊進行色彩變換。這里我們將所有圖標內(nèi)的圖形填充主題色進行搭配,黑色和檸檬黃的色彩搭配使得圖標的時尚感和形式感大大增強,會給用戶眼前一亮的感覺。
風(fēng)格設(shè)計8
當(dāng)然我們也可以嘗試在圖標內(nèi)部填充色塊,并且給它一定的內(nèi)部錯位的設(shè)計營造高光的感覺。這種形式用于點擊選中的效果非常好,閑魚APP的菜單圖標選中效果就采用了這樣的設(shè)計風(fēng)格。
風(fēng)格設(shè)計9
也可以采用半透明的設(shè)計方式,比如我們將圖標內(nèi)部的圖形設(shè)定為50%的透明度。營造不一樣的視覺感受。
圖標演變過程是一個設(shè)計思考過程,我們可以通過不斷的嘗試,尋找一些創(chuàng)意點。今天我們選擇一組圖標進行實例演變,還有很多圖標風(fēng)格沒有說到,我們也可以再去嘗試挖掘更有創(chuàng)意的icon設(shè)計風(fēng)格。以上就是今天講解的內(nèi)容,希望能對大家有所幫助。
填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.lb577.com 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc