分享

Photoshop设计金属质感的播放器界面教程(2)

 头来了 2020-11-11

16、使用白色画笔#ffffff做出如下效果,并转换为剪切蒙版

Photoshop设计金属质感的播放器界面教程,PS教程

17、接下来做电源的标志,使用钢笔工具勾出如下的形状,填充#7c7c7a颜色,使用圆角矩形工具,半径为10,做出如下形状,为两个选区增加以下图层样式

内阴影:正片叠底,不透明度75,

外发光:滤色,不透明度75,颜色#fbf7c3,方法柔和

Photoshop设计金属质感的播放器界面教程,PS教程

18、关闭按钮组,创建另一个按钮,置于图层下方,命名为左上角键,使用圆角矩形工具,半径为2像素,形状如下,使用椭圆工具M进行选择,2-3像素,半径大于按钮,右击鼠标选择反选,为底部的按钮图层增加一个蒙版,基础到此已完成。

Photoshop设计金属质感的播放器界面教程,PS教程

19、为图层按钮形状增加一下图层样式

投影:正片叠底,颜色#474747

内阴影:正常,不透明度33

内发光:柔光,不透明度12,颜色#6dcff6

斜面与浮雕:内斜面,平滑,高光滤色,阴影正片叠底

渐变叠加:柔光

描边:外边缘,正常,颜色#474747

Photoshop设计金属质感的播放器界面教程,PS教程

20、使用椭圆工具做出图示形状,应用图层样式并转换成剪切蒙版层,这个斜角内的按钮就会显示

Photoshop设计金属质感的播放器界面教程,PS教程

  

21、添加文字,使用横排文字工具,大小设置为10像素,字体为Arial.文字如下图,应用以下图层样式

Photoshop设计金属质感的播放器界面教程,PS教程

22、重复前四个步骤,做出余下三个按钮

Photoshop设计金属质感的播放器界面教程,PS教程

23、现在开始做余下的四个小按钮,复制大的按钮组,将复制的组命名为小按钮组,将按钮复制的组拖入小按钮组中,将按钮的大小调整为33%,并且删除电源的标志,组中第一个图层的图层样式将外发光减少13%。

Photoshop设计金属质感的播放器界面教程,PS教程

24、接下来使用横排文字工具加入一些指示标志,用ARIAL 黑体,2.32号字体,左边是9DB,右边是40DB,添加一下图层样式

Photoshop设计金属质感的播放器界面教程,PS教程

25、复制小按钮组四次,将小矩形移到图示位置。使用钢笔工具绘制两个图示形状,颜色为#464646图层样式如下;使用横排文字工具,7.5像素,ARAIL字体,左侧为INPUT,右侧为OUTPUT,图层样式如下图:

Photoshop设计金属质感的播放器界面教程,PS教程

26、创建一个新组,命名为SWITCH,使用圆角矩形工具,半径为2像素,填充颜色为#383839,图层样式如下

Photoshop设计金属质感的播放器界面教程,PS教程

27、做完SWITCH的基础之后,开始添加阴影,使用钢笔勾出如下形状,填充颜色#000000,执行滤镜----模糊-----高斯模糊,半径2像素,为阴影图层增加蒙版,使用径向渐变做一个#000000黑色到透明的渐变,效果如下

Photoshop设计金属质感的播放器界面教程,PS教程

28、使用圆角矩形工具,半径2像素,做出以下形状,图层样式如下

Photoshop设计金属质感的播放器界面教程,PS教程

29、创建一个新图层,并转换成剪切蒙版,使用矩形工具做出一个白色的方框,如下图所示,现在开始做另一个方框,同样转换成剪切蒙版,并填充颜色#222222,图层样式如下,左边部分的方框同一方法处理。

Photoshop设计金属质感的播放器界面教程,PS教程

30、使用钢笔工具做出3个图示的形状,并填充#ffffff颜色,使用横排文字工具,字体Arial,大小为5像素,输入ON,STAND,OFF标志,添加一下图层样式,并复制图层三次以备后用。

Photoshop设计金属质感的播放器界面教程,PS教程

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多