ui界面设计5 播放器界面设计概要课件.ppt

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