形成混搭的前提條件是它們?cè)谝曈X上有形成融合的「契機(jī)」，可能是相同的紋理、同一個(gè)方向脈絡(luò)或者是結(jié)構(gòu)相似。

What is 組合視覺造型

提到組合，這是平面設(shè)計(jì)中經(jīng)常會(huì)用到的視覺技巧，一般來(lái)說(shuō)是把表面不太相關(guān)的事物拼合在一起，維持視覺上的統(tǒng)一性。被用來(lái)組合的對(duì)象可以是植物、動(dòng)物、人物也可以是字母、形狀等。

形成混搭的前提條件是它們?cè)谝曈X上有形成融合的「契機(jī)」，可能是相同的紋理、同一個(gè)方向脈絡(luò)或者是結(jié)構(gòu)相似。今天我們要融合的就是人物和字母，它們能融合在一起的契機(jī)在于字母的結(jié)構(gòu)能「容納」人物的側(cè)影(如果是正面的人物則需要選擇特定的姿態(tài))。

所用的制作技巧：素材來(lái)源

雖然有了組合方式，我們還是要對(duì)素材(人像、字母)進(jìn)行準(zhǔn)備。字母可以很容易得到，人像的獲得主要有兩個(gè)來(lái)源：

A、照片(通過(guò)摳像的方式得到)

B、插畫(自行繪制)

這兩個(gè)方案都各有利弊，照片能得到比較細(xì)膩的帶有實(shí)感的人物皮膚紋理，但不易獲取到源素材，而且來(lái)源有限。而插畫則可以自由創(chuàng)作，只是在紋理上會(huì)更扁平化。我們今天采用的是第二種方式，除了以獲得素材為目的，也是想通過(guò)這一繪制過(guò)程幫大家更好掌握人像的矢量繪制，拓展插畫在平面設(shè)計(jì)中的用途。

所用工具

Photoshop(2018) + Illustrator(2019)

臨摹人物照片

人物的照片是我們最常用的素材來(lái)源，如果發(fā)現(xiàn)有構(gòu)圖和色彩都不錯(cuò)的素材，可以通過(guò)臨摹繪制的方式將其轉(zhuǎn)移為自己所需。

這是我在網(wǎng)上發(fā)現(xiàn)的一張不錯(cuò)的素材來(lái)源(來(lái)自 pinterest),這張素材的尺寸比較小。

STEP 01

臨摹人像首先就需要通過(guò)照片素材將人物拖入到 AI(Iillustrator) 當(dāng)中，然后根據(jù)照片的提示來(lái)繪制。我們可以參考原有照片的色彩、光影、人物特征等。在你所拖入的照片圖層之上新建一個(gè)圖層，照片圖層可以進(jìn)行鎖定。

繪制整體輪廓

STEP 02

在布置細(xì)節(jié)之前，我們要對(duì)人物整體的輪廓進(jìn)行描摹。這時(shí)，照片作為一個(gè)非常重要的提示線索，我們要盡量將其作為參考。人物的皮膚作為邊緣時(shí)，我們要嚴(yán)格遵循它的邊緣線輪廓，而人物的頭發(fā)、衣服等部分則可以部分調(diào)整輪廓線。

可以使用【鋼筆工具】，采用高亮色的描邊來(lái)繪制，這是為了讓我們能隨時(shí)都能看到線條，和背景要有明顯的區(qū)分。

邊緣線不夠平滑的地方要用【平滑工具】進(jìn)行再次調(diào)整為平滑狀態(tài)。這是由我們的插畫風(fēng)格所決定的。

STEP 03

接下我們要繪制人物的頭發(fā)的部分，這部分最重要是要取得下方的輪廓線，上方的輪廓線已經(jīng)和上一步所繪制的最大的輪廓線保持一致了。所以上方的形狀繪制只需要超出最大的輪廓線，然后最后采用【形狀生成器工具】，按住鍵盤上的ALT鍵就能刪減掉外圍多余的部分，并且生成頭發(fā)的部分。

繪制細(xì)節(jié)輪廓

除了完整體的大輪廓，我們來(lái)繪制細(xì)節(jié)的輪廓：眼睛、鼻子、嘴、脖子、耳朵、垂下的頭發(fā)等。這是人像繪制中的精華部分。

這時(shí)原有的照片能提供的信息特別豐富，對(duì)于我們上面談到的視覺重點(diǎn)都有大量的小細(xì)節(jié)，但是我們?cè)诶L制的時(shí)候不能全部都臨摹出來(lái)，這時(shí)我們要學(xué)會(huì)取舍，找到最能凸出人物特點(diǎn)的部分，而省略其他的細(xì)節(jié)。

