前言

在各大平臺(tái)的運(yùn)營(yíng)活動(dòng)、品牌宣傳、UI界面中涌現(xiàn)出很多優(yōu)秀的描邊插畫(huà)作品。以下我將分享在工作中如何輕松上手描邊插畫(huà)

   目錄

   一、作品賞析

   二、4大步驟

   1.靈感

   2.構(gòu)圖草稿

   3.構(gòu)型

   4.刻畫(huà)主體

   三、舉一反三

   四、總結(jié) 

01/

作品賞析

設(shè)計(jì)師MBE，他整體的設(shè)計(jì)非常簡(jiǎn)潔可愛(ài)、易上手

設(shè)計(jì)師Rami Niemi擅長(zhǎng)線性人物插畫(huà)的設(shè)計(jì)，他的設(shè)計(jì)簡(jiǎn)約有趣、幽默頑皮感

從出現(xiàn)到現(xiàn)在，描邊插畫(huà)經(jīng)歷了不斷的演變。針對(duì)畫(huà)面，設(shè)計(jì)師們對(duì)插畫(huà)進(jìn)行優(yōu)化升級(jí)，沉淀出一些具有代表性的風(fēng)格。觀察分析以上優(yōu)秀的描邊插畫(huà)，我們可以提煉出一些共性：

02/

4大步驟

1.靈感

前期準(zhǔn)備：從接到需求開(kāi)始，一步步拆解分析、找到關(guān)鍵詞、記錄設(shè)計(jì)靈感、運(yùn)用合適的手法，我們可以用2W1H思維模型-根據(jù)主文案《招募騎士》分析，可以提煉出關(guān)鍵詞：騎士、金幣獎(jiǎng)勵(lì)、福利

+聯(lián)想

從關(guān)鍵詞“騎士、金幣獎(jiǎng)勵(lì)、福利”進(jìn)行聯(lián)想，描繪一個(gè)故事情節(jié)，增加畫(huà)面生動(dòng)性。講好故事，利于品牌的傳播，所以一個(gè)運(yùn)營(yíng)活動(dòng)也可以有屬于他的故事，讓畫(huà)面注入靈魂，更具說(shuō)服力。

+照片素材

找一些高質(zhì)量的圖或者照片，從中借鑒構(gòu)圖、動(dòng)態(tài)、光影，也可運(yùn)用公司已有的圖片資源。最好不要憑空想象人物的比例、動(dòng)態(tài)，徒然增加設(shè)計(jì)難度。

（迪士尼動(dòng)畫(huà)師角色創(chuàng)作）

根據(jù)聯(lián)想好的故事情節(jié)及關(guān)鍵詞展開(kāi)搜索，選照片的時(shí)候可以根據(jù)馬斯洛需求理論，盡量挑選活力、健康、陽(yáng)光的形象來(lái)滿足騎士的尊重需求。

貨物箱的靈感、右手臂的靈感、整體形象的靈感 

2、構(gòu)圖和草稿

簡(jiǎn)單勾勒草圖，確定畫(huà)面主體。提前做好構(gòu)思，可以節(jié)約軟件操作的時(shí)間。畫(huà)好草圖后可與需求方盡早確定視覺(jué)主畫(huà)面，進(jìn)一步提升效率。

+ 構(gòu)圖方式

這里介紹6種常用的設(shè)計(jì)構(gòu)圖：曲線、中心、三角形、斜線、三分、向心式構(gòu)圖，建議選用更合適的方式構(gòu)圖。

（圖片來(lái)自網(wǎng)絡(luò)，如侵請(qǐng)告知?jiǎng)h除）

在《招募騎士》的海報(bào)設(shè)計(jì)中，我運(yùn)用了中心構(gòu)圖：主體騎士放在中心線的位置，起到突出主體的作用，氛圍元素分散在周?chē)�，豐富畫(huà)面，同時(shí)讓畫(huà)面更具沖擊力。

+ 初步草圖

根據(jù)找好的素材進(jìn)行融合設(shè)計(jì)，注意構(gòu)圖、比例、動(dòng)態(tài)的體現(xiàn)，最后再次調(diào)整。

根據(jù)活動(dòng)需求對(duì)整個(gè)畫(huà)面進(jìn)行排版設(shè)計(jì)，增加標(biāo)題、內(nèi)容文案、logo等信息，注意區(qū)分主次，明確景深關(guān)系

3.構(gòu)型

畫(huà)好草圖后，接下來(lái)一般會(huì)在PS/AI中進(jìn)行構(gòu)型上色。 

+描邊

對(duì)照草圖，在新的圖層用矢量工具勾一遍物體的形狀，勾線描邊的顏色默認(rèn)黑色。建議前期草圖畫(huà)得較精細(xì)，這樣在描邊時(shí)對(duì)照勾線就行。如果前期草圖比較潦草，勾線的同時(shí)需參考照片再次仔細(xì)優(yōu)化造型。

+色彩

配色的技巧原理：從攝影照片中提取物體的固有色，找到協(xié)調(diào)的配色方案。飽和度高的顏色能表現(xiàn)強(qiáng)烈的色彩感，更容易傳達(dá)沖擊力和吸引力，所以整體的配色可以在吸取的固有色上提高一些飽和度。

