photoshop制作逼真旋钮（翻译教程)

UI / UI设计教程 /      

uimaker
UI设计师 / 江苏 南京

来源:uimaker.com   作者:naruco

关键词

 好久没折腾PS了，今天看了psd+上的《Create a Clean iPad Interface in Photoshop 》这篇文章，一时手痒，就截了一段，学习学习。先看看最终的效果：

PS教程1

 

1、新建文档



 

2、填充任意色，执行图中滤镜

 

 

图2
 
 

3、用（U）画个圆，并建几条参考线，填充黑色，调整填充至8%，再用钢笔工具，勾出图中选区形状；

 

 

 

4、应用图层样式

 

图层样式1

图层样式2

图层样式3

 

5、再建一圆

 
6、应用图层样式
 
 
图1

图2

图3
 
 

7、新增一圆，填充#CFCFCF,调节至适当位置

 

 
 
8、添加如下图层样式
 
 
PS1

PS2

PS3
 
 

9、新增一圆，调节至适当大小，填充#414141

 

 
10、应用图层样式
 
 
应用图层样式1

应用图层样式2

应用图层样式3
 
 
11、用钢笔工具画出如下图色块，填充#6DCFF6后，图层上右键选“剪贴蒙版”
 
 
PS教程1

PS教程2
 
 
 

12、新增一圆，填充白色

 

 
13、应用如下图层样式
 
 
图层样式01

图层样式02

图层样式03

图层样式04

图层样式05
 
 
14、选用笔刷工具，调节至适当大小，调整硬度至0%，描出如图效果后，新建剪贴蒙版
 
 
 
15、新建一层，填充任意色，执行滤镜-杂色-添加杂色，然后执行滤镜-模糊-径向模糊，具体参数如图

最后新建剪贴蒙版，并调节图层形式为“强光”，不透明调至41%
 
 
PS教程

PS教程2
 
16、新建一圆，调节填充为0%，添加1像素黑色内描边，通过重复复制和改变大小，做出如下图效果。

最后群组，并调节不透明度至15%
 
 
PS01

PS02

PS03

PS04
 
17、依图示画出箭头，并应用图层样式
 
PS教程01

PS教程02

PS教程03

PS教程04

PS教程05
 
 
18、螺丝钉的制作，先画出适当大小的图，填充黑色，并应用如下图图层样式
 
 
螺丝钉样式01

螺丝钉样式02

螺丝钉样式03
 
19、新增一圆，填充#494949，并按下图所示应用图层样式
 
PS设计教程01

PS设计教程02

PS设计教程03

PS设计教程04
 
20、文字工具输入“+”，调节适当大小和适当字休，旋转45度后应用如下图所示图层样式
 
 
PS教程01

PS教程02

PS教程03

PS教程04
 
 
 
最后复制产生另一螺丝钉，大功造成！

这是第一次在站酷发布PS学习帖，多有不足，还望多多指教！
 
本文由 站酷网 - naruco 翻译，转载请保留此信息，多谢合作。
 

 

 收藏