掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

我在 UI 課上告訴大家,圖標做成下面這樣是不可能的,精致度、統一性、差異化都沒有:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

其實你只需要有一定的審美,就可以做出足夠優秀精致的圖標,我在課上現場給大家演示了一下,今天也在這分享一下。

往期教程:

你只需要做三件事情,就可以讓你做出足夠優秀的作品

第一:找到合適的圖標素材

第二:增強設計素材的統一性

第三:給設計素材加入自己的想法

我們這次做的圖標分別為:通知、商城、發現、我的。

第一:找到合適的圖標素材

我就拿最常用的阿里巴巴圖標庫,打開網址,找通知圖標,直接下載第一頁,第 1 排第 2 個:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

放大如下:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

接下來是商城圖標,繼續搜索商城,我們選用第一頁,第 2 排第 2 個:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

放大如下:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

相同的方式,我們找到以下四個圖標的原始素材:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

這里面我們需要注意,在找素材的時候,你至少需要找到一兩個不太一樣的圖標,否則整體就會比較普通,我們現在這樣看上去,第四個“我的”圖標,相對來說不一樣一點,至少沒那么常見:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

第二:增強設計素材的統一性

有了素材之后,我們首先要讓他們看起來是一套的,所以在統一性上需要優化,先優化大小和線條粗細:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

大小和粗細優化完之后,我們再優化下圓角統一性,現在很明顯,只有第二個圖標是圓潤的,其他的都是有點硬朗的,可以進行統一下:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

直角圓角統一了之后,還有一個統一性就是斷線,只有第二個沒有斷開的設計,所以我們再把商城進行斷線處理:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

第三:給設計素材加入自己的想法

大家要明白,雖然我們可以直接下載圖標素材,而且可以通過審美讓他們變得相對精致統一,但素材畢竟還是通用的,我們還是需要融入自己的想法和設計,不能完全依賴素材,舉一個最簡單的例子,“我的”這個圖標,他的腦袋是圓形的,那我們是不是可以把他改成矩形的?

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

比如一些細節的調整,像通知圖標,感覺有點禿,是不是可以讓中間伸出一點寬度來:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

細微調整之后,如果覺得還不夠,我們還可以繼續添加新的設計語言,比如增加配色點綴:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

就這樣,這幾個圖標,漸漸的就成為了你自己的作品!

我們在放適當的包裝一下:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

我們再對比一下原始的素材:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

效果還是提升很大的!

所以,做任何事情,一定要講究方法,不能死腦筋,否則進步就很慢。

我估計大家肯定還沒看夠,菜心老師這么多年的經驗,大家跟著我學習,我再拿一個更有難度的,同學問我老師這種古風的圖標怎么做,上面是他找的參考,下面是他自己做的:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

我問他,普通圖標做成啥樣?他說做成這樣:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

我就。。。。。

這里面他犯了兩個邏輯問題:

第一個問題:基礎圖標都差很多,卻想著做更難的古風圖標

第二個問題:他在做更有難度的圖標時,依然在自己想著做,而不是在別人的基礎上去進行二次創新,雖然他找了參考,但是他畫的東西和別人的參考沒有半毛錢關系。

這兩個邏輯問題,就導致他一定是沒結果的。

假設現在是我來做幾個古風圖標,分別為首頁、文物、推薦,我們依然用剛才的方法論:

第一:找到合適的圖標素材

第二:增強設計素材的統一性

第三:給設計素材加入自己的想法

第一:找到合適的圖標素材:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

第二:增強設計素材的統一性

社區的房子,我們都改成線性語言,然后再加一個豎線:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

文物圖標這個鼎,我們可以縮短四個角落的線條,讓中視覺更加聚焦中間:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

扇子,我們做一定的簡化處理,讓它變得更加工整:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

最后我們整合到一起,效果就可以變成這樣:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

是不是看起來就精致統一很多啦。

第三:給設計素材加入自己的想法

接下來就是繼續融入自己的想法,比如融入一些粗細的筆觸,看起來更有古香古色的味道:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

甚至你還可以增加更多細節:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

當然,你也可以做減法,做更簡潔的版本:

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

能玩的還是挺多的,而且也很有意思,但不管怎樣,我都是在一個基礎之上進行局部創新,而不是在經驗不足的情況下追求 100%的創新,哪怕是這么火爆的哪吒 2 和黑悟空,那也是站在歷史文化的基礎上進行的局部創新,但是很多沒有經驗的設計師,就喜歡自己瞎琢磨,最后導致啥也做不出來,然后開始懷疑自己!

希望今天的案例可以給你一點啟發,如果很長時間沒有進步,可以停下來思考下,是不是方法和方向都錯了。

設計從來不是閉門造車,點擊收藏這篇干貨,下次遇到瓶頸時記得回來溫習這三步心法。

歡迎關注作者的微信公眾號:「菜心設計鋪」

掌握這3個方法,新手也能做出精致的圖標設計(附實戰演示)

收藏 100
點贊 113

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。