Lesson 6-Images

43
Lesson 6-Images

description

Lesson 6-Images. 图像. 大纲 Overview. 如何产生多媒体图像 Creation of multimedia images. 静态图像的分类和制作 Creation of still images. 多媒体中的色彩和模式的使用 Colors and palettes in multimedia. 多媒体文件中的图像类型 Image file types used in multimedia. Types of Still Images. Still images are generated in two ways: - PowerPoint PPT Presentation

Transcript of Lesson 6-Images

Page 1: Lesson 6-Images

Lesson 6-Images

Page 2: Lesson 6-Images

大纲 Overview

如何产生多媒体图像 Creation of multimedia images.

静态图像的分类和制作 Creation of still images.

多媒体中的色彩和模式的使用 Colors and palettes in

multimedia.

多媒体文件中的图像类型 Image file types used in multimedia.

Page 3: Lesson 6-Images

Types of Still Images

Still images are generated in two ways:

位图 Bitmaps. 由构成一个图像的小点组成的简单矩阵。把彩色图像分解成许多像

素,每个像素用若干个二进制位来指定该像素的颜色、亮度和属性。许多描述像素

的数据组成图像文件

位图图像由多个像素组成,并带有表示每个像素颜色的数据。当图像放大后,每个

像素的信息量是固定的,会出现马赛克现象。

位图色彩丰富,具有很强层次感,承载的信息量大,具有很强的视觉效果。

位图图像数字化后的数据量大,需要进行压缩。( 800*600 真彩色的图像保存

空间大约为 1.37M )

Page 4: Lesson 6-Images

矢量图 Vector-drawn graphics.: 是以数学方程式所定义的直线和曲线

来记录图像内容。存储量小,分辨率大,精确度高。

矢量图一般比较简单,信息表现力不强,数据量小,并且由于矢量图形

存储的是关于曲线的点、颜色、曲率等信息,当缩放时,这个数学描述

关系在一个区域内是固定的,因此矢量图作为一种抽象化的特殊符号在

多媒体系统中具有重要作用。

矢量图体积小,画面表达准确。

Page 5: Lesson 6-Images
Page 6: Lesson 6-Images

图像的颜色模式

颜色模式是图像在显示或打印输出时定义颜色的不同方式:

RGB :红、蓝和绿三原色

CMYK :分色印刷的 4 种颜色青色、洋红色、黄色和黑色组成

HSB :是一种基于人的直觉的颜色模式,有色相、饱和度和亮度组成

位图模式:黑白两个特征

灰度模式:黑白来进行显示,但每个像素由 8 位数据来记录,表现 256

种色调。

Page 7: Lesson 6-Images

图像文件格式

JPG :存储 32 位信息的有损压缩文件格式

BMP :位图文件格式 A Windows bitmap file 支持 RGB 索引颜色、灰度和位

图颜色模式

GIF :存储索引颜色模式,支持 256 色

TIFF :标记交换文件格式 Extensively used in DTP packages 支持跨平台,

使用广泛的无损压缩文件格式,存储空间大

TGA :支持最高色彩可达 32 位,被广泛应用于动画、影视和模拟显示

PNG :能存储 32 位信息,是一种无损压缩文件格式

PCX - Used by MS-DOS paint software.

PSD –Photoshop 格式文件

Page 8: Lesson 6-Images

产生多媒体图像 Creation of Multimedia Images

创作之初: Before commencing the creation of images in

Multimedia, one should:

计划行事方法 Plan their approach using flow charts and

storyboards.

管理制作工具 Organize the available tools.

多显示器 Have multiple monitors, if possible, for lots of

screen real estate.

Page 9: Lesson 6-Images

抓图和编辑工具 Capturing and Editing Images

抓屏 Capturing and storing images directly from the screen

is another way to assemble images for multimedia.

抓屏按键 The PRINT SCREEN button in Windows and

COMMAND-CONTROL-SHIFT-4 keystroke on the Macintosh

copies the screen image to the clipboard.

其他抓屏工具: snagIt

Page 10: Lesson 6-Images

PS 基本操作

图象编辑 Image editing programs enable the user to:

合成复杂图像 Enhance and make composite images.

变换和扭曲图像 Alter and distort images

增加和删除元素

变形

Page 11: Lesson 6-Images

PS 中实用技巧

抠图:所谓抠图就是从一幅图片中将某一部分截取出来,和另外的背景进行合成。生活中的很多图

像制品都曾经经过这种加工,需要设计人员将模特照片中的人像部分抠取出来,然后再和背景进行

合成。

Page 12: Lesson 6-Images

抠图技巧

磁性套索工具

