日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

如果你是設計師,那么創建界面元素是非常重要的技能。本次教程中,我們會創建一個簡單漂亮的切換開關按鈕。切換開關經按鈕常用于某項功能的啟用與關閉,他們經常出現在UI設計與網頁應用設計中,好了,來開始我們的教程吧。


先看看效果圖

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

下面是教程

第1步:

打開Photoshop,Ctrl+N新建一個文檔,尺寸選擇600×500px。

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

第2步:

按住Alt鍵雙擊背景圖層,將其轉換為普通圖層。再次雙擊,打開圖層樣式面板,為其添加由#f6fcff到#bbddff的徑向漸變。

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

第3步:

利用圓角矩形工具在畫布中央創建一個半徑為50px的圓角矩形。顏色設置為 #aec24e。

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

 

第4步:

雙擊圓角矩形圖層,為其添加圖層樣式。

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

第5步:

使用橢圓工具,按住Shift鍵在圓角矩形右側創建出一個正圓。

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

 

然后為其添加圖層樣式。

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

第6步:

在圓形按鈕下方新建一個圖層,用黑色柔邊畫筆繪制出陰影。

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

 

第7步:

在圓形按鈕上方再創建一個圓形。

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

為其添加圖層樣式。

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

第8步:

利用文字工具在滑動凹槽鍵輸入ON。字體選用Myriad Pro,圖層混合模式設置為亮光。

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

 

為文字添加投影。

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫

OK,一個非常簡單的切換開關按鈕就制作完成了。試著改變按鈕的顏色來創建更多的按鈕吧~

Photoshop繪制立體質感的網頁開關按鈕,PS教程,站長圖庫


分享到:
標簽:
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定