基础知识
本章目标
完成本章内容以后，您将：
掌握常用的图片文件格式。
掌握常用的色彩模式。
掌握拾色器的使用。
会使用Photoshop保存不同格式的文件。
第 1 章
本章素材下载
请访问课工场UI/UE学院：kgc.cn/uiue
（教材版块）下载本章需要的案例素材。
本章简介
Photoshop 是 Adobe 公司推出的图像编辑、网页制作和图像合成及特效制作软件。
它横跨平面与网页多媒体的设计领域，是一种全球标准的图像编辑解决方案。
作为专业的图像编辑软件，Photoshop 是网页设计师和平面设计师最常用的工具之一。
在网页设计方面主要是对网页图像进行处理及制作，包括网站版式设计、导航按钮制作、
GIF 动画制作等。
网站访问量决定了其生存的空间，而决定这一切的根源在于网站设计及其开发过程。
网站的设计及开发过程也称为网站的设计流程，如图1.1 所示。
图1.1 网站设计流程图
客户需求分析 网站策划
客户资料收集 设计准备
网站首页设计 主栏目页设计
网站 视觉设计
网站 页面制作
数据库 功能开发
网站测试 正式发布
根据在网站设计过程中针对的侧重内容不同，可以将其划分为三个阶段。
准备阶段（需求分析、总体设计、素材整理）。
实施阶段（网页设计、程序开发、测试、发布）。
维护阶段（需求变更、设计变更、程序变更、测试、重新发布）。
网站设计实际上就是设计整个网站的蓝图，即主页、其他网页及网页间的关系。先设 计网站的整体结构再绘制草图。利用Photoshop 设计效果图，正是处在整个流程第 3 步——
网站视觉设计上。那么怎样使用Photoshop 来设计网页呢？在了解了 Photoshop 制作网页 这一环节在网站设计流程中的地位之后，本章将先介绍Photoshop 中一系列常见的位图文 件格式和图像色彩模式，然后介绍Photoshop 操作面板布局以及基本操作。
理 论 讲 解
1.1 转换色彩模式给紫藤女孩变色
素材准备
“素材- 紫藤女孩 .jpg”如图 1.2 所示。
完成效果
完成效果分别如图1.3 和图 1.4 所示。
章
第 2 章
第 4 章
第 6 章
第 8 章
第 10 章
第 12 章
第 14 章 第 3 章
第 5 章
第 7 章
第 9 章
第 11 章
第 13 章
第 15 章
第 16 章 图1.2 素材 - 紫藤女孩 .jpg（RGB 模式） 图 1.3 素材 - 紫藤女孩（CMYK 模式） 图 1.4 素材 - 紫藤女孩（灰度模式）
案例分析
在网页设计中，要处理大量的图片素材，无论是处理单张图片还是设计一个复杂的网 页，Photoshop 都是首选工具。该案例将素材图片由 RGB 色彩模式转换为 CMYK 色彩模 式和灰度模式。要在Photoshop 中实现该效果，需要经过打开文件、转换图像的色彩模式、
存储文件等基本操作。相关理论讲解如下。
1.1.1 Photoshop 软件介绍
Adobe 是 全 球 最 大、 最 多 元 化 的 软 件 公 司 之 一， 代 表 产 品 包 括 Photoshop、
Illustrator、Indesign 等。
Photoshop 是一款功能强大的图形处理软件，被称为“图像元老”。它集图像编辑、
网页制作、图像合成和特效制作于一身，横跨平面与多媒体设计领域，是一种全球标准 的图像编辑解决方案。使用Photoshop 绘制或处理后的图像效果，颜色鲜明、形象生动，
能够带给观者很好的视觉效果，如图1.5 和图 1.6 所示。
图1.5 CG 少女 图1.6 星空图
在网页设计方面，Photoshop 主要是对网页图像进行处理及制作，包括网站版式设计、
导航按钮制作、GIF 动画制作等。网站的视觉设计决定了网站整体的页面风格和展示效果，
而一个设计精美、独具个性、能够给人留下深刻印象的网站，也必然会得到用户的认可。
例如在日常生活和工作中，经常会使用的Google 搜索、淘宝购物等，如图 1.7 和图 1.8 所示。
Google 是一个全球互联网搜索引擎 ；淘宝网是近年来年轻潮人最爱的购物网站。两 个网页风格迥异，一简一繁，却各自拥有大量的用户群，这和它们各自的内容、功能、针 对的消费人群以及设计风格等有关。但是，无论简单还是复杂的页面，都是由网页的基本 元素构成的，而这些网页元素均可以使用Photoshop 工具进行制作和处理，最终组合成 一个多彩炫目的网页。
图1.7 Google 主页
图1.8 淘宝主页
章
第 2 章
第 4 章
第 6 章
第 8 章
第 10 章
第 12 章
第 14 章 第 3 章
第 5 章
第 7 章
第 9 章
第 11 章
第 13 章
第 15 章
第 16 章
在日常的生活中存在多种不同类型的图片文件格式，不同格式的图片文件所呈现出来 的视觉效果不同。在网页设计过程中，经常使用的图片格式有三种。
GIF（.gif）：支持背景透明 ；可以将单帧的图像组合起来轮流播放每一帧而成 为动画 ；支持图形渐进，可以让浏览者更快地知道图像的概貌 ；支持无损压缩。
GIF 格式的缺点是只有 256 种颜色，这对于高质量的图像来说是不够的。
JPEG（.jpg）：支持上百万种颜色，压缩比相当高，且图像质量受损不太大，适 合于照片 ；但经过压缩的JPEG 图像一般不适合打印，在备份重要文件时也最好 不要使用JPEG。
PNG（.png）：一种新型 Web 图像格式，结合了 GIF 的良好压缩功能和 JPEG 的无限调色板功能。
除了以上三种应用比较广泛的图片格式外，在日常工作中，还有其他几种常用到的图 片文件格式，分别为BMP、PSD、TIFF。这些格式的图片文件通常应用于专业性较高的 场合。
不同格式图像的展示效果不同，各自的适用场合也有所不同，见表1-1。
表1-1 常用图片文件格式比较
文件类型 优点 缺点
GIF 适用于网页 ； 支持背景透明 ； 支持动画 ； 支持图形渐进 ； 支持无损压缩
只有256 种颜色
JPEG 适用于网页 ； 支持上百万种颜色 ； 有损压缩，文件小，质量好
有损压缩不可恢复 ； 不支持背景透明 ； 不支持动画 ； 不支持图形渐进 PNG 适用于网页 ；
良好压缩功能 ； 无限调色板功能
不支持动画
PSD 适合印刷 ； 便于再次编辑
文件太大，不适用于网页
BMP 使用广，支持模式较多 ； 无压缩
文件太大，不适用于网页
TIFF 多种程序支持 ； 有图层，可修改压缩
文件太大，且兼容性差，不适用于网页
1.1.3 色彩模式介绍
在使用Photoshop 设计网页的过程中，需要应用和处理各种色彩模式的图片素材。只 有了解了不同的颜色模式，才能精确地描述、修改和处理色调，才能把网页设计得更加美观。
在实际工作中应用的色彩模式主要有以下几种。
1．RGB 色彩模式
RGB 色彩模式是屏幕显示的最佳模式，它由三种基本颜色组成：R（红）、G（绿）、B（蓝），
在屏幕上出现的颜色都是由改变这三种基本颜色的比例值形成的。
2．CMYK 色彩模式
CMYK 颜色分别表示 Cyan（青）、Magenta（洋红）、Yellow（黄）、Black（黑），在 印刷中代表四种颜色的油墨。CMYK 色彩模式是用于制作高质量彩色出版物的印刷油墨的 颜色模式。
3．Lab 色彩模式
Lab 色彩模式是一种独立于设备存在的色彩模式，不受任何硬件性能的影响。Lab 中 的数值描述正常视力的人能够看到的所有颜色。由于其能表现的颜色范围最大，因此在 Photoshop 中，Lab 颜色模式是从一种颜色模式转变到另一种颜色模式的中间形式。
4．灰度模式
灰度模式在图像中使用不同的灰度级。在8 位图像中，最多有 256 级灰度。灰度图 像中的每个像素都有一个0（黑色）到 255（白色）之间的亮度值。要将彩色图像转换成 高品质的黑白图像，Photoshop 会扔掉原图像中所有的颜色信息，被转换像素的灰度级（色 度）表示原像素的亮度。
转换图像色彩模式的具体方法如下。
（1）选择菜单“文件”→“打开”，在“打开”对话框的“查找范围”中选择本章素材“素 材- 麦兜 .jpg”，如图 1.9 所示。
（2）单击“确定”按钮，打开素材图片，如图 1.10 所示。
图1.9 打开“素材 - 麦兜 .jpg” 图1.10 素材 - 麦兜 .jpg
章
第 2 章
第 4 章
第 6 章
第 8 章
第 10 章
第 12 章
第 14 章 第 3 章
第 5 章
第 7 章
第 9 章
第 11 章
第 13 章
第 15 章
第 16 章
中显示有打勾的“RGB 颜色”，就是当前图像的 色彩模式。
（4）在“模式”子菜单中选择“CMYK 颜色”，
弹出询问对话框，如图1.12 所示。
（5）单击“确定”按钮，图像的色彩模式转 换为CMYK 色彩模式，如图 1.13 所示。
（6）选择菜单“文件”→“存储为”（Shift+
Ctrl+S），弹出“存储为”对话框，将名称改为“素 材- 麦兜 CMYK”，如图 1.14 所示。
（7）单击“确定”按钮，保存文件。
图1.13 转换图像为 CMYK 色彩模式 图1.12 询问对话框
图1.14 “存储为”对话框
1.1.4 实现案例——转换色彩模式给紫藤女孩变色
结合上节的内容，在此案例的操作中，掌握如何转换图片的色彩模式。
素材准备
“素材- 紫藤女孩 .jpg”如图 1.2 所示。
完成效果
完成效果分别如图1.3 和图 1.4 所示。
图1.11 “模式”子菜单命令
思路分析
打开文件。
转换文件的色彩模式。
保存文件。
实现步骤
（1）选择菜单“文件”→“打开”（Ctrl+O），在“打开”对话框中选择本章素材图片
“素材- 紫藤女孩 .jpg”，如图 1.15 所示。单击“确定”按钮，打开素材文件。
（2）选择菜单“图像”→“模式”→“CMYK 颜色”，在弹出的询问对话框中单击“确 定”按钮，将图像转换为CMYK 色彩模式，效果如图 1.16 所示。
（3）选择菜单“文件”→“存储为”（Shift+Ctrl+S），将名称改为“素材 - 紫藤女孩（CMYK 模式）”，单击“确定”按钮，保存文件。
图1.15 打开素材 - 紫藤女孩 .jpg 图1.16 转换为 CMYK 色彩模式
（4）选择菜单“图像”→“模式”→“灰度”，弹出询问对话框，如图 1.17 所示。
图1.17 询问对话框
（5）单击“确定”按钮，图片的色彩模式转换为灰度模式，效果如图 1.18 所示。
章
第 2 章
第 4 章
第 6 章
第 8 章
第 10 章
第 12 章
第 14 章 第 3 章
第 5 章
第 7 章
第 9 章
第 11 章
第 13 章
第 15 章
第 16 章
图1.18 转换为灰度模式
注意 RGB 色彩模式是屏幕显示的最佳模式，CMYK 色彩模式则是用于制作高质 量彩色出版物的印刷油墨的色彩模式。两种色彩模式在计算机屏幕上看起来差别 不是很明显，但应用的场合有所不同。
（6）选择菜单“文件”→“存储为”（Shift+Ctrl+S），将名称改为“素材 - 紫藤女孩（灰 度模式）”，单击“确定”按钮，保存文件。
注意 图像在进行色彩模式转换时会损失一些颜色信息；当彩色图像转换成灰度图 像以后，Photoshop 会扔掉原图像中所有的颜色信息，灰度图像将不能再转换为 彩色图像。
1.2 使用辅助工具制作彩旗图案
完成效果
完成效果如图1.19 所示。
素材准备
该案例中我们绘制了一面彩旗。实现如图1.19 所示效果，
主要使用了参考线、矩形选框工具和拾色器等工具。相关理论 讲解如下。
1.2.1 Photoshop操作面板
到 目 前 为 止， 我 们 已 经 了 解 了 很 多 关 于Photoshop 软件的相关知识，那么到底 Photoshop 是什么样子呢？下面就通过对操作面板的讲解来认识一下 Photoshop 吧。
Photoshop 是一个可视化的操作工具，提供了一个强大的、集合了很多工具及菜单的 操作面板，通过操作面板可以基本实现文件的处理操作。当Photoshop 启动后，首先展 示的就是操作面板，如图1.20 所示。
图1.19 彩旗图案
图1.20 Photoshop 的操作面板
为了方便使用，根据功能和作用的不同，对操作面板又进行了详细划分。接下来先介 绍工作区、工具调板、拾色器、颜色调板和辅助工具。
1．工作区
使用Photoshop 设计网页时， 可以使用调板、菜单栏以及窗口等元素来创建和处理文 档和文件，这些元素的任何排列方式统称为工作区。
第一次启动Photoshop 时工作区是默认设置，可随时根据个人喜好调整工作区。如 果想恢复默认设置，通过选择菜单“窗口”→“工作区”→“复位基本功能”来恢复。
Photoshop 默认工作区如图 1.21 所示。
其中 ：
A．菜单栏 ：位于顶部的菜单栏用于组织菜单里的命令。
B．“工具”调板 ：包含用于创建和编辑图像、图稿、页面元素等的工具，Photoshop 将相关工具编为一组。
C．文档窗口 ：显示正在编辑的文件。
D．工具选项栏 ：显示当前所选工具的选项。
E．停放折叠为图标的调板。
F．调板标题栏 ：鼠标长按调板标题栏，可移动调板位置。
G．“折叠为图标”按钮。
H．垂直停放的三个调板组。
