gackthang 发表于 2015-10-20 20:09:12

教你设计播放器界面图片

先看看最终效果：

http://pic.16xx8.com/allimg/151015/201314ES-32.jpg

这个界面粗看好像很复杂，其实步骤挺简单的，主要还是运用了图层样式来制作出整体效果，喜欢设计的可以跟着教程练习一下，还可以尝试一下其他的颜色，做完交作业。
当然，直接用色相之类的来修改颜色，我并不赞同，原因嘛，自己想！其实做完一个颜色后，直接在源文件里更改图层样式，换个色也花不了多长时间的。今天，我所提供的PSD里，我们做了四个颜色，绿色，蓝色，灰色，红色，有兴趣的朋友可以试试别的颜色。PSD的下载
http://pan.baidu.com/s/1c0hphde
PDF教程
http://pan.baidu.com/s/1bnfpr11
我这里的教程用的绿色来示范！作者：P大点S 出处：pdadians

gackthang 发表于 2015-10-20 20:09:12

首先，新建个文档，我用的是400X300像素。创建一个渐变调整层，做个径向渐变，颜色参数如下图。
http://pic.16xx8.com/allimg/151015/20131434X-0.jpg

gackthang 发表于 2015-10-20 20:09:12

用圆角矩形工具画一个320X125的圆角矩形，颜色无所谓，我们一会会更改。
http://pic.16xx8.com/allimg/151015/201314FR-1.jpg

gackthang 发表于 2015-10-20 20:09:12

为这个圆角矩形添加一个图层样式。
http://pic.16xx8.com/allimg/151015/20131461c-2.jpg

http://pic.16xx8.com/allimg/151015/20131440c-3.jpg

http://pic.16xx8.com/allimg/151015/2013144011-4.jpg

http://pic.16xx8.com/allimg/151015/20131450U-5.jpg

gackthang 发表于 2015-10-20 20:09:12

OK，接下来，我们复制一层圆角矩形这个图层，右键清除掉图层样式，按住SHIFT画一个矩形，SHIFT这里是增加的意思，保证我们新画的矩形和圆角矩形是一个形状图层。 然后，将形状的路径操作更改为与形状区域相交，这样我们就得到了我们想要的下半部分的形状了。将形状颜色设置为#68ce6b。
http://pic.16xx8.com/allimg/151015/2013141049-6.jpg

gackthang 发表于 2015-10-20 20:09:12

下面，我们为这个下半部分的形状添加一个图层样式。
http://pic.16xx8.com/allimg/151015/2013146423-7.jpg

gackthang 发表于 2015-10-20 20:09:12

接下来，我们用直线工具，画一条直线，放到我们刚才的那个下半部分图层的顶部位置，设置颜色为#119915，现在，我们得到如下效果。
http://pic.16xx8.com/allimg/151015/201314L63-8.jpg

gackthang 发表于 2015-10-20 20:09:12

下面，我们用矩形工具，画一个正方形，放置在左上角，充当专辑图片的图片框，并设置一个图层样式。
http://pic.16xx8.com/allimg/151015/2013143942-9.jpg

http://pic.16xx8.com/allimg/151015/2013142C4-10.jpg

gackthang 发表于 2015-10-20 20:09:12

加上我们的LOGO，没什么好说的，当然，你也可以直接用图片，创建个剪贴蒙版，因为刚才我们设置了描边和投影，直接剪贴蒙版的话，图层样式是会保留的。
http://pic.16xx8.com/allimg/151015/2013145Z7-11.jpg

gackthang 发表于 2015-10-20 20:09:12

接下来，我们开始做播放的进度条，首先用圆角矩形工具画一个长条的圆角矩形，设置颜色为#d0d0d0，并添加一个图层样式。
http://pic.16xx8.com/allimg/151015/201314L46-12.jpg

http://pic.16xx8.com/allimg/151015/2013144010-13.jpg

http://pic.16xx8.com/allimg/151015/2013143F1-14.jpg

gackthang 发表于 2015-10-20 20:09:12

用矩形工具，画一个矩形，设置颜色为#53ba56，并创建剪贴蒙版，赋予已播放的部分绿色显示。
http://pic.16xx8.com/allimg/151015/201314GP-15.jpg

gackthang 发表于 2015-10-20 20:09:12

设置前景色为#ebebeb，画一个正圆形，并添加一个图层样式。
http://pic.16xx8.com/allimg/151015/2013141136-16.jpg

http://pic.16xx8.com/allimg/151015/2013141544-17.jpg

http://pic.16xx8.com/allimg/151015/201314K47-18.jpg

gackthang 发表于 2015-10-20 20:09:12

接下来，我们画一个小一点的圆，颜色设置为# 53ba56，并添加一个图层样式。
http://pic.16xx8.com/allimg/151015/2013143626-19.jpg

http://pic.16xx8.com/allimg/151015/2013141562-20.jpg

gackthang 发表于 2015-10-20 20:09:12

接下来，添加时间进度和标题信息，这里文字用的颜色为#51c054，并添加了一个投影。
http://pic.16xx8.com/allimg/151015/2013143250-21.jpg

http://pic.16xx8.com/allimg/151015/2013141Q3-22.jpg

gackthang 发表于 2015-10-20 20:09:12

接下来，添加一个频谱，用矩形工具画就行了，也没什么可讲的，颜色为#119915，同样添加一个投影。
http://pic.16xx8.com/allimg/151015/20131450S-23.jpg

http://pic.16xx8.com/allimg/151015/20131453P-24.jpg
页: [1] 2
查看完整版本: 教你设计播放器界面图片