如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

我們?cè)谌粘９ぷ髦袔缀蹼x不開(kāi)扭曲和變形工具，它可以幫助一個(gè)設(shè)計(jì)師校正一個(gè)元素的透視關(guān)系，或者為設(shè)計(jì)好的標(biāo)志貼效果圖。除了這些日常的應(yīng)用以外，扭曲工具還有哪些有趣的應(yīng)用場(chǎng)景呢？我們今天的內(nèi)容就會(huì)幫你找到答案。

風(fēng)格特點(diǎn)

從宏觀的角度來(lái)講，這種扭曲的手法，它設(shè)計(jì)出的版面變化方式是非常多的，我們將比較熟悉的文字進(jìn)行扭曲，是可以呈現(xiàn)出其它的表現(xiàn)形式的。

比如說(shuō)，最左側(cè)這個(gè)海報(bào)，我們不光能看出來(lái)它的文字信息，還具有樓梯的印象；中間的這個(gè)海報(bào)，它把文字變換成了晾衣繩的感覺(jué)；我們?cè)倏醋钣覀?cè)的這個(gè)海報(bào)，很明顯它就是一把扇子對(duì)吧。

氣質(zhì)分析

這種表現(xiàn)形式它是比較抽象的，再加上它能夠變異成其它的形狀，所以，這種版面風(fēng)格也會(huì)傳遞出一種趣味感。

原理解析

我們?cè)诂F(xiàn)實(shí)生活當(dāng)中扭曲的圖像，它屬于一種光學(xué)的現(xiàn)象，比方說(shuō)哈哈鏡，它就是利用了這個(gè)原理，表面凹凸不平的鏡面，反映出人像或者是物體的扭曲面貌，進(jìn)而產(chǎn)生了幽默感。

生活當(dāng)中的望遠(yuǎn)鏡放大鏡顯微鏡，也都是利用了這種凹凸的透鏡原理來(lái)實(shí)現(xiàn)的。

我們?nèi)祟愡€處于原始的時(shí)期，就已經(jīng)開(kāi)始運(yùn)用繪畫(huà)來(lái)記錄身邊的事物，在經(jīng)過(guò)不斷的發(fā)展，藝術(shù)家它們的繪畫(huà)技藝也變得越來(lái)越逼真，甚至達(dá)到了和照片難辨真假的程度。當(dāng)寫(xiě)實(shí)的風(fēng)格幾乎走到的時(shí)候，藝術(shù)家為了尋找新的藝術(shù)發(fā)展方向，畫(huà)風(fēng)就開(kāi)始變得扭曲起來(lái)，變得抽象起來(lái)，從而產(chǎn)生了超現(xiàn)實(shí)的藝術(shù)流派。

我們將本來(lái)是圓形的西瓜和籃球限定在一個(gè)圓角矩形的這種做法，也是一種抽象的思維方式。

技巧分類

在這里我們?yōu)榇蠹覄澐至宋宸N常用的表現(xiàn)技巧，這些都是我們?nèi)粘９ぷ鳟?dāng)中經(jīng)常用到的一個(gè)扭曲技巧，我們分別介紹給大家。首先第一個(gè)就是液化這個(gè)工具，液化這個(gè)濾鏡應(yīng)該算是非專業(yè)人員都會(huì)知道的美顏功能，這個(gè) ps 濾鏡被用在了各種美艷的 app 里，這種夸張的藝術(shù)創(chuàng)作在漫畫(huà)里面是經(jīng)常出現(xiàn)的。

我們來(lái)通過(guò)網(wǎng)格感受一下液化命令到底是出現(xiàn)了哪些變化，液化的好處就是能夠根據(jù)實(shí)際情況手動(dòng)調(diào)節(jié)畫(huà)面的扭曲幅度。它的自由度比較高，但是它的缺點(diǎn)也是自由度比較高，所以難度會(huì)比較大一些。

在設(shè)計(jì)的過(guò)程當(dāng)中，也可以運(yùn)用這個(gè)功能來(lái)刻畫(huà)主體，產(chǎn)生一種遮擋的效果。我們也可以通過(guò)扭曲讓文字的部分結(jié)構(gòu)變得不容易認(rèn)讀，這就能達(dá)到設(shè)置懸念的作用，我們也可以通過(guò)其它不同幅度的扭曲變形，達(dá)到自己想要的狀態(tài)。我們看上圖是日本TDC 的獲獎(jiǎng)作品之一，作者是村上雅士，它運(yùn)用的就是液化功能，將原本很平淡的版面，通過(guò)扭曲的變化，達(dá)到了吸引眼球的藝術(shù)效果。

這個(gè)是臺(tái)灣設(shè)計(jì)師聶永真，他為2017年金點(diǎn)概念設(shè)計(jì)獎(jiǎng)制作的主視覺(jué)海報(bào)，這個(gè)海報(bào)它以不規(guī)則的曲線呈現(xiàn)，并且搭上充滿想象的文案，有耳目一新的形象。

下面我們來(lái)看一下球面化的工具，我們大家都知道，杯子中的水具有扭曲光線的作用，我們插到水里的這個(gè)筆它就會(huì)產(chǎn)生扭曲的現(xiàn)象，這個(gè)就是光的折射。我們?cè)谠O(shè)計(jì)當(dāng)中進(jìn)行簡(jiǎn)單的圖像合成時(shí)，也需要遵守這個(gè)物理定律。

我們這里通過(guò)網(wǎng)格來(lái)看一下這種形態(tài)的具體表現(xiàn)，顧名思義球面化的命令就是能夠?qū)⑦x區(qū)內(nèi)的畫(huà)面進(jìn)行球面的扭曲。它適合用在圖像合成或者是還原真實(shí)性的場(chǎng)景里面，我們通過(guò)調(diào)整不同的幅度，產(chǎn)生不同的魚(yú)眼效果。

除了基本的球面化扭曲，我們這個(gè)選擇里還提供了水平和垂直的變化，形成類似圓柱體的表面效果。我們?cè)诋a(chǎn)品貼圖圖像和形象的領(lǐng)域是經(jīng)常用到這個(gè)東西的，我們調(diào)整不同的扭曲幅度，能夠完美的讓圖像貼合到柱狀的弧形表面上。

這里給大家準(zhǔn)備了一個(gè)案例，我們給它添加一個(gè)氣泡，然后再產(chǎn)生一些光影的效果，如果說(shuō)我想讓這個(gè)畫(huà)面變得更真實(shí)一些，我們?cè)谠O(shè)計(jì)的時(shí)候就要考慮到物理定律，這個(gè)時(shí)候就可以用球面化的命令。我們讓圓形下面的文字產(chǎn)生光線折射的感覺(jué)，調(diào)節(jié)選項(xiàng)中的滑塊，找到那個(gè)最接近真實(shí)的反射效果。

這個(gè)案例是我們研習(xí)設(shè)之前教程里提供的一個(gè)案例，我們看圖中這個(gè)玻璃球和文字的銜接部分，用的就是球面化的效果。我們只看右側(cè)這個(gè)對(duì)比圖，你可以明顯感覺(jué)出來(lái)，底部這個(gè)經(jīng)過(guò)修改后的細(xì)節(jié)是更真實(shí)的，文字經(jīng)過(guò)玻璃的反射，它一定會(huì)產(chǎn)生扭曲的視覺(jué)印象。

下一個(gè)給大家介紹一下極坐標(biāo)，極坐標(biāo)這個(gè)詞聽(tīng)上去會(huì)比較陌生一些，但是你會(huì)非常熟悉，比如說(shuō)這個(gè)啟動(dòng)畫(huà)面，這個(gè)是PS cc版本的啟動(dòng)插圖，它就是運(yùn)用極坐標(biāo)的命令實(shí)現(xiàn)的效果。除了能夠?qū)崿F(xiàn)從內(nèi)部向外旋轉(zhuǎn)的這個(gè)洞穴效果，還可以表現(xiàn)成類似于球體的效果。

我們繼續(xù)通過(guò)網(wǎng)格來(lái)看一下它的扭曲原理，這里給大家做了一個(gè)細(xì)節(jié)的變化，是為了方便大家觀察它的扭曲方向，我們給這個(gè)網(wǎng)格添加了顏色，頂部是藍(lán)色，底部是紅色，接下來(lái)我們?yōu)樗鼒?zhí)行極坐標(biāo)的命令。

執(zhí)行極坐標(biāo)這個(gè)命令后可以很明顯地看出，原來(lái)底部的網(wǎng)格內(nèi)容被扭曲到了圓形的外側(cè)，就是紅色部分，變成了這個(gè)球的外側(cè)，內(nèi)部這個(gè)藍(lán)色，就是之前頂部的藍(lán)色部分。

