這篇文章我們將運用嚴謹的幾何形來塑造水果的形象，通過巧妙的形色組合、形狀本身透明度的疊合，表現具有簡約、大方、時尚感的鮮果派對插畫海報。

工具

工具：AI(Adobe illustrator)

適合：零基礎入門

扁平風的基礎思維準備：幾何形組合造型

幾何形一直被視作是抽象造型的基礎元素，通過幾何形有意識的相互疊加組合，就可以使得這個造型呈現出可識別的對象，比如我們在這個教程里所表現的那樣：用幾何形畫水果。

比起細膩豐富的傳統畫法，極簡的幾何平涂造型所創作的水果，看起來有著別樣的生動的特質，擺脫了對水果表面質感的依賴，轉向對形色的探索，是扁平插畫的基礎思維。

常用的幾何形是：圓、方、三角，在這個教程里，我們就運用矢量軟件AI(Adobe illustrator)進行創作，接下就開始來打造我們的《鮮果派對》海報吧。

用方形塑造蘋果基礎形

常見蘋果的畫法可以是圓形起步，也可以是從方形開始。

STEP 01

打開AI，新建一個文檔，運用粉色畫出一個正方形，這就是蘋果的起始形。起始形非常重要，它決定了接下這個蘋果的形狀走向。

然后，我們把這個正方形改變為梯形，改變的方法有很多種，這里我們利用變形工具，進入【效果>變形>弧形】，在變形工具的面板里，將垂直這個滑塊調整為-15%。

STEP 02

在選中上一步所變形成為的梯形的基礎上，進入到【對象>擴展外觀】對它做一次擴展外觀。

擴展外觀就是讓這個形狀真正變為矢量梯形的路徑，如果沒有做這一步，這個形狀看似是梯形，其實還是原來正方形的矢量路徑。分辨真假梯形也很簡單，只要選擇這個形狀，看到路徑的走向仍然是正方形，那就是假性梯形，這就需要為它做一次擴展外觀。

STEP 03

然后再選中這個梯形的基礎上，單擊左邊的工具欄里的【直接選擇工具】，就會看到四個角內分別帶有四個很小的圓點（仔細看是一個同心圓），拖動它，你會發現它會控制這個角，將它從銳利的角變為圓弧。

根據圓弧離形狀中心的距離多少，弧度也會相應發生變化。

好了，蘋果的基礎形就完成啦~

細節的魔力

我們開始為蘋果增加葉片，葉片的畫法首先也是要從基礎幾何形開始慢慢演變而成。我們在葉片這個部分提供的基礎幾何形同樣是正方形。

STEP 04

用藍紫色畫出一個正方形，然后再復制一個正方形，將這個復制的正方形旋轉45°，變為菱形。再復制第一個正方形。于是我們得到了兩個正方形和一個菱形，將它們像下圖所示拼起來。

然后再選中這個組合造型，進入到【窗口>路徑查找器】，在路徑查找器的面板中運用【聯集】將它們拼合成一個獨立的封閉的路徑。

STEP 05

然后再利用控制形狀角度的小圓點，就像STEP 03那樣分別選中下方以及左右兩邊的圓點，將角轉為弧形。一片葉子就這樣制作而成。

問：感覺似乎這樣的方式比較麻煩，為什么不直接用鋼筆工具畫呢？

這也是我在這一風格的畫法中想要重點強調的：盡量避免使用鋼筆工具，而用幾何形進行轉化，是保持扁平風格中幾何感和抽象感的訣竅。

因為手動畫出的路徑畢竟不會特別嚴謹，這時就難免讓扁平風格失去了它本身的風格特點，而這時如果沒有較強的結構感，整個畫面就會看起來”平淡“甚至”無趣“。

其實葉片的造型也可以探索出其他的幾何方式進行組合構造，本文只表現一種方法。其他的方法，可以留給你下去嘗試。

STEP 06

這時，把這個葉片的形狀的混合模式改為“正片疊底”，利用疊加的視覺效果增加畫面的幾何感和時尚感，這是在我們過去寫過的文章《超級可愛！插畫萌新必學的PS極簡馬克筆簡筆畫：盆栽篇》以及相關系列文章也都運用過類似的技法。

STEP 07

最后，用線條增加最后的細節。這里所用的線條是較細的3px的黑色線條。這里的線條粗細要根據形狀本身的尺寸大小比例來確定。總之，對細節的描繪可以克制一些，不要太過復雜。

利用線形的組合以及形狀疊加的視覺效果，扁平風的簡約蘋果元素就畫好了。

準備好元素，完成海報

STEP 08

藍莓的畫法從矩形起步，對矩形的組合以及成形的演變方法，是我們重點要訓練的對象。中間的步驟我們已在文章前面詳細敘述過了，這里就不再重復。可以繼續用這個方法演練下去。

STEP 09

畫草莓的時候，運用了兩個梯形進行組合。利用葉片造型進行疊加，也能增加圖形的魅力。

STEP 10

我們把其他的水果元素也畫好，我這里準備了一些比較可愛的櫻桃、西瓜之類，你也可以畫點菠蘿、芒果之類，注意要把握每一個水果的基礎形特點，然后在細節的部分加以強調。

把每個水果元素放到海報的設計中時，要考慮的還有對水果元素之間的間隙的疏密均勻程度，元素可以較大，有些元素甚至可以滲出到海報之外，這樣會讓視覺效果更為延伸。

本文的不用手繪就能設計出扁平幾何風基礎插畫就介紹到這里，如果經過路邊有家鮮果店，掛上這樣一張海報，應該效果是不錯的吧~ 先自我陶醉一波~

作者：飛屋睿
來源：飛屋睿（ID：ifeiwu81）

創作：Cecilia Castelli

人物的畫法向來在插畫界中都是風格各異的，今天我們創作的這個人物相對會傾向正常比例，找準她的身體比例結構表達到位即可，利用網格構圖來組合畫面，將會讓扁平風格看起來更具有結構感。在整個流程中，我們會同時用到AI和PS兩個工具，這兩個工具共同屬于Adobe的軟件，應用上彼此更容易溝通。我們會用AI起形，用PS來描繪光影，相比以往全部采用AI來繪制矢量插畫略有不同。

準備工具：

Photoshop (2019)

Adobe illustrator (2019)

數位板

草圖構思

無論是設計也好還是插畫也好，都總是少不了從草圖起步，這是idea的來源。實際的畫面可以不一定依據草圖，它只是給出一個大方向。

繪制人物頭部

STEP 01

繪制基礎形從AI開始，我們打開AI，新建一個文檔為1600*1600px，然后再進入到【編輯>首選項>參考線和網格】，在面板中設置如下參數：

STEP 02

我們開始要學會用網格來輔助造型，首先顯示出網格，這里要進入【視圖】，然后單擊【顯示網格】，并且勾選【對齊網格】。有了網格的輔助，我們的畫面就會看上去有種內在的穩定感。

STEP 03

接下我們來開畫，人物的側臉，把草圖拿來看了，然后扔掉。警告：不要完全去勾草圖，否則你會錯過一次練習造型的機會。

人物側臉的左側是最終呈現的線條，所以注意這條邊要對齊網格，并且注意它的輪廓表現。而這個形狀的右邊那條邊由于最終會被頭發等形狀所遮擋，因此隨意畫出即可。色彩可以填充為肉粉色，作為皮膚的色調。

STEP 04

接下我們要繼續畫出頭盔，頭盔的步驟如下圖所示：

STEP 05

把頭盔放到人物的臉部上方，將它略調整為與網格對齊，人物的頭部完成了一大半。

STEP 06

接下繪制人物的頭發，頭發的部分我們打算用矩形來生成。下面是用矩形做頭發的思路：利用矩形來拼成頭發的形狀，矩形本身是直角，但是經過圓角拉伸后就變成了圓角矩形，這時就很容易做出頭發的飄逸的效果，又不失扁平人物的風格表達。過程如下圖：

STEP 07

把上一步做好的頭發，連接到頭部。這里需要補充一個色塊，并且做好圓角的處理。要做到自然而然，不要接得太生硬。該調整的地方繼續調整。

到這一步，頭部就完成啦~再檢查看看頭部的視覺是否正常。

畫出人物身體

身體的部分要畫出來，首先要明確人物的頭身比。當然我們不是再現真實的人物，所以允許頭身比可以有部分出入，但是基本上還是按照6-8頭身的比例。這個比例具體是指什么意思呢？就是我們的身體高度剛好是頭部高度的6-8倍。

下圖為7.5頭身比例圖：

STEP 08

我們畫身體也是從直線開始，利用鋼筆工具畫直線，用直線來勾勒造型，注意對齊已有的網格線。

STEP 09

然后把部分的直角轉為圓角。

STEP 10

再畫出右邊的手臂，注意比例和對齊網格。然后再把部分尖銳的角轉為圓角。

STEP 11

手部的畫法很簡單，也是從矩形開始。然后把部分直角轉為圓角。

STEP 12