一般我們會(huì)依次按照主體物、輔助物體、氛圍元素、背景的順序上色，也可按物體面積的大小依次上色。

場(chǎng)景色可根據(jù)畫(huà)面需求進(jìn)行調(diào)整。為協(xié)調(diào)畫(huà)面，場(chǎng)景色一般使用與主體物主色調(diào)相近的色系，并相應(yīng)降低飽和度，亦或使用主體物主色調(diào)的對(duì)比色系做場(chǎng)景色來(lái)突出主體。整體顏色搭配好后，繼續(xù)調(diào)整排版設(shè)計(jì)。

講到上色，這里簡(jiǎn)要的說(shuō)下我的配色技巧。詳細(xì)查看我之前的教程《3步打造扁平插畫(huà)》

配色小技巧

    1.用色感性一點(diǎn)，構(gòu)圖造型理性一點(diǎn)

    2.平時(shí)多欣賞好的油畫(huà)、攝影、服裝、自然美景，從中提取好的配色與構(gòu)圖

    3.多欣賞好的電影、動(dòng)畫(huà)片、游戲作品

    A. 同色系、類(lèi)似色、臨近色是我經(jīng)常使用的配色，這樣配出來(lái)的顏色會(huì)比較統(tǒng)一。要注意的就是整體降低純度用顏色明度來(lái)拉開(kāi)空間關(guān)系。

    B. 對(duì)比色的配色技巧就是大統(tǒng)一、小對(duì)比。在大的暖色調(diào)或者冷色調(diào)確定之后，來(lái)一點(diǎn)冷色或者暖色作為互補(bǔ)，避免暖色系的顏色過(guò)于火，冷色過(guò)于冷淡。在暖色調(diào)中，處理冷色的方法就是降低冷色的純度，使其更協(xié)調(diào)，反之亦然。

《Weather story》

    C. 中性色的配色技巧就是注意整個(gè)顏色的融合，對(duì)比度。 

4.刻畫(huà)主體

刻畫(huà)方法：添加暗部、添加亮部、修飾描邊、畫(huà)面調(diào)整、局部刻畫(huà)

+明暗刻畫(huà)

 添加暗部

添加亮部 

+輪廓

調(diào)整外輪廓的描邊顏色及粗細(xì)，可以用黑色作為描邊，也可將物體固有色明度加深作為描邊，具體方案可根據(jù)畫(huà)面的效果來(lái)選擇。

畫(huà)面調(diào)整：畫(huà)面的排版，氛圍元素的調(diào)整、標(biāo)題的調(diào)整刻畫(huà)，注意整個(gè)畫(huà)面保持統(tǒng)一的刻畫(huà)程度。

+局部刻畫(huà)

頭部、手臂、衣服、箱子依次進(jìn)行刻畫(huà)：增加高光、環(huán)境色、投影等。為了凸顯騎士主體，可在描邊外整體再次增加一層白色輪廓描邊。

《騎士招募》的描邊插畫(huà)海報(bào)完成。

03/

舉一反三

整體梳理下操作方法，同樣的配方用在了618系列設(shè)計(jì)中。 

1.靈感（聯(lián)想+照片素材）

根據(jù)活動(dòng)主題聯(lián)想好畫(huà)面場(chǎng)景，搜索合適的照片素材。

（左邊圖片來(lái)自網(wǎng)絡(luò)，如侵請(qǐng)告知?jiǎng)h除）

2.構(gòu)圖和草稿（構(gòu)圖方式+初步草圖）

運(yùn)用構(gòu)圖技巧做好照片素材的構(gòu)圖，畫(huà)出草圖原型。

3.構(gòu)型（描邊+色彩）

將畫(huà)面做好描邊，再一步步鋪大色，也就是先大面積上固有色。

4.刻畫(huà)主體（明暗部+輪廓+局部刻畫(huà)）

從明暗部開(kāi)始塑造，再增加輪廓描邊，最后刻畫(huà)重點(diǎn)局部。

04/

總結(jié)

這種運(yùn)用照片找到主體及構(gòu)圖的方法，能夠非常高效的解決設(shè)計(jì)中靈感匱乏、主體物不夠吸引、透視等一些問(wèn)題。運(yùn)用好照片素材，輕松上手插畫(huà)設(shè)計(jì)。這種方法不僅適用于描邊插畫(huà)，其他扁平插畫(huà)、復(fù)古插畫(huà)、潮流插畫(huà)等均可適用。

以上觀點(diǎn)均是個(gè)人技能心得，歡迎補(bǔ)充交流。希望這次分享對(duì)大家有些幫助，不要局限于某個(gè)當(dāng)下流行的教程，放開(kāi)自己的腦洞去創(chuàng)作吧。

希望大家能在這篇教程中受益，最后祝大家乘風(fēng)破浪、揚(yáng)帆起航！

作者 | DXC體驗(yàn)設(shè)計(jì)中心
來(lái)源 | DXC體驗(yàn)設(shè)計(jì)中心 (id:DADA-JDDJ)