预览
步骤1:创建Photoshop画布
创建一个新的Photoshop文档，点击File > new。画布尺寸应该是800x600px。设置“背景内容”为透明的，这将产生一个透明的背景层。
现在，从工具面板中选择油漆桶工具(G)，用中性色填充透明的背景层，如#e4e4e4(浅灰色)。
步骤2:创建视频区域
流媒体视频的典型标准尺寸是640x390px。(例如，YouTube使用这个作为默认的视频维度。)按照这个尺寸，我们将创建一个矩形，然后我们将添加一个光滑的黑色渐变到它。
要创建矩形，选择矩形工具。
在“选项栏”中，确保形状图层选项的选择，以便工具产生一个形状层，而不是矢量路径(这是路径选项)或栅格化形状(这是填充像素选项)。
此外，如果你打开了信息面板——可以通过点击窗口>信息(F8)进行切换——它可以帮助你精确地绘制矩形(以及本教程中的其他对象)。
一旦你画好了矩形，在图层面板中双击它的图层，进入图层样式对话框窗口。
给它一个渐变叠加，设置如下:
步骤3:创建控制栏
控件表示视频控制区域玩按钮,全屏按钮,体积按钮，音量条和进度条。我们将从元素将放在上面的形状开始，(为了本教程的目的)我们将其称为控制条。
首先，再次选择矩形工具，在大矩形(视频区域)下面画一个矩形，大小为640x40px。
给控制条一个内阴影。下面的设置将给它一个微妙的内阴影效果。
同样，给它一个深灰色(#353535)颜色叠加层效果。
在视频区域和控制条相交的控制条顶部，画一条1px的水平黑线。这条线会给我们一个很好的嵌入效果。
步骤4:给视频播放器一个阴影
现在我将向您展示如何在视频播放器周围创建一个漂亮的阴影效果。选择矩形工具，绘制一个黑色矩形(640x430px)，并将其放置在视频区域和控制条图层的下面。
接下来，选择滤镜>模糊>高斯模糊，设置半径为2px，然后按确定应用滤镜。
步骤5:添加视频控件
让我们继续控制。下一步是将三个图标导入到文档中体积图标,全屏图标和玩图标。你可以很容易地找到图标Iconfinder．
还有，试试免费的线框工具栏图标，这是为GUI设计师制作的图标;此图标集将包含此步骤所需的所有图标。寻找简单的图标，这将给我们更好的机会调整和风格。
如图所示定位您选择的图标。
如果它们太大，使用自由变换命令(Ctrl/Cmd + T)来缩放它们。
双击播放图标的图层，你可以给它一个投影和渐变叠加。
阴影
渐变叠加
你应该得到一个清晰的播放按钮，如下所示:
为其他两个按钮添加相同的效果。要做到这一点，右键单击/Control-click在播放按钮图层上(它应该已经有我们上面应用的图层样式)并选择复制图层样式．Ctrl-click/Cmd-click在音量图标层和全屏图标层上同时选择它们，然后右键单击其中一个并选择粘贴图层样式．
这样做应该从播放按钮图层复制图层样式到音量图标和全屏图标图层。
步骤6:创建视频进度条
在工具面板中选择圆角矩形工具，在选项栏中设置半径为20px，然后画一个350x10px的圆角矩形。使用移动工具(V)将它放置在播放按钮旁边，如下所示。
复制我们在上一步中给播放、音量和全屏按钮的图层样式，然后粘贴到这个上面。
让我们模拟我们的UI，就像我们正在播放视频一样。为此，我们将在进度条的顶部绘制一个蓝色圆角矩形，表示视频的位置。
首先，通过ctrl -click / cmd -click在形状层的缩略图上加载进度条周围的选区。
然后选择矩形选框工具(M)，在选项栏中选择与选择相交选择。在进度条的前半部分做一个选择。这应该会减少我们的选择。
在进度条上面创建一个新层。在这个新图层中，用任意颜色填充选区(Edit > fill)。填充完成后，双击图层进入图层样式窗口，这样我们就可以给这个图层一个渐变叠加。
现在，在进度条的中间，用蓝色(#75aafb)画一条1px的水平线，这将为进度条添加一个漂亮的细节。
进度条现在应该是这样的:
重复上面的过程来创建一个音量条，但不是使用半径为20px的圆角矩形，而是将其翻倍为40px，因为音量条将比进度条窄。
步骤7:写入时间指示器
选择水平文字工具，设置字体为Arial, Regular, 12px并在进度条右侧输入当前进度和视频持续时间。从播放按钮图层复制图层样式，然后粘贴到文本图层。
在视频区域创建一个大播放按钮
UI现在完成了。现在，我们将在视频区域的中心创建一个大的播放按钮。你可以使用与视频控件栏相同的播放图标(只需使用自由变换命令将其缩放)，或者使用多边形工具自己绘制它(只需设置国在选项栏中选择3来绘制一个三角形)。
然后，给图层添加投影，内发光和内阴影。
阴影
内发光
渐变叠加
这个按钮应该是这样的:
教程汇总
视频播放器现在完成了。我们使用简单的技术来绘制一个漂亮的视频播放器用户界面。我们使用简单的图层样式和绘图技术(使用Photoshop形状工具)来达到你在现代网页设计中经常看到的干净和圆滑的美学。
我希望您对您所创建的内容感到满意，我期待听到您的反馈和问题，所以请在下面的评论中分享您的想法!
下载源文件
- slick_videoplayer_ui(zip, 0.03 mb)
