Photoshop制作立体质感的网页开关按钮(2)

UI / UI设计教程 / PS教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:小胡舵主

关键词

​【注意点3】:点击图层样式右边+号可以复制多层,此功能仅PS 15CC及以上版本可使用,安装包私信@小胡舵主。

【注意点4】:灵活使用斜面与浮雕中高光模式与阴影模式的颜色。使其与环境颜色更融合。

Photoshop制作立体质感的网页开关按钮

​3. 新建椭圆2,尺寸300 * 300PX。调节图层样式

图层样式 – 斜面和浮雕

内斜面

方法:平滑

深度:66%

方向:上

大小:1

软化:0

角度:110

高度:30

高光模式:滤色 #ffffff 不透明度:70

阴影模式:颜色加深 #171a1b 不透明度:16

图层样式 – 描边

大小:3

混合模式:线性加深

不透明度:20%

填充类型:颜色 色值:acbbbc

图层样式 – 内阴影

混合模式:正片叠底

色值:282b33

不透明度:10%

角度:120度

距离:0

阻塞:0

大小:27

图层样式:渐变叠加

混合模式:正常 不透明度:100%

渐变色值:#bacacb~#f6f8ef

样式:线性 角度:159

图层样式 – 投影

混合模式:正常

色值:#ffffff

不透明度:49%

角度:120

距离:2

Photoshop制作立体质感的网页开关按钮

​ 【注意点5】充分利用描边类型。描边类型分为颜色、渐变、图案。

Photoshop制作立体质感的网页开关按钮

​ 【注意点6】利用多层描边,制作不同效果。

Photoshop制作立体质感的网页开关按钮

4. 复制椭圆2,并将复制的图层改名为椭圆3,放到椭圆2图层下面,Ctrl+T进入自由变换,等比放大到134%。效果如下。

Photoshop制作立体质感的网页开关按钮

 收藏