文章導(dǎo)讀: 這次分享的關(guān)于我在淘積木里的一個(gè)H5手繪頁面，為什么要說到手繪這個(gè)主題，要知道，現(xiàn)在的電商設(shè)計(jì)再也不是單純的套套圖和加點(diǎn)文案那么單調(diào)的玩法了，玩法多種多樣，但是要玩到精細(xì)和有情調(diào)，那也是一種境界啊。今天這里會(huì)說到關(guān)于手繪的創(chuàng)意想法、起線稿、基本色、貼圖、細(xì)節(jié)處理、顏色關(guān)系、文案設(shè)計(jì)，這些都是作為一張商業(yè)插畫必不可少的組成部分，每一步都是我們要進(jìn)行學(xué)習(xí)和深究的，力求在這個(gè)設(shè)計(jì)大神那么多的電商時(shí)代站得住腳。

正文：

一、關(guān)于想法和小構(gòu)圖

二、手繪線稿

   在起稿前，我給它定位的方向是一個(gè)古韻風(fēng)味的花茶在復(fù)古的氛圍中安靜的展示，所以它的底紙是有書香味的紙張，這么做的目的是一開始我就要固定我的大感覺，至少我有紙張的襯托下我不會(huì)走偏風(fēng)格，往往在畫畫的時(shí)候，設(shè)計(jì)師是很容易畫著畫著就走偏風(fēng)格，因?yàn)橐婚_始大感覺的東西不支持著你的東西的存在的話，后面從細(xì)碎的東西開始，就容易走偏了自己最初的風(fēng)格，可能你會(huì)說，走偏了也挺好的，至少也是一種新的方向和創(chuàng)意。這話沒毛病，但是如果是你的個(gè)人純創(chuàng)作，這樣絕對(duì)是可以的，但是在商業(yè)插畫里，是不能這樣的，因?yàn)樯虡I(yè)插畫它是一系列地展示下去的，當(dāng)初確定了風(fēng)格之后，一旦執(zhí)行了就不能輕易的改變，這也是為什么我會(huì)從線稿和紙張開始定住風(fēng)格的原因。

其次就是線的走向以及筆觸的運(yùn)用，很多人一開始線條會(huì)比較粗糙，建議下載鉛筆筆刷或者自己制作屬于自己的筆刷（怎么下載筆刷和制作筆刷這期我就不多說了，下期我會(huì)著重講這塊的）。線稿有一點(diǎn)就是不需要像平常的素描那樣畫的那般精細(xì)和陰影效果強(qiáng)烈的，因?yàn)槲覀冎氐氖欠旁陬伾菈K，除非你是純線稿展示。

三、線稿鋪色

線稿簡單的鋪上一層基礎(chǔ)顏色，這里可以看到，所有的第一層顏色都是比較單色塊和有點(diǎn)邊緣粗糙的，這個(gè)是我用框選工具大致勾勒出來填色的，這個(gè)不需要在一開始的時(shí)候就比較嚴(yán)謹(jǐn)?shù)倪M(jìn)行上色，隨意的出界和錯(cuò)誤也是可以有一種屬于自己的風(fēng)格，那種自己刻意出點(diǎn)小錯(cuò)誤的筆觸也是你的風(fēng)格，但是，這種美麗的錯(cuò)誤不是隨便亂來的，如果你是剛開始學(xué)的，建議你先保守上色。

四、主題物的顏色表達(dá)區(qū)分

     這里就是在我們的主體物里面進(jìn)行勾勒上色了，在主體物里面，它的擺放和色彩是有規(guī)律可言的，圖中的黃色菊花占據(jù)畫面的中心點(diǎn)，所以它是視覺的亮點(diǎn)以及最重要的視覺點(diǎn)，所以這一抹黃色在紅色的襯布下一點(diǎn)都不顯得突兀，這個(gè)也要?dú)w于顏色的純度選取，顏色的溫度選對(duì)了，搭配色也選合適了，一切的顏色在畫面都不會(huì)突兀。

