前言

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

   目錄

   一、作品賞析

   二、4大步驟

   1.靈感

   2.構(gòu)圖草稿

   3.構(gòu)型

   4.刻畫主體

   三、舉一反三

   四、總結(jié) 

01/

作品賞析

設(shè)計師MBE，他整體的設(shè)計非常簡潔可愛、易上手

設(shè)計師Rami Niemi擅長線性人物插畫的設(shè)計，他的設(shè)計簡約有趣、幽默頑皮感

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

02/

4大步驟

1.靈感

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

+聯(lián)想

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

+照片素材

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

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

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

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

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

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

+ 構(gòu)圖方式

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

（圖片來自網(wǎng)絡(luò)，如侵請告知刪除）

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

+ 初步草圖

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

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

3.構(gòu)型

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

+描邊

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

+色彩

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

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

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

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

配色小技巧

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

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

    3.多欣賞好的電影、動畫片、游戲作品

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

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

《Weather story》

    C. 中性色的配色技巧就是注意整個顏色的融合，對比度。 

4.刻畫主體

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

+明暗刻畫

 添加暗部

添加亮部 

+輪廓

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

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

+局部刻畫

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

《騎士招募》的描邊插畫海報完成。

03/

舉一反三

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

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

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

（左邊圖片來自網(wǎng)絡(luò)，如侵請告知刪除）

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

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

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

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

4.刻畫主體（明暗部+輪廓+局部刻畫）

從明暗部開始塑造，再增加輪廓描邊，最后刻畫重點局部。

04/

總結(jié)

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

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

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

作者 | DXC體驗設(shè)計中心
來源 | DXC體驗設(shè)計中心 (id:DADA-JDDJ)