Photoshop繪製漸變主題風格的手機插畫

今天給大家一個教程，如何用PS快速實現扁平化插畫風為了寫這一篇教程，自己設計了三張扁平插畫海報，根據實例去講解，更多的是在製作過程中的思考。推薦給思緣的朋友學習，希望思緣的朋友可以喜歡。

下面是效果圖

漸變扁平插畫風應用在APP閃屏、H5設計、海報、UI界面中、扁平化簡單的插畫風格讓更多人所接受喜愛

這些簡約扁平唯美的插畫風如何從無到有的過程呢，除了用手繪板去畫，其實用AI+PS也可以完成這樣的插畫風。

今天帶給大家一個教程，如何用PS+AI快速實現扁平化插畫風，這個教程應該在去年的時候就應該分享給大家，因為工作比較忙這個事就擱淺了，還好現在去做這個教程還不算晚，畢竟這個風格一直現在延續。為了寫這一篇文章教程，自己設計了三張扁平化插畫風海報，根據照片來源靈感，結合流行漸變色進行創意組合設計。以下為實例的教程，不只是步驟上教大家如何去完成，其實更多是一些在設計過程中的一些思考。分享的教程頁面可能會很長，為了讓大家更好的理解步驟介紹的相對比較詳細，其實大致總結起來也就幾個步驟快速的完成。

在設計繪製插畫風的時候先不要求快，首先要有一個思考，想一個題材。是想要做哪方面的插畫，是藍天、深林、沙漠等 有個大致的腦圖。然後根據想要做的主題去找一些唯美的照片，從照片中吸取一些靈感，然後創意重新組合，或者從顏色上進行變化，達到想要的效果。以下是前期準備中找到的靈感參考照片素材：

了解現在流行的漸變色，多看看色彩相關的設計，從設計中提取出一些色彩搭配應用在設計中。在漸變插畫風中色彩表現手法各有不同，色彩冷暖對比、互補顏色對比、同等色調明度對比、反差對比、相近色系等，都是為了整個畫面達到層次關係、空間感、對比強烈、畫面融合。在做圖的時候就要知道想要什麼樣顏色作為畫面的主色調，用什麼樣的方式表達。

原創第一張插畫為例，在前期準備主題定位、色彩了解之後整體結合元素組合創意布局，在紙上把想要表達和照片保留繪製一個草圖，草圖不需要造型多準確。只是能表達出來即可、給接下來工作提供了方便。

根據草圖，收集一些元素圖片，目的是知道海豚、漁船、陽光是什麼樣的。根據圖片創意加工造型變化，變成自己所需要的素材。收集一些雲彩、遠處的山、漁夫小船、海豚、陽光等相關素材。

在元素繪製的時候沒有特別的規定是PS去繪製還是AI去繪製,兩者都可.主要還是根據自己的軟體操作習慣而定,最終達到目的就可以了。至於如何畫太陽、如何去畫一個小船和漁夫、如何畫個小山、就不做演示。這更多的是造型能力和軟體操作能力。主要講的是在做這個漸變扁平插畫的一個怎樣的思考和過程,如何去做頁面的處理。元素如何去畫還是要根據找的照片素材進行延展和一些造型上的一個參考在進行創作,然後進行AI中繪製這的過程。

以上準備都做完之後就需要開始進行PS實際進行操作了。

1在PS中ctrl+n建一個畫布為750*1334， 解析度72。

2在畫布上給畫面一個背景顏色，背景顏色在前期構想中就要有個想法，大致要什麼樣的顏色。漸變色填充整個背景，背景色彩會主導整個畫面顏色方向漸變數值為：#83a3ea #ebd0e2 #fee9e0 #d3c2e3

3確定天水地分割線，分割線會更清晰的知道哪部分是天上的部分空間，哪些是水面的部分空間，哪些是地面的空間，CTRL+R標尺下相應位置作為標記