(位置:工具箱)

当需要处理的图形与背景有颜色上的明显反差时, Magnetic Lasso (磁性

套索)工具非常好用。反差越明显,磁性套索工具抠像就越精确。

魔术橡皮工具

(位置:工具箱)

  魔术橡皮 ( Magic Eraser ) 工具集中了橡皮擦和魔术棒工具的特点。在

图像中点击鼠标,图像中与这一点颜色相近的区域会被擦去。

“ ”抽出 工具(

Extract)

(位置:菜单-图像)

路径工具

(位置:工具箱、路径面板)

Mask Pro 滤镜

(位置:菜单-滤镜)

巧用通道

(位置:通道面板)

 二、抠图大师—— COREL 公司的 KNOCKOUT

三、轻松抠图新工具——微软 Lazy Snapping

Page 13: Lesson 6-Images

矢量图 Vector-Drawn Graphics

矢量图形的应用 Applications of vector-drawn images.

矢量图图形如何工作的 How vector-drawn images work?

矢量图和位图 Vector-drawn images v/s bitmaps.

Page 14: Lesson 6-Images

logo

Logo :树立公司形象,传达作品信息。给用户留下活泼、亲密、多

变、深刻的印象。标志设计多简介明了,

有很强的识别性。

http://www.logomaker.cn/

Page 15: Lesson 6-Images

Applications of Vector-Drawn Images

矢量图形的应用领域 Vector-drawn images are used in the

following areas:

建筑工程 Computer-aided design (CAD) programs.

图形设计和印刷媒体 Graphic artists designing for the print media.

三维图形 3-D animation programs.

Applications requiring drawing of graphic shapes.

Page 16: Lesson 6-Images

如何绘制矢量图 How Vector-Drawn Images Work

矢量是一个线段,描述两个端点的位置。 A vector is a line that is described by the location

of its two endpoints.

笛卡尔坐标系 Vector drawing makes use of Cartesian co-ordinates.

http://6.cn/watch/2179788.html

三维信息恢复可能有几种实现方法。

1. 单视角和投影模型信息恢复

2.双眼视觉模拟,就是从两个角度观察同一个区域,利用视差进行恢复。

3. 多角度恢复,运动信息的恢复。如果是物体表面三维信息恢复,多角度透视信息恢

复。

Page 17: Lesson 6-Images

Vector-Drawn Images v/s Bitmaps

矢量图不能被用来作为显示复杂多色彩图像 Vector images cannot be

used for images.

矢量图要求网页安装显示插件 Vector images require a plug-in for Web-

based display.

位图不能随便放大和更改 Bitmaps are not easily scalable and

resizable.

位图可以通过工具软件转化——自动跟踪 Bitmaps can be converted to

vector images using autotracing.

Page 18: Lesson 6-Images

3-D 绘图和描绘输出 3-D Drawing and Rendering

3-D animation tools.

应用特征 Features of a 3-D application.

全景 Panoramas.

Page 19: Lesson 6-Images

3-D Animation Tools

3-D animation, drawing, and rendering tools include:

Ray Dream Designer.

Caligari True Space 2.

Specular Infini-D.

Form*Z.

NewTek's Lightwave.

Page 20: Lesson 6-Images

Xyz 轴和可调的视角

Page 21: Lesson 6-Images

一个三维场景需要大量信息

Infini - D 软件中椅子由方块和矩形

构成的 11 个对象组成

每个物体和元素有具有属性:

形状 颜色 纹理 阴影 位置

Page 22: Lesson 6-Images

Features of a 3-D Application

建模:创建形状Modeling - Placing all the elements into 3-D space.

模压:将一个平面在与该形状的轮廓垂直的方向上或者沿着某一定义的方向突出的三维

处理 Extrusion - The shape of a plane surface extends some distance.

车:将形状的剖面沿着预先定义的轴线旋转来创建三维物体 Lathing - A profile of

the shape is rotated around a defined axis.

施加纹理和颜色 设置光源

提交:计算机最后利用复杂的算法来合成创建物体定义的各种效果 Rendering - Use

of intricate algorithms to apply user-specified effects.

Page 23: Lesson 6-Images

颜色和调色板 Colors and Palettes in Multimedia

理解自然光和颜色 Understanding natural light and color.

调色板 Color palettes.

Page 24: Lesson 6-Images

理解自然光和颜色 Understanding Natural Light and Color

当电子从较高能级向较低能级运动时就产生了光 Light comes from an atom where

an electron passes from a higher to a lower energy level.

每一种原子产生的颜色是唯一的 Each atom produces uniquely specific colors.

