PS如何快速實(shí)現(xiàn)漸變扁平化插畫風(fēng)
- 來源:
- 橘子
- 時間:
- 2018-05-15 01:40:07
- 閱讀:
- 7584
漸變扁平插畫風(fēng)應(yīng)用在APP閃屏、H5設(shè)計、海報、UI界面中、扁平化簡單的插畫風(fēng)格讓更多人所接受喜愛
這些簡約扁平唯美的插畫風(fēng)如何從無到有的過程呢,除了用手繪板去畫,其實(shí)用AI+PS也可以完成這樣的插畫風(fēng)。
今天帶給大家一個教程,如何用PS+AI快速實(shí)現(xiàn)扁平化插畫風(fēng),這個教程應(yīng)該在去年的時候就應(yīng)該分享給大家,因?yàn)楣ぷ鞅容^忙這個事就擱淺了,還好現(xiàn)在去做這個教程還不算晚,畢竟這個風(fēng)格一直現(xiàn)在延續(xù)。為了寫這一篇文章教程,自己設(shè)計了三張扁平化插畫風(fēng)海報,根據(jù)照片來源靈感,結(jié)合流行漸變色進(jìn)行創(chuàng)意組合設(shè)計。以下為實(shí)例的教程,不只是步驟上教大家如何去完成,其實(shí)更多是一些在設(shè)計過程中的一些思考。分享的教程頁面可能會很長,為了讓大家更好的理解步驟介紹的相對比較詳細(xì),其實(shí)大致總結(jié)起來也就幾個步驟快速的完成。
在設(shè)計繪制插畫風(fēng)的時候先不要求快,首先要有一個思考,想一個題材。是想要做哪方面的插畫,是藍(lán)天、深林、沙漠等 有個大致的腦圖。然后根據(jù)想要做的主題去找一些唯美的照片,從照片中吸取一些靈感,然后創(chuàng)意重新組合,或者從顏色上進(jìn)行變化,達(dá)到想要的效果。以下是前期準(zhǔn)備中找到的靈感參考照片素材:
了解現(xiàn)在流行的漸變色,多看看色彩相關(guān)的設(shè)計,從設(shè)計中提取出一些色彩搭配應(yīng)用在設(shè)計中。在漸變插畫風(fēng)中色彩表現(xiàn)手法各有不同,色彩冷暖對比、互補(bǔ)顏色對比、同等色調(diào)明度對比、反差對比、相近色系等,都是為了整個畫面達(dá)到層次關(guān)系、空間感、對比強(qiáng)烈、畫面融合。在做圖的時候就要知道想要什么樣顏色作為畫面的主色調(diào),用什么樣的方式表達(dá)。
原創(chuàng)第一張插畫為例,在前期準(zhǔn)備主題定位、色彩了解之后整體結(jié)合元素組合創(chuàng)意布局,在紙上把想要表達(dá)和照片保留繪制一個草圖,草圖不需要造型多準(zhǔn)確。只是能表達(dá)出來即可、給接下來工作提供了方便。
根據(jù)草圖,收集一些元素圖片,目的是知道海豚、漁船、陽光是什么樣的。根據(jù)圖片創(chuàng)意加工造型變化,變成自己所需要的素材。收集一些云彩、遠(yuǎn)處的山、漁夫小船、海豚、陽光等相關(guān)素材。
在元素繪制的時候沒有特別的規(guī)定是PS去繪制還是AI去繪制,兩者都可.主要還是根據(jù)自己的軟件操作習(xí)慣而定,最終達(dá)到目的就可以了。至于如何畫太陽、如何去畫一個小船和漁夫、如何畫個小山、就不做演示。這更多的是造型能力和軟件操作能力。主要講的是在做這個漸變扁平插畫的一個怎樣的思考和過程,如何去做頁面的處理。元素如何去畫還是要根據(jù)找的照片素材進(jìn)行延展和一些造型上的一個參考在進(jìn)行創(chuàng)作,然后進(jìn)行AI中繪制這的過程。
以上準(zhǔn)備都做完之后就需要開始進(jìn)行PS實(shí)際進(jìn)行操作了。
1在PS中ctrl+n建一個畫布為750*1335, 分辨率72。
2在畫布上給畫面一個背景顏色,背景顏色在前期構(gòu)想中就要有個想法,大致要什么樣的顏色。漸變色填充整個背景,背景色彩會主導(dǎo)整個畫面顏色方向漸變數(shù)值為:
#83a3ea #ebd0e2 #fee9e0 #d3c2e3
3確定天水地分割線,分割線會更清晰的知道哪部分是天上的部分空間,哪些是水面的部分空間,哪些是地面的空間,CTRL+R標(biāo)尺下相應(yīng)位置作為標(biāo)記
4繪制小山可在PS中或者AI中繪制,哪個方便就用哪個,沒有特意要求,把小山放在天水分割線處,給小山顏色#b2a2cc 然后復(fù)制出一層小山作為倒影,顏色#e6d6e0
5繪制陽光在AI中繪制了一個陽光,拖拽到PS中,陽光填充顏色:#fffff 陽光在PS中顯得比較突兀,和整體不融合,這樣就需要給圓做一個外發(fā)光。選中陽光圖層右鍵-混合選項(xiàng)-外發(fā)光,混合模式:濾色、不透明度75%、圖素大小:27,方法:柔和,顏色:#ffe7e3
6.湖面處理在底色上復(fù)制一個太陽縮小一點(diǎn)太陽,垂直旋轉(zhuǎn)作為投影。濾鏡-模糊-高斯模糊,然后給投影一個透明度60%
7.湖面陽光倒影處理使陽光及湖面更真實(shí)做進(jìn)一步的細(xì)化。在AI中繪制這樣的圖形,然后拖拽到PS中。給圖形一個顏色,讓圖形融合水面顏色值#faf6f8
8.在AI中繪制線條圖形,拖拽到PS中,有點(diǎn)像水紋的感覺海面不那么平平。水紋只是個輔助的作用,所以不用那么突出。把水紋的顏色調(diào)整體融入一些,顏色#f8eef1
9.湖面也處理差不多了、那么給整個畫面增加一些輔助氣氛、在AI中畫的小船漁夫?qū)氲疆嬅嬷校瑪[放好位置,給小船一個顏色#bba8da,這樣小船感覺像在空中飄著,緊接著給小船一個陰影讓小船有一個厚重感是在海面上飄著的。復(fù)制一層小船,然后旋轉(zhuǎn)把小船壓扁一些感覺像個倒影、給小船陰影一個顏色#ded1f3。
10.在AI中繪制海豚的時候要拆分分層兩個部分,一個整個的海豚和海豚下半部嘴的部分、拆分的原因是在上色的時候會更方便一些。
把海豚放在相應(yīng)的位置,放在太陽正上方有一些太居中,往右移動幾像素從視角上來說生動了不少。然后給海豚一個漸變的色值,從左上方拉到右下方、色值為:#dbd1f8 #a789d3 要注意的是#a789d3給的多一些、因?yàn)檫@個是主色調(diào)。然后把海豚的第二部分嘴下半部元素組合給一個色值:#f8e1fe
這個海豚看似是完成了,其實(shí)應(yīng)該在細(xì)節(jié)上在給一些環(huán)境色,選中海豚圖層,按住CTRL+左鍵單擊??蜻x海豚然后按照箭頭位置給一些漸變色,完畢之后CTRL+D取消線框,加完是不是更加的融合、更加的飽滿了。設(shè)計中的確是需要一些夸張的手法,但是也需要符合一些場景,所以需要給海豚加一些特效,對了就是出水時候的水滴和水花,營造一下氣氛,放在最佳的位置、然后給個顏色。水花色值#f8f6f7這樣才是一個完整的出水海豚。
11.岸邊根據(jù)草圖從形態(tài)上做一些藝術(shù)處理、折疊起伏這樣的岸邊、畫一個元素圖形就可以,變換一下位置折疊,接著就是給一些漸變色值:#ecdcea #c7bce5 從上往下漸變岸邊完成之后感覺空一些,增加一些元素來點(diǎn)綴一下,營造一些氣氛。三角面分隔明顯,對比也比較強(qiáng)烈,所選三角作為裝飾。明暗之間的對比,融合主色調(diào)做一下純度的降低。立體三角元素畫一個就可以,然后復(fù)制大小遠(yuǎn)近去做組合。
12.天空的處理,增加一些云彩,及星星點(diǎn)點(diǎn)元素即點(diǎn)綴了畫面,也讓整個畫面飽滿和符合畫面氣氛。到現(xiàn)在這個步驟畫面已經(jīng)完成,給畫面加分地方就是在來一點(diǎn)英文,這個畫面整體感就提升??瓷暇蜁叽笊弦恍?。放一些比較細(xì)的英文字體,比較干凈不破壞整個效果。在做圖的時候圖層整理分組也是一個優(yōu)秀設(shè)計師日常設(shè)計良好習(xí)慣,更清晰的分組
這次教程主要講解分享一個制作的思路,希望能幫助到小伙伴們。如有什么設(shè)計過程中疑問歡迎下方留言。
原文地址:http://www.zcool.com.cn/article/ZNjQyMjY0.html