STEP 04

在不考慮光影的情況下，我們首先繪制那些能直接表現(xiàn)面部特征的對(duì)象(眼、鼻、嘴)。這是一個(gè)非洲籍的女性，和我們亞洲人的面部特征比較不同，因此最好能參考照片來(lái)繪制。

STEP 05

還有兩束頭發(fā)比較細(xì)，這時(shí)可以采用加粗的線條(并不是制造輪廓線的方法，而是讓線條本身來(lái)作為形狀)來(lái)繪制，線條的樣式(變量寬度配置文件)中選擇第4個(gè)變量寬度配置，也就是針形的那個(gè)。

然后記得將這些線條擴(kuò)展外觀，使其成為填充的形狀，這時(shí)描邊是關(guān)閉狀態(tài)。

到這一步，我們就可以開始填色了，雖然還有很多的細(xì)節(jié)沒有繪制，但是只要大形確定后，細(xì)節(jié)在填色狀態(tài)下會(huì)更好的和整體形狀保持融合。

填充大形

大家可以發(fā)現(xiàn)，這張人像的色彩其實(shí)非常簡(jiǎn)單，單就人物來(lái)說(shuō)大面積的色彩就只有兩個(gè)：頭發(fā)和皮膚。而這時(shí)人物的皮膚和頭發(fā)的顏色也比較接近。

原片的背景也有色彩，我們可以填充背景的色彩，和原有照片的色調(diào)保持一致。

STEP 06

繪制一個(gè)矩形作為背景，將其填充為藍(lán)色(#153d5f)，然后將人物的皮膚填充為略帶藍(lán)色的褐色(#242b35)，以及人物頭發(fā)的顏色(#090d11)，這是三個(gè)最主要的顏色。

完善細(xì)節(jié)

STEP 07

剩下是人物面部的細(xì)節(jié)(眼、鼻、嘴)，眼睛我們沿用頭發(fā)的顏色，鼻子其實(shí)只是下沿的陰影部分需要填色，而嘴的顏色我們要找一個(gè)略帶紅，但仍然和其他顏色處于同一深度的色彩。還有人物的脖子的裝飾物，需要安排為一個(gè)比較亮的米白色。

STEP 08

我們繼續(xù)修飾人物的五官細(xì)部，增加唇部和眼部的陰影。

STEP 09

再給人物增加耳朵的形狀，耳朵的繪制主要以陰影來(lái)表現(xiàn)。我們找出兩塊最能表現(xiàn)耳廓造型的形狀來(lái)作為繪制對(duì)象，并且為人物配上耳釘。

STEP 10

人物身體的其他部分的陰影也需要增加，采用更深一些的色彩就能描繪出不同的陰影造型。最后再修飾一下線條，人物的部分就繪制完成。

STEP 11

在使用前，你需要最后再調(diào)色，根據(jù)實(shí)際情況，將整體色彩調(diào)得再暗一些。

這時(shí)你需要從AI當(dāng)中導(dǎo)出一張不含背景的透明背景的人像PNG圖片，透明背景的PNG圖片可以作為素材在任意場(chǎng)所使用。

設(shè)計(jì)思路

首先，你在使用素材前要清楚它的使用方向，比如在這里，我將要設(shè)計(jì)的是一個(gè)網(wǎng)站的 landing page ，也就是用戶進(jìn)入網(wǎng)站首先看到的畫面。我打算采用相同風(fēng)格的三張全屏圖片作為滾動(dòng)幻燈來(lái)展示首頁(yè)。在任何設(shè)計(jì)前，都需要對(duì)最終效果有個(gè)大致的規(guī)劃，當(dāng)然實(shí)際的情況是可以見招拆招。

安排合適的字母

要和字母組合，我們首先應(yīng)該選用適合的字母，對(duì)于ABCD……這樣的字母外觀要有一定的認(rèn)識(shí)，看到字母本身背后的骨架造型，然后選擇和人物有呼應(yīng)的部分。比如這里我選用的是字母Z。

STEP 12

然后打開PS，新建一個(gè)1980*1080的新文檔，這是一個(gè)大網(wǎng)頁(yè)的尺寸。

STEP 13

在新建的文檔上，運(yùn)用文字工具寫出一個(gè)Z，這時(shí)要選擇一個(gè)比較有表現(xiàn)力的字體，在這里我使用的是「Nouvelle Vague Black」。字體大小為750，字體的顏色為我們?cè)贏I繪制人物時(shí)使用的背景色，同款。

