《PPT播放器UI教程》由会员分享，可在线阅读，更多相关《PPT播放器UI教程（25页珍藏版）》请在金锄头文库上搜索。
1、播放器UI设计,讲演,曹哲,：,步骤（四步走）,边框,1,播放器主体,2,投影,3,背景,4,定主题,准备在做播放器UI之前，我们可以先给播放器定下一个主题，或者也可以说是风格，然后，我们在着手去做播放器的UI。,第一步,1.创建一个新的文档600400像素大。,2.使用径向渐变工具# 5e6c78为# 20282e,填充背景。,第二步,2.复制背景。添加杂色,设置:数值:5%;均匀;单色。 现在降低图层不透明度为30%。,第三步,Text,Text,1.创建新层(Ctrl + Shift + N)并将其命名为“主体”。2.使用圆角矩形工具,半径5 px,画一个长方形的图片。3.使用混合选项：
2、内阴影：不透明度37%，距离0像素，阻塞100%，大小1像素；渐变叠加：混合模式（正常），渐变依次为：#3d4a59,#1c2329,#303a44; 描边：大小1像素，颜色:# 191919。,第四步,Text,Text,1.新建一个文件,600 x600px。 填充- 50%灰色。2.添加杂色，设置参数:80%;高斯;单色。 径向模糊，设置参数:100;旋转;最好的。 按Ctrl + F重复一次。,第五步,Text,Text,复制上一步做的文档图像，放至“主体”层上面。改变它的混合模式为柔光,不透明度到80%。让我们的名字这层“纹理”。Ctrl +单击“基地”图层缩略图选择到主体边框。然后
3、按Ctrl + Shift +I进行反选操作，将多余的部分删去。,第六步,Text,Text,1.创建新层。命名为“高光”。使用铅笔工具画两条线,一个在顶部的基地,一个在底部。用橡皮擦将线处理和降低不透明度到80%。为了更有组织性,选择主体、纹理和高光,并按Ctrl + G gropu这些层，组命名为“主体”。,第七步,Text,Text,制作扬声器：创建新层，命名层为“扬声器”。Ctrl单击“基地”图层缩略图来进行选择，然后把矩形选框工具,Shift + Alt拖动来选择一个像在画中。# 3 a3a3a填充。进入混合选项,添加这些设置:图案叠加混合模式：叠加。,第八步,Text,Text,1
4、.创建一个新图层,命名为“高光”，再次使用铅笔工具画一个1 px高光。2。创建一个新图层并命名为“影子”。使用椭圆工具绘制一个图形,填充黑色和高斯模糊,半径5。擦除不需要的部分，然后降低不透明度到50%。,第九步,Text,Text,打组-扬声器、纹理、阴影和高亮 这四层。复制组,水平翻转至右边。名字就叫“扬声器右”。,第十步,Text,Text,最小化和最大化按钮。1.创建新图层,命名为“按钮”。2.使用圆角矩形工具,半径2 px,画一个小按钮,填充白色。3.然后设置混合选项。渐变的颜色是# 8799 ab - # 485664 - # 8799 ab。描边颜色是#384251,第十一步,T
5、ext,Text,创建一个新图层,命名为“X”。获得X, 使用一个字体或用铅笔工具。使用渐变叠加(暗灰色轻灰色)和1 px描边得到效果。,第十二步,Text,Text,打组前2层和命名组“X”。然后如上一步，做出后两个按钮,只是改变了“X”这个符号。,第十三步,Text,Text,播放器屏幕。1.创建新图层,命名为“屏幕主体”。2.画一个长方形的图片并填充它，渐变从# 303a44 到#4a5968。,第十四步,Text,Text,创建一个新图层，命名为“光泽”。画一个小矩形,填充白色到透明的梯度，不透明度降到10%。再次使用1 px白色铅笔工具画一些高光。按照个人喜好来处理效果。,第十五步,
6、Text,Text,填满屏幕内的一些内容。1.使一个新组并将其命名为“内容”。每样元素建一个新层。2.用一个柔软的圆形笔刷添加一个突出的计时器。3.然后,做出数字效果4.然后键入歌曲名称，在下面添加上循环和单曲。,第十六步,Text,Text,1.创建一个新层，命名为“进度条”。2.使用圆角矩形工具,半径5 px,绘制一个矩形,细长。填充它为黑色,添加这些混合选项:渐变叠加从# 303a44到# 1c2329 ，1 px和渐变颜色为# afbbc6,不透明度16%。3.再创建一个新图层，并命名为“进度旋钮”。画一个小矩形并填充黑色,使用这些混合选项-内阴影:混合模式正常,颜色白色,距离0,大小
7、1;渐变叠加:# 5c6977 - # 212a30-# 5c6977；描边：大小1 px,颜色# 222 b31。,第十七步,Text,Text,1.做一个新组并将其命名为“按钮”。首先我们将做主体的按钮：播放,停止以及其他按钮。创建新图层,命名为“按钮基地”。2.使用一个5 px半径圆角矩形工具，然后再将这些混合选项-阴影:角- -90( “使用全局光”),距离- 1,大小-0。内阴影:混合模式正常,颜色白色,角- 90(同样不使用全局光),距离- 1、大小- 0。渐变叠加:# 4d5c6a - # 1c2329 - # 303a43.,第十八步,Text,Text,可以添加很多小细节，仅用1 px的铅笔工具,然后擦除想要减弱的部分。,第十九步,Text,Text,添加播放、暂停、停止、向前或向后按钮，组合好。,第二十步,Text,Text,1.添加界面的音量控制，用铅笔绘制图标的工具，添加相同的梯度作为播放控制按钮。2.使用圆角矩形工具,半径5 px,绘制一个矩形,并添加相同的渐变作为进度条，保持渐变统一。3.画10个小圆圈，作为音量大小的显示。,第二十一步,Text,Text,最后添加一些投影。合并除了背景的所有图层。复制它,加1、2 px高斯模糊,翻转垂直它，并使用圆形软橡皮擦,擦除底部。,Thank You !,谢谢观赏！,
