用品牌基因法做圖標(biāo)設(shè)計,高級UI設(shè)計師才會的手法!

      作者: cyRotel
      2017-06-26
      5313

      很多新人也許并不了解什么是品牌性,更不知道如何將品牌性融入到圖標(biāo)當(dāng)中,不過沒關(guān)系,看了這篇文章你就不會那么困惑了!

      圖標(biāo)設(shè)計如何具有品牌性?這可能是設(shè)計師工作中經(jīng)常會遇到的問題。

      但很多新人也許并不了解什么是品牌性,更不知道如何將品牌性融入到圖標(biāo)當(dāng)中,不過沒關(guān)系,看了這篇文章你就不會那么困惑了!

      需要強調(diào)一點,文中所講的品牌基因是指視覺上的哦!

      來看下大綱:

      1. 提取特定形狀

      2. 吸取品牌顏色

      3. 抓取風(fēng)格特點

      1. 提取特定形狀

      通過對logo或品牌元素提取特定形狀,這個形狀是固定的、具象的,例如圓形,三角形、字母甚至是logo本身等等。

      提取出形狀基因后,如何與圖標(biāo)相結(jié)合呢?有三種方法:

      1.1 直接應(yīng)用

      最常見的用法就是直接將整個logo作為圖標(biāo)(比如首頁),如下圖:

      直接應(yīng)用.png

      再比如MONO的標(biāo)簽欄圖標(biāo),設(shè)計的非常大膽,提取logo上面的4個字母——M、O、N、O后,直接將其作為圖標(biāo),如下圖:

      MONO的標(biāo)簽欄圖標(biāo).png

      但是這種方法還是有很大的風(fēng)險,因為畢竟每個字母與功能本身的含義沒什么聯(lián)系,如果不是非常個性化的app,還是盡量少用吧!

      1.2 做為外輪廓

      將提取的形狀作為整套圖標(biāo)的外輪廓,例如谷歌play一樣,提取出三角形后,整套圖標(biāo)都是以三角形作為外形,如下圖:

      做為外輪廓.png

      再比如你提取出一個圓形基因,也可以將其作為外輪廓使用,如下圖:

      作為外輪廓使用.png

      1.3 將圖形與圖標(biāo)巧妙融合

      假如我在logo上面提取出一個圓形作為基因,我們可以將這個圓形巧妙的與圖標(biāo)進行融合,如下圖:

      將圖形與圖標(biāo)巧妙融合.png

      但這里必須要強調(diào)一點,很多時候,我們很難將一個特定形狀融入到所有的圖標(biāo)當(dāng)中,如果強行融合,難免會讓人覺得死板生硬,所有一定要有所取舍,例如案例中的圖標(biāo)也不是所有都融入了圓形,如下圖:

      融入了圓形.png

      有同學(xué)可能會問,為什么案例中有些圖標(biāo)沒有融入圓形基因,也不影響整套圖標(biāo)的和諧統(tǒng)一呢?

      因為它們?nèi)谌肓肆硗庖粋€品牌基因——顏色。也就是我們接下來要講的內(nèi)容。

      2. 吸取品牌顏色

      這招是最簡單直接的方法,直接吸取品牌色作為視覺基因,以此來進行圖標(biāo)設(shè)計,舉幾個例子:

      圖標(biāo)設(shè)計.png

      圖標(biāo)設(shè)計1.png

      顏色基因,我就不多講了,比較容易理解。

      但是大家仔細(xì)觀察優(yōu)酷這套圖標(biāo),我們會發(fā)現(xiàn)除了顏色基因以外,好像在logo上還提取了一個疊層的效果,而這種疊層的效果又屬于另外一種品牌基因——風(fēng)格特點,我們繼續(xù)往下看。

      3. 抓取風(fēng)格特點

      這部分是今天內(nèi)容的重點,也是我最近做圖標(biāo)的一些感受。

      我們先來講講如何抓取風(fēng)格特點!

      又要開始拿我的作品來舉例了,還是iwork那個logo:

      iwork那個logo.png

      除了顏色以外,我在logo上面提取出兩個特點:

      斷:是指整個logo有兩個斷開的地方

      層:是指logo有三個不同顏色的深淺,形成前后關(guān)系,也就是層級。

      那如何將這兩個特點運用到圖標(biāo)上呢?我們看下圖:

      整個logo有兩個斷開的地方.png

      第一步:先畫好基礎(chǔ)形;

      第二步:將合適的地方斷開;

      第三步:將局部(小塊)調(diào)整顏色,以區(qū)分層級;

      這樣一個具有品牌基因的圖標(biāo)就誕生了!

      其它的圖標(biāo)也是一樣的道理,最后得到整套圖標(biāo)如下圖:

      品牌基因的圖標(biāo).png

      上面這個案例只是抓取風(fēng)格特點的一種結(jié)果,不同的案例會有不同的結(jié)果,例如網(wǎng)易云音樂的圖標(biāo),是抓取logo上圓潤的風(fēng)格特點,如下圖:

      網(wǎng)易云音樂的圖標(biāo).png

      而優(yōu)酷的圖標(biāo)則是抓取疊層的風(fēng)格特點,如下圖:

      優(yōu)酷的圖標(biāo).png

      小密圈則是抓取斷線的風(fēng)格特點,如下圖:

      小密圈則是抓取斷線.png

      以上就是菜心近期總結(jié)的《品牌基因法做圖標(biāo)》整套知識體系,后期會不斷的優(yōu)化改進,如果你有什么好的想法也歡迎和我私下交流,我們一起將這個系統(tǒng)完善起來,幫助那些需要幫助的好朋友們。

      最后再提醒大家一下,當(dāng)一種品牌基因無法突顯品牌性的時候,我們可以使用多種基因相互組合。方法一定要靈活運用,切記不要鉆牛角尖,不然菜心就白總結(jié)了!


      0
      1
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務(wù)聯(lián)系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯(lián)系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學(xué)科技園東區(qū)9號樓2層

      版權(quán)信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號

      主站蜘蛛池模板: 视频在线观看一区二区| 亚洲AV成人精品一区二区三区| 国产精品亚洲一区二区麻豆| 日韩人妻无码一区二区三区| 精品国产福利在线观看一区| 中文字幕在线看视频一区二区三区| 日韩一区二区三区视频| 国产在线精品观看一区| 3d动漫精品啪啪一区二区中| 国产成人精品一区二区秒拍| 国产成人精品无人区一区| 国产精品久久久久一区二区| 伊人久久一区二区三区无码 | 亚洲一区中文字幕在线观看| 91久久精一区二区三区大全| 无码人妻一区二区三区在线水卜樱 | 在线日韩麻豆一区| 乱码人妻一区二区三区| 国产美女在线一区二区三区| 人妻体体内射精一区二区| 久久综合精品不卡一区二区 | 久久国产一区二区三区| 免费一区二区三区| 国产一区二区免费视频| 亚洲爆乳精品无码一区二区三区 | 国产乱码精品一区二区三区四川人 | 内射一区二区精品视频在线观看| 中文字幕日韩欧美一区二区三区| 无码丰满熟妇浪潮一区二区AV| 中文字幕无码不卡一区二区三区| 一区国产传媒国产精品| 精品无码人妻一区二区三区18| 伊人久久精品一区二区三区| 亚洲av无码成人影院一区| 国产精品视频免费一区二区| 国产麻豆媒一区一区二区三区| 四虎一区二区成人免费影院网址 | 国产成人AV区一区二区三| 精品一区二区三区在线观看l| 国产精品一区二区久久乐下载| 日韩在线观看一区二区三区|