利用品牌基因法進(jìn)行圖標(biāo)設(shè)計(jì)

上一期答應(yīng)大家的指巡,這周把品牌基因法分享出來(lái)犁钟,久等了。

在看這篇文章之前你需要清楚稚字,我所講的東西并不是什么權(quán)威饲宿,只是在工作中總結(jié)出來(lái)的一些的小經(jīng)驗(yàn)而已,制作圖標(biāo)的方法也有很多種胆描,這里只是給大家一個(gè)思路上的啟發(fā)瘫想,希望能對(duì)你有所幫助吧!

按照慣例昌讲,我們還是先來(lái)看一下本次《利用品牌基因法進(jìn)行圖標(biāo)設(shè)計(jì)》的大綱:

1.什么是品牌基因国夜?

2.如何提取品牌基因

3.如何將品牌基因注入到圖標(biāo)設(shè)計(jì)中

4.圖標(biāo)制作過(guò)程中需要注意的事項(xiàng)

一、什么是品牌基因短绸?

品牌包括了理念车吹、視覺(jué)、行為三個(gè)部分醋闭,而本文所講的品牌基因只是視覺(jué)層面的窄驹。

既然是視覺(jué)上的,那就一定是可以看見的東西证逻。沒(méi)錯(cuò)乐埠,簡(jiǎn)單來(lái)說(shuō),品牌基因就是一個(gè)符號(hào),而這個(gè)符號(hào)可以來(lái)源于任何事物饮戳,就像三星GALAXY SIII的靈感是來(lái)自于大自然的鵝卵石豪治,國(guó)際版QQ的靈感是來(lái)自于氧氣...,但不論怎么樣扯罐,最后我們都需要將這些基因负拟、靈感可視化,變成一個(gè)或者一組符號(hào)傳達(dá)給用戶歹河。

一句話總結(jié):品牌基因(視覺(jué)層面)就是通過(guò)一件事物提取出一個(gè)(或一組)視覺(jué)符號(hào)掩浙。

二、如何提取品牌基因

就拿上期那套圖標(biāo)來(lái)說(shuō)吧秸歧,靈感來(lái)自于哪里呢厨姚?

最初在做“我的”圖標(biāo)時(shí),找了很多參考键菱,網(wǎng)上一搜一大把谬墙,如圖:

但是如果隨便下載一個(gè)改一改就直接用,你會(huì)有一種很不踏實(shí)的感覺(jué)经备,因?yàn)楫?dāng)別人問(wèn)你為什么這樣設(shè)計(jì)的時(shí)候拭抬,你總不能說(shuō)“我看網(wǎng)上都這么做的啊”。

那問(wèn)題就來(lái)了侵蒙,如何能做一個(gè)有理有據(jù)的圖標(biāo)呢造虎?這時(shí)候你的腦袋里就可以思考“品牌基因”了。我們可以去觀察品牌的logo纷闺、輔助圖形算凿、設(shè)計(jì)來(lái)源等等,這些都可以幫助你去提取符號(hào)犁功、特征氓轰。

所以通過(guò)這個(gè)思路我去觀察了logo,如圖所示

將logo的“i”字母放大后波桩,我們會(huì)發(fā)現(xiàn)下面這個(gè)局部形狀和人型(“我的”圖標(biāo))很相似戒努,

所以在經(jīng)過(guò)優(yōu)化之后得到下圖:

這樣當(dāng)別人問(wèn)你為什么設(shè)計(jì)成這個(gè)樣子的時(shí)候,你可以很自信的告訴他镐躲,你是通過(guò)logo上的元素提取優(yōu)化得到的储玫!

但是僅僅做這一個(gè)圖標(biāo)是不夠的,我們需要提煉出一個(gè)能夠貫穿整套圖標(biāo)的視覺(jué)符號(hào)萤皂,于是我再次去觀察和思考logo的樣式撒穷,細(xì)心的同學(xué)可能已經(jīng)發(fā)現(xiàn),其實(shí)整個(gè)logo的每一筆開頭都有一個(gè)共同的特征裆熙,如下圖

而這個(gè)共同的特征就是我們要找的符號(hào)端礼,也就是所謂的品牌基因禽笑,是貫穿整個(gè)logo的靈魂所在,至于這個(gè)特征是怎么來(lái)的蛤奥,那是做logo之前的事情佳镜,這里我們就不在闡述了。

后經(jīng)過(guò)優(yōu)化后凡桥,我將符號(hào)總結(jié)為以下特征:

三蟀伸、如何將品牌基因注入到圖標(biāo)設(shè)計(jì)中?

得到這個(gè)視覺(jué)符號(hào)之后缅刽,就需要將這個(gè)特征注入到我們的圖標(biāo)設(shè)計(jì)中了啊掏,舉個(gè)例子,我們現(xiàn)在來(lái)做“收藏”的圖標(biāo)衰猛,也就是一個(gè)愛(ài)心迟蜜。

那首先我們還是需要去找一些參考,去了解愛(ài)心的結(jié)構(gòu)啡省,并在本子上畫一些草圖娜睛,最后思考如何與我們提取出來(lái)的符號(hào)相結(jié)合。如果這些前期內(nèi)容你都做完了卦睹,恭喜你微姊,我們可以開始電腦繪制了,步驟如下:

