本文主要介绍图层选项的灵活运用,制作玻璃特效、金属按钮、如何进行细节调整。
需要一定的ps基础知识
写在前面:
在做设计的过程中,有相当一部分人为了追求效率,下载别人的psd后,东拼西凑成自己的设计,这种方法是不利于提高ps技术水平的。ps里有很多需要挖掘的地方,会ps的人很多,精通ps的人不多。发文章主要是与大家一起分享和交流,不喜勿喷。

第一步:
新建一个文件,设置800*600px,然后插入“木色地板素材”。


第二步:
2.1打开“木色地板素材”对图层选项进行如下设置:


第3步:
这一步开始制作玻璃效果
创建圆角矩形,角度为5px

第四步:
4.1调整圆角矩形的图层样式,如图

4.2调整内阴影

4.3调整渐变叠加。渐变编辑器里上方划块调整是透明度,下方滑块调整的是颜色


第五步:
这一步是增加玻璃框效果和立体感。
5.1使用圆角矩形工具,创建上面矩形一样大小的矩形,填充色为无,描边为白色,宽度2px。命名为玻璃边框
5.2打开玻璃边框图层的图层选项




第六步:
这一步是细节处理,添加杂色。
6.1创建矩形选区,添加一个新的图层,在它上面设置黑色,并滤镜-杂色-添加杂色。

6.2更改图层的透明度为5%,并设置混合选项微柔光。

6.3突出内容区域。用矩形选择工具,选择矩形区域

6.4填充背景色微黑色,滤镜-模糊-高斯模糊,数值2px,然后调整透明度微20%。

第七步:
这一步开始设计4个金属按钮
7.1用圆形矩形工具,创建4个圆。

7.2设置其中一个按钮的图层样式




tip:设置完一个按钮后,我们可以先选中要复制这个按钮样式的图层,然后点击新建样式。然后这个样式可以应用到任何形状。


第八步:
8.1用钢笔工具创建一个选区。

8.2填充白色,然后调整图层样式,如图:


这一步效果图
第九步:
9.1还是用伟大的钢笔工具创建一个选区,用来调高光

9.2填充白色,滤镜-模糊-高斯模糊,2px。并设置它的外发光。然后新建图层蒙版,使用渐变工具调显示的范围。


最后:
玻璃效果基本上大功告成了!我们加上个图片。

ps:这种制作毛玻璃的效果可以用于ui设计等其他设计中。
网友评论