它也提供了另一個(gè)額外的扭曲選項(xiàng)，扭曲后的效果就是這樣的，這個(gè)效果我們不常用。

我們選擇這張圖來(lái)作為演示，讓大家明白極坐標(biāo)是什么原理，我們?yōu)樗砑訕O坐標(biāo)的效果，這個(gè)時(shí)候需要確定什么？就是圖像的朝向問(wèn)題，因?yàn)檫@個(gè)直接決定了最終的扭曲效果。

頂部的區(qū)域會(huì)在圓的內(nèi)部出現(xiàn)，底部的區(qū)域會(huì)在圓的外部，我們根據(jù)想要達(dá)到的最終效果，來(lái)判斷圖像的具體朝向。這里制作了兩種朝向的扭曲畫(huà)面，左邊的是地面在內(nèi)部的球體效果，右邊是地面在外部類似于洞穴效果。

我們?cè)谂で钪?，需要手?dòng)將畫(huà)面這個(gè)銜接部分處理掉。你可以用圖章工具處理掉，這個(gè)畫(huà)面就做完了。

再舉一個(gè)例子，這個(gè)畫(huà)面我要做的是人物在球體表面的效果，我們要考慮到方向，所以我們要將它旋轉(zhuǎn)180度，然后添加極坐標(biāo)命令。

使用修補(bǔ)工具來(lái)完成這個(gè)銜接部分，這個(gè)畫(huà)面就完成了。

我們?cè)賮?lái)看下一個(gè)，下一個(gè)就是文字扭曲，也是我們這節(jié)課比較重要的一個(gè)內(nèi)容。這個(gè)命令跟其它命令不同的地方就在于它不是在濾鏡菜單下面，它是在文字編輯欄的右側(cè)，在樣式選擇里，它提供了很多不同的扭曲方法。

這種方法相對(duì)于液化或者是自由變換更方便一些，因?yàn)樗倪@個(gè)可操控性很強(qiáng)，頂部提供了兩種扭曲方向，底部選擇則是調(diào)整扭曲的幅度。

這里我們簡(jiǎn)單地制作了幾種文字樣式，就是這個(gè)命令，它會(huì)讓文字變得更接近圖形化。

下一個(gè)我們來(lái)給大家介紹一下置換的扭曲風(fēng)格，它的扭曲原理就是將被置換的元素，再加上需要被扭曲的元素，它們二者相結(jié)合，從而達(dá)到被置換元素一樣的扭曲效果。這個(gè)話有點(diǎn)繞，我們通過(guò)下面的例子就明白什么是置換了。置換的幅度不同，扭曲的大小也會(huì)發(fā)生相應(yīng)的變化。

比方說(shuō)我們這里被置換的元素可以是任何圖像，煙霧、絲綢、水波紋、液態(tài)流體或者是火焰，它們都可以當(dāng)成被置換的元素。

比如說(shuō)這里我們想讓鴿子圖案和旗幟結(jié)合，這個(gè)時(shí)候就需要用到置換的扭曲命令。首先第一步要做到的就是確定好鴿子在旗幟里的比例大小，然后要調(diào)整透視和傾斜角度來(lái)適應(yīng)旗幟的表面輪廓。

最后執(zhí)行置換命令，讓鴿子的圖像加入旗幟的扭曲輪廓，這樣就形成了兩者的完美結(jié)合了。界面里水平與垂直的比例，都是可以用數(shù)值來(lái)調(diào)整的。

我們?cè)倏聪乱粋€(gè)，不光是圖形，文字也是一樣的，添加置換命令之后，文字就會(huì)置入到了這個(gè)場(chǎng)景里，它的原理和之前是一模一樣的。

我們?cè)賮?lái)看一下其它使用置換手法設(shè)計(jì)出來(lái)的版面，它們都是在表現(xiàn)原有信息的基礎(chǔ)之上，通過(guò)置換的扭曲為版面，加入了另一種形態(tài)。左側(cè)的飄動(dòng)絲綢中間的樓梯和右側(cè)的這個(gè)有點(diǎn)類似于紙張扭曲的效果，這些都是用置換這個(gè)命令來(lái)表現(xiàn)出來(lái)的。

案例拆解

