资源简介

(共16张PPT)
图形图像处理项目式教程
网
店
美
工
初识网店美工
【项目一】
项目
了解数字图像的
基础知识
任务 2
项目一 初识网店美工
01
02
访问京东、天猫商城、苏宁易购等购物网站，查看网站图片常用的图像格式，初步了解数字图像的基础知识。
◇ 了解像素与分辨率的概念。
◇ 区分位图与矢量图。 ◇ 了解图像的颜色模式。 ◇ 区分不同格式的图像
任务描述
任务目标
任务二 了解数字图像的基础知识
项目一 初识网店美工
02
04
03
01
步骤1
打开京东购物网站（www.）。
步骤3
点击任意商品主图进入商品详情页，采用步骤 2 的方法下载商品详情页图片。
步骤4
查看下载的所有图片，总结归纳网店中所用图片的图像格式。
步骤2
首先将鼠标移至该网站首页轮播图上并单击鼠标右键，然后从弹出的快捷菜单中选择“图片另存为”项，在打开的“另存为”对话框中设置图片的存储位置和文件名，最后单击“保存”按钮下载图片，如图 1-2 所示。采用同样方法下载除轮播图外的其他图片。
任务实施
任务二 了解数字图像的基础知识
项目一 初识网店美工
图 1-2 下载图片
任务二 了解数字图像的基础知识
项目一 初识网店美工
提示
1.下载图片时，有时会碰到“.webp”格式的图片。这是一种同时提供了有损压缩与无损压缩的图片文件格式，其主要优势在于，可以在不影响图片实际清晰度的情况下进行压缩，从而让整个网页运行速度加快。
2.点击京东购物网站首页上的商品主图，有时进入不了商品详情页，而是进入了店铺首提示页，此时再点击店铺首页中的商品主图即可进入商品详情页。
任务二 了解数字图像的基础知识
项目一 初识网店美工
一、数字图像术语
任务二 了解数字图像的基础知识
项目一 初识网店美工
像素（pixel）是一个有着固定位置和色彩数值的小方格子，是组成图像（位图）的基本单位。像素的多少决定了图像的大小，像素在单位面积上的密度（点密度）决定了图像的分辨率。单位面积内像素个数越多，分辨率越高，图像在屏幕上显示得就越清晰；相反，单位面积内像素个数越少，分辨率越低，图像就越模糊，如图 1-3 所示。
1．像素与分辨率
任务二 了解数字图像的基础知识
项目一 初识网店美工
提示
网店图片主要用于网络传播和屏幕显示，通常将其分辨率设置为 72ppi（像素 / 英寸）提示即可。
一、数字图像术语
任务二 了解数字图像的基础知识
项目一 初识网店美工
位图是由许多个像素组成的，放大位图后可以看到组成它的像素，这就是马赛克效果，如图 1-4 所示。日常生活中，人们所拍摄的数码照片、扫描的图像等都属于位图。位图具有表现力强、色彩细腻、层次多且细节丰富等优点，其缺点是图像的像素越多则文件越大，且进行缩放时会损失图像的细节内容。常见的位图格式有“.jpg”“.gif”“.psd”“.bmp”“.tif”等。
2．位图与矢量图
一、数字图像术语
任务二 了解数字图像的基础知识
项目一 初识网店美工
矢量图主要是用 Illustrator、CorelDRAW 等矢量绘图软件绘制的。矢量图具有文件小、按任意分辨率打印都清晰（与分辨率无关）的优点，常用于设计标志、插画、卡通形象和商品效果图等。矢量图的缺点是色彩单调，细节不够丰富，如图 1-5 所示。常见的矢量图格式“.ai”“.cdr”“.eps”等。
2．位图与矢量图
二、图像的颜色模式
任务二 了解数字图像的基础知识
项目一 初识网店美工
颜色模式是指记录图像颜色的方式。
6．索引颜色模式
1．RGB 颜色模式
2．CMYK 颜色模式
3．Lab 颜色模式
4．灰度模式
5．位图模式
7．HSB 颜色模式
RGB 颜色模式是使用最广泛的一种颜色模式，常用于屏幕显示，如电视、电脑等。在该模式下，图像的颜色由红（red）、绿（green）、蓝（blue）三原色混合而成。R、G、B 3 种原色的取值范围均为0 ～ 255。
CMYK 颜色模式也称四色模式，C、M、Y、K 分别对应印刷上的 4 种油墨颜色，其中 C 为青色.
Lab 颜色模式由三个通道组成，一个通道是亮度，即 L（luminosity），另外两个是色彩，用 a 和 b表示。
灰度模式是指图像中的色彩信息全部被扔掉，只用黑、白、灰的亮度等级来表现图像的模式。灰度模式最多可以显示 0（黑色）～ 255（白色）的亮度值。
位图模式是指图像中只有黑、白两种像素的模式，也叫黑白图像。其他颜色模式转为位图模式后会丢失大量细节信息，故在同尺寸不同模式下位图的文件量最小。
索引颜色模式是一种用于减小图像大小的有损压缩模式，通常将颜色控制在 256 色以内，对于超出的颜色，系统会从这 256 色当中选取一个最接近的颜色代替。
HSB 颜色模式是基于色彩构成中色彩的三要素进行表述的。H 表示色相（hue）；S 表示饱和度（saturation）；B 表示明度（brightness）.
任务二 了解数字图像的基础知识
项目一 初识网店美工
三、常见的图像格式
1
3
5
2
4
6
PSD 格式
PSD 格式是 Photoshop 的专用格式，是可以再次编辑的文件格式，它包含了图层、通道、蒙版、样式等原始图像信息，适合存储未完成的文档。
GIF 格式
GIF 格式是一种无损压缩格式，能在不影响图像质量的前提下生成很小的文件，且支持透明图层，
可以使图像漂浮于背景之上。
PNG 格式
PNG 格式是一种无损压缩图像格式，可以在不影响图像质量的情况下将文件压缩到极致。这种格式的图片只需下载图像信息的 1/64 即可显示低分辨率的图像，显示速度极快，且同样支持透明背景。
JPEG 格式
JPEG 格式是一种压缩率很高的图像格式，在保存图像时，能够将很多肉眼无法分辨的图像像素删除，从而高效地压缩文件。
TIFF 格式
TIFF 格式是一种应用非常广泛的图像格式，几乎所有的扫描仪和图像处理软件都支持该格式。它采用无损压缩方式存储图像信息，可支持多种颜色模式，可保存图层和通道信息，可设置透明背景。
BMP 格式
BMP 格式是一种无压缩位图格式，最早应用于 Windows 系统，在 Windows 系统下运行极为稳定，是 Windows 系统中交换图形数据的标准。因此，Windows 主流图像处理软件都支持此格式。
图像格式是指图像文件存储的格式。
项目一 初识网店美工
任务二 了解数字图像的基础知识
提示
观察图像时，可先列出两种图像存储格式的优缺点，如文件大小，再进行对比。另外，条件允许的情况下，也可自行搜索网络素材进行比较。
课后实训-
比较图像存储格式的区别
本实训通过观察并对比同一画面但不同存储格式的图像（本书配套素材“素材与例”→“项目一”文件夹中的“水果 .jpg”和“水果 .tif”），巩固图像存储格式的知识
项目一 初识网店美工
课堂小结
（1）图像的颜色模式
（2）常见的图像格式
谢
谢
聆
听

展开更多......

收起↑