第3章 多媒体课件界面设计

第三章 多媒体课件界面设计
RGB：红(Red)、绿(Green)、 蓝(Blue)。 在设计网页的 时候用到的素材图片也一般都是RGB模式。
CMYK：CMYK分别代表青(Cyan)、品红(Magenta)、黄 (Yellow)、黑(Black)，这是一种基于反光的色彩体 系，常用于彩色印刷中。 HSB:HSB是颜色分为色相、饱和度、明度三个因素， 英文为H(Hue)、S（Saturation）B（Brightnes）。
用黑色和一种彩色：比如大红的字体配黑色的边框感 觉很"跳"。
用两种色彩：先选定一种色彩，然后选择它的对比色。
第三章 多媒体课件界面设计
互补色相配色
第三章 多媒体课件界面设计
对比色相配色
第三章 多媒体课件界面设计
类似色相配色
第三章 多媒体课件界面设计
类似色相的配色
第三章 多媒体课件界面设计
第三章 多媒体课件界面设计
2 .色彩与心理 不同的颜色给人不同的感觉 概括起来，色彩的心理作用主要包括色彩的冷暖、色 彩的进退和胀缩、色彩的轻重和软硬、色彩的华丽和朴素 、色彩的联想与象征等几个方面。
14
第三章 多媒体课件界面设计
3 色彩搭配的原理

