首页 > 网站优化 > photoshop

photoshop设计音乐播放器界面图片制作教程

发布时间:2016-9-14 23:49

今天小编在这里就来给photoshop的这一款软件的使用者们来说下设计音乐播放器界面图片的制作教程,各位想知道具体制作方法的使用者们,那么下面就快来跟着小编一起看下教程吧。
给各位photoshop软件的使用者们来详细的解析分享一下设计音乐播放器界面图片的制作教程。
教程分享:
首先,新建个文档,我用的是400X300像素。创建一个渐变调整层,做个径向渐变,颜色参数如下图。

 

界面设计,设计音乐播放器界面图片_
用圆角矩形工具画一个320X125的圆角矩形,颜色无所谓,我们一会会更改。

 

界面设计,设计音乐播放器界面图片_
为这个圆角矩形添加一个图层样式。

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_
OK,接下来,我们复制一层圆角矩形这个图层,右键清除掉图层样式,按住SHIFT画一个矩形,SHIFT这里是增加的意思,保证我们新画的矩形和圆角矩形是一个形状图层。 然后,将形状的路径操作更改为与形状区域相交,这样我们就得到了我们想要的下半部分的形状了。将形状颜色设置为#68ce6b。

 

界面设计,设计音乐播放器界面图片_
下面,我们为这个下半部分的形状添加一个图层样式。

 

界面设计,设计音乐播放器界面图片_
接下来,我们用直线工具,画一条直线,放到我们刚才的那个下半部分图层的顶部位置,设置颜色为#119915,现在,我们得到如下效果。

 

界面设计,设计音乐播放器界面图片_
下面,我们用矩形工具,画一个正方形,放置在左上角,充当专辑图片的图片框,并设置一个图层样式。

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_
加上我们的LOGO,没什么好说的,当然,你也可以直接用图片,创建个剪贴蒙版,因为刚才我们设置了描边和投影,直接剪贴蒙版的话,图层样式是会保留的。

 

界面设计,设计音乐播放器界面图片_
接下来,我们开始做播放的进度条,首先用圆角矩形工具画一个长条的圆角矩形,设置颜色为#d0d0d0,并添加一个图层样式。

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_
用矩形工具,画一个矩形,设置颜色为#53ba56,并创建剪贴蒙版,赋予已播放的部分绿色显示。

 

界面设计,设计音乐播放器界面图片_
设置前景色为#ebebeb,画一个正圆形,并添加一个图层样式。

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_
接下来,我们画一个小一点的圆,颜色设置为# 53ba56,并添加一个图层样式。

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_
接下来,添加时间进度和标题信息,这里文字用的颜色为#51c054,并添加了一个投影。

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_
接下来,添加一个频谱,用矩形工具画就行了,也没什么可讲的,颜色为#119915,同样添加一个投影。

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_
用矩形工具画一个#68ce6b颜色的正方形,并添加一个渐变叠加。

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_
复制一层这个方形按纽图层,放置到按纽的下层,我们来做阴影,更改颜色为#2b872e,在属性栏里设置羽化4像素,并添加一个蒙版,把顶部和底部的位置擦一下。

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_
接下来,我们来添加播放,上一曲,一下曲的图标,这个也是超级简单。
将图标的颜色设置为#119915,并添加一个图层样式。

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_

 

界面设计,设计音乐播放器界面图片_
搞定,如果想换颜色,就很快了,我们的PSD里提供了四个颜色,期待看看大家不同的颜色。

 

界面设计,设计音乐播放器界面图片_
好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的设计音乐播放器界面图片的制作教程解析分享的全部内容了,各位看到这里的使用者们现在是很清楚制作方法了吧,那么各位就快去按照教程的自己去制作吧。
标签:[!--infotagslink--]

您可能感兴趣的文章: