高階技巧!聊聊LOGO 設(shè)計(jì)中的視覺(jué)矯正法
編者按:為什么谷歌的新LOGO 不吻合輔助線(xiàn)反而更悅目?這就涉及到LOGO 設(shè)計(jì)中的一個(gè)高階技巧了 —— 視覺(jué)矯正,今天這篇好文用一些簡(jiǎn)單易懂的實(shí)例,幫你搞懂這個(gè)進(jìn)階技巧。
我最早從事的設(shè)計(jì)領(lǐng)域是印刷設(shè)計(jì)(手冊(cè)及單頁(yè)等),會(huì)大量用到網(wǎng)格體系,它是作品專(zhuān)業(yè)度的關(guān)鍵。當(dāng)我開(kāi)始從事 Logo 設(shè)計(jì)時(shí),我也隨之將雷同的規(guī)則運(yùn)用其中,達(dá)到設(shè)計(jì)的同等性。
然而,有些地方好像不太對(duì)勁兒……偶然候,我的 logo 設(shè)計(jì)看起來(lái)并沒(méi)有那么專(zhuān)業(yè)??傊?,我的作品沒(méi)有達(dá)到應(yīng)有的標(biāo)準(zhǔn),可卻又不知是哪里出了錯(cuò)……我的想法應(yīng)該挺不賴(lài)的,但在設(shè)計(jì)實(shí)行中卻總有點(diǎn)題目。
就在這個(gè)時(shí)候,我遇見(jiàn)了一位Logo 設(shè)計(jì)界的大師級(jí)人物,其作品質(zhì)量都是杠杠的。他指出了我作品中有關(guān)字體的題目,并建議我應(yīng)當(dāng)在設(shè)計(jì)中運(yùn)用“視覺(jué)矯正”法則。起初,我并不知其意,但如今回想起來(lái),那些錯(cuò)誤真是顯而易見(jiàn),而如今,我也??匆?jiàn)其他設(shè)計(jì)師犯著與我當(dāng)初雷同的錯(cuò)誤。
輔助線(xiàn)、規(guī)則和網(wǎng)格都是極好的,但同時(shí),我們也必要適當(dāng)運(yùn)用“視覺(jué)矯正”來(lái)打破規(guī)則。是的,偶然候,你的確必要忽視參考線(xiàn),用眼睛來(lái)判斷設(shè)計(jì)是否“看起來(lái)”遵循了網(wǎng)格體系(大概聽(tīng)起來(lái)很怪,甚至反直覺(jué),但且聽(tīng)我說(shuō)完,你就會(huì)覺(jué)得其實(shí)它很合理)。
有了這個(gè)啟發(fā),我隨即發(fā)現(xiàn)了 logo 設(shè)計(jì)中有很多值得細(xì)致的視錯(cuò)覺(jué)征象。其實(shí),許多大型品牌公司在設(shè)計(jì)標(biāo)志時(shí),都已經(jīng)這些細(xì)節(jié)考慮進(jìn)去了。理解到這點(diǎn),幫助我的 Logo 作品上升了一個(gè)條理,以下我就來(lái)把所學(xué)所知與大家分享。
完善大概看起來(lái)并不完善(反之亦然)
去年,谷歌發(fā)布了新品牌標(biāo)識(shí)。其中,圖標(biāo) G 被用于各大社交媒體。
我很喜好谷歌的新版設(shè)計(jì)。然而,有設(shè)計(jì)師卻不那么認(rèn)為。這位設(shè)計(jì)師將“完善”的輔助線(xiàn)置于設(shè)計(jì)上,指出了一些顯明的“題目”,并將其更正(見(jiàn)下圖),可改后的效果卻略有些失衡。的確,新設(shè)計(jì)的物理位置完全正確,卻總感覺(jué)哪里錯(cuò)了,而“非完善”的原版設(shè)計(jì)卻有更完善的視覺(jué)結(jié)果。
谷歌的 G 圖標(biāo)是個(gè)很好的例子,我們看到了設(shè)計(jì)師是以最終視覺(jué)結(jié)果為基準(zhǔn),而非機(jī)械地遵照正確的網(wǎng)格與輔助線(xiàn)體系。偶然候,你也必要這么做,作品質(zhì)量大概就會(huì)有突破。
簡(jiǎn)而言之,網(wǎng)格體系是參考,而非規(guī)則。記得用眼睛來(lái)判斷。
字體設(shè)計(jì)中的“上凸和下沉”
字體設(shè)計(jì)師 Tobias Frere Jones 有一個(gè)很贊的博客,里面詮釋了許多字體技巧。假如大家想要多多理解字體設(shè)計(jì)方面的細(xì)節(jié)題目,我力薦這個(gè)博客。今天,要分享的是其中有關(guān)字體“上凸和下沉 (overshoot)”的內(nèi)容。
大家一路來(lái)看下面這張圖片,方形和圓形并排放置,當(dāng)圓形與方形在數(shù)值上是完全等高時(shí),圓形就會(huì)顯得略小……為避免如許的狀態(tài),我們必要略為增長(zhǎng)圓形的高度,使它在視覺(jué)上看起來(lái)和方形是劃一大小。這個(gè)高度的增長(zhǎng)就被稱(chēng)為“字體的上凸和下沉(overshoot)”
花一些時(shí)間,好好學(xué)習(xí)四周的字體……從如今開(kāi)始,你就會(huì)開(kāi)始看見(jiàn)上文所述的情況,完全停不下來(lái)……
格式塔理論
人類(lèi)的大腦有一些神奇的功能。由于世界是如此復(fù)雜,所以我們的大腦會(huì)聰明地嘗試組織各類(lèi)視覺(jué)元素,將他們組成“完備個(gè)體”。在生理學(xué)中,有一個(gè)術(shù)語(yǔ)用來(lái)形容這個(gè)征象的,叫作格式塔。
我們可以將許多格式塔原理運(yùn)用到 logo 設(shè)計(jì)中,例如:相似性、延續(xù)性、封閉、鄰近、圖形與背景關(guān)系原則。
我最?lèi)?ài)的格式塔理論案例就是 WWF 的 logo 中那個(gè)熊貓圖標(biāo),它行使了格式塔“封閉原則”來(lái)完成熊貓圖形,事實(shí)上,那只是一些分散的元素。
格式塔理論提示著我們,不但要考慮畫(huà)面中有什么,更要考慮畫(huà)面中沒(méi)有出現(xiàn)的又有什么……(是不是很容易呢?)
放射征象
假如設(shè)計(jì)一款白底上的深色 logo,那么,勢(shì)必也必要制出深底上的反白版本。
大部分人認(rèn)為只必要將 logo 的顏色改為白色就大功告成了,然而,事情卻并沒(méi)有那么簡(jiǎn)單。你會(huì)發(fā)現(xiàn)一些很奇妙的狀態(tài)……反白的 logo 看起來(lái)好像更“肥”一些,顏色的對(duì)比讓統(tǒng)一個(gè) logo 看起來(lái)像增了肥一樣平常!是不是很新鮮?這個(gè)錯(cuò)覺(jué)就叫作放射征象。
榮幸的是,有一個(gè)很簡(jiǎn)單的解決方法。在設(shè)計(jì) logo 的反白版本時(shí),可以加上細(xì)細(xì)的描邊,將其擴(kuò)展成圖形,再用 Illustrator 的路徑探求器來(lái)把它刪除。那么,詳細(xì)要去除多少“重量”,就要由你的雙眼來(lái)決定了。我們的終極目標(biāo)是讓反白版本的設(shè)計(jì)在視覺(jué)上看起來(lái)和黑色版本正確雷同。
以上這些例子就是我在設(shè)計(jì) logo 時(shí)會(huì)考慮到的視錯(cuò)覺(jué)狀態(tài)。你是否有遇見(jiàn)過(guò)其它情況呢?一路來(lái)分享吧。
本文地址:http://www.likemindfilms.com/tutorial/di3985.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線(xiàn)面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專(zhuān)題頁(yè)面設(shè)計(jì)篇
- 專(zhuān)訪(fǎng):石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