【 PS電腦繪圖 】Photoshop繪製立體風格的UI控件開關

Photoshop繪製立體風格的UI控件開關

這一次的教學是屬於PS教程領域中的鼠繪教程的相關教學。

文章出處是來自UI中國的PS教程類文章,寫教學的作者是yao66298,感謝yao66298提供鼠繪教程的實作教學。

教學大綱:

本教程主要使用Photoshop結合AI繪製立體質感的UI開關效果圖,前半部分主要在AI裡面把主要的形狀繪製出來,然後到PS裡面調整質感,喜歡的朋友一起來學習吧。


鼠繪教程教學開始

先看看效果圖

Photoshop繪製立體風格的UI控件開關

在AI建1200px*800px畫板

Photoshop繪製立體風格的UI控件開關

繪製一個400px*70px矩形

Photoshop繪製立體風格的UI控件開關

邊角設置35px ,好像只有cc版本可以直接設置圓角

Photoshop繪製立體風格的UI控件開關

偏移一個矩形出來,在向里偏移3px的矩形(向里設置負數)

Photoshop繪製立體風格的UI控件開關

最後繪製出這樣的圖形

Photoshop繪製立體風格的UI控件開關

然後釋放圖層導出psd格式(不釋放會都在一個圖層)

Photoshop繪製立體風格的UI控件開關

背景拉個漸變e7e3dc到f7f5f3

Photoshop繪製立體風格的UI控件開關

小圓拉個c2c0be到d6d6d6

Photoshop繪製立體風格的UI控件開關

按鈕做描邊漸變疊加投影的處理

Photoshop繪製立體風格的UI控件開關

Photoshop繪製立體風格的UI控件開關

描邊

Photoshop繪製立體風格的UI控件開關

漸變疊加

Photoshop繪製立體風格的UI控件開關

投影

裡面的樣式

Photoshop繪製立體風格的UI控件開關

Photoshop繪製立體風格的UI控件開關

漸變疊加f28b00,e75300,db7500

Photoshop繪製立體風格的UI控件開關

內發光

裡面的一圈a4a4a4到e8d7be

Photoshop繪製立體風格的UI控件開關

最外層的漸變d0d0d0到ffffff

Photoshop繪製立體風格的UI控件開關

方法都差不多 細節要處理好

最好完成圖

Photoshop繪製立體風格的UI控件開關

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: Photoshop繪製立體風格的UI控件開關