網頁設計 ? 視覺設計 ? UI插畫技法,風景照片變手繪插畫

UI插畫技法,風景照片變手繪插畫

發表于: 視覺設計. 評論
贊助商鏈接

什么是UI插畫?準確點說應該是扁平化風格插畫,一般手繪插畫都需要很長的時間才能繪制完成,同時也考驗設計師的畫功,正因如此,現在流行一種簡易的扁平化UI插畫風格,可以使用鼠繪就能畫出插畫風格的作品,新人設計師也可以很快上手并應用到實際項目中。

UI插畫技法,風景照片變插畫

一、開篇

本篇文章主要針對于小白及插畫小白,在剛剛就業設計職業的道路上多一些設計方法,讓工作不再困難。當然,在比較熟練技巧后,不要一直依賴于此,要以擴展的方式繼續深入學習才會提高。

二、對于插畫工具的認知

在前一篇文章里我講到過,插畫的風格多種多樣,插畫繪畫的工具就可以分為三種:鼠繪、板繪、ipad繪;為什么重點說工具呢,我想很多小白也跟我想的一樣,我也是小白,不是專業出身,對于剛剛接觸插畫,一片茫然,只知道筆和紙,并不了解怎樣在電腦上繪制。這里小編可以跟同學們建議,如果你是入門UI或者平面,對于插畫不需要太過于深入,可以先選擇鼠繪學習。

那么這三種都怎么樣,到底怎么選擇呢?

對于插畫工具的認知

第一個就是鼠繪,鼠繪入門比較低,不需要額外投入,一個鼠標,用PS或者AI就可以繪畫,但是適合于繪制扁平化插畫,(下面會介紹幾種常見插畫類別)。

第二種板繪,板繪是插畫師的必備,是所有畫師最專業的設備,當然板繪需要買一個相對好一些的,比如影拓啊之類,專業板子價格一般都在一千以上。對于板子的運用,零基礎的同學可能不適合馬上運用,需要熟悉并且學習一段時間,畢竟看著電腦,在板子上繪畫,一開始會不太習慣。

第三種Ipad,就更不用說了,需要投入買一個,建議大家一定要買pro系列,因為pro系列會有配套的筆,其他的ipad的筆都不是蘋果原廠,用起來很不舒服。對于專業性來說,雖然沒有板繪專業,但也適用于商業插畫的繪制,學習成本低,只需要稍微熟悉一下軟件用法就可以(ipad軟件于PS不同,但相似),畫起來的手感跟紙筆繪畫一樣。

三、插畫種類

對于三種不同的設備來說,有多種插畫種類,但咱們今天主要針對的是對插畫方向的小白同學,所以主要說一下我個人總結的一部分鼠繪插畫種類。

在比較短的時間內能夠用鼠繪方式繪制出來的大概總結了這幾種,首先最常見的就是漸變的插畫,這副插畫大概制作時間在半個工作日左右。

第二種線性插畫,在實景建筑圖片基礎上運用線條的方式繪制出輪廓,達到想要的效果。

第三種,我給起名線面插畫,意思就是利用粗描邊的方式繪制輪廓,再進行填色,適用于比較清新的顏色風格。

第四種,應用最廣的噪點插畫,本身在第一幅插畫的基礎上加入噪點,形成更深的層次感覺,在后面我會介紹一些噪點的畫法。

第五種,手繪和鼠繪的結合。如果小伙伴們有時間,就可以利用這個方法,在板子或ipad上先把喜歡的插畫畫出來,再導入PS里進行顏色調整和文字排版。

當然鼠繪畫法不局限于這幾種,這里只是舉例子比較常見的,大家可以多嘗試其他方法。

對于板繪和ipad繪制風格,有多種多樣,比如卡通畫法、厚涂、美式畫風等等,建議大家把鼠標繪畫練習熟練之后再深入學習。

四、案例-雪山插畫

接下來進入主題案例教學,今天首先給大家帶來的是,雪山插畫,景物照片轉插畫的過程。對于我個人來說,畫這一副需要3~4個小時,初學者可以選擇照片比較簡單的開始練起。

那么我們開始。

案例-雪山插畫

