文档介绍：Photoshop 设计精致的音频播放器界面在 PremiumPixels 上看到 N 多可供下载的网页设计 PSD 文件, 都非常精美。但它只提供了现成的文件, 并没有提供教程, 那么我们就通过源文件自己摸索,向 Orman Clar k 学****一下如何做出如此漂亮的作品。新建一个图层, 选择圆角矩形工具(U) , 在工具属性栏中填入宽度 360 像素、高度 30 像素,半径为 2 个像素,画一个圆角矩形。将图层命名为” base ”。双击图层面板中的形状图层图层缩略图, 将矩形的颜色更改为#3a3c3d 。在图层面板中双击此图层, 这样会打开图层样式窗口, 给图层应用如下图所示的图层样式。这里需要说明的是, 投影效果在网页设计中一般应用一点点就可以了, 就像这里作者所应用的那样, 距离和大小都只有 1 个像素而已, 透明度只有 50% , 而效果太夸张的话会显得不够精致。而添加图层混合模式为”叠加”(overlay) 的渐变叠加会让本来只是单一颜色的矩形有了颜色上的细微变化, 增加了设计上的趣味性。三、新建一个图层, 选择多边形工具(U) , 在工具属性栏, 边数中填入 3 ,画出一个大小合适的正三角形,放到合适的位置,双击图层缩略图将颜色更改为#d2d6db ,命名图层为” player ”。接下来,给图层应用如下图所示的图层样式。需要说明的是, 其中, 投影添加的是阴影效果,内阴影添加的是高光效果,而渐变叠加添加的是表面质感。这么一个小小的三角形, 就应用了三种图层样式, 并且都是非常微妙的效果, 可见作者处理细节的要求是很高的, 这也就是为什么这个播放器看上去如此精致的原因所在了。四、选择线条工具(U) ,在播放按钮右侧画一条 1 个像素宽的线条, 命名为” left ”, 应用渐变叠加(Gradient Overlay) , 颜色从#25272 7 到#3c3e40 。将此线条复制一遍(Ctrl+J) , 命名为” right ”, 向右侧移动 1 个像素,应用渐变叠加,颜色从#333535 到#515356 ,这样就做好一条有凹陷效果的分隔线。按住 Ctrl 键,在图层面板中同时选择这两个图层,按下 Ctrl+G ,将两图层放入一个文件夹中,命名为” sep ”。五、新建一个图层, 命名为” track ”, 选择矩形工具(U) , 画一个宽 222 像素,高 7 个像素的矩形框。颜色选择#262929 。按住 Ctrl 键, 在图层面板中同时选取” base ”和” track ”图层, 选择移动工具(V) ,在工具栏属性中,点击垂直居中按钮,将矩形垂直放置于播放器的中间。之后给” track ”图层应用如下图层样式,其中投影添加的实际上是高光效果,而内阴影添加的是凹陷效果。六、新建一个图层,命名为” buffer ”,选择矩形工具(U) ,画一个 200 像素宽,5 像素高的矩形, 颜色选择#464849 。任然选择移动工具, 将其和” track ”图层垂直居中。这样缓冲条的创建就完成了。七、接下来是播放进度条。先来创建一个自定义图案。在 Photosho p 中新建一个文档(Ctrl+N) , 宽度 6 个像素, 高度 6 个像素, 背景设置为透明。如下图所示: 将创建好的文档放大到 2000% ,新建一个图层,选择铅笔工具(B)