4繪製小山可在PS中或者AI中繪製，哪個方便就用哪個，沒有特意要求，把小山放在天水分割線處，給小山顏色#b2a2cc 然後複製出一層小山作為倒影，顏色#e6d6e0

5繪製陽光在AI中繪製了一個陽光，拖拽到PS中，陽光填充顏色：#fffff 陽光在PS中顯得比較突兀，和整體不融合，這樣就需要給圓做一個外發光。選中陽光圖層右鍵-混合選項-外發光，混合模式：濾色、不透明度75%、圖素大小:27，方法：柔和，顏色：#ffe7e3

6.湖面處理在底色上複製一個太陽縮小一點太陽，垂直旋轉作為投影。濾鏡-模糊-高斯模糊，然後給投影一個透明度60%

7.湖面陽光倒影處理使陽光及湖面更真實做進一步的細化。在AI中繪製這樣的圖形，然後拖拽到PS中。給圖形一個顏色，讓圖形融合水面顏色值#faf6f8

8.在AI中繪製線條圖形，拖拽到PS中，有點像水紋的感覺海面不那麼平平。水紋只是個輔助的作用，所以不用那麼突出。把水紋的顏色調整體融入一些，顏色#f8eef1

9.湖面也處理差不多了、那麼給整個畫面增加一些輔助氣氛、在AI中畫的小船漁夫導入到畫面中，擺放好位置，給小船一個顏色#bba8da，這樣小船感覺像在空中飄著，緊接著給小船一個陰影讓小船有一個厚重感是在海面上飄著的。複製一層小船，然後旋轉把小船壓扁一些感覺像個倒影、給小船陰影一個顏色#ded1f3。

10.在AI中繪製海豚的時候要拆分分層兩個部分，一個整個的海豚和海豚下半部嘴的部分、拆分的原因是在上色的時候會更方便一些。

把海豚放在相應的位置，放在太陽正上方有一些太居中，往右移動幾像素從視角上來說生動了不少。然後給海豚一個漸變的色值，從左上方拉到右下方、色值為：#dbd1f8 #a789d3 要注意的是#a789d3給的多一些、因為這個是主色調。然後把海豚的第二部分嘴下半部元素組合給一個色值：#f8e1fe

這個海豚看似是完成了，其實應該在細節上在給一些環境色，選中海豚圖層，按住CTRL+左鍵單擊。框選海豚然後按照箭頭位置給一些漸變色，完畢之後CTRL+D取消線框，加完是不是更加的融合、更加的飽滿了。設計中的確是需要一些誇張的手法，但是也需要符合一些場景，所以需要給海豚加一些特效，對了就是出水時候的水滴和水花，營造一下氣氛，放在最佳的位置、然後給個顏色。水花色值#f8f6f7這樣才是一個完整的出水海豚。

11.岸邊根據草圖從形態上做一些藝術處理、摺疊起伏這樣的岸邊、畫一個元素圖形就可以，變換一下位置摺疊，接著就是給一些漸變色值：#ecdcea #c7bce5 從上往下漸變岸邊完成之後感覺空一些，增加一些元素來點綴一下，營造一些氣氛。三角面分隔明顯，對比也比較強烈，所選三角作為裝飾。明暗之間的對比，融合主色調做一下純度的降低。立體三角元素畫一個就可以，然後複製大小遠近去做組合。

12.天空的處理，增加一些雲彩，及星星點點元素即點綴了畫面，也讓整個畫面飽滿和符合畫面氣氛。到現在這個步驟畫面已經完成，給畫面加分地方就是在來一點英文，這個畫面整體感就提升。看上就會高大上一些。放一些比較細的英文字體，比較乾淨不破壞整個效果。在做圖的時候圖層整理分組也是一個優秀設計師日常設計良好習慣，更清晰的分組

這次教程主要講解分享一個製作的思路，希望能幫助到小夥伴們。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！