老板今天讓我做插畫(huà)頁(yè)面需求，我沒(méi)畫(huà)出來(lái)，然后....

兄弟們，微信公眾號(hào)又改版了，不設(shè)置星標(biāo)，可能會(huì)錯(cuò)過(guò)文章干貨，所以我們專門(mén)為大家設(shè)計(jì)一個(gè)如何給菜心設(shè)計(jì)鋪加星標(biāo)的教程動(dòng)圖，嘎嘎好看，嘎嘎用心，大家現(xiàn)在就可以加一下，以免錯(cuò)過(guò)干貨！

環(huán)境問(wèn)題日益嚴(yán)峻，低碳行動(dòng)迫在眉睫。

最近我們就接到一個(gè)低碳活動(dòng)的H5需求，是針對(duì)一系列辦公場(chǎng)景下的低碳行為進(jìn)行的打卡活動(dòng)。根據(jù)需求內(nèi)容我們采用了扁平插畫(huà)的風(fēng)格去繪制了這樣的一副頭圖。

最終效果如下：

怎么去制作這種潮流扁平插畫(huà)風(fēng)格的頭圖呢，我將分成以下幾個(gè)步驟來(lái)講解：

1.草圖繪制 2.鋪色 3.細(xì)節(jié)優(yōu)化 4.合成輸出

01 草圖繪制

草圖繪制，是完成頭圖插畫(huà)的第一步也是最重要的一步。因?yàn)樵O(shè)計(jì)不是藝術(shù)創(chuàng)作，需要我們有明確目的去實(shí)施。

目的有二：①結(jié)合目標(biāo)活動(dòng)，與甲方確認(rèn)畫(huà)面中內(nèi)容要素和元素，避免無(wú)效設(shè)計(jì)。②把握方向，結(jié)合界面提前規(guī)劃好尺寸和布局。

以下是繪制的第一版草圖，畫(huà)面核心為活動(dòng)標(biāo)題，視覺(jué)主體為三只手，中間以三個(gè)箭頭關(guān)聯(lián)起畫(huà)面，與低碳活動(dòng)的三個(gè)場(chǎng)景相對(duì)應(yīng)，然后輔以抽象圖形和icon進(jìn)行畫(huà)面豐富，整體畫(huà)面呈中心構(gòu)圖。

目前草圖的元素豐富度已經(jīng)差不多，但是主次表現(xiàn)有些較弱，視覺(jué)表現(xiàn)也較為平均。于是調(diào)整了第二版草圖。

優(yōu)化了以下幾點(diǎn)：
①調(diào)整畫(huà)面布局，放大標(biāo)題區(qū)域，占整體畫(huà)面的50%，并且進(jìn)行字體斜切處理，讓標(biāo)題更為靈動(dòng)更突出。
②預(yù)留副標(biāo)題區(qū)域，優(yōu)化元素布局，增加畫(huà)面透氣感。
③增強(qiáng)以手為主體的主視覺(jué)，弱化其他元素，增強(qiáng)畫(huà)面層次表現(xiàn)。

草圖繪制到這個(gè)階段就差不多了，對(duì)于整體的畫(huà)面表現(xiàn)邏輯和后期細(xì)化的方向已經(jīng)有了一個(gè)很清晰的認(rèn)識(shí)。接著就可以進(jìn)行下一步了。

02 鋪底色

鋪底色，就是每部分填上固有色，進(jìn)一步區(qū)分和展示畫(huà)面的層次，也能繼續(xù)調(diào)整畫(huà)面。根據(jù)此次低碳辦公場(chǎng)景的主題，我選取了藍(lán)色為主色，表現(xiàn)低碳、辦公和科技感，輔助色為綠色，增加環(huán)保，自然感，其余點(diǎn)綴一些暖色系顏色豐富畫(huà)面，增加冷暖對(duì)比。

由于走的是扁平潮流風(fēng)，顏色的飽和度整體比較高，標(biāo)題部分則選擇無(wú)彩色-黑色，與周圍高飽和度亮色對(duì)比，進(jìn)行主題強(qiáng)調(diào)。

但目前的畫(huà)面顏色和元素都過(guò)多過(guò)雜，導(dǎo)致視覺(jué)中心有點(diǎn)分散，主題有點(diǎn)弱化了，在此情況下就不要想著再去優(yōu)化和豐富畫(huà)面了，而是開(kāi)始學(xué)會(huì)做減法。以下是調(diào)整后的：

舍棄了關(guān)聯(lián)的箭頭元素，整個(gè)畫(huà)面一下子就干凈不少，更為透氣了。所以定的草稿也不是絕對(duì)的，在后期的優(yōu)化調(diào)整中，可以為了視覺(jué)效果適當(dāng)?shù)娜プ鰟h減。

畫(huà)面整體的效果差不多就出來(lái)了，但是目前還是有點(diǎn)粗糙，所以還需要接著進(jìn)行下一步，細(xì)化，讓畫(huà)面精致起來(lái)。

03 細(xì)化

細(xì)化，精致，這一步也非常的重要，一個(gè)插畫(huà)是否有看點(diǎn)，就取決于對(duì)于畫(huà)面元素細(xì)節(jié)的處理。

1、首先標(biāo)題的豐富，我增加了字體層次，增加了周圍的點(diǎn)綴元素。其次副標(biāo)題增加了點(diǎn)狀紋理。

2、然后第一塊主體視覺(jué)手部增加了黑邊線條，更加明確手指結(jié)構(gòu)。并增加了一層手部暗面。

3、第二塊視覺(jué)主題手采用同樣方式塑造，手機(jī)元素則增加一個(gè)厚度層，并且增加手機(jī)側(cè)部按鈕，讓結(jié)構(gòu)更豐富。

4、第三塊視覺(jué)主題手部塑造同上，電腦元素則是優(yōu)化明暗對(duì)比，調(diào)整顏色與整體視覺(jué)更同一，電腦界面的小元素參考網(wǎng)頁(yè)彈窗優(yōu)化圖形。

最后細(xì)化的效果如下：

04 結(jié)合輸出

作為一個(gè)H5頁(yè)面的頭圖，單獨(dú)去看也是不行的，還是得放到實(shí)際頁(yè)面上看看效果。再根據(jù)該潮流平面風(fēng)格，延展一些ui組件一起放上頁(yè)面，最終效果如下：

這樣一個(gè)扁平潮流的H5頁(yè)面就算大致完成了，是不是超級(jí)簡(jiǎn)單，但是還是強(qiáng)調(diào)，設(shè)計(jì)不是藝術(shù)創(chuàng)作，背后設(shè)計(jì)和優(yōu)化的邏輯和基礎(chǔ)是我們要多去思考和練習(xí)的。

試聽(tīng)課

菜心&慢熱視覺(jué)課 2.0版10期 的試聽(tīng)課來(lái)咯，兩人拼單僅需6.6元，名額有限，先到先得！理論+實(shí)操，入股不虧！

上課時(shí)間：10月26日晚8點(diǎn)30。

試聽(tīng)課報(bào)名鏈接，點(diǎn)擊左下角【閱讀原文】即可查看~

記得報(bào)名后添加上方菜心3的微信，拉你進(jìn)試聽(tīng)課的群哦！