最后把頭發的部分拉大一點，然后把所有的細節都整理一遍。

STEP 13

畫出女生的小裙子，也是從直線起步，最后把裙子邊緣轉為圓弧。

STEP 14

兩條腿的畫法依然是利用鋼筆工具，注意小腿肚可以給個弧形來表現。

STEP 15

畫出鞋子的部分，并且增加鞋子的滑輪。

STEP 16

把人物的膝蓋的部分的細節再進行細化，如下圖

到這一步，整個人物的基礎大型就完成了。

繼續豐富裝飾細節

STEP 17

在目前的基礎上給人物增加小細節，這些小細節可以增加人物的生動感。比如我在這里給人物添加了頭盔、腰帶、鞋底以及長筒襪的細節。這部分純靠想象，大家可以稍微放飛自我。

利用AI的形狀生成器工具就能生成不同的形狀。

STEP 18

長筒襪的圖案可以畫出來，讓畫面更豐富。首先我們要畫出一條線，這條線的描邊為80px，然后進入【效果>扭曲和變換>波紋效果】，面板參數如下所示。

STEP 19

將上一步所做的形狀進行擴展外觀，變為封閉的路徑形狀，然后應用到長筒襪的白色形狀上。多余的部分用形狀生成器工具刪掉。

人物的塑造到這一步就完成了

畫陰影提質感——一切交給PS

我在扁平插畫課里給學員們所介紹的增加光影的方法一般來說是用AI完成的，但是其實增加光影，PS也能做到。所以，我們這次就用PS來增加光影表達。

STEP 20

可以打開PS，新建一個1920*1200px的文檔，然后將AI所畫的對象復制粘貼過去。粘貼時選擇“智能對象”，并且增加一個純色背景，背景色為暖粉色。

STEP 21

這時利用數位板/手繪板，開始對人的皮膚的部分增加陰影，用普通的畫筆即可。

新建一個新的圖層，然后設置為下面那個圖層的剪貼蒙板。在新圖層上添加陰影色塊。利用【選擇>色彩范圍】，首先選中皮膚的顏色，這時記得要選中人物的圖層。然后在新圖層上開始繪制陰影區域，顏色稍微比皮膚的顏色略深。

由于有螞蟻線選區的控制，開始涂陰影的時候就不會溢到其他部分。除了陰影，還可以增加高光的部分，讓畫面看起來更立體。畫筆選擇“硬邊圓”就好。

STEP 22

利用以上所介紹的步驟，開始對其他的部分都分別畫上陰影和高光。

因為畫的過程是非常自由的，只需要掌握基本的原則即可。這里不再詳述每一步，下面是需要注意的要點。

可以利用畫筆畫出部分細節。

STEP 23

最后把長筒襪的部分也做出陰影表現，這里的處理手法和上面略有不同。因為這里涉及的顏色較多，所以我們不能用單色的處理手法來提供選區。

此時需要再新建一個剪貼蒙板，利用鋼筆工具來生成長筒襪的形狀，然后用棕色涂出陰影部分，再降低整個圖層的透明度。

STEP 24

追加顆粒感的紋理，再新建一個圖層，創建剪貼蒙板，繼續自由發揮。這時可以選擇【特殊效果畫筆】里的“噴濺筆刷”，或者選用其他你自己私藏的顆粒感筆刷，這里不是那么絕對。

STEP 25

增加了顆粒的效果，可以讓邊緣變得也具有這種生動的手繪感，因此這時可以再新建一個圖層，利用邊緣比較有機的畫筆來表現，這里的圖層不需要創建剪貼蒙版。

其實插畫不一定要加顆粒，增加顆粒是為了提升趣味感。大家可以對比一下，增加顆粒前后。

STEP 26

最后通過色彩平衡等調色工具來對整體的色彩進行調整，并為人物增加文字背景，將文字也畫出陰影的效果，沖淡背景的單調。并且為整個插畫增加點狀圖案。

最終效果如下：

寫在后面：

后面為插畫增加文字和圖案的部分，由于是即興發揮，所以不再多累述。你可以增加圖案，也可以保持原狀。這部分可以發揮你的原創來繪制。

原文鏈接：ifeiwu

支持者：扁平設計很時髦

扁平設計非常時髦，但是它會持續多久？ 如果你是追趕潮流的設計師，卻沒嘗試過扁平設計，現在正是時候搭上扁平設計這班車。采用這種風格的項目（并且用得恰到好處），在各種博客中隨處可見，包括我們這個，有助于提升你的設計 而且，跟隨潮流而設計，樂趣無窮

反對者：它只是種潮流