颜色是整个电磁波普上人的眼睛所能产生反映的一些光波频率,它的范围很窄。 Color

is the frequency of a light wave within the narrow band of the

electromagnetic spectrum, to which the human eye responds.

光谱中的光波频率递增的顺序: ROY G.BIV

红外线 紫外线

Page 25: Lesson 6-Images

理解自然光和颜色 Understanding Natural Light and Color

色调由红蓝绿三色构成

人眼能区分 80 , 000 种

颜色

颜色采集器选择色彩空间中

一种或多种不同模式构成的

颜色

Page 26: Lesson 6-Images

颜色

红色

黄色

绿色

蓝色

紫色

棕色

Page 27: Lesson 6-Images

颜色

白色

灰色

黑色

Page 28: Lesson 6-Images

计算机化的 颜色 Understanding Natural Light and Color

加性颜色 Additive color.

减性颜色 Subtractive color. CMY CMYK

显示器和颜色 Monitor-specific color.

颜色模型 Color models.

Page 29: Lesson 6-Images

Color Palettes

抖动 Dithering:

抖动是根据科学算法将每一象素的颜色取值变换为目标调色板中与之最

匹配的颜色值 Dithering is a process whereby the color value of

each pixel is changed to the closest matching color value in

the target palette.

This is done using a mathematical algorithm.

Page 30: Lesson 6-Images

色调 Color Palettes

调色板是一张数学表格,定义了屏幕象素的颜色,也就是颜色对照表

中存储的颜色值。 Palettes are mathematical tables that

define the color of pixels displayed on the screen.

颜色对照表 Palettes are called ‘color lookup tables’ or CLUTs

on Macintosh.

常用的调色板深度 The most common palettes are 1, 4, 8, 16,

and 24-bit deep.

Page 31: Lesson 6-Images

24 比特颜色系统

覆盖了人眼所有

颜色

图像素材应该注意的是

Page 32: Lesson 6-Images

VGA 系统

256 色的 8bit 的 VGA 系统:横向 640 像,纵向 480 像素,每个像

素包含 8 比特的色彩信息。

Page 33: Lesson 6-Images

抖动的应用

Page 34: Lesson 6-Images

制作静态图片 Creation of Still Images

静态图片是多媒体系统中重要的元素 Still images may be the

most important element of a multimedia project.

界面设计师的工作:一个好的布局者和技术工作者

位图和矢量图:

你的图片存储格式: gif jpg png

Page 35: Lesson 6-Images

计划行事方法 Plan their approach using flow charts and storyboards.

模版

现成的屏幕

克隆其他项目的外观

制作

Page 36: Lesson 6-Images

创建项目界面最好的方法

准备铅笔、橡皮和白纸

给出方案和图形创意

采用线条画描述整个项目

采用 3×5 的索引卡片

Page 37: Lesson 6-Images

管理制作工具 Organize the available tools

专门工具——创作多媒体图形对象:文本、按钮、矢量物体和位图

集成工具——特效库

Page 38: Lesson 6-Images

界面设计的元素

图像是构成多媒体界面的基本信息。

图像的选取和使用:

应具有良好的视觉吸引力,能吸引读者的注意力

简洁明确的传达信息,一目了然,诉求重心

具有强有力的诱导作用,视觉效果鲜明

与界面设计协调统一

Page 39: Lesson 6-Images

图像艺术

图像的处理需要经过图像设计软件的加工,但更多的是靠创意。有些

想法看似很难实现,但有时确能轻松达到。

Page 40: Lesson 6-Images

网页页面元素的设计

在网站应用中, LOGO 能很好树立网站形象,传达丰富的产品特征

BANNER :旗帜广告

导航:不仅是信息机构的基础分类也是浏览者的路标。导航呈现多媒

体内容的架构和层次关系,是浏览者浏览网站的流程图和从主界面进

入各个级别界面的快捷通道

Page 41: Lesson 6-Images

界面的版式设计

界面的版式设计主要对于图形和文字等画面构成元素的编排。界面的编排方

式是将画面分割成若干单位,而各种图形和文字等设计要素要依据于分割线

编排或在分割线范围内进行编排。

编排方法:

十字编排法

满版编排法

等量和非等量编排法

网状编排法

Page 42: Lesson 6-Images
Page 43: Lesson 6-Images

Summary

静态图形的格式 The computer generates still images as bitmaps

and vector-drawn images.

图形的获得方式 Images can be incorporated in multimedia using clip

arts, bitmap software, or by capturing, editing, or scanning

images.

生成 3-D 模型 Creating 3-D images involves modeling, extruding,

lathing, shading, and rendering.

颜色 Color is one of the most vital components of multimedia.