在白色背景上它顯得特別黑，比較看不出色彩的彩度。

在插畫準(zhǔn)備的階段，我們所臨摹的照片已經(jīng)將色彩定了一個(gè)基調(diào)，特別是色彩的亮度上，大部分都選用了亮度較暗的色調(diào)。當(dāng)然大家不用擔(dān)心看不出彩度，因?yàn)槲覀冏詈髸?huì)調(diào)整白色背景，將背景調(diào)暗以后，就不會(huì)出現(xiàn)這樣的視覺上的問(wèn)題了。

和插畫融合

STEP 14

這時(shí)將你在 STEP 12 做好的人物PNG圖片導(dǎo)入到文檔里，安排在字母的圖層之上。縮小到和字母差不多大小。這時(shí)根據(jù)外觀特征，人物需要進(jìn)行水平方向的對(duì)稱的翻轉(zhuǎn)，這時(shí)點(diǎn)擊右鍵執(zhí)行【水平翻轉(zhuǎn)】，將兩者的位置安排得恰到好處。

STEP 15

調(diào)出Z這個(gè)字母的選區(qū)，然后單擊圖層面部下方的【添加圖層蒙版】的小圖標(biāo)，給人物的這個(gè)圖層增加蒙版。由于保持了Z字母的外輪廓選區(qū)，因此這個(gè)圖層蒙版自帶選區(qū)就將字母輪廓外的部分的人像遮擋了，看起來(lái)它們之間呈現(xiàn)下圖，像是人物「住進(jìn)」了字母里。

STEP 16

人物要和字母產(chǎn)生融合，還需要有一些部分暴露出來(lái)，就像是半遮擋的效果。這時(shí)需要在蒙版上采用白色的硬邊圓畫筆(記住要選中蒙版)，把你需要的部分「畫」出來(lái)。

STEP 17

為了讓字母變得更具有「實(shí)體」的效果，我們可以給字體的圖層增加圖層樣式【內(nèi)陰影】。這是很多紙藝圖案造型當(dāng)中經(jīng)常會(huì)使用的一個(gè)技巧。

STEP 18

在字母圖案的上方增加一個(gè)新的圖層，在新圖層上單擊鼠標(biāo)右鍵，選擇【創(chuàng)建剪貼蒙版】。

然后利用【畫筆工具】當(dāng)中的【噴濺畫筆>壓力控制】，將畫筆大小調(diào)到45，前景色設(shè)置為白色。

在新的圖層上用畫筆畫出星星點(diǎn)點(diǎn)的白色斑點(diǎn)，有點(diǎn)像漫天繁星的造型。由于字母和人物都是暗色，因此白色的斑點(diǎn)看起來(lái)就特別亮。

STEP 19

最后把整個(gè)畫面的背景色調(diào)整為#7d7777，改為一個(gè)較暗的顏色，然后在圖形的下方增加一行白色文字。下圖就是最后的效果：

使用場(chǎng)景

在網(wǎng)頁(yè)當(dāng)中作為輪播的Banner使用，需要準(zhǔn)備多張可切換的畫面。為了風(fēng)格統(tǒng)一，這里我準(zhǔn)備了三張相同風(fēng)格的畫面。

風(fēng)格的統(tǒng)一最主要是體現(xiàn)在顏色上，這里的配色，大家可以看出三張圖片的背景色都處于同樣的暗度，采用大致相同的飽和度和明度。

另外兩張圖片的人物，我也是采用同樣的畫法，只是把原來(lái)照片中的人物的色彩進(jìn)行了改變。

大家可以單擊這里進(jìn)入鏈接查看滾動(dòng)的效果：

寫在后面

攝影作品一直是網(wǎng)頁(yè)設(shè)計(jì)中主流的素材來(lái)源，可是我一直覺得找到好素材部分也依賴上游攝影師的創(chuàng)作能力，相對(duì)來(lái)說(shuō)，自己創(chuàng)作插畫會(huì)是一個(gè)更具有原創(chuàng)性的方向，避免版權(quán)糾紛的同時(shí)，也能帶給人不一樣的視覺感受。

把設(shè)計(jì)局限在某一個(gè)范圍內(nèi)，也許只是不愿走出 Confort Zone 的表現(xiàn)。對(duì)于插畫這種素材的探索，我們今后還會(huì)盡可能多的去找尋更多有趣的表現(xiàn)方式。我的確不太在意文章更新的頻率，好幾個(gè)月不更，也是醞釀著別的更有意思的idea，設(shè)計(jì)這條路，玩樂(lè)至上而已，大家莫怪。