我們來(lái)看一下，同樣都是這個(gè)扭曲，用扭曲的這個(gè)思維，它設(shè)計(jì)出來(lái)的畫(huà)面應(yīng)該是什么樣的。這個(gè)版面里文字信息使用的就是扭曲的變換形式，主體文字周圍圍繞著不規(guī)則的扭曲文字，增加主體形象的形式感。這種手法雖然會(huì)減弱文字的識(shí)別性，但換來(lái)的是視覺(jué)吸引力。如果想讓選擇的文字扭曲的話，這個(gè)文字最好是比較大的標(biāo)題性文字。如果是小文字扭曲之后，它的識(shí)別性基本就沒(méi)有了。

我們?cè)賮?lái)看下一個(gè)版面，大家應(yīng)該能看出來(lái)，它就是運(yùn)用了我們前面講到的液化扭曲命令，思路就是重復(fù)的文字，它能起到強(qiáng)調(diào)作用。但有的時(shí)候你每一個(gè)細(xì)節(jié)都完全一樣，它就會(huì)有單調(diào)的感覺(jué)，我們通過(guò)液化工具在對(duì)角線上進(jìn)行扭曲，這樣就會(huì)產(chǎn)生變化。

我們?cè)賮?lái)看下一個(gè)，這個(gè)效果是比較有趣的，它是用什么方式制作的？它是拍攝的。這個(gè)設(shè)計(jì)有的時(shí)候就像拍電影一樣，并不是所有場(chǎng)景都必須依賴電腦，有的時(shí)候?qū)嵕芭臄z也能夠帶來(lái)更好的真實(shí)感。

這個(gè)版面用的是置換手法，由于我們沒(méi)有辦法找到相同的幕布，這里我們找了一個(gè)類似的作為載體，我們?cè)谏戏郊尤胛淖中畔?，然后用置換命令，這個(gè)就變成了跟海報(bào)類似的感覺(jué)了。

這個(gè)版面和上一個(gè)有一些類似，但是不同的是它沒(méi)有背景，它沒(méi)有載體。這是因?yàn)榕で牟馁|(zhì)背景直接鑲嵌在文字的輪廓里了。給大家舉一個(gè)例子，很簡(jiǎn)單的思路，我們選擇一個(gè)具有扭曲表面的背景圖片，然后將文字放到這個(gè)圖片上方，應(yīng)用置換命令，采用多重曝光的手法。我們將這個(gè)材質(zhì)鑲嵌到文字里面就完成了，這樣就看不到材質(zhì)了。

案例演示

那么最后，給大家做一個(gè)案例演示，用到的就是扭曲的命令，這是一個(gè)活動(dòng)展覽的項(xiàng)目，它的主題叫流動(dòng)消融。

為了達(dá)到宣傳的目的，這里尋找一個(gè)能夠讓文案中的概念實(shí)體化的載體，就是標(biāo)題，它的標(biāo)題很直接了，那么提取主標(biāo)題作為版面里的視覺(jué)元素，讓它變得很大，成為本案的主體。然后我們將文字稍微拉長(zhǎng)一些，這個(gè)拉長(zhǎng)是手動(dòng)拉長(zhǎng)的，所以它會(huì)出現(xiàn)橫粗豎細(xì)的現(xiàn)象，這個(gè)時(shí)候就需要修改了，調(diào)整筆畫(huà)的粗細(xì)統(tǒng)一，去掉一些不必要的細(xì)節(jié)，這樣這個(gè)主標(biāo)題就刻畫(huà)完成了。

然后我們繪制版面的比例關(guān)系，這一步的目的就是確定主體在版面里的大小。然后主體的這四個(gè)字就放在畫(huà)面里的上部區(qū)域，底部的這個(gè)紅色區(qū)域，我們來(lái)安排其它的文字信息。

接下來(lái)把其余的文字信息編排到版面的下方，我們所有文字編排好以后，最后一步，為畫(huà)面添加一個(gè)水波紋的細(xì)節(jié)部分。

采用置換命令讓二者結(jié)合，然后把水波紋去掉，鑲嵌到文字里。

這個(gè)版面到這里就完成了，我們來(lái)看一下它實(shí)際的應(yīng)用效果。

今天我們一起學(xué)習(xí)了扭曲技巧在版面里的應(yīng)用，也知道了這類風(fēng)格它的五種常用表現(xiàn)技巧，扭曲的這個(gè)版面不但可以和其它形狀結(jié)合，更能為版面帶來(lái)豐富的形式感，它是我們做主形象非常好用的一個(gè)手法。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。