Photoshop设计精致的音频播放器界面(2)

五、新建一个图层，命名为”track”，选择矩形工具(U)，画一个宽222像素，高7个像素的矩形框。颜色选择#262929。按住Ctrl键，在图层面板中同时选取”base”和”track”图层，选择移动工具(V)，在工具栏属性中，点击垂直居中按钮，将矩形垂直放置于播放器的中间。如下图：

之后给”track”图层应用如下图层样式，其中投影添加的实际上是高光效果，而内阴影添加的是凹陷效果。

最终效果如下图：

六、新建一个图层，命名为”buffer”，选择矩形工具(U)，画一个200像素宽，5像素高的矩形，颜色选择#464849。任然选择移动工具，将其和”track”图层垂直居中。这样缓冲条的创建就完成了。效果如下图：

七、接下来是播放进度条。先来创建一个自定义图案。在Photoshop中新建一个文档(Ctrl+N)，宽度6个像素，高度6个像素，背景设置为透明。如下图所示：

将创建好的文档放大到2000%，新建一个图层，选择铅笔工具(B)，1个像素大小，画出如下图形，然后选择编辑(Edit)>自定义图案(Define Pattern)命令，命名为”progress pattern”，保存。

创建好自定义图案之后，将第六步中的”buffer”图层复制一遍，放置于”buffer”图层的上方，命名为”progress”，颜色更改为#feea36。在图层面板中单击选择”progress”图层的矢量蒙版缩略图，然后使用直接选择工具(A)，将矩形的宽度调整的短一些，目的是让下方的缓冲图层效果显示出来，之后给”progress”图层应用如下图层样式，这时候在图案叠加中选择我们刚才创建好的自定义图案就可以了。

最终效果如下图：

八、最后，我们来创建音量图标。首先我们新建一个图层，命名为”sound”，将文档放大至1000%，选择矩形工具(U)，画出一个和进度条高度差不多的矩形，这就是音量图标的喇叭身子部分。在图层面板中选择”sound”图层的矢量蒙版缩略图，然后选择钢笔工具(P)，画出音量图标的喇叭口部分。这里可能一次画不好，所以需要耐心使用直接选取工具(A)配合方向键，逐次移动锚点的位置，将音量图标的形状调整到满意为止。完成之后，将颜色调整为#d2d6db，将”player”的图层样式拷贝粘贴到”sound”图层就可以了。至于音量大小读条和另外的分隔线，使用和上面步骤中一样的方法来创建。最后完成的效果如下图：

进入论坛交作业：http://www.missyuan.com/thread-688691-1-1.html