五、深入細(xì)節(jié)上色

     大致的基礎(chǔ)鋪色完成了，接下來就是深度細(xì)節(jié)上色了，在畫面顏色最重的紅色上，我鋪了一個(gè)貼圖，可以說我是有點(diǎn)偷懶或者什么吧，因?yàn)槲矣X得在畫畫上面，可能有些設(shè)計(jì)師他們會(huì)全程畫到底，但是有時(shí)候借助一些貼圖不是不可以的，因?yàn)橛袝r(shí)候畫不出來那種感覺的時(shí)候，貼圖是最好最快的輔助工具之一了，如果借助一點(diǎn)小工具能讓你的畫面瞬速起效果的話，何樂而不為呢。

六、顏色那些問題

     隨著物體的基本色上完之后，接下里就是一步步深入，就是力求把每個(gè)物體的明暗關(guān)系做到位，就像畫布和茶碗的那塊暗面的處理，畫布的邊緣處理，以及茶碗里面的各種物體的關(guān)系。

     這里會(huì)著重說下明暗關(guān)系，首先在高光的處理上，是如何用純度高的顏色進(jìn)行描繪的，一般高光大多數(shù)人是會(huì)用本色靠近白色的顏色來點(diǎn)綴的，我的做法就是用純色，但是這個(gè)有點(diǎn)難把握，因?yàn)樵陬伾臏囟认?，你這個(gè)純色必須要嘗試多次才能找到適合的，雖然步驟過程是多了點(diǎn)，但是這種效果往往比那些灰度低明度高的顏色好太多，因?yàn)榧兩谝黄鹊椎念伾镉肋h(yuǎn)都是最亮眼的那個(gè)。

     再說下中間色這檔事，中間的顏色我基本是保持顏色不動(dòng)的，因?yàn)檫@是我一開始就定下的基本色，所以為什么之前我在填第一層顏色的時(shí)候選色會(huì)慎重點(diǎn)，基本色在其他顏色的深入下，會(huì)被覆蓋，所以說中間色是多樣多彩的，是高光和陰影的重要銜接色。

     陰影，說到陰影大家第一時(shí)間想到的就是暗面，覺得一片暗色就搞定了。其實(shí)色彩這東西，沒有絕對(duì)的顏色，因?yàn)殡S著環(huán)境和光的不同變化，物體的顏色也是跟著改變的。

     反光也是一種奇妙的顏色，他在暗面的時(shí)候支撐起陰影的整個(gè)存在，讓人發(fā)現(xiàn)，暗面的色彩是有如此多樣化的。

     在畫面上，我在處理那個(gè)水紋的時(shí)候，我給水面的高光是偏藍(lán)色的，因?yàn)槿展獾恼丈湎拢炜帐撬{(lán)的，它的倒映是偏藍(lán)色的。在處理細(xì)節(jié)的時(shí)候，記得不要被細(xì)碎的東西帶偏了，記得多恢復(fù)100%的比例回來看大感覺，對(duì)比下顏色和整體效果。

七、文案搭配

最后一個(gè)步驟，就是為我們的畫面添加上我們?cè)撚械脑娨獍愕奈陌噶?。商業(yè)插畫如果沒有好的文案搭配，畫得再好也表達(dá)不出來它的味道。所以在排版上面和文案的選詞上面，我們都要多做功夫，不能毀了一張商業(yè)插畫的價(jià)值。

總結(jié)：

   與10多年前的電商設(shè)計(jì)不同，10年前的電商設(shè)計(jì)是追求賣貨，因?yàn)楫?dāng)時(shí)的需求就是價(jià)格便宜，很多都是什么跳樓價(jià)啊買什么送什么啊的，所以在設(shè)計(jì)上大多數(shù)表現(xiàn)的都是那些紅黃藍(lán)的色彩，要多搶眼就有多搶眼，要多low就有多low。10年后的電商，不再是以前那個(gè)樣子了，現(xiàn)在人的需求除了價(jià)格便宜，在品質(zhì)，品牌度，款式設(shè)計(jì)上都有了高的追求?，F(xiàn)在的電商時(shí)代打的是情感的視覺營銷，就好像三只松鼠、百雀羚、阿芙那樣，視覺上的營銷不再單一產(chǎn)品純展示，而且多種設(shè)計(jì)的玩法，有合成的，有手繪的，有C4D模型制作的，有視頻制作的，各種各樣的手法去展示。

    現(xiàn)在展示的都是其中最基本的手繪，手繪的風(fēng)格是多種多樣的，希望我們?cè)趯W(xué)習(xí)新東西的時(shí)候能不忘初心，做最好的設(shè)計(jì)。