萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> Photoshop教程 >> ps鼠繪教程 >> PS手把手教你繪制一枚擬物化水晶紐扣

PS手把手教你繪制一枚擬物化水晶紐扣

   如何繪制逼真的高光?如何創造立體的感覺?今天分享一個簡單水晶紐扣的教程,僅僅利用圖層樣式跟畫筆就可以繪制出精美的高光+3D感,最適合UI設計剛入門的同學了,練習的時候要不斷去思考高光和陰影的關系,以及實物的狀態,這樣才能短期內快速進步呦!

  或許入門的PS學徒們都曾經試圖制作過諸如一滴水、一個氣球或一只蘋果這樣的擬物玩意兒的設計。通常讓人感到迷惑的是,為什麼我們要畫一個蘋果而不是用照片拍下一個蘋果再把它摳出來?我的答案是,學習是沒有捷徑可走的。比較快速的做法當然同樣可以達到效果,但它帶來的收獲遠沒有你用心畫一只蘋果來得更多。

  今天我們要制作的是水晶狀的紐扣,它是擬物感覺的,你要在學習的過程中不斷去思考高光和陰影的關系,以及實物的狀態,這是美術課的內容,但就在你熟練操作了PS的時候,也同樣需要這樣的基本知識去增強你的設計。

PS手把手教你繪制一枚擬物化水晶紐扣 三聯

  1、新建文件

  打開PS,新建一個文件(W:800px,H:600px),背景色填充為深灰色#242424,然後略微給背景填充上徑向漸變,讓中心看上去更“亮”。再在該背景層上增加一個圓形,這就是紐扣的”身體”了。圓形的色彩隨大家各自喜歡,我選用的是綠色。

2

  2、圖層樣式

  接下來,我們要對紐扣的“身體”運用圖層樣式。圖層樣式的使用,靠的是不斷的嘗試,而每一次的運用都要當做一次積累,才能更好的理解和掌握它。那麼,今天我們要用到哪些樣式呢?

  由於要讓紐扣變得立體,因此我們可以嘗試用一下內陰影。在此過程中,你的大腦中一定要出現一副作品完成後你想要達到的效果,在你不斷對其進行調試中你才有可能逐漸接近你的目標。

  不熟悉內陰影的同學,右戳學習,包你會!《PS技巧學起來!幫你快速的徹底搞懂內陰影功能》

  這是我的面板數值,以及在此數值下的圖層效果。

3
4

  我要使用內發光,讓它的邊緣具有水晶的光澤。

5
6

  運用光澤圖層樣式,讓它更具光澤感

7
8

  上圖看上去已經接近我想要的效果了,接下來為紐扣增加一點投影和描邊。

9
10
11

  3、增加高光細節

  為了讓紐扣看上去更具立體效果,運用了圖層樣式後顯然是不夠的。這時,我們還需要“手動”為他添加相應的陰影和高光的效果。在所有制圖過程中,當你想讓一個物體變得更具立體感、真實感,最好的方式莫過於為它添加高光和陰影了。

  新建一個圖層,然後使用橢圓選框工具,在紐扣的上方拉出一個橢圓形,然後再使用漸變工具,漸變設置如下:

12

  然後在選區內填充漸變色,漸變模式為線性漸變,從上至下填充。填充後效果如下:

13

  將橢圓轉到右上角,也就是我們選定其為高光部分的地方。

14

  這時,我想要在高光基礎上再增加一層高光。首先,將高光圖層復制一層,然後按住“ctrl”鍵,用鼠標點選紐扣的“身體”的圖層。目的是想調出圓形選區,為下一步做准備。

15

  保持圓形選區,在復制出的高光圖層上通過鍵盤上的左鍵和下鍵來控制選區,移動到如下圖所示的位置,然後點擊delete鍵。

16
17

  點擊delete鍵後,這就是我們期待中的“小月牙”,看上去它太過於“平坦”了,這時,可以為它增加一個圖層蒙版,選用黑白漸變在蒙版中合適的位置拉出一個徑向漸變。

18

  右上角的高光就做好了:

19

  再對小月牙復制一層,將復制層旋轉至對角的另一個方位。

20

  由於我們要做很多款圖案的水晶紐扣,只需要將紐扣身體的那個圖層的填充降至0。真的很簡單,是吧!

21

  在做設計時,常常都會用到透明度,但很少用填充。其實大部分情況下,填充和透明度的作用是差不多的。只有當出現這樣的情況:當你將圖層透明度設置為0,那麼這個圖層就完全透明,相反,如果你將圖層填充設置為0,這個圖層仍然可見。這一點對於我們做水晶紐扣大有益處,它幫助我們去掉了顏色,保持了所有其他我們為紐扣添加的細節。現在我們剩下要做的,僅僅就是把相應的圖案放置於紐扣身體圖層的下面。

22

  再載入圓形選區,刪除掉圖案中多余的像素。這樣第一個紐扣就此制作完成。

1

  接下來我繼續利用其它圖案做出了各式樣的水晶紐扣。

23

  後記

  設計時,擬物並不是十全十美就是上乘,總而言之,它需要你對日常生活的觀察力。對高光和陰影的把握相當重要,而每種情景下光線對人眼的影響都個各不相同。可以說,設計提供了無限種可能,而我們要做的就是從中選一個最恰當的。也許這不是一次博彩,而是一種歷練。

        :更多精彩教程請關注三聯photoshop教程欄目,三聯PS群:339853166歡迎你的加入

copyright © 萬盛學電腦網 all rights reserved