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

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

2012/11/25 10150评论区

在这个教程中,你将会学到如何在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。然后复制这些按钮,放置在图片中相应位置。

 

步骤二十三:

现在添加文字。我使用宋体和以下混合选项:投影:不透明度-42%,角度90,距离-1,大小-1。渐变叠加:#4c5a69-#8495a7.

 

步骤二十四:

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

步骤二十五:

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

步骤二十六:

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

 

步骤二十七:

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

 

步骤二十八:

完成最后,添加一些投影效果。除了背景图层,将所有图层合并。复制,添加1,2px的高斯模糊,将其垂直翻转,使用圆形软橡皮擦工具擦除底部。

 

结论

到此为止——你已经完成了音频播放器界面的制作。你可以试着为Xion player制作一个真正的皮肤。但是很多人都想看到教程中将它设计成工作皮肤,我也如此。

本教程来源:http://www.tutorial9.net/tutorials/photoshop-tutorials/how-to-create-a-sleek-audio-player-interface-in-photoshop/#2

PS:由于教程所需资源服务器在国外服务器,导致下载很慢!教程盒子已经帮您下载上传到国内服务器。(本站深度与QQ旋风下载合作,所有下载均采用QQ旋风高速下载。)

教程所需素材及PSD源文件下载

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/%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

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 交互设计师 设计师 扁平化设计 排版布局 设计师专访 职场 视觉设计 设计流程 用户体验设计 素材下载 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 产品设计 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里