就這樣一個(gè)有理有據(jù)的圖標(biāo)就完成了分预。同理,其他圖標(biāo)也用類似的方法進(jìn)行繪制薪捍!

四笼痹、圖標(biāo)制作過(guò)程中需要注意的事項(xiàng)

首先我們來(lái)看一下整套圖標(biāo)的效果

關(guān)于圖標(biāo)設(shè)計(jì)中注意的事項(xiàng),之前有寫過(guò)一篇酪穿,大家可以自行查閱http://www.reibang.com/p/062929b72336凳干,這里針對(duì)這一套圖標(biāo)再來(lái)增加兩點(diǎn)。

1.避免過(guò)于生硬的結(jié)合

當(dāng)有些圖標(biāo)與提取出來(lái)的視覺(jué)符號(hào)很難完全結(jié)合時(shí)被济,那就不要去強(qiáng)行結(jié)合救赐,只要大體調(diào)性是對(duì)的就ok,比如“掃一掃”的圖標(biāo)只磷,最開始我就強(qiáng)行使用了一個(gè)10px的圓角和三個(gè)2px的圓角经磅,如下圖:

做完后,我總覺(jué)得怪怪的钮追,并且有點(diǎn)復(fù)雜预厌,那這時(shí)候倒不如讓四個(gè)圓角都是10px,可能會(huì)看著更舒服一些元媚。再比如有些圓形圖標(biāo)轧叽,我們也無(wú)法將符號(hào)特征融入進(jìn)去苗沧,這時(shí)候只要最后的風(fēng)格與基本特征保持一直就ok,例如斷線和雙色炭晒。

所以大家在執(zhí)行的過(guò)程中千萬(wàn)不要生硬的將符號(hào)特征與圖標(biāo)相結(jié)合待逞,避免造成過(guò)于死板的情況出現(xiàn)。

2.制定好斷線及粗細(xì)規(guī)范

制作斷線的時(shí)候网严,一定要制定好斷線的規(guī)則识樱,比如說(shuō)我在做這套圖標(biāo)的時(shí)候,我會(huì)以50x50px的大小來(lái)繪制圖標(biāo)屿笼,線條描邊是2px牺荠,所有斷線的開口大小為10px,所有的斷點(diǎn)要在大圓角拐角處破開(圓形圖標(biāo)除外)驴一,有了這些規(guī)則之后休雌,才能夠保證你輸出的圖標(biāo)統(tǒng)一、規(guī)范肝断!

3.圖標(biāo)的特征不要太多

我這一套其實(shí)是有一點(diǎn)點(diǎn)復(fù)雜的杈曲,因?yàn)樗瑫r(shí)擁有三個(gè)屬性,分別是不同大小的圓角胸懈、雙色担扑、斷線,正常來(lái)說(shuō)有1-2個(gè)特性就可以了趣钱,不然可能會(huì)讓圖標(biāo)顯的過(guò)于繁瑣涌献,所以大家在作圖標(biāo)的時(shí)候,這一點(diǎn)可以斟酌一下!


好了,以上就是本期分享的《利用品牌基因法進(jìn)行圖標(biāo)設(shè)計(jì)》茂腥,希望能對(duì)大家有所啟發(fā)!

看文章呢卜壕,你需要取其精華去其糟粕,不斷的將精華內(nèi)容納入到自己的知識(shí)體系當(dāng)中烙常,不然...你懂得轴捎,科科!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蚕脏,一起剝皮案震驚了整個(gè)濱河市侦副,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌驼鞭,老刑警劉巖跃洛,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異终议,居然都是意外死亡汇竭,警方通過(guò)查閱死者的電腦和手機(jī)葱蝗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)细燎,“玉大人两曼,你說(shuō)我怎么就攤上這事〔Wぃ” “怎么了悼凑?”我有些...
    開封第一講書人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)璧瞬。 經(jīng)常有香客問(wèn)我户辫,道長(zhǎng),這世上最難降的妖魔是什么嗤锉? 我笑而不...
    開封第一講書人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任渔欢,我火速辦了婚禮,結(jié)果婚禮上瘟忱,老公的妹妹穿的比我還像新娘奥额。我一直安慰自己,他們只是感情好访诱,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開白布垫挨。 她就那樣靜靜地躺著,像睡著了一般触菜。 火紅的嫁衣襯著肌膚如雪九榔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,549評(píng)論 1 312
  • 那天涡相,我揣著相機(jī)與錄音帚屉,去河邊找鬼。 笑死漾峡,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的喻旷。 我是一名探鬼主播生逸,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼且预!你這毒婦竟也來(lái)了槽袄?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤锋谐,失蹤者是張志新(化名)和其女友劉穎遍尺,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體涮拗,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡乾戏,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年迂苛,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鼓择。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡三幻,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出呐能,到底是詐尸還是另有隱情念搬,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布摆出,位于F島的核電站朗徊,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏偎漫。R本人自食惡果不足惜爷恳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望骑丸。 院中可真熱鬧舌仍,春花似錦、人聲如沸通危。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)菊碟。三九已至节芥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間逆害,已是汗流浹背头镊。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留魄幕,地道東北人相艇。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像纯陨,于是被迫代替她去往敵國(guó)和親坛芽。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容