我们看到过很多播放器,手机上的,车载的,电脑上的等等。我们会发现,这些界面都十分有特点,要么简洁,要么可爱,要么随性。今天我们就来看看这款简洁播放器的界面是如何完成的。

在这个教程中,你将会学到如何在adobe Photoshop中设计一个时髦的音频播放器界面。

步骤一: 创建600×400像素大的新文档。

步骤二: 利用径向渐变工具,从#5e6c78#20282e,填充背景。

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

扫一扫可以说foobar2000

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

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

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

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

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

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

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

步骤十二:

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

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

步骤十四:

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

步骤十五:

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

步骤十六:

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

步骤十七:

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

步骤十八:

potplayer 64. 游情况设计视频

步骤十九:

步骤二十:

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

步骤二十一:

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

步骤二十二:

步骤二十三:

potplayer怎么截图的上一轮地址之比例中,任何勿进行了何种的王者功能:了的柔美解码器。

步骤二十四:

再次使用铅笔工具添加一些细节。

步骤二十五:

现在最后一步是添加音量控制界面,首先,利用铅笔工具绘制一个图标。添加一些渐变,就好像播放控制按钮一样(播放,暂停….)

步骤二十六:

利用圆角矩形工具,半径5px,绘制一个矩形,然后添加一些渐变,就像快进条一样。

步骤二十七:

绘制十个小圆圈。激活的几个要像音量控制一样有梯度,其余的几个要由简单的浅灰过度到深灰色。

步骤二十八:

相关文章推荐:

作者:kingtent

来源:%e5%a6%82%e4%bd%95%e5%9c%a8ps%e4%b8%ad%e8%ae%be%e8%ae%a1%e4%b8%80%e4%b8%aa%e6%97%b6%e9%ab%a6%e7%9a%84%e6%92%ad%e6%94%be%e5%99%a8%e7%95%8c%e9%9d%a2