任务1.2 了解图像的基础知识（课件）《图形图像处理-Photoshop 2022》（高教版第五版）【上好课】

图形图像处理-Photoshop2022 高教版第五版 项目1 Photoshop 2022 入门 任务1.2 了解图像的基础知识 ” 学习目标 知识目标 技能目标 素养目标 1.能准确说出位图和矢量图的定义、特点、优缺点及常见格式 2.能理解分辨率的含义及其对图像质量的影响 3.能理解颜色位深度的概念及颜色数计算公式 1.能根据图像特征判断其属于位图还是矢量图 2.能根据用途选择合适的分辨率和位深度 1.培养严谨的图像质量判断意识 2.养成根据输出需求设置图像参数的专业习惯 教学导入 知识讲授 师生互动 课堂练习 课堂小结 环节 目录 第一部分 初识图像：矢量图与位图、分辨率、颜色位深度 教学导入 上图展示了位图与矢量图的直观对比：右侧位图放大后呈现像素网格（马赛克），右侧矢量图无论放大多少倍，边缘始终保持平滑清晰。 照片放大为何成“马赛克”？ 照片放大为何会出现马赛克？ 插画放大边缘为何依旧光滑？ 插画放大为何边缘始终光滑？ 图像的本质有何不同？ 位图与矢量图的构成原理有何根本差异？ 知识讲授：知识点一：图像的类型 01 矢量图 构成元素：由基础图元（点、线、面）组合而成。 常用别称：图形 (Graphic)。 02 位图 构成元素：由像素点阵排列组成。 常用别称：图像 (Image)。 知识讲授：矢量图 定义 由数学方程定义的几何描述，非像素构成。 构成 记录形状、颜色等属性参数，数据量小。 本质 计算机绘图指令集，可无限放大且清晰。 知识讲授：矢量图的特点与优缺点 以 NIKE LOGO 为例，矢量图形基于数学公式描述，无论放大多少倍，线条边缘始终保持平滑、清晰，无锯齿感。 缩放不失真 边缘锐利平滑、无像素化模糊 文件体积小 数据量小、易存储传输 易于编辑修改 调整灵活、便于后期修改 局限性与不足 难表现照片效果、难绘制写实图像 知识讲授：矢量图常见格式与软件 矢量图形由数学定义的点和路径构成，放大不失真。专业设计软件是创建编辑矢量图的核心工具，不同软件对应不同工作流与生态。 常用矢量文件格式 AI, EPS, SVG 主流矢量设计软件 Illustrator, CorelDRAW, Inkscape, Animate 知识讲授：2. 位图 像素化的人像网格直观展示了位图的构成原理：图像由无数微小的、色彩单一的像素方块紧密排列而成。 定义 构成 本质 知识讲授：位图的特点与优缺点 图示为位图放大后的像素化效果，每一个小方块都是一个独立的像素。这种由像素点阵构成的图像，决定了它独特的视觉特性与数据存储方式。 核心优势 色彩丰富逼真 · 细节表现力强 主要局限 放大后失真 · 文件体积大 知识讲授：矢量图 vs. 位图 对比总结 矢量图 (图形) 基本元素：图元定义 基于数学公式和几何路径描述，由点、线、面等基本图元构成，与分辨率无关。 缩放特性：无损放大 任意放大或缩小都不会失真，边缘始终保持光滑锐利，适合需要无限缩放的场景。 色彩表现：简洁明快 色彩通常由纯色块组成，过渡相对生硬，但文件体积小，易于修改颜色和形状。 核心应用：设计与工程 适用于LOGO、插画、字体、工程图纸等；常用工具：Illustrator、CorelDRAW。 位图 (图像) 基本元素：像素点阵 由无数个带颜色的小方块（像素）排列组成，分辨率固定，是位图最基本的单位。 缩放特性：易失真 放大后会出现马赛克现象，细节丢失、边缘模糊；缩小后像素信息不可逆损失。 色彩表现：层次丰富 能表现逼真的色彩渐变、光影效果和复杂纹理，还原真实世界的视觉细节。 核心应用：影像与绘画 适用于摄影作品、数字绘画、网页背景等；常用工具：Photoshop、Painter。 知识讲授：图像属性 - 分辨率 01. 显示分辨率 02. 图像分辨率 03. 输出分辨率 知识讲授：三种分辨率的定义 ① 显示分辨率 显示器屏幕能显示的像素点数，是硬件固有属性。 单位：像素 (Pixel)，如 1920×1080 ② 图像分辨率 图像文件包含的像素总数或每英寸像素点数。 单位：像素 (Pixel) 或 ppi (每英寸像素) ③ 输出分辨率 输出设备每英寸能打印的墨点数量。 单位：dpi (Dots Per Inch，每英寸墨点) 知识讲授：显示分辨率 上图直观展示了同一画面在1080p与4K分辨率下的差异。高分辨率屏幕能呈现更丰富的细节和更锐利的边缘，为用户带来沉浸式的视觉体验。 核心概念：由像素点数量决定，是画面精细度的关键。 HD (720p) 像素 1280×720 FHD (1080p) 像素 1920×1080 QHD (2K) 像素 2560×1440 UHD (4K) 像素 3840×2160 ② 图像分辨率 (ppi) & ③ 输出分辨率 (dpi) 图像分辨率 (ppi)：图像的“内在基因” 图像文件的固有属性，决定画面清晰度。数值越高细节越丰富、文件越大。屏幕常用72/96 ppi，印刷需300 ppi。 输出分辨率 (dpi)：设备的“打印能力” 打印设备每英寸输出的墨点数量，决定打印画面的细腻度。 黑白文档打印 普通文档，300 dpi 即可保证文字锐利。 彩色照片/画册 高质量照片/画册，建议1200 dpi以还原色彩层次。 知识讲授：三者关系辨析与实例 图像分辨率 vs 显示分辨率 屏幕显示时，图像分辨率越高，显示尺寸越大，清晰度不变。 图像分辨率 vs 输出分辨率 图像分辨率决定细节量，输出分辨率决定打印还原力，二者需匹配。 典型场景实例 3000×2000像素图：屏幕显示需缩放，300ppi规格可印10×6.67英寸高清照片。 知识讲授：知识点三：图像属性 - 颜色位深度 核心定义 像素颜色信息 二进制位数 关键作用 决定颜色数量 色彩表现力 位深度 色彩度量衡 视觉精度指标 总结：颜色位深度是图像色彩丰富度的“度量衡”，其数值大小直接决定了数字图像能够呈现的色彩层次与视觉精度。 知识讲授：颜色数量计算公式 颜色数 = 2ⁿ 1位：2¹ = 2种 仅包含黑与白两种颜色，是最简单的颜色模型，常用于早期的单色显示器和文字显示。 4位：2⁴ = 16种 早期计算机（如苹果II、Commodore 64）的标准配置，能显示简单的图形和基础的色彩渐变。 8位：2⁸ = 256种 常用于GIF图像格式和索引颜色模式，适合色彩要求不高的网页图形、图标和简单动画。 16位：2¹⁶ = 65,536种 被称为“高色彩”，广泛应用于早期的游戏和消费级显卡，能提供更平滑的色彩过渡效果。 24位：2²⁴ ≈ 1677万种 即“真彩色 (True Color)”，能表现的颜色数量远超人类肉眼的分辨能力，是现代数字图像的主流标准。 32位：2³² ≈ 42.9亿种 在24位真彩色基础上增加了8位Alpha通道，用于控制图像的透明度，广泛应用于专业图形设计。 知识讲授 知识讲授：位深度对图像效果的影响 视觉表现核心差异 位深度决定图像色彩丰富度与过渡平滑度，是影响视觉质感的核心因素。 24位深（真彩色）：极致还原 包含约1677万种颜色，色彩过渡平滑无断层，是主流图像标准，能精准呈现真实色彩层次。 16位深（高彩色）：可见色带 仅含65536种颜色，色彩渐变区易出现色带，视觉连贯性弱，多用于早期或对存储要求高的场景。 知识背诵 三种分辨率 名称:显示分辨率、图像分辨率、输出分辨率 单位:PPI (Pixels Per Inch), DPI (Dots Per Inch) 含义:衡量图像细节和输出精度的指标。 颜色位深度公式 公式:颜色数 = 2ⁿ 常见位深度: 1位: 2¹ = 2 种颜色 4位: 2⁴ = 16 种颜色 8位: 2⁸ = 256 种颜色 16位: 2¹⁶ = 65,536 种颜色 24位: 2²⁴ = 1677万种颜色 师生互动：动手实践：基础操作练习 任务一（基础）：判断“一张矢量风格的企业LOGO”属于矢量图还是位图？为什么？ 任务二（进阶）：“600dpi”属于哪种分辨率？它通常用于什么设备？ 任务三（综合）：一幅图像的颜色位深度为16位，它能显示多少种颜色？如果是24位呢？ 属于矢量图。因为企业LOGO通常由绘图软件（如Illustrator、CorelDRAW）设计，由数学公式定义的图元构成，放大后不会失真，且文件较小，便于在不同尺寸下使用（如名片、广告牌）。 属于输出分辨率。dpi是dot per inch（点每英寸）的缩写，通常用于表示打印机等输出设备的分辨率。600dpi的打印机在打印文本时已经能达到相当出色的线条质量。 16位深度能显示的颜色数为 =65536 种颜色（约6.5万色） 24位深度能显示的颜色数为 =16777216 种颜色（约1677万色，通常称为真彩色） 课堂练习 一、填空题 1. 通常把矢量图称为______，把位图称为______。 2. 矢量图的基本元素是______，位图的基本元素是______。 3. 颜色位深度为n时，该图像能够支持的颜色数（或灰度级数）为______。 二、判断题 4. 矢量图在进行缩放或旋转时，会发生失真现象。（ ） 图形 图元 像素 × 图像 第二部分 进阶图像：颜色模式与文件格式 知识讲授：知识点四：颜色模式 核心定义 定义图像色域范围，决定色彩呈现与输出适配。 • 决定色彩丰富度 • 关联图像通道 • 影响文件体积 • 锁定输出介质 知识讲授：RGB 模式 RGB 色彩模式是工业界的一种颜色标准，通过对红、绿、蓝三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。 核心要点 • 原理：光的三原色（红/绿/蓝）加色混合 • 用途：电子屏幕显示（网页/UI/视频） • 通道：复合通道 + 红/绿/蓝单色通道 • 位深：24位真彩色（约1677万色） • 特点：色彩鲜艳，属于广色域 知识讲授：2. CMYK 模式 ●色彩原理：减法混合 ●核心用途：印刷标准 ●通道结构：四色独立 ●色域特性：小于RGB 知识讲授：3.Lab模式 Lab模式是Photoshop内部的颜色模式，色彩范围最广。由L（亮度）、a和b（颜色）三个通道组成。 Lab模式弥补了RGB和CMYK的不足，在RGB转CMYK时作为过渡模式，可避免颜色丢失。 知识讲授： 知识讲授：三大颜色模式对比 RGB 颜色模式 原理：光的三原色（红、绿、蓝）叠加 模式：加色法 用途：屏幕显示（网页、UI、视频） 色域：广，覆盖人眼可见大部分颜色 CMYK 颜色模式 原理：颜料三原色（青、洋红、黄、黑）混合 模式：减色法 用途：物理印刷（书刊、海报、包装） 色域：较窄，仅限印刷可还原颜色 Lab 颜色模式 构成：亮度分量 L + 颜色分量 a、b 特点：与设备无关，颜色转换桥梁 用途：专业色彩调整、转换 色域：最广，包含RGB与CMYK所有颜色 知识讲授：其他颜色模式（一） 位图模式 仅含黑白两色，无灰度，文件体积极小。 灰度模式 256级灰度，无彩色，图像处理基础。 双色调模式 2-4种油墨印刷灰度图，增添艺术色彩。 知识讲授：其他颜色模式（二） 索引颜色模式 颜色查找表、最多256色、体积小、单通道透明、GIF默认 多通道模式 专色通道、256级灰度、专业印刷、特殊油墨 知识讲授：知识点五：图像文件格式 影响文件体积 压缩算法决定大小 平衡画质与存储效率 决定文件特性 决定图层、透明通道等 影响设计工具与输出 决定兼容场景 不同软件/设备支持度不同 确保多场景正常显示 知识讲授 知识讲授：常见图像文件格式 01. BMP 位图格式 • Windows标准格式，无压缩，画质极高 • 色彩精准，完整保留像素信息 • 文件体积大，占用空间多 • 现较少使用，仅用于无损存档 02. JPEG / JPG 格式 • 有损压缩，丢弃人眼不易察觉细节 • 压缩比高，兼顾画质与体积，兼容性强 • 文件小巧，是网络场景首选 • 适用于网页、摄影分享、邮件等 核心差异总结：BMP：极致画质，体积大，适合存档；JPEG：体积小，画质稍损，适合网络传输与日常使用。 知识讲授：常见图像文件格式 PSD 格式 Photoshop原生格式，保留图层，支持无损修改。 核心优势：完整保留图层、蒙版等编辑信息，支持无损修改。 适用场景：适合保存需反复调整的设计源文件。 GIF 格式 支持动画与透明，体积小，加载快。 核心优势：体积小，支持动画与透明通道，加载快。 适用场景：适用于网页小图标、动态表情包等。 知识讲授：常见图像文件格式 TIFF / TIF 特点与优势：无损压缩，画质极高，兼容性强。 典型用途：印刷出版、广告设计、专业摄影存档。 PNG 特点与优势：无损压缩，支持透明，兼顾画质与体积。 典型用途：网页素材、UI界面、Logo及图标制作。 总结：TIFF注重专业与质量，适合印刷存档；PNG兼顾画质与透明，是数字屏幕展示的优选。 知识讲授：常见图像文件格式 PDF 文档格式 Portable Document Format 核心特点：跨平台与设备无关性 跨平台、设备无关、通用语言 突出优势：保真度高与兼容性强 高保真、兼容性强、效果一致 主要用途：文档交换与长期归档 文档交换、长期归档、电子发布 知识讲授：七种常见格式对比总表 格式 压缩方式 颜色 透明 动画 图层 主要用途 BMP 无 真彩色 不支持 不支持 不支持 无损存储，适合保留原始图像数据 JPEG 有损 真彩色 不支持 不支持 不支持 网页展示、摄影作品，兼顾画质与体积 PSD 无/有损 全部 支持 不支持 支持 专业图像编辑的源文件格式，可保存分层信息 GIF 无损(LZW) 256色 支持 支持 不支持 网页图标、简单动画、低色彩要求的图形 TIFF 无/无损 全部 支持 不支持 支持 专业印刷、高品质图像存储，色彩还原精准 PNG 无损 真彩色 支持 不支持 不支持 网页素材、UI设计、需要透明背景的图像 PDF 无/有损 全部 支持 支持 不支持 跨平台文档交换、专业印刷排版，版式稳定 知识背诵 颜色模式 •RGB: 用于屏幕显示（网页、UI）。 •CMYK: 用于实体印刷（海报、书籍）。 •Lab: 用于专业色彩管理。 常见格式 •JPEG: 用于照片。 •PNG: 用于透明背景图、Logo。 •GIF: 用于动画、表情包。 •TIFF: 用于专业印刷。 •PSD: 用于Photoshop编辑保存。 •SVG: 用于无限缩放的矢量图。 师生互动：实战演练：为场景选择合适格式 场景一：网页产品图（小体积、快加载） 需求：小体积、快加载 场景二：未完成的多图层海报编辑 需求：保留图层、可编辑 场景三：印刷厂的高质量彩色照片输出 需求：高保真、专业印刷 场景四：网络传播的动态表情包制作 需求：动态效果、小体积 推荐：JPEG 推荐：PSD 推荐：TIFF / PDF 推荐：GIF 课堂练习 一、填空题 1. RGB模式有____个颜色通道，CMYK模式有____个颜色通道，Lab模式有____个颜色通道。 2. Photoshop的专用格式是______，支持动画和透明的网页格式是______，跨平台交换文件的常用格式是______。 二、判断题 3. RGB模式适合屏幕显示，CMYK模式适合印刷输出。（ 　） 4. JPEG采用有损压缩，文件小，是网页最常用的格式之一。（ ） 5. PSD是Photoshop专用格式，可以保留图层、通道、蒙版等所有信息。（ ） 3 PSD × √ × 4 3 PDF GIF 课堂小结 知识梳理 1. 分辨率（显示/图像/输出） 2. 颜色位深度（2n：1位→2色、4位→16色、8位→256色、16位→65536色、24位→真彩色） 3. 颜色模式（RGB/CMYK/Lab + 位图/灰度/双色调/索引颜色/多通道） 4. 图像文件格式（BMP/JPEG/PSD/GIF/TIFF/PNG/PDF） 总结提升：理解图像的基础知识，是成为图像处理高手的第一步，也是做出专业级作品的前提。 课后作业 01 / 基础作业 背诵两个课时的全部知识点（矢量图与位图的区别、三种分辨率、颜色位深度公式及各深度对应颜色数、三种主要颜色模式、五种其他颜色模式、七种文件格式），下节课抽查。 02 / 操作作业 从网上下载或自己保存JPEG、PNG、GIF三种格式的图片各一张，用Photoshop打开查看其颜色模式和通道信息，简要说明每种格式的特点和适用场景，写在作业本上。 ” 感谢观看 THANKS FOR WATCHING 愿技术照亮前行的路 · 期待与您再次相遇 Lavf59.16.100 Packed by Bilibili XCoder v2.0.2 $