新年将至，翻译一篇关于UI界面设计的教程，很详细的说，希望大家喜欢~
这篇教程中详细的介绍了ui设计中常用的图层样式的设置以及高光效果制作的技巧，非常值得一看。下面让我们一起来学习吧：）
Step 1
新建一个大小为600×400的画布。
Step 2
背景填充渐变，颜色为#5e6c78，#20282e。
Step 3
复制背景层，为复制到背景层添加杂色滤镜，数量为5%，单色，平均分布，单击确定。设置该图层不透明度为30%，效果如图。
Step 4
现在，开始画播放器里。新建图层，命名为Base，用圆角矩形工具，圆角为5px，如图画一个圆角矩形，并如图设置混合模式及添加图层样式，渐变叠加颜色值为分别#3d4a59，#1c2329， #303a44。描边颜色为 #191919。
Step 5
新建一个600×600的画布，填充50%的灰色，执行滤镜添加噪点，数量为80%，高斯，单色。执行滤镜-径向模糊，数量100，旋转，最好，点击确定，按下Ctrl+F再次应用滤镜，得出如图效果。
Step 6
拷贝刚才制作出的“漩涡状”图像，粘贴到刚才播放器图像中的Base图层上方，并放置到合适的位置，设置混合模式为柔光，降低不透明度为80%，为该层命名为Texture，按住Ctrl键单击Base层，载入Base层的选区，反选，按Del键，删除Texture层的多余部分。
Step 7
新建图层，命名为Higlights，用铅笔工具画两条白色直线，一条在播放器上边缘，一条在下边缘。切换至橡皮擦工具，选择一个大半径的柔软画笔，降低不透明度为80%，白色擦除线段两端。为了方便查找，选择刚才建立的三个图层：Base，Texture，Highlights，按下Ctrl+G将其群组，将图层组命名为Base。
Step 8
接下来制作两端的扬声器。 新建图层，命名为speaker，按下Ctrl键单击Base图层载入选区，选择矩形选框工具，按住Shift+Alt，从选区中减去右侧部分，得到如图所示，填充颜色#3a3a3a，复制该图层，命名为texture，为其添加Spiderman pattern图案叠加（点击下载Spiderman pattern），混合模式为叠加，缩放为12%。将speaker和texture图层一起向右轻移一个像素，得到如图效果。
Step 9
新建图层，命名为Highlight，同上，在speaker右侧边缘用铅笔工具画一条1px的白线，擦除两端，得到高光效果。再新建图层，命名为Shadow，使用椭圆工具，在如图所示位置拖曳一个椭圆选区，填充黑色，执行滤镜高斯模糊，半径5，删除不需要的部分得到如图效果，降低透明度为50%。将其置于Highlight下层。
Step 10
群组前面的4个图层Speaker，Texture，Highlight，Shadow，命名为Speaker_left，复制该图层组，水平反转并放置到右侧，重命名为Speaker_Right。
Step 11
然后绘制“关闭”“最大化”“最小化”按钮。新建图层，命名为Button，使用圆角矩形工具，圆角为2px，绘制一个小按钮填充白色。如图添加图层样式，渐变色设置分别为：#8799ab，#485664，#8799ab。描边颜色为#384251。
Step 12
新建图层，命名为X，如图所示，用铅笔工具绘制一个黑色的X，为其添加渐变叠加样式，深灰-浅灰，1px阴影。
Step 13
群组上两个图层，命名为X，复制该图层组2遍，修改其中的X图层，创建最小化和最大化按钮。
Step 14
下面创建显示屏。新建图层，命名为Screen Base，绘制一个矩形，填充渐变颜色为#303a44， #4a5968。
Step 15
新建图层，命名为Gloss，绘制一个小一点点矩形，填充白色到透明渐变，降低不透明度为10%。
Step 16
再次运用前面提到过的方法绘制1px的高光，具体高光程度只要你喜欢就好。
Step 17
现在为显示屏内部增加一些内容。创建一个新图层组，命名为Content。这一段我尽量讲的简洁易懂。为每一个元素建立一个新的图层。 首先使用大小为80左右的柔边画笔绘制一个圆作为高光，接着使用一种数码数字Digital-7（看上去像显示器字体就ok）键入时间，再选择适当的字体键入其他唱片信息以及Repeat和Shuffle等字样，Shuffle功能是打开的，所以设置其颜色稍亮，最后绘制一些细节，如前面所讲，1px的直线，外加一些柔边画笔做到高光。
Step 18
新建图层，命名为Progress bar，使用圆角矩形工具，设置圆角为5px，绘制一个瘦长形的矩形，填充黑色，设置图层样式如下：渐变叠加，颜色为#303a44，#1c2329，1px描边颜色#afbbc6，不透明度为16%。新建图层，命名为Progress knob，绘制一个小矩形，填充黑色，添加图层样式：内阴影-混合模式为正常，白色，距离0，大小为1；渐变叠加-颜色#5c6977，#212a30，#5c6977；描边1px，颜色#222b31。
Step 19
接下来，绘制各种按钮。新建图层组，命名为Buttons。首先，绘制按钮的底层。新建图层，命名为Button Base，用圆角矩形或钢笔工具绘制如图形状。添加图层样式：阴影-角度90，不使用全局光，距离1，大小0；内阴影-混合模式为正常，白色，角度90，不使用全局光，距离1，大小0，渐变叠加#4d5c6a，#1c2329，#303a43。
Step 20
增加一些高光、分隔线等细节，可以自由发挥。
Step 21
绘制一些三角，直线，矩形等形状，组合成Play，Pause，Stop，Forward，Backward按钮，添加图层样式，渐变叠加#b7d9ed，#458fb2，#b7d9ed。
Step 22
最后4个按钮Repeat，Shuffle，Playlist ，Equalizer。绘制4个圆角矩形，图层样式如下：阴影-不透明度26%，扩散100%，大小1；内阴影： 正常，白色，不透明度40%，角度90，距离1，阻塞100%，大小0；渐变叠加：#3d4a59，#1c2329，#303a44。将4个按钮摆放在合适的。
Step 23
选择适当的字体添加文字，设置图层样式，阴影-不透明度42%，角度90，距离1，大小，渐变叠加#4c5a69，#8495a7。
Step 24
为按钮添加一些高光细节。
Step 25
最后，为播放器添加声音控制按钮，如图用铅笔工具绘制一个声音图标，添加之前绘制的播放控制按钮的图层样式。
Step 26
绘制声音强度条，方法同绘制进度条。
Step 27
绘制10个小圆形，分别应用同声音控制按钮的样式及回-深灰渐变叠加样式。
Step 28
最后，为整体添加倒影。复制背景层以外的所有图层，合并，执行滤镜2px高斯模糊，垂直反转，放置到合适位置，擦除部分下方图像。