這篇文章我們將運用嚴謹?shù)膸缀涡蝸硭茉焖男蜗?，通過巧妙的形色組合、形狀本身透明度的疊合，表現(xiàn)具有簡約、大方、時尚感的鮮果派對插畫海報。
工具
工具：AI(Adobe illustrator)
適合：零基礎(chǔ)入門
扁平風的基礎(chǔ)思維準備：幾何形組合造型
幾何形一直被視作是抽象造型的基礎(chǔ)元素，通過幾何形有意識的相互疊加組合，就可以使得這個造型呈現(xiàn)出可識別的對象，比如我們在這個教程里所表現(xiàn)的那樣：用幾何形畫水果。
比起細膩豐富的傳統(tǒng)畫法，極簡的幾何平涂造型所創(chuàng)作的水果，看起來有著別樣的生動的特質(zhì)，擺脫了對水果表面質(zhì)感的依賴，轉(zhuǎn)向?qū)π紊奶剿?，是扁平插畫的基礎(chǔ)思維。
常用的幾何形是：圓、方、三角，在這個教程里，我們就運用矢量軟件AI(Adobe illustrator)進行創(chuàng)作，接下就開始來打造我們的《鮮果派對》海報吧。
用方形塑造蘋果基礎(chǔ)形
常見蘋果的畫法可以是圓形起步，也可以是從方形開始。
STEP 01
打開AI，新建一個文檔，運用粉色畫出一個正方形，這就是蘋果的起始形。起始形非常重要，它決定了接下這個蘋果的形狀走向。
然后，我們把這個正方形改變?yōu)樘菪?，改變的方法有很多種，這里我們利用變形工具，進入【效果>變形>弧形】，在變形工具的面板里，將垂直這個滑塊調(diào)整為-15%。
STEP 02
在選中上一步所變形成為的梯形的基礎(chǔ)上，進入到【對象>擴展外觀】對它做一次擴展外觀。
擴展外觀就是讓這個形狀真正變?yōu)槭噶刻菪蔚穆窂剑绻麤]有做這一步，這個形狀看似是梯形，其實還是原來正方形的矢量路徑。分辨真假梯形也很簡單，只要選擇這個形狀，看到路徑的走向仍然是正方形，那就是假性梯形，這就需要為它做一次擴展外觀。
STEP 03
然后再選中這個梯形的基礎(chǔ)上，單擊左邊的工具欄里的【直接選擇工具】，就會看到四個角內(nèi)分別帶有四個很小的圓點（仔細看是一個同心圓），拖動它，你會發(fā)現(xiàn)它會控制這個角，將它從銳利的角變?yōu)閳A弧。
根據(jù)圓弧離形狀中心的距離多少，弧度也會相應發(fā)生變化。
好了，蘋果的基礎(chǔ)形就完成啦~
細節(jié)的魔力
我們開始為蘋果增加葉片，葉片的畫法首先也是要從基礎(chǔ)幾何形開始慢慢演變而成。我們在葉片這個部分提供的基礎(chǔ)幾何形同樣是正方形。
STEP 04
用藍紫色畫出一個正方形，然后再復制一個正方形，將這個復制的正方形旋轉(zhuǎn)45°，變?yōu)榱庑?。再復制第一個正方形。于是我們得到了兩個正方形和一個菱形，將它們像下圖所示拼起來。
然后再選中這個組合造型，進入到【窗口>路徑查找器】，在路徑查找器的面板中運用【聯(lián)集】將它們拼合成一個獨立的封閉的路徑。
STEP 05
然后再利用控制形狀角度的小圓點，就像STEP 03那樣分別選中下方以及左右兩邊的圓點，將角轉(zhuǎn)為弧形。一片葉子就這樣制作而成。
問：感覺似乎這樣的方式比較麻煩，為什么不直接用鋼筆工具畫呢？
這也是我在這一風格的畫法中想要重點強調(diào)的：盡量避免使用鋼筆工具，而用幾何形進行轉(zhuǎn)化，是保持扁平風格中幾何感和抽象感的訣竅。
因為手動畫出的路徑畢竟不會特別嚴謹，這時就難免讓扁平風格失去了它本身的風格特點，而這時如果沒有較強的結(jié)構(gòu)感，整個畫面就會看起來”平淡“甚至”無趣“。
其實葉片的造型也可以探索出其他的幾何方式進行組合構(gòu)造，本文只表現(xiàn)一種方法。其他的方法，可以留給你下去嘗試。
STEP 06
這時，把這個葉片的形狀的混合模式改為“正片疊底”，利用疊加的視覺效果增加畫面的幾何感和時尚感，這是在我們過去寫過的文章《超級可愛！插畫萌新必學的PS極簡馬克筆簡筆畫：盆栽篇》以及相關(guān)系列文章也都運用過類似的技法。
STEP 07
最后，用線條增加最后的細節(jié)。這里所用的線條是較細的3px的黑色線條。這里的線條粗細要根據(jù)形狀本身的尺寸大小比例來確定?？傊瑢毠?jié)的描繪可以克制一些，不要太過復雜。
利用線形的組合以及形狀疊加的視覺效果，扁平風的簡約蘋果元素就畫好了。
準備好元素，完成海報
STEP 08
藍莓的畫法從矩形起步，對矩形的組合以及成形的演變方法，是我們重點要訓練的對象。中間的步驟我們已在文章前面詳細敘述過了，這里就不再重復?？梢岳^續(xù)用這個方法演練下去。
STEP 09
畫草莓的時候，運用了兩個梯形進行組合。利用葉片造型進行疊加，也能增加圖形的魅力。
STEP 10
我們把其他的水果元素也畫好，我這里準備了一些比較可愛的櫻桃、西瓜之類，你也可以畫點菠蘿、芒果之類，注意要把握每一個水果的基礎(chǔ)形特點，然后在細節(jié)的部分加以強調(diào)。
把每個水果元素放到海報的設(shè)計中時，要考慮的還有對水果元素之間的間隙的疏密均勻程度，元素可以較大，有些元素甚至可以滲出到海報之外，這樣會讓視覺效果更為延伸。
本文的不用手繪就能設(shè)計出扁平幾何風基礎(chǔ)插畫就介紹到這里，如果經(jīng)過路邊有家鮮果店，掛上這樣一張海報，應該效果是不錯的吧~ 先自我陶醉一波~
作者：飛屋睿
來源：飛屋睿（ID：ifeiwu81）
創(chuàng)作：Cecilia Castelli
人物的畫法向來在插畫界中都是風格各異的，今天我們創(chuàng)作的這個人物相對會傾向正常比例，找準她的身體比例結(jié)構(gòu)表達到位即可，利用網(wǎng)格構(gòu)圖來組合畫面，將會讓扁平風格看起來更具有結(jié)構(gòu)感。在整個流程中，我們會同時用到AI和PS兩個工具，這兩個工具共同屬于Adobe的軟件，應用上彼此更容易溝通。我們會用AI起形，用PS來描繪光影，相比以往全部采用AI來繪制矢量插畫略有不同。
準備工具：
Photoshop (2019)
Adobe illustrator (2019)
數(shù)位板
草圖構(gòu)思
無論是設(shè)計也好還是插畫也好，都總是少不了從草圖起步，這是idea的來源。實際的畫面可以不一定依據(jù)草圖，它只是給出一個大方向。
繪制人物頭部
STEP 01
繪制基礎(chǔ)形從AI開始，我們打開AI，新建一個文檔為1600*1600px，然后再進入到【編輯>首選項>參考線和網(wǎng)格】，在面板中設(shè)置如下參數(shù)：
STEP 02
我們開始要學會用網(wǎng)格來輔助造型，首先顯示出網(wǎng)格，這里要進入【視圖】，然后單擊【顯示網(wǎng)格】，并且勾選【對齊網(wǎng)格】。有了網(wǎng)格的輔助，我們的畫面就會看上去有種內(nèi)在的穩(wěn)定感。
STEP 03
接下我們來開畫，人物的側(cè)臉，把草圖拿來看了，然后扔掉。警告：不要完全去勾草圖，否則你會錯過一次練習造型的機會。
人物側(cè)臉的左側(cè)是最終呈現(xiàn)的線條，所以注意這條邊要對齊網(wǎng)格，并且注意它的輪廓表現(xiàn)。而這個形狀的右邊那條邊由于最終會被頭發(fā)等形狀所遮擋，因此隨意畫出即可。色彩可以填充為肉粉色，作為皮膚的色調(diào)。
STEP 04
接下我們要繼續(xù)畫出頭盔，頭盔的步驟如下圖所示：
STEP 05
把頭盔放到人物的臉部上方，將它略調(diào)整為與網(wǎng)格對齊，人物的頭部完成了一大半。
STEP 06
接下繪制人物的頭發(fā)，頭發(fā)的部分我們打算用矩形來生成。下面是用矩形做頭發(fā)的思路：利用矩形來拼成頭發(fā)的形狀，矩形本身是直角，但是經(jīng)過圓角拉伸后就變成了圓角矩形，這時就很容易做出頭發(fā)的飄逸的效果，又不失扁平人物的風格表達。過程如下圖：
STEP 07
把上一步做好的頭發(fā)，連接到頭部。這里需要補充一個色塊，并且做好圓角的處理。要做到自然而然，不要接得太生硬。該調(diào)整的地方繼續(xù)調(diào)整。
到這一步，頭部就完成啦~再檢查看看頭部的視覺是否正常。
畫出人物身體
身體的部分要畫出來，首先要明確人物的頭身比。當然我們不是再現(xiàn)真實的人物，所以允許頭身比可以有部分出入，但是基本上還是按照6-8頭身的比例。這個比例具體是指什么意思呢？就是我們的身體高度剛好是頭部高度的6-8倍。
下圖為7.5頭身比例圖：
STEP 08
我們畫身體也是從直線開始，利用鋼筆工具畫直線，用直線來勾勒造型，注意對齊已有的網(wǎng)格線。
STEP 09
然后把部分的直角轉(zhuǎn)為圓角。
STEP 10
再畫出右邊的手臂，注意比例和對齊網(wǎng)格。然后再把部分尖銳的角轉(zhuǎn)為圓角。
STEP 11
手部的畫法很簡單，也是從矩形開始。然后把部分直角轉(zhuǎn)為圓角。
STEP 12
最后把頭發(fā)的部分拉大一點，然后把所有的細節(jié)都整理一遍。
STEP 13
畫出女生的小裙子，也是從直線起步，最后把裙子邊緣轉(zhuǎn)為圓弧。
STEP 14
兩條腿的畫法依然是利用鋼筆工具，注意小腿肚可以給個弧形來表現(xiàn)。
STEP 15
畫出鞋子的部分，并且增加鞋子的滑輪。
STEP 16
把人物的膝蓋的部分的細節(jié)再進行細化，如下圖
到這一步，整個人物的基礎(chǔ)大型就完成了。
繼續(xù)豐富裝飾細節(jié)
STEP 17
在目前的基礎(chǔ)上給人物增加小細節(jié)，這些小細節(jié)可以增加人物的生動感。比如我在這里給人物添加了頭盔、腰帶、鞋底以及長筒襪的細節(jié)。這部分純靠想象，大家可以稍微放飛自我。
利用AI的形狀生成器工具就能生成不同的形狀。
STEP 18
長筒襪的圖案可以畫出來，讓畫面更豐富。首先我們要畫出一條線，這條線的描邊為80px，然后進入【效果>扭曲和變換>波紋效果】，面板參數(shù)如下所示。
STEP 19
將上一步所做的形狀進行擴展外觀，變?yōu)榉忾]的路徑形狀，然后應用到長筒襪的白色形狀上。多余的部分用形狀生成器工具刪掉。
人物的塑造到這一步就完成了
畫陰影提質(zhì)感——一切交給PS
我在扁平插畫課里給學員們所介紹的增加光影的方法一般來說是用AI完成的，但是其實增加光影，PS也能做到。所以，我們這次就用PS來增加光影表達。
STEP 20
可以打開PS，新建一個1920*1200px的文檔，然后將AI所畫的對象復制粘貼過去。粘貼時選擇“智能對象”，并且增加一個純色背景，背景色為暖粉色。
STEP 21
這時利用數(shù)位板/手繪板，開始對人的皮膚的部分增加陰影，用普通的畫筆即可。
新建一個新的圖層，然后設(shè)置為下面那個圖層的剪貼蒙板。在新圖層上添加陰影色塊。利用【選擇>色彩范圍】，首先選中皮膚的顏色，這時記得要選中人物的圖層。然后在新圖層上開始繪制陰影區(qū)域，顏色稍微比皮膚的顏色略深。
由于有螞蟻線選區(qū)的控制，開始涂陰影的時候就不會溢到其他部分。除了陰影，還可以增加高光的部分，讓畫面看起來更立體。畫筆選擇“硬邊圓”就好。
STEP 22
利用以上所介紹的步驟，開始對其他的部分都分別畫上陰影和高光。
因為畫的過程是非常自由的，只需要掌握基本的原則即可。這里不再詳述每一步，下面是需要注意的要點。
可以利用畫筆畫出部分細節(jié)。
STEP 23
最后把長筒襪的部分也做出陰影表現(xiàn)，這里的處理手法和上面略有不同。因為這里涉及的顏色較多，所以我們不能用單色的處理手法來提供選區(qū)。
此時需要再新建一個剪貼蒙板，利用鋼筆工具來生成長筒襪的形狀，然后用棕色涂出陰影部分，再降低整個圖層的透明度。
STEP 24
追加顆粒感的紋理，再新建一個圖層，創(chuàng)建剪貼蒙板，繼續(xù)自由發(fā)揮。這時可以選擇【特殊效果畫筆】里的“噴濺筆刷”，或者選用其他你自己私藏的顆粒感筆刷，這里不是那么絕對。
STEP 25
增加了顆粒的效果，可以讓邊緣變得也具有這種生動的手繪感，因此這時可以再新建一個圖層，利用邊緣比較有機的畫筆來表現(xiàn)，這里的圖層不需要創(chuàng)建剪貼蒙版。
其實插畫不一定要加顆粒，增加顆粒是為了提升趣味感。大家可以對比一下，增加顆粒前后。
STEP 26
最后通過色彩平衡等調(diào)色工具來對整體的色彩進行調(diào)整，并為人物增加文字背景，將文字也畫出陰影的效果，沖淡背景的單調(diào)。并且為整個插畫增加點狀圖案。
最終效果如下：
寫在后面：
后面為插畫增加文字和圖案的部分，由于是即興發(fā)揮，所以不再多累述。你可以增加圖案，也可以保持原狀。這部分可以發(fā)揮你的原創(chuàng)來繪制。
原文鏈接：ifeiwu
]]>支持者：扁平設(shè)計很時髦
扁平設(shè)計非常時髦，但是它會持續(xù)多久？ 如果你是追趕潮流的設(shè)計師，卻沒嘗試過扁平設(shè)計，現(xiàn)在正是時候搭上扁平設(shè)計這班車。采用這種風格的項目（并且用得恰到好處），在各種博客中隨處可見，包括我們這個，有助于提升你的設(shè)計 而且，跟隨潮流而設(shè)計，樂趣無窮
反對者：它只是種潮流
時髦的另一面，是你永遠不知道它能流行多久 我們已經(jīng)能看到，趨勢正在從純扁平設(shè)計向類扁平設(shè)計或長影扁平設(shè)計轉(zhuǎn)變 如果你頻繁改版你的網(wǎng)站或APP，時尚的設(shè)計也許適合你。如果你要一個網(wǎng)站經(jīng)久不衰，請考慮不那么“潮”的東西
支持者：簡單的移動界面
簡潔的移動端設(shè)計，是扁平設(shè)計應用中的絕佳例子 一些令人印象深刻的扁平界面設(shè)計被應用在功能簡單的APP上。巨大的按鈕在移動設(shè)備上容易點擊，不需要再放大來尋找鏈接
反對者：可用性值得商榷
當涉及到某些復雜的用戶體驗時，扁平設(shè)計就會變得單調(diào) 并非所有用戶都喜歡這種界面風格，他們有時會不知道該點擊哪里 Norman Nielsen Group的一項分析指出，扁平設(shè)計風格會干擾可用性，因為用戶有時不知道什么是可點擊的。而且，扁平設(shè)計的項目總傾向于更低的“信息密度”來保持簡潔
支持者：明亮的用色可以烘托氛圍
也許只是我個人感覺，但扁平設(shè)計看起來讓人愉快。所有這些明亮鮮艷的顏色都令人愛不釋手，創(chuàng)造了一種積極、迷人的氛圍 Flat UI Colors，一個展示和幫助設(shè)計師使用扁平配色的網(wǎng)站，是個非常好的氛圍提升工具 看看這些色調(diào)，它們都溫暖而友好。即使深色也是基于暖色設(shè)計 由于扁平設(shè)計通常包含很多顏色，引發(fā)更多積極的聯(lián)想。誰會說彩虹是陰郁的呢？
反對者：配色困難
在一個項目中你用的顏色越多，就越難將它們恰當?shù)卮钆淦饋?創(chuàng)造一個協(xié)調(diào)的配色方案本身就是一個挑戰(zhàn)，如果你再加4、5種甚至更多顏色，它會變得更加棘手。成功運用扁平配色的設(shè)計師，都傾向于堅持統(tǒng)一飽和度和亮度，來設(shè)計一致的外觀，使得顏色的選擇有跡可循
支持者：聚焦精美的字體
扁平設(shè)計的一個優(yōu)勢，是漂亮字體的聚焦作用 除去了裝飾，字體確實在扁平設(shè)計項目中蓬勃發(fā)展。從精美裝飾性字體，到簡潔的非襯線字體，漂亮的字體是優(yōu)秀的扁平設(shè)計的關(guān)鍵組成之一 在我個人看來，投影效果有點糟蹋字體。有趣的字體與大膽的配色之間形成的強烈對比，令人印象深刻、精神振奮
反對者：糟糕的字體變得更明顯
正因為扁平設(shè)計有助于聚焦優(yōu)秀的字體，它也能放大糟糕的字體。（看看蘋果預發(fā)布iOS7時遭受的所有詬病，比如那極細的主字體，現(xiàn)在這個設(shè)計決策已經(jīng)被修正了） 扁平設(shè)計冒失起來簡直無法饒恕。選用什么都會有某種程度的戲劇性，難以掩蓋字體的不完美 如果你對于字體的組合和選擇不在行，那么扁平設(shè)計可能不是你的最佳選擇
支持者：視覺表達簡潔鮮明
扁平設(shè)計的本質(zhì)是簡潔和鮮明。這是使它美觀的重要特征之一 這種風格使用很多高對比特征，包括顏色、字體，和大膽的總體設(shè)計，保持段落簡潔易讀。按鈕和其他UI元素通常設(shè)計成基本的幾何圖形，盡管邊角也會用到圓形
反對者：它會看起來太簡陋
取決于使用者的不同，扁平設(shè)計也被部分人評價為“過于簡陋” 用扁平設(shè)計傳達復雜的視覺信息會很困難 扁平設(shè)計的另一項反對聲音，是用戶界面工具太樸素。擬物化設(shè)計的支持者表示，增加一些具象的裝飾可以讓工具更易用。坦白說，這得看內(nèi)容 在極度簡潔的界面設(shè)計中，視覺層級也是一項需要重點考慮的內(nèi)容。什么是最重要的？你如何通過視覺強調(diào)它？
支持者：扁平設(shè)計摒棄令人厭煩的裝飾
沒有什么比一眼就看出設(shè)計者對項目充滿厭倦更糟的了 這些本末倒置的花哨裝飾包含了太多陰影效果、古怪的動畫，或者根本就是顯得多余的隨機效果 正因為扁平設(shè)計簡潔的本質(zhì)，這些約束可以促使設(shè)計者忠于這種風格的本質(zhì)完成項目
反對者：有些裝飾還是不錯的
并非所有裝飾都不好 在設(shè)計純扁平項目的時候，它確實極大地限制了能夠為你所用的技巧
結(jié)論
沒有一種設(shè)計風格是完美的。為你的每個項目量身定制地設(shè)計，才能使得外觀和所要傳達信息的感覺風格相吻合 設(shè)計不僅僅是某樣東西看起來如何。它也關(guān)乎易用性和功能。優(yōu)秀的設(shè)計總是易用的
]]>