《ui界面设计5播放器界面设计概要课件》由会员分享，可在线阅读，更多相关《ui界面设计5播放器界面设计概要课件（29页珍藏版）》请在金锄头文库上搜索。
1、第五章播放器界面设计1234界面设计任务分析制作步骤详解知识拓展能力拓展目录目录 熟悉播放器界面设计的基本思想和原则；掌握Photoshop界面设计的工具和技术。特别是利用图层样式打造质感。学习目标学习目标1.界面设计任务分析为当下主流的移动设备设计一个播放器界面为当下主流的移动设备设计一个播放器界面为当下主流的移动设备设计一个播放器界面为当下主流的移动设备设计一个播放器界面需求分析需求分析1.界面设计任务分析为当下主流的移动设备设计一个播放器界面为当下主流的移动设备设计一个播放器界面为当下主流的移动设备设计一个播放器界面为当下主流的移动设备设计一个播放器界面1.横条状展示；2.满足用户简单的
2、播放需求： 播放按钮、前进按钮、停止摈钮、进度条、音量3.大量无彩色与少量彩色原型设计原型设计1.界面设计任务分析1.交互设计： 1）总体交互逻辑：单界面 2）细节交互设计： 触控感2. 布局设计： 控件排列视觉设计视觉设计1.界面设计任务分析1.风格定制： 简约型、拟物化2. 规范定制： 字体、颜色、间距3. 典型界面设计： 输出方案输出方案1.界面设计任务分析1. 整理图层并命名2. 删去无用图层3. 细节问题： 对齐 拼写 阴影方向2.制作步骤详解创建播放区1播放器专辑信息部分制作2播放器播放按钮部分制作3各种配色A A色彩的搭配色彩的搭配色彩的搭配色彩的搭配调整菜单调整图层B B色彩调
3、整色彩调整3.知识拓展4.能力拓展拓展练习拓展练习设计制作金属按钮设计制作金属按钮为黑白照片着色为黑白照片着色设计制作设计制作DVD光盘图标光盘图标4.能力拓展为黑白照片着色为黑白照片着色为红苹果着色为红苹果着色v利用磁性套索工具利用磁性套索工具选中红苹果，并新选中红苹果，并新建调整图层，作如建调整图层，作如图的设置。图的设置。v修改蒙版，为阴影修改蒙版，为阴影着色。选择柔角画着色。选择柔角画笔，是指笔刷不透笔，是指笔刷不透明度为明度为20，前景，前景色为白色，选中蒙色为白色，选中蒙版，在苹果阴影处版，在苹果阴影处涂抹。涂抹。4.能力拓展为黑白照片着色为黑白照片着色4.能力拓展为黑白照片着色为
4、黑白照片着色为青苹果着色为青苹果着色v操作和上一步同。相关设操作和上一步同。相关设置如右图。置如右图。v选中蒙版，选择磁性套索选中蒙版，选择磁性套索工具，在西红柿梗处建选工具，在西红柿梗处建选区，在选区内填充白色，区，在选区内填充白色，为西红柿梗着色，并取消为西红柿梗着色，并取消选择。选择。4.能力拓展为黑白照片着色为黑白照片着色4.能力拓展为黑白照片着色为黑白照片着色为其他水果上色为其他水果上色v同样的方法同样的方法为番茄上色为番茄上色4.能力拓展为黑白照片着色为黑白照片着色v为橙子上色为橙子上色4.能力拓展为黑白照片着色为黑白照片着色v为猕猴桃上为猕猴桃上色色4.能力拓展为黑白照片着色为黑
5、白照片着色v为柠檬和菠萝叶子上色。为柠檬和菠萝叶子上色。v选择画笔工具，在工具选择画笔工具，在工具选项栏中选择一个柔角选项栏中选择一个柔角的笔刷，设置不透明度的笔刷，设置不透明度为为50，将前景色设，将前景色设置为黑色，在菠萝的叶置为黑色，在菠萝的叶子处涂抹，见地绿叶处子处涂抹，见地绿叶处调整图层的强度。调整图层的强度。4.能力拓展为黑白照片着色为黑白照片着色整体效果如图整体效果如图4.能力拓展为黑白照片着色为黑白照片着色后期处理后期处理v新建一个新建一个“色相色相/饱饱和度和度”调整图层，调整图层，勾选勾选“着色选项。着色选项。”4.能力拓展为黑白照片着色为黑白照片着色v设置前景色为黑色，为
6、蒙设置前景色为黑色，为蒙版填充黑色，隐藏图从那版填充黑色，隐藏图从那个效果。个效果。v选择多边形套索工具，在选择多边形套索工具，在工具选项栏中设置羽化值工具选项栏中设置羽化值“2px”，在菠萝上创建选，在菠萝上创建选区，设置前景色为灰色，区，设置前景色为灰色，为蒙版填充灰色为蒙版填充灰色v选择画笔工具，选择柔角选择画笔工具，选择柔角的笔刷，设置一个较低的的笔刷，设置一个较低的不透明度值，在菠萝叶尖不透明度值，在菠萝叶尖的地方涂抹，让夜间处显的地方涂抹，让夜间处显示泛黄的颜色，从而增加示泛黄的颜色，从而增加叶子的真实感。叶子的真实感。4.能力拓展为黑白照片着色为黑白照片着色v用多边形套索工具，在
7、红色苹果用多边形套索工具，在红色苹果梗处创建选区，选中为红色苹果梗处创建选区，选中为红色苹果添加的调整图层，为选区填充黑添加的调整图层，为选区填充黑色，隐藏调整图层在该处的调整色，隐藏调整图层在该处的调整效果。效果。v选中最顶层的色相饱和度图层选中最顶层的色相饱和度图层（调整全图的调整图层），选择（调整全图的调整图层），选择画笔工具，将前景色设置为灰色，画笔工具，将前景色设置为灰色，在选区内涂抹，在苹果梗上添加在选区内涂抹，在苹果梗上添加褐色。褐色。4.能力拓展为黑白照片着色为黑白照片着色v取消选择，新建一个取消选择，新建一个图层，选择矩形选框图层，选择矩形选框工具，在画面中创建工具，在画面中
8、创建一个矩形并填充白色。一个矩形并填充白色。v为图层添加图层样式为图层添加图层样式v将图层的填充度改为将图层的填充度改为04.能力拓展为黑白照片着色为黑白照片着色v载入图层载入图层1，选择，选择“反向反向”，反转选区，单击最顶，反转选区，单击最顶层的调整图层，删除选区内容。层的调整图层，删除选区内容。v保持选取状态，复制一个背景图层，执行保持选取状态，复制一个背景图层，执行“滤镜滤镜/模糊模糊/高斯模糊高斯模糊”，半径设置为，半径设置为3个象素，取消个象素，取消选择选择4.能力拓展为黑白照片着色为黑白照片着色4.能力拓展为黑白照片着色为黑白照片着色 本章是对播放器界面设计制作的基本流程、方法等进行了讲解，直观的呈现了播放器的主要部分的制作流程。 在Photoshop方面学习了各种图层样式打造质感与色彩搭配与调整的相关知识。 本章小结本章小结