1.第一步就是選圖

有很多小伙伴問我,從網上截取的圖片,自己畫成插畫,有版權嗎?如果擔心,還是自己拍更好一些,或者,幾張圖片結合著畫,就是這里的一棵樹,那里的一個小房子,這樣的。當然,這種畫法是照片→插畫,并不是去抄別人的插畫。

選圖最好從比較簡單的圖片選起,一般山水,比較容易學起,這類的線條較少,水波倒影很美,也很容易排版。

2.第二步,觀察

選好圖后要進行觀察,因為景物圖一般都是由遠景到近景一系列組成,為什么要觀察這些呢?這樣有助于我們建立圖層,畫插畫的先后順序。

觀察插畫

要注意,從遠到近,從上到下去觀察。比如,從上,天空、太陽如果沒有,可以選擇加或不加,白云;從遠,遠處的山,近處的山、房屋后面的樹、房屋、房屋前面的雪、雪前面的樹;再往下,就是水,加倒影。

這里要注意,在觀察之后,要選擇,哪些是可以省略掉不畫的,因為扁平化插畫,是一些大的色塊組合而成,不是寫實一樣細致,畫面物體零散的太多反而會影響整體,所以要抓住重點來畫。就比如房子前雪的前面那些樹枝,加上會不會覺得有點亂,不如省去;再或者,如果遠處的山太多,是不是可以簡略一些。

選擇好需要畫的主體后,開始下一步。

3.第三步,找色彩

色彩搭配是比較多的人問我的一點,其實這張圖還好,顏色比較鮮艷,直接運用其實都可以。但是在我的其他插畫中可以看出,很多插畫的照片,顏色是不會拿來直接用的,這里就需要伙伴們對顏色的定義。那么顏色怎么選呢?

第三步,找色彩

這里教大家一個比較實用的方法來找色彩,我這里給分成了三個大類:

第一個是季節,觀察你想要畫的,主要突出的場景是什么,比如說驚蟄、夏至、東至這種季節代表性的照片,可以用季節來尋找色彩,不同的季節有不同的顏色范圍。

第二個是時間段,一說小伙伴就懂了,每天都有不同的時間段,清晨、上午、正午、落日、傍晚,仔細觀察每天陽光的動向,照射大地的顏色,都是豐富多彩的,不同時間段有著不同的色彩。

第三個是情感,就比如我有一副畫的是親情,運用了一個比較暖暖的色調來襯托母愛的溫暖,相對來說還有愛情、友情等不同顏色,還有可以表達小孩子的童真的顏色,等等。

那么,選定了自己想要的色彩方向,怎么去定義色值呢?

這里就需要大家平常的積累和準備,作為設計師,積累是很重要的。網上有很多插畫的成品,很多顏色參考,可以搜集代表不同的感情色彩,需要用的時候直接拿出來看。

找到很多有代表意義的色彩,選定自己的方向后,進行定義,這里的定義顏色并不是說大家去抄,去吸色。就比如你的圖,是落日,你選擇了中間那一副,你知道落日是從淡黃色到橙黃色的漸變,鄰近色也可以運用,ok,然后下一步去漸變色網站去找你想要的顏色,比如設計導航推薦的漸變配色網站就很好用。

==漂亮漸變配色網站 Web gradients====

這里很多很多色卡,可以去選擇你需要的,另外,在顏色上最好稍微鮮艷一些,提升整體感覺。

4.第四步,開始著手畫

終于可以開始畫了是吧哈哈~

開始之前,先要確定一下你畫插畫的目的,來選擇軟件,在這里,我就用PS來畫,因為在一些工具的運用來說,PS比AI要更方便一點,更容易操作。當然,如果需要印刷圖,需要注意一下尺寸和分辨率。

在畫布大小上我想建議一下小伙伴們,一般來說,畫布可以分為PC端的橫向矩形,和移動端的豎向矩形,為什么不選擇用正方形這種,你可以先用正方形畫布,之后再根據需要進行剪裁,但是建議初學者還是先定義好畫布大小再進行繪制,這樣對于物體位置的把控就會比較直接。

這里,就用移動端畫布大小進行演示。

