ui界面设计5-播放器界面设计概要

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