tft每日頭條

 > 圖文

 > ui設計按鈕有幾種狀态

ui設計按鈕有幾種狀态

圖文 更新时间:2024-09-12 17:03:55

首先說明一下,軟件用的是photoshop CS6.這個圖标是之前在網站上看到的,就臨摹了一下,順便把教程寫了下來,個人感覺教程還是寫的比較詳細的,适合新手。而且本人也是第一次寫教程,如果哪裡有不合适的地方,還請大家多多包涵。這個

1.新建一個畫布,寬:400像素,高300像素,背景色随意填充,然後給該圖層加漸變效果,從下向上,顔色為#d9caca,#e6dcd4。

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)1

效果圖如下:

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)2

2.用橢圓工具畫一個圓,寬:176像素,高:176像素,填充顔色:#f9f8f6,居中對齊畫布,可以給該圖層取名為:橢圓1。效果圖如下:

3.給圖層(橢圓1)添加圖層樣式FX,分别是描邊、内陰影、漸變疊加。

圖層樣式數值如下:

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)3

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)4

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)5

添加圖層樣式完成後,效果圖如下:

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)6

4.複制圖層(橢圓1),我們可以取名叫橢圓2,放在圖層(橢圓1)下面,填充顔色:#b4a595,下移4像素。效果圖如下:

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)7

5.用橢圓工具再畫一個圓,寬:78像素,高:78像素,填充顔色:#f8f6f3,居中對齊畫布,我們可以取名為:内橢圓。效果圖如下:

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)8

6.給圖層(内橢圓)添加圖層樣式,分别是描邊、内陰影、漸變疊加。

圖層樣式數值如下:

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)9

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)10

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)11

添加圖層樣式完成後,效果圖如下:

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)12

7.找一個關機圖标,可以在網上找一個,也可以自己畫一個矢量的,本教程會附帶一個。圖标填充顔色:#ff6969。效果圖如下:

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)13

8.給關機圖标添加圖層樣式,分别是内陰影、投影。

圖層樣式數值如下:

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)14

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)15

樣式添加後的效果圖如下:

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)16

9.最後再複制圖層(橢圓2),命名為:陰影,放在圖層(橢圓2)下面,填充顔色:#726c65,羽化一下。給圖層添加圖層樣式fx,投影。

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)17

作品完成後,效果如下:

ui設計按鈕有幾種狀态(UI設計關機按鈕詳細教程)18

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved