![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/1a12ffb578f55c8028ff131bb81e88d6-0.jpg)
1、创建一个 600×400 px的图层。
2、使用放射式渐变填充背景,颜色设置为#5e6c78 - #20282e。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/1a12ffb578f55c8028ff131bb81e88d6-1.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/7e70b068cf69033edb231049ffdf0ced-2.jpg)
4、作主界面,创建一个新图层,(按Ctrl + Shift + N)并命名为“Base”,再使用圆角矩形工具,设置半径5px,画出画面中一样的矩形,并使用这些混合选项。设置参数按照图片所示。颜色渐变参数为:#3d4a59;#1c2329;#303a44 ,描边颜色为#191919。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/7e70b068cf69033edb231049ffdf0ced-3.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/0d5ff49e1b5ee6a35b92e51732d162d8-4.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/0d5ff49e1b5ee6a35b92e51732d162d8-5.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/8c9f10c2d46a911372246c4af3382973-6.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/8c9f10c2d46a911372246c4af3382973-7.jpg)
6、复制到之前创建的“base”图层上。更改混合模式为柔光,不透明度为80%。图层命名为 “Texture”.按Ctrl 点击“base”图层,调用选区,然后按Ctrl + Shift +I, 选择Texture图层点击删除不要的选区。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/8c9f10c2d46a911372246c4af3382973-8.jpg)
7、创建新图层。将它命名为”Higlights”,再用铅笔工具画两条线,分别放置在base图层的视频界面顶端和底部。再选择一个大一点,参数设置为80%不透明度的橡皮擦擦除两侧的线条。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/c59ce4de628c63ec2b263cb378691ec4-9.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/c59ce4de628c63ec2b263cb378691ec4-10.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/474e08a486a264196ce87c5049b9588b-11.jpg)
9、创建一个新层,命名为“突出”,再次使用铅笔工具绘制1px高光边缘,然后创建一个新图层,命名为“影子”。使用椭圆工具,取出不需要的区域,羽化,高斯模糊,降低透明度50%既可以,大家可以适当的根据感觉调整。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/474e08a486a264196ce87c5049b9588b-12.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/650ee71cbe8bfae692d534cedf8d9abf-13.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/650ee71cbe8bfae692d534cedf8d9abf-14.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/a994e3ec796ff1da3764e5718363d945-15.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/a994e3ec796ff1da3764e5718363d945-16.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/aebaad24e0f27e4030d952292a551291-17.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/aebaad24e0f27e4030d952292a551291-18.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/e38911849c223490c5c3f387399a12ec-19.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/e38911849c223490c5c3f387399a12ec-20.jpg)
13、同样的方法创建另外两个按钮。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/e38911849c223490c5c3f387399a12ec-21.jpg)
14、创建新层,画一个像图片中的矩形,填充渐变颜色为#303a44—— #4a5968。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/6c84aa15aac12f4cd52c3ee69baba478-22.jpg)
15、创建一个新层。将它命名为“光泽”。再绘制一个小矩形,填充白色透明度降低到10%。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/6c84aa15aac12f4cd52c3ee69baba478-23.jpg)
16、按照之前的方法绘制高光,透明度大家根据自己的感觉设置即可以。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/7de913800cbb2df80edb7f3e5ad1d50e-24.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/7de913800cbb2df80edb7f3e5ad1d50e-25.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/7de913800cbb2df80edb7f3e5ad1d50e-26.jpg)
18、创建一个新层。将它命名为“进度条”。再使用圆角矩形工具,半径设置为5px,绘制一个细长的矩形,黑色填充并添加图层样式:渐变叠加颜色设置为#303a44-#1c2329;添加描边1px,颜色为#afbbc6,不透明度为16%。再创建一个新图层,命名为“进度条旋钮”。画出一个小矩形,并填充黑色。图层样式选项为:内阴影:混合模式正常,颜色-白色,距离0,大小1,渐变叠加:#5c6977 -#212a30 -#5c6977; 外描边:1px,颜色#222b31。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/01d0bd6016330748e01dea0376bea2a7-27.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/01d0bd6016330748e01dea0376bea2a7-28.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/378c12c642bf071a15e6d785bef5d0e3-29.jpg)
21、制作播放、暂停、停止、前进和后退按钮。用矩形和三角形工具简单的画出,在这个图层添加渐变叠加效果,颜色分别为#b7d9ed-#458fb2-#b7d9ed。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/55e67ed0520fc7295de07411cc0e8e36-30.jpg)
22、现在做最后四个按钮:重复、随机、播放单和均衡器。制作每一个按钮的步骤都差不多,用圆角工具画出大致形状,添加图层样式:投影-透明度26%,扩展100%,大小1;内阴影-模式选正常,颜色白色,透明度40%,角度90,距离1,阻塞100%,大小0;渐变叠加-#3d4a59-#1c2329-#303a44。复制按钮并如图放置。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/55e67ed0520fc7295de07411cc0e8e36-31.jpg)
23、现在添加文字。选择Arial字体,再进行图层样式处理:投影-透明度42%,角度90,距离1,大小0.渐变叠加- #4c5a69-#8495a7。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/efcb93a73ec7bf16aa50c21fb5369f6c-32.jpg)
24、再用铅笔工具进行一些细节处理,主要是高光处理。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/efcb93a73ec7bf16aa50c21fb5369f6c-33.jpg)
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/be6f9f6601a1e461a3f9430f9ead279e-34.jpg)
26、用半径5px的圆角矩形工具画音量条,用渐变工具填充颜色,设置与进度条一致。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/be6f9f6601a1e461a3f9430f9ead279e-35.jpg)
27、画10个小圆圈。激活的小圆用与喇叭一样的渐变填充,其他的填充简单的黑灰渐变。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/dbc706cba50dd5f544877a253df83db1-36.jpg)
28、现在音频播放器的制作基本完成。合并所有图层(除了背景层),复制这个合并层进行2px高斯模糊,选择垂直翻转,再用橡皮擦轻轻擦去底部(注意画笔,不透明度和流量的使用)。这样一步一步地,漂亮的音频播放器在你的手中诞生了。
![Photoshop 超酷的金属质感播放器](http://m.sbmmt.com/img/upload/article/000/000/009/1a12ffb578f55c8028ff131bb81e88d6-0.jpg)