第四步,開始著手畫

在原圖上可以看出,整體分為水和陸地,陸地部分占比沒有水多,整體畫面的中心則還需要在陸地,因此咱們需要向下移動一些,縮小水的面積。因此可以確定,最底層,可以用兩個矩形,一個在上面作為天空,一個在下面作為水面。

在天空上,可以畫個矩形,作為太陽,復制一個太陽加高斯模糊作為陽光的照射。陽光下面的云,就用鋼筆工具來勾勒,直接加個與天空一樣的漸變就可以,如果不明顯,可以換一個方向,如果過于明顯,可以稍稍改變一下色調。

接下來是什么呢,就是遠處的山,也是用鋼筆勾勒形狀,從最遠的開始畫起,每畫一層,就要給這層加漸變,從最下層開始一層一層的畫。畫房屋的時候,房屋的每一個面,每一個窗戶也要分層來,方便上色。

有小伙伴問,那我找不準形狀怎么辦,鋼筆勾的不穩。沒關系,按照自己的感覺走,比如樹木那里,就算原圖是很模糊的,看不清樹枝的方向,也可以根據自己的想法,隨意勾勒,隨意一點。

用相同方法,繪制出前后不同的景觀,顏色深淺度要把握一下。

接下來比較重要的是,水面波紋的畫法。

水面的倒影就是將上半部分的靜物與天空中的云朵和太陽復制一層,倒立過來,轉換成智能對象,用蒙版拉伸一下,從下至上,從透明到不透明。重要的是,添加動感模糊,數值不要太大。

接下來,就是水面波紋的畫法了。這個大家還仔細來做。

首先,用鋼筆畫出一個波浪的形狀,再加動感模糊。復制多個,不規則排列,再復制多層,每層都調整不同顏色,制作出深淺度不同的水波紋。

就這樣,一幅照片轉的插畫就這樣完成了。

等等,還沒結束,不加文案的插畫是不完整滴~大家要注意,一個頁面上不要出現三種以上的字體,所以在字體的選擇上,不要過多,而且要注意版權問題,文字排版如果是零基礎,建議大家有空的時候看一本書《寫給大家看的設計書》。主要針對于設計零基礎的童鞋們,里面有很多文字排版的規范和注意事項。

如果前期對排版還不是很熟練,是要用業余時間多多看網上優秀的案例,多保存在自己的素材庫中,作為參考是很不錯的。

5.第五步,豐富頁面之-噪點

如果大家覺得頁面不夠飽滿,又不能再加東西了,到了一個十分尷尬的地步,就可以往噪點插畫方向制作一下。

那么噪點可以怎么加呢?這里我總結了三種加噪點的方法供大家選擇。

豐富頁面之-噪點

首先是筆刷,噪點筆刷需要大家找一下,沒有的話就需要從網上下載一下了。噪點筆刷比較隨意,想怎么畫就怎么畫,但不是一步到位,需要慢慢來,這樣也會很細致。

第二種方法是雜色,需要提前蓋印出一張成品圖,在濾鏡→雜色里面添加單色的雜色,可以控制雜色數量,添加完之后配合蒙版,擦去不需要的雜色。

第三種方法是濾鏡里面的顆粒,有兩種顆粒,另一個是膠片顆粒。普通顆粒和雜色幾乎一樣,但可以調節對比度等。膠片顆粒可以根據高光區域來選擇顆粒的范圍,不過最好還是配合蒙版來進行擦除。

怎么樣,小伙伴們畫出來自己心儀的插畫了嗎?

五、總結

很開心和大家分享自己的插畫小技巧,這類的插畫比較快捷的出圖,一定程度上能夠滿足部分設計師在工作當中的要求,今天帶給大家的是景物插畫方法,大家也要多多練習,在之后的時間里,我會繼續選擇幾幅插畫繼續與大家分享。

不要問我為什么不繼續畫了,其實我也是個小白,在今年下半年的計劃中,其他的設計也要練習,所以現在正在繼續著別的練習,希望大家也要一起有計劃的學習。

感謝大家的支持!!

作者:Lina琳
個人主頁:https://zoulin.zcool.com.cn/

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。