色彩的鲜明性：色彩鲜艳，容易引人注目。
色彩的独特性：要有与众不同的色彩，使得大 家对你的印象强烈பைடு நூலகம் 色彩的合适性：就是说色彩和你表达的内容气 氛相适合。如用粉色体现女性站点的柔性。
• 菜单[选择]
– 反选、修改（扩边、扩展） – 变换选区（Ctrl+T）
• 移动工具
– 移动对象、提交编辑结果
第三章 多媒体课件界面设计
套索工具
• 套索工具
– 选择不规则区域 – 按住鼠标左键不放拖拽
• 多边形套索工具
– 选择规则区域如三角形、五角星、多边形等 – 选择起始点后，释放鼠标拖拽
• 磁性套索工具
第三章 多媒体课件界面设计
图层的操作
• 新建图层 –新建图像文件，产生一个图层，通常为背景层 –图层面板上的新建图层按钮（右二） –菜单[图层]→[新建]→[图层] • 复制图层 –选定要复制的图层，拖拽鼠标到图层面板下面的新建图 层按钮上（右二）或右键菜单[复制图层] • 删除图层 –选定要复制的图层，拖拽鼠标到图层面板下面的删除图 层按钮上（右一）或右键菜单[删除图层]
例1: 初一语文《黄河颂》
裁 切
第三章 多媒体课件界面设计 例2：初中历史 秦统一六国
抠 取
第三章 多媒体课件界面设计 例3：初中生物 《陆地生活的动物》
图像的组合
第三章 多媒体课件界面设计
3.2课件界面配色常识
第三章 多媒体课件界面设计
1. 色彩基础知识
色相：色相是指色彩的相貌，是指各种颜色之间的 区别，是色彩最显著的特征，是不同波长的色光 被感觉的结果。 饱和度：饱和度是指色彩的鲜艳程度，也称色彩的 纯度。 明度：明度是指色彩的深浅、明暗，它决定于反射 光的强度，任何色彩都存在明暗变化
– 选择图形颜色与背景颜色反差较大的图形 – 选择起点，释放鼠标拖拽
第三章 多媒体课件界面设计
魔棒和裁剪工具
• 魔棒工具
– 选择图像中颜色相同或相似的区域 – 容差值越大，可选择的颜色区域越大 – 点击图像中的某个点，自动选择颜色相似区域
• 裁剪工具
– 将图像中不需要的部分(选区之外的部分)裁剪掉 – 选择要保留的部分，按Enter键或右键菜单 – 保存裁剪后的文件
第三章 多媒体课件界面设计
在教学过程中，通常需要使用图像辅助教学。 给学生提供形象直观的教学内容，帮助学生形成感性认识； 创设情境，增加学生的体验；代替大片的说明性文字，省时省力。
例 ： 初 一 语 文 《 紫 藤 萝 瀑 布 》
第三章 多媒体课件界面设计
但有些图像素材由于内容、尺寸、色彩等不符合 教学需要，不能直接应用于教学。如下一些情况：
第三章 多媒体课件界面设计
3.1.3 次界面
课件的次界面需要具有教学演示区，而且要占 据主要版面，同时还要根据课件的要求设计合理的 导航，如“上一步”、“下一步”、“返回”、
“首页”等，也可以与主界面具有相同的导航结构。
总之，界面的设计、导航的安排要符合课件本身的
教学要求，同时兼顾视觉审美原则，如图3-4所示为
同一色相的配色
第三章 多媒体课件界面设计
互補色相的配色
第三章 多媒体课件界面设计
对比色相的配色
第三章 多媒体课件界面设计
多色相的配色
第三章 多媒体课件界面设计
3.3Photoshop CS 基本操作
第三章 多媒体课件界面设计
概述
• Photoshop是当今世界上最流行的图形图象处理软件。 它是一个集图像制作、编辑修改、图像扫描及图像 输入输出于一体的图像处理软件，具有友好的界面、 直观的处理方式、丰富的效果和强大的功能。 • 应用领域 –广告设计、封面设计、照片处理、页面设计。 • 图像的输入和输出 –扫描仪和数码相机输入图像 –打印机输出图像
第三章 多媒体课件界面设计
画笔工具
• 画笔工具 – 使用前景色绘制线条和图形 – 画笔工具栏
– 选择画笔样式和不透明度，绘制不同形状的图形
第三章 多媒体课件界面设计
图章工具
• 仿制图章
– 复制局部图像到其它位置 – 将光标停留在要复制的图像上，按住Alt键同时单击鼠 标左键，完成取样。然后释放Alt键。 – 在另一块区域拖动鼠标左键，复制图像
第三章 多媒体课件界面设计
颜色的设置和填充
前景色 切换
• 前景色是绘制图形的颜色。 背景色是被擦除所显示的颜 色。
默认色
背景色
第三章 多媒体课件界面设计
1、颜色的设置 四种方法： 1. 使用拾色器。单击前景色设置按钮。 2. 使用颜色调板。调整RGB的滑板。 3. 使用色板调板 4. 使用吸管工具
主题。画面形象衔接自然，色彩醒目
强烈，构图富有变化，“精美、完美 、唯美”大大增强了广告的促销语言 。
24
第三章 多媒体课件界面设计
第二章 图像处理 · 第一节 项目实战《广告设计· 女人花》
项目作品制作思路
25
第三章 多媒体课件界面设计
3.1.2 主界面
主界面通常是指启动课件程序后出现的第一个界面，它
第三章 多媒体课件界面设计
图层的操作
• 移动图层 – 选定当前层，直接拖拽鼠标 • 当前图层（画笔） • 隐藏图层或显示图层（眼睛） • 链接图层（链条） – 选定当前图层，在要链接的 图层左侧的眼睛后的方框中 单击。 – 链接后的图层，可以同时操 作。如移动、变形等。
第三章 多媒体课件界面设计
吸管工具，将所取位置的点的颜色作 为前景色，如同时按住alt键，
则取为背景色。
第三章 多媒体课件界面设计
颜色的填充
• 选择要填充的区域 – 使用选取工具 – 使用魔棒工具 • 菜单[编辑]→[填充] – 前景色、背景色、图案 • 使用组合键 – Alt+Delete填充前景色 – Ctrl+Delete填充背景色
图像文件的格式
• PSD格式：photoshop的专用文件格式，不能用在 网页中 • BMP格式：点阵式文件格式，所占空间大
• TIFF格式：位映射图像文件，多用于扫描仪文件
• JPG格式：标准压缩文件，可用于网页中 • GIF格式：压缩的8位图像文件，多用于网页中
第三章 多媒体课件界面设计
基本操作
是课件的总导航。主界面上一般应该具有鲜明的标题、个性 的图标、明确的导航。 对于主界面的设计而言，除了要遵循平面设计的基本原 则之外，一般还要考虑尺寸大小、课件内容、风格样式以及 导航形式等因素。而课件界面设计与其它平面作品的最大不 同就是课件界面必须具备导航功能.
第三章 多媒体课件界面设计
图3-3 两种不同的导航设计
两个课件的次界面。
第三章 多媒体课件界面设计
3.1.4 片尾
课件的片尾设计可以简洁一些，通常可以采用 静态图片与字幕动画的形式，其中字幕动画形式居 多，文字信息主要为创作人员信息，也可有一些客 套词句，如“谢谢”、“再见”等。 退出界面的设计要与整体设计协调统一.
第三章 多媒体课件界面设计
图3-5 课件的片尾瞬间画面
第三章 多媒体课件界面设计
第三章 多媒体课件界面设计
3.1 多媒体课件界面 3.2 课件界面配色常识
3.3 Photoshop CS 基础操作
3.4 图层应用
3.5 渐变工具
3.6 文字工具 3.7 滤镜技术
第三章 多媒体课件界面设计
对于多媒体课件来说 ，除了要有一个优秀的教学 设计、课件结构以外，拥有一个友好的用户界面也相 当重要，他是课件程序设计的“脸面。”
第三章 多媒体课件界面设计
利用图章工具复制下面的效果图。
第三章 多媒体课件界面设计
图章工具
• 图案图章
– 将预先定义好的图案库中的图案复制到图像中 – 选择图像文件中的图案，将其复制到新图像文 件中 – 菜单[编辑]→[定义图案] – 在原图像文件或新文件中，选择图案图章工具， 拖拽鼠标左键，复制图案 – 也可用菜单[编辑]→[填充]，填充图案
• 宽度、高度 • 分辨率 • 图像背景颜色
• 保存文件的默认格式是psd，保存图像 的图层、通道等制作效果，以便今后 修改。也可保存或另存为其它格式如 jpg、gif等
第三章 多媒体课件界面设计
工具箱工具的使用
• 选取工具
– 矩形选取工具、椭圆选取工具 – 新选区、添加、减去、相交 – 撤消选取使用组合键：Ctrl+D
• 打开图像文件
– 菜单[文件]→[打开]
• 调整图像的显示比例
– 工具箱的放大镜和导航控制面板上的滑块
• 调整图像大小
– 文档窗口标题栏上的右键菜单[图像大小] – 菜单[图像]→[图像大小] – 约束比例
第三章 多媒体课件界面设计
基本操作 • 调整画布大小
– 文档窗口标题栏上的右键菜单[画布大小] – 菜单[图像]→[画布大小]
第三章 多媒体课件界面设计
3.4 图层的应用
第三章 多媒体课件界面设计
图层的应用
• 图像可以由一个图层或多个图 层组成，在各个图层中放置不 同的对象，给不同图层添加特 殊效果 • 每个图层都象一张透明纸，可 以看到下面图层中的图像，所 有图层中的最底层是背景层 • 使用图层面板和[图层]菜单，对 图层进行操作。图层面板下部 的按钮可以完成部分菜单命令 操作
图层的操作
• 合并图层：图层多占用磁盘空间大，可以合并 – 菜单[图层]或单击图层面板右上角的按钮 – [向下合并]：合并当前层和下一层（栅格化后的 图层才可以合并） 图层栅格化：将文本图层或形状图层转化成普通 图层 – [合并可见图层]：不合并隐藏图层 – [拼合图层]：合并全部图层，且丢弃隐藏图层 • 历史记录面板 – 撤消或恢复某些操作
第三章 多媒体课件界面设计
橡皮擦工具
• 橡皮擦 – 擦除后，显示出设置的背景颜色 – 选定橡皮擦，直接擦除图像 • 背景色橡皮擦 – 擦除图像后，显示出透明色 – 选定背景擦除工具，擦除图像 • 魔术橡皮擦 – 擦除图像后，显示出透明色或相似颜色 – 选择容差值为30 – 选定魔术擦除工具，快速擦除图像。
色彩的联想性：不同色彩会产生不同的联想， 蓝色想到天空，黑色想到黑夜，红色想到喜事等， 选择色彩要和你课件的内涵相关联。
第三章 多媒体课件界面设计
4 色彩搭配的技巧
用一种色彩：这里是指先选定一种色彩，然后调整透 明度或者饱和度，(说得通俗些就是将色彩变淡或则加 深)，产生新的色彩，这样的整体看起来色彩统一，有 层次感。 用一个色系：简单的说就是用一个感觉的色彩，例如 淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
第三章 多媒体课件界面设计
图3-2 课件启动界面
第三章 多媒体课件界面设计
女人花
经过处理的人物形象，面部瑕疵得以 修复，皮肤质感明显改善，给人以充 满健康、富有活力之感。画面主题经 过反复推敲确定为“女人花”，通过
如花的人物、浪漫的玫瑰、独特的首
饰、动人的文案，体现出“MY LOVE”、“只为心爱的人绽放”这一
• 使用裁剪工具裁剪图片
– 工具箱中的裁剪工具 ，按Enter键
• 保存图像文件
– 菜单[文件]→[保存] – 菜单[文件]→[另存为] – 可将bmp、tif格式文件转换成jpg、gif格式
第三章 多媒体课件界面设计
创建新文件
• 菜单[文件]→[新建]
– 名称 – 图像大小：预设大小640×480或自定义
第三章 多媒体课件界面设计
Photoshop的工作界面
• 窗口、菜单栏 • 工具箱：选择、渐变、魔术棒、文字等 • 工具选项栏：不同工具有不同的参数设置 • 控制面板：菜单[窗口]下导出全部的控制面 板 – 导航器和信息 – 颜色、色板和样式 – 图层、通道、路径和历史记录
第三章 多媒体课件界面设计