想要文字設(shè)計(jì)玩出新花樣？切割技術(shù)了解一下！
作者：CARRIE COUSINS，來(lái)源：優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)
原標(biāo)題：想讓文字更出彩？試試通過(guò)切割文本來(lái)創(chuàng)造視覺(jué)吸引力
對(duì)于許多老派的設(shè)計(jì)而言，字體應(yīng)該保持字體設(shè)計(jì)師最初設(shè)計(jì)出來(lái)的樣子，覺(jué)得不合適的時(shí)候選擇其他的就好了。不過(guò)對(duì)更多的設(shè)計(jì)師而言，能把字體玩兒出花來(lái)，也未嘗不是一件非常有趣的事情。
將字體進(jìn)行二次修整，通過(guò)切割、分解、合成來(lái)創(chuàng)造截然不同的效果，能夠讓它成為更加吸引人的視覺(jué)元素。無(wú)論是微妙的切割還是大幅度的分解充足，都有著頗為不錯(cuò)的視覺(jué)效果。
在進(jìn)行文本字體切割的時(shí)候，始終應(yīng)該記住一個(gè)原則：文本字體必須是可讀的。如果可讀性無(wú)法保證，那設(shè)計(jì)還有什么意義呢？你應(yīng)該密切關(guān)注信息傳達(dá)的順暢性，下面的實(shí)例可以供你參考。
傳統(tǒng)的切割效果
如果是針對(duì)單個(gè)單詞或者一小組文本進(jìn)行切割處理，讓位于兩個(gè)不同層的部分錯(cuò)位或者疊加，通常能夠創(chuàng)造出分層的效果。這種設(shè)計(jì)能夠增加層次和深度。
Resoluut 這個(gè)網(wǎng)站當(dāng)中，設(shè)計(jì)師將文本與 & 符號(hào)進(jìn)行了結(jié)合，借助符號(hào)中的斜線(xiàn)來(lái)作為分割，顯性的字體被纖細(xì)而微妙的字符筆觸分割開(kāi)來(lái)，借助陰影創(chuàng)造出微妙的分層效果，讓整個(gè)氛圍顯得精致細(xì)膩而富有高級(jí)感。
當(dāng)被分割的文本相對(duì)而言，整體比較簡(jiǎn)單的時(shí)候（比如非襯線(xiàn)字體），控制好被切斷的兩部分之間的距離，不要太遠(yuǎn)就能保持較好的可讀性。
文本和圖片的穿插切割
切割分層效果并不僅限于文本，圖片和文本之間其實(shí)是可以互相穿插切割的。就像上面的 The Shift 這個(gè)網(wǎng)站。
圖片被傾斜地分割為幾個(gè)部分，而文本穿插其中。整個(gè)設(shè)計(jì)呈現(xiàn)出一種富有動(dòng)感的效果。由于被切割開(kāi)的圖片本身有一定寬度，為了讓文本不被完全遮住，設(shè)計(jì)師加入了動(dòng)畫(huà)效果，移動(dòng)中的文本和圖片不僅讓這種動(dòng)感更加強(qiáng)烈，而且用戶(hù)足以輕松看清文本的全貌，而不會(huì)失去關(guān)鍵的信息。
這種設(shè)計(jì)技巧對(duì)于作品和產(chǎn)品的呈現(xiàn)是非常有用的，不僅富有美感，而且極具創(chuàng)意。
附帶動(dòng)效的切割效果
毫無(wú)疑問(wèn)，切割效果是同樣可以和其他的元素結(jié)合起來(lái)使用的。將動(dòng)畫(huà)和切割效果結(jié)合起來(lái)使用就頗為有效。
在上面這個(gè)案例當(dāng)中，被切割的文本其實(shí)是導(dǎo)航，當(dāng)光標(biāo)懸停在上面的時(shí)候，動(dòng)畫(huà)效果會(huì)讓被切割的文本逐步拼接回去，你會(huì)看到完整的信息。
用來(lái)設(shè)計(jì)文本LOGO
用字體的切割效果用來(lái)創(chuàng)建 LOGO 其實(shí)很有意思，尤其當(dāng)你必須使用文本元素來(lái)創(chuàng)建 LOGO 的時(shí)候。一個(gè)足夠有趣的 LOGO 能夠賦予品牌更高的識(shí)別度，而切割效果也能夠讓文本更加具有圖形化的特征。就像上面的襯衫中的 LOGO設(shè)計(jì)。
在切割文本的時(shí)候，注意圖形的自然形狀和切割的角度，確保用戶(hù)在閱讀的時(shí)候具備足夠的識(shí)別度，且足夠有趣。
注意切割所構(gòu)成留白的方式。在上面的設(shè)計(jì)當(dāng)中，通過(guò)切割而留出了足夠的空間來(lái)承載附加的信息。切割的時(shí)候常常會(huì)用細(xì)線(xiàn)，不過(guò)方式方法有很多。
營(yíng)造交互性
設(shè)計(jì)師通過(guò)使用交互式的文本和筆刷，讓用戶(hù)具備和這些元素進(jìn)行交互的可能性，就如同上面的案例。雖然文本本身并沒(méi)有完全被切割開(kāi)，但是筆刷所營(yíng)造的藝術(shù)式的效果和切割有著異曲同工之妙。
由于采用了可交互式的組件，用戶(hù)在這個(gè)網(wǎng)站的駐留時(shí)間可能會(huì)比其他的更長(zhǎng)。
縱向切割
由于我們的閱讀方式，絕大多數(shù)的文本排布都是橫向的，而設(shè)計(jì)師自然也大都傾向于橫向切割。不過(guò)，縱向切割也是可行的。
縱向切割的處理縱深相對(duì)橫向切割更短，不過(guò)設(shè)計(jì)師可以針對(duì)不同的文本單獨(dú)進(jìn)行縱向切割。就像上面的這個(gè)網(wǎng)站當(dāng)中的處理方式，設(shè)計(jì)師直接將縱向的筆觸都切掉了，相似的處理方式讓整個(gè)字體看起來(lái)像是經(jīng)過(guò)統(tǒng)一的處理一樣。
構(gòu)建視覺(jué)流
在文本當(dāng)中加入切割的效果，會(huì)形成一種閱讀的方向性和緊迫感，用戶(hù)在瀏覽的時(shí)候，會(huì)隨著切割所構(gòu)成的視覺(jué)流來(lái)快速掃視。
無(wú)論是有意還是無(wú)意，打破常規(guī)瀏覽次序的切割效果會(huì)讓用戶(hù)注意到，用戶(hù)的視線(xiàn)會(huì)不自覺(jué)地沿著切割的方向去瀏覽，這也就是它所創(chuàng)建的視覺(jué)流。
在上面的案例當(dāng)中，Robocath 這個(gè) LOGO 中字母 R 和 O 都被切割出缺口，在樣式上和字母 C 很接近，從左到右會(huì)感覺(jué)到比較明顯的切割方向性。
字母上方向一致的均勻的切口，所形成的方向感會(huì)迅速地在用戶(hù)眼中構(gòu)成一種指向性明確的視覺(jué)流向。
強(qiáng)調(diào)特定的字母
最后這種切割效果可能是最為引人矚目的一種，使用切割的方式來(lái)構(gòu)建和強(qiáng)調(diào)特定的字母。設(shè)計(jì)師通過(guò)負(fù)空間來(lái)構(gòu)建陰陽(yáng)對(duì)比，巧妙地構(gòu)建出特定的字母，從而起到強(qiáng)調(diào)的作用。
在上面的 MJND 頁(yè)面當(dāng)中，LOGO 采用的是這種切割陰陽(yáng)對(duì)比來(lái)強(qiáng)調(diào)字母 N，而視覺(jué)主體當(dāng)中，讓人物和文本進(jìn)行穿插來(lái)營(yíng)造層次感。這兩種方式都可以很好的傳遞信息，足夠簡(jiǎn)單，并且在視覺(jué)上足夠有趣。
結(jié)語(yǔ)
使用切割文本的方式來(lái)營(yíng)造視覺(jué)吸引力是流行的趨勢(shì)，不過(guò)這種趨勢(shì)需要設(shè)計(jì)師靈活機(jī)變，并且熟練掌控多種不同的技法，合理地發(fā)揮和運(yùn)用才行。當(dāng)然，最重要的是控制可讀性，其次才是運(yùn)用創(chuàng)意營(yíng)造視覺(jué)吸引力。
切割文字是一種有趣的設(shè)計(jì)技法，按照流行的方式結(jié)合一下動(dòng)效，倒是可能會(huì)收到奇效，值得嘗試。
經(jīng)授權(quán)轉(zhuǎn)載至數(shù)英，轉(zhuǎn)載請(qǐng)聯(lián)系原作者
作者公眾號(hào)：優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)（youshege）
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）