UI 保姆級教程!如何從零開始繪制奶瓶圖標?

前陣子畫了一套吉祥物等級徽章,友友們請看:

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

這篇文章主要跟大家分享[悠悠崽]其中的一個單體元素——奶瓶的畫法。想到很多同學都不太清楚玻璃要怎么畫,包括我自己也是研究了好一番,于是趁這次機會來分享一下。

往期教程:

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

來個目錄,按需查看(上質(zhì)感的過程均在 PS 中完成):

  1. 畫布大小
  2. 上固有色
  3. 質(zhì)感表達
  4. 添加小修飾

一、畫布大小

大家在畫這種精細度比較高的質(zhì)感圖標、禮物、插畫時,畫布大小不能建太小,一旦建太小很容易在放大之后就模糊掉了。像我之前就犯了這個錯誤,最后就是一整個重畫。

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

所以畫布建大一點!也方便我們?nèi)タ坍嫾毠?jié),畫質(zhì)也會更細膩!

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

我用到的畫布大小可供參考:徽章大小 3000*3000,分辨率 300 dpi。

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

單畫這個奶瓶畫布大小是 1000*1000

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

二、上固有色

這個階段能夠幫助我們查看整體畫面的色彩搭配是否合適,不合適及時調(diào)整,調(diào)整成本也很小。

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

上好后,要看顏色與顏色之間的對比度是否拉開了,沒拉開就要調(diào)整。

像畫這個奶瓶里面的牛奶和玻璃壁時,固有色用的都是白色,他們的顏色就有些區(qū)分不開。如果保持這個顏色,在后續(xù)上質(zhì)感的過程中就會遇到很大困難,面與面之間很容易融在一起!

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

而把其中一個調(diào)暗,另一個亮起來,暗的那個又會顯得有些臟。

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

所以這里我就把玻璃壁或牛奶的色相改一下,讓他們層與層之間區(qū)分開來,后續(xù)上質(zhì)感也好上一些。

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

這里我從整個畫面顏色的搭配和占比上,覺得把牛奶的顏色調(diào)整為藍色會更好看。

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

三、質(zhì)感表達

1. 畫玻璃壁

我們先來看玻璃的質(zhì)感。 玻璃怎么畫?找參考!玻璃相關(guān)的參考有很多,不同精細度、不同寫實度的。

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

要根據(jù)我們現(xiàn)在畫的這個質(zhì)感處在的精細度要求,去選擇對應(yīng)的參考學習借鑒。 像這個階段的精細度就很合適了,再往上就會偏復(fù)雜。

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

讓我們觀察參考圖中玻璃壁厚度的組成結(jié)構(gòu):

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

大概分成三層,且每一層都有亮有暗:

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

我們運用同樣的思路,畫玻璃壁,用布爾運算將將邊緣光的形狀做出來:

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

然后再往這三層上添加圖層蒙版,讓每一層都有些地方透出來

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

接著去塑造玻璃裝著牛奶的感覺:

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

到這里,玻璃壁就畫的差不多了,我們接著畫里面裝的牛奶!

2. 畫牛奶

牛奶部分其實就是個圓柱體,按照畫圓柱體的方式去畫就可以了。

首先畫暗部:

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

其次畫亮部:用白色畫筆,降低透明度先畫出第一層亮色

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

第二層亮色可以稍微改變色相再加上去,這樣做也會使色相更豐富一些。

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

最后再往暗部加一些些反光,牛奶部分就完工啦

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

我們再把剩下結(jié)構(gòu)的質(zhì)感完成:

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

四、添加小修飾

現(xiàn)在玻璃奶瓶上還是有點空曠,可以想想玻璃瓶上還有什么結(jié)構(gòu),比如說刻度:

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

或者是玻璃瓶上的反光:

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

如果自己沒啥想法,也可以看看參考怎么加的,比如說這個參考上,水里就加了一些小氣泡:

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

我們也把小氣泡加上,讓層次細節(jié)更豐富

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

在畫完所有質(zhì)感后,加好小修飾和細節(jié)還能讓畫面更上一層。 放到整個徽章里的最后的呈現(xiàn)效果:

UI 保姆級教程!如何從零開始繪制奶瓶圖標?

總結(jié)

看完文章后別忘了去練一練,在做到微質(zhì)感后,如果想要更精細的刻畫玻璃的感覺,可以嘗試往質(zhì)感更強的「微寫實」去靠近。

收藏 76
點贊 75

復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。