時髦的另一面，是你永遠不知道它能流行多久 我們已經能看到，趨勢正在從純扁平設計向類扁平設計或長影扁平設計轉變 如果你頻繁改版你的網站或APP，時尚的設計也許適合你。如果你要一個網站經久不衰，請考慮不那么“潮”的東西

支持者：簡單的移動界面

簡潔的移動端設計，是扁平設計應用中的絕佳例子 一些令人印象深刻的扁平界面設計被應用在功能簡單的APP上。巨大的按鈕在移動設備上容易點擊，不需要再放大來尋找鏈接

反對者：可用性值得商榷

當涉及到某些復雜的用戶體驗時，扁平設計就會變得單調 并非所有用戶都喜歡這種界面風格，他們有時會不知道該點擊哪里 Norman Nielsen Group的一項分析指出，扁平設計風格會干擾可用性，因為用戶有時不知道什么是可點擊的。而且，扁平設計的項目總傾向于更低的“信息密度”來保持簡潔

支持者：明亮的用色可以烘托氛圍

也許只是我個人感覺，但扁平設計看起來讓人愉快。所有這些明亮鮮艷的顏色都令人愛不釋手，創造了一種積極、迷人的氛圍 Flat UI Colors，一個展示和幫助設計師使用扁平配色的網站，是個非常好的氛圍提升工具 看看這些色調，它們都溫暖而友好。即使深色也是基于暖色設計 由于扁平設計通常包含很多顏色，引發更多積極的聯想。誰會說彩虹是陰郁的呢？

反對者：配色困難

在一個項目中你用的顏色越多，就越難將它們恰當地搭配起來 創造一個協調的配色方案本身就是一個挑戰，如果你再加4、5種甚至更多顏色，它會變得更加棘手。成功運用扁平配色的設計師，都傾向于堅持統一飽和度和亮度，來設計一致的外觀，使得顏色的選擇有跡可循

支持者：聚焦精美的字體

 扁平設計的一個優勢，是漂亮字體的聚焦作用 除去了裝飾，字體確實在扁平設計項目中蓬勃發展。從精美裝飾性字體，到簡潔的非襯線字體，漂亮的字體是優秀的扁平設計的關鍵組成之一 在我個人看來，投影效果有點糟蹋字體。有趣的字體與大膽的配色之間形成的強烈對比，令人印象深刻、精神振奮

反對者：糟糕的字體變得更明顯

正因為扁平設計有助于聚焦優秀的字體，它也能放大糟糕的字體。（看看蘋果預發布iOS7時遭受的所有詬病，比如那極細的主字體，現在這個設計決策已經被修正了） 扁平設計冒失起來簡直無法饒恕。選用什么都會有某種程度的戲劇性，難以掩蓋字體的不完美 如果你對于字體的組合和選擇不在行，那么扁平設計可能不是你的最佳選擇

支持者：視覺表達簡潔鮮明

 扁平設計的本質是簡潔和鮮明。這是使它美觀的重要特征之一 這種風格使用很多高對比特征，包括顏色、字體，和大膽的總體設計，保持段落簡潔易讀。按鈕和其他UI元素通常設計成基本的幾何圖形，盡管邊角也會用到圓形

反對者：它會看起來太簡陋

取決于使用者的不同，扁平設計也被部分人評價為“過于簡陋” 用扁平設計傳達復雜的視覺信息會很困難 扁平設計的另一項反對聲音，是用戶界面工具太樸素。擬物化設計的支持者表示，增加一些具象的裝飾可以讓工具更易用。坦白說，這得看內容 在極度簡潔的界面設計中，視覺層級也是一項需要重點考慮的內容。什么是最重要的？你如何通過視覺強調它？

支持者：扁平設計摒棄令人厭煩的裝飾

 沒有什么比一眼就看出設計者對項目充滿厭倦更糟的了 這些本末倒置的花哨裝飾包含了太多陰影效果、古怪的動畫，或者根本就是顯得多余的隨機效果 正因為扁平設計簡潔的本質，這些約束可以促使設計者忠于這種風格的本質完成項目

反對者：有些裝飾還是不錯的

并非所有裝飾都不好 在設計純扁平項目的時候，它確實極大地限制了能夠為你所用的技巧

結論

沒有一種設計風格是完美的。為你的每個項目量身定制地設計，才能使得外觀和所要傳達信息的感覺風格相吻合 設計不僅僅是某樣東西看起來如何。它也關乎易用性和功能。優秀的設計總是易用的 

VIA：http://select.yeeyan.org/view/418335/376376