如何在PS中设计一个时髦的播放器界面

在这个教程中，你将会学到如何在adobe Photoshop中设计一个时髦的音频播放器界面。
步骤一：
创建600×400像素大的新文档。
步骤二：
利用径向渐变工具，从#5e6c78#20282e，填充背景。

步骤三：
复制背景图层，执行滤镜/杂色/添加杂色。使用这些设置：数量（5）；均匀；单色。单击确定。现在图层不透明度降低至30。现在您的界面应该像这样。

步骤四：
好了，现在我们开始做音频播放器。用快捷键创建图层，把它命名为"Base"。使用圆角矩形工具、半径5px，绘制一个像嵌在图片里的矩形，并使用这些混合选项。渐变中的颜色是：#3d4a59；#1c2329；#303a44。描边颜色：#191919。

步骤五：
现在创建一个新文档，600x600px。执行文件-填充-50%灰度。然后执行滤镜——噪声——添加杂色：80；高斯；单色。再执行滤镜-模糊-径向模糊：100；旋转；最佳。按Ctrl键重复。现在您的界面应该像这样。

步骤六：
将之前做好的图像复制到音频播放器文档，放在"base"之上。改变混合模式为柔光，不透明度为80%。我们把这个图层称为"纹理"。按住Ctrl键点击"base"图层缩略图进行缩放，生成selesction。然后Ctrl+Shift+I键反选，删除。

步骤七：
创建新图层，命名为"高光"。使用铅笔工具绘制两条直线，其中一条在base顶部，一条在base用一个大的柔软笔刷擦除直线边缘，降低不透明度至80%。要使这些图层组织结构分明，选择之前做好的三个图层：base,纹理和高光，然后按 Ctrl+G组合这些图层。把组合图层命名为“base”。

步骤八：
现在让我们制作扬声器的两边。创建新图层，命名为"扬声器"。按住Ctrl键点击"base"图层缩略图进行缩放。然后利用矩形选框工具，按住Shift+Alt键创建图片中的选区。选择#3a3a3a进行填充。复制图层，命名为"纹理"。选择混合选项，添加这些设置：以 "蜘蛛人模式" 进行叠加，混合模式：重叠，范围12%。

步骤九：
创建新图层，命名为"高光"。再次利用铅笔工具绘制一个1px的高光，像下图中一样。然后创建一个新图层，命名为“阴影”。利用椭圆工具绘制一个选区，用黑色进行填充，执行滤镜/模糊/高斯模糊，半径5。擦除不需要的部分，可以得到图片中的效果，降低不透明度至50%。

步骤十：
组合之前创建的四个图层——播放器，纹理，高光和阴影，然后命名为“组合播放器—左”。复制组合图层，将它进行水平翻转，然后放在右边，命名为“组合播放器—右”。

步骤十一：
让我们来制作关闭、最小化、最大化按钮。创建新图层，命名为“按钮”。利用圆角工具，半径2px，绘制一个小按钮，用白色进行填充。然后添加以下混合选项，渐变颜色#8799#485664-#8799。描边颜色#384251。

步骤十二：

创建新图层，命名为“X”。你可以使用你喜欢的字体或者像我一样用铅笔工具绘制。我使用的渐变叠加（深灰-浅灰）和1px绘制阴影来达到这个效果。

步骤十三：
组合之前创建的两个图层，命名为“X”。然后通过复制和改变“X”组合图层创建另外2个按钮。我再次利用铅笔工具来绘制符号。

步骤十四：

现在让我们来制作屏幕，创建新图层，命名为“屏幕base”。绘制一个矩形，就像图片中一样，然后从 #303a44 到 #4a5968进行渐变填充。

步骤十五：

创建一个新图层，命名为“光泽”。绘制一个小的矩形，用白色进行填充，形成透明渐变。降低不透明度至10%。

步骤十六：

再次使用1px白色铅笔工具绘制周围的一些重点。多试几次，这样可以得到你要的效果。

步骤十七：

让我们在屏幕上填充一些内容。创新一个新组合，命名为“内容”。我将试着使这部分比较简短，也易于理解。对于每个内容都要创建一个图层。首先，使用柔软圆笔刷添加突出计时器的位置。然后，利用数字的字体样式输入“03:59”或其它任何数字（我使用Digital-7字体，你可以在DaFont获得这种样式）。使用宋体，重复输入和Shuffle。Shuffle模式开着，比重复获得的光效果亮一些。然后，我利用之前描述过的技巧添加一些小的细节 ——1px铅笔工具直线和一些圆形柔软笔刷获得光效果。

步骤十八：

创建一个新图层，命名为“快进条”。利用圆角矩形工具，半径5px，绘制一个细长的矩形。使用黑色进行填充，添加以下混合选项：渐变叠加#303a44#1c2329和1px，描边颜色#afbbc6、不透明度16%。

步骤十九：

现在还有很多按钮需要制作。因此再创建一个组合，命名为“按钮”。首先，为播放、停止和其它按钮创建一个base。创建新图层，命名为“按钮 base：，为了我利用5px的圆角矩形工具获得图形效果，然后用铅笔工具绘制边框。如果你愿意，你可以简单地绘制一个圆角矩形。然后添加以下混合选项：投影-90度（取消“选中全局光”），距离-1，大小-0。内阴影：混合模式-正常，颜色-白，角度-90（再次不适用“全局光”），距离-1，大小 -0。渐变叠加：#4d5c6a-#1c2329-#303a43.

步骤二十：

现在，使用铅笔工具1px和擦除直线的末端来添加一些细节。看看图片思考一下。记住：你必须使用不透明度来获得更好的效果。

步骤二十一：

为了制作播放、暂停、停止、向前和向后按钮，我简单地绘制了矩形和三角形，并合并成向前和向后按钮。添加渐变叠加生成控制按钮图层：#b7d9ed-#458fb2-#b7d9ed.

步骤二十二：

现在，让我们制作最后4个按钮——重复、无序播放、播放列表和均衡器。她们都是一样的设置，使用小的圆角矩形和以下混合选项：投影：不透明度 26%，扩展100%，大小1.。内阴影：混合模式-正常，颜色-白，不透明度-40%，角度-90，距离-1，choke-100%。渐变叠加：#3d4a59-#1c2329-#303a44。然后复制这些按钮，放置在图片中相应位置。