第14章 Web图形处理与切片
教学大纲精选
教学大纲精选集团标准化小组：[VVOPPT-JOPP28-JPPTL98-LOPPNN]《A I》教学大纲教学学时：共102节，其中讲授32节。
适用专业：广告设计开课教研组：一、课程性质和任务本课程是针对图形设计的课程，实践性较强，此软件已广泛用于广告、图形设计、编排设计、插画设计等领域，illustrator的基本功能和使用方法的学习，为在今后的广告行业中占有极为重要的地位。
二、课程教学目标本课程的教学目标是：通过系统学习，牢固掌握软件应用方面的专业知识，培养学生的图形处理能力，掌握图形处理的基本技术，可以对平面广告设计中的编排、图形、插画作电脑辅助表达，使学生在掌握基础知识的情况下，激发学生的动手动脑的创造和想象空间，为今后在网络技术、广告平面设计等方面的工作打下基础。
(一)知识教学目标通过系统学习使学生能做到基本掌握该软件的知识结构框架及要点，理解不同章节的重点和难点。
(二)能力培养目标通过讲解辅导与作业练习，要使学生能对该软件熟练掌握操作方法、灵活应用知识技巧，加深对本课程的理解，提高对lllustrator软件的应用能力。
（三）思想教育目标1、具备一定的艺术设计能力和思维能力。
2、学习设计师对艺术设计的创作热诚。
三、课程内容第一章IllustratorCS5的基础1、教学内容I本章将对illustratorCS5的基础知识进行讲解，包括illustratorCS5的新增功能、启动与退出等内容。
2、教学目的与要求1)认识illustrator的界面风格，其中包括界面的总体布局，工具箱、设置栏以及各种不同的调板。
2)能够熟练地了解illustrator的各个组成部分。
3）了解illustrator的基本用途，是学生对illustrator的学习产生兴趣。
3、重点、难点重点：1）IllustratorCS5的基础2）图像处理基础知识3）IllustratorCS5的工作界面难点：1）illustratorCS5的新增功能2）图像分辨率第二章文件的基本操作1、教学内容本章将介绍文件操作，对象操作、视图及页面辅助工具等2、教学目的与要求在于介绍并且让学员掌握illustratorCS5的一些基本文件操作方法，如文件和页面的管理、视图的显示操控、辅助工具的应用等。
《网页设计与编辑》课程标准
重庆三峡职业学院《网页编辑与设计》课程标准课程学分：8总学时：128适用专业：计算机应用技术专业一、前言1、课程性质网页编辑与设计是高职高专计算机应用技术专业的主干专业课程，旨在培养学生的网页制作的WUI网页界面设计及编辑、Flash网站动画设计和动态网站开发基础的技能，使学生掌握Dreamweaver网页设计软件的操作和网页图形设计以及网站整体开发思路和测试发布的方法，熟练掌握Web图形的设计和制作方法，学会利用图形设计工具和Flash动画编辑设计Banner广告条和Web导航条和网页图标等设计；通过学习，使学生掌握Web网站建设的基本方法，掌握网页制作工具的使用方法和技巧，熟悉建站流程和网站服务器基础、动态网站开发基础，培养学生设计网站的能力，同时培养学生的方法能力、社会能力及职业素质。
2、设计思路本课程以“基于工作过程”为指导，邀请行业专家对计算机应用技术专业所涵盖的岗位群进行工作任务和职业能力分析，并以此为依据确定本课程的工作任务和课程内容。
根据计算机应用技术专业所涉及到的网页设计和网站开发技术的运用与web图形图像处理的技能与知识内容，设计若干个学习情境，实施情境化教学，使学生掌握网站开发工具的操作方法、界面设计及处理技术的技能以及相关的专业知识，同时培养学生职业素质，锻炼学生的方法与社会能力。
3、典型任务本课程设计中注重由知识本位向能力本位转化，由知识的划分转向工作任务的划分转化。
以任务引领为基本取向，将所要传授的新知识隐含在一个或几个任务中，学生通过任务引领实现对所学知识的构建。
课程实施中以学生为中心，以完成工作任务的活动为过程，创设真实工作环境，边讲边练，融“教、学、做”为一体。
（1）根据网站项目开发过程，构建了可根据岗位需求变化和教学实际情况灵活组合动态调整的模块化的课程结构：分为6大教学模块、16个教学单元。
（2）课程教学采用了基于3个真实产品的任务驱动型项目教学法。
教学内容与教学方法、教学手段相结合，同时还实施启发式教学法、理论实践一体化教学法、小组协作型教学法等方法。
Photoshop图形图像设计与项目实践 习题解答
2．数字图像可分为（A）和（B）两种类型。 A.位图 B.矢量图 C.黑白 D.彩色
3.在 RGB 色彩模式中，RGB（0,255,0）表示（B） A.红色 B.绿色 C.蓝色 D.橙色
。
5.单击路径面板上的填充路径按钮，可以使用前景色、背景 色、图案等填充路径。 6.当使用图案填充路径时，先用选框工具选取需要使用的图 案， 然后选择 “编辑” 菜单下的定义图案菜单命令定义图案， 定义好后再选择填充路径操作。 第六章图像色彩和色调的调整 一．选择题 1．选择（C）命令，可以调整图像中单个颜色成分的色相、 饱和度和明度。 A.亮度\对比度 B.色阶 C.色相/饱和度 D.可选颜色
4.在使用钢笔工具绘制路径时，按住（B）键的同时可以绘制 水平、垂直或 45 角的直线路经。 A.Ctrl 二．填空题 1.在绘制的路径未闭合之前，按住键盘中的 Ctrl 键，然后将 鼠标光标移动到文件中的任意位置单击鼠标左键，可以绘制 出不闭合的路径。 2.当利用磁性钢笔工具创建路径时，按键盘中的 M 键可将磁 性钢笔的宽度减小 1 像素；按键盘中的 N 键，可将磁性钢笔 的宽度增加 1 像素。 3.路径上的锚点可以分为角点和平滑点两种，角点两侧的路 径为直线；平滑点两侧的路径为曲线。 4.利用转换点工具在路径的平滑点上单击，可以将平滑点转 换成角点；在角点上按住鼠标左键拖拽，可以将角点转换成 平滑点。 B是由许多点组成的，这些点称为像素。像素的大 小取决于像素的（B） A.大小 B.多少 C.形状 D.颜色
8. （D） 文件格式适用于在应用程序之间和计算机平台之间的 交换文件，它的出现使得图像数据交换变得简单。 A.JPEG B.PNG C.PSD D.TIFF
PS切片工具的基础知识
PS切片工具的基础知识在网页中处理图片时，如果文件很大，它加载的时候需要的时间就会长，尤其是用户网速比较慢的时候。
你可以通过压缩来减小文件大小，但是这会使图像质量受到影响，压缩文件也要适可而止。
因此你需要注意以下几个问题：一是实际文件的大小;二是分辨率;三是压缩。
解决这个问题的方法就是把图片分割，它将允许你在加载图片的时候可以一片一片地加载，直到整个图像出现在你的屏幕上。
一、它的使用原理首先概述下它的工作原理，当你有一个需要花很长时间来加载的大图像时，你可以使用Photoshop中的切片工具把图像切成几个小图。
这些图像将被作为一个单独的文件保存，还可以进行优化通过保存为中Web所用格式。
此外，Photoshop生成HTML和CSS以便用来显示切片图像。
在网页中使用时，图像通过使用前面提到的HTML或CSS在浏览器中重新组合以便达到一个平滑流畅的效果。
下面是一个关于图像切片的例子。
二、切片的基础知识为了简单起见，我们只在一个图上使用切片工具。
在这个例子中，我使用的图片大小为960x722px。
在我们开始之前你需要了解一些知识:a.在创建切片时，你可以使用切片工具或构建使用层。
b.切片可以选择使用选择工具来选中。
c.你可以移动它，设置它的大小，还可以让切片与其他切片对齐。
而且你还可以给切片指定一个名称，类型和URL。
d.每个切片都可以通过保存时的网页对话框进行优化设置。
按下键盘上的C键，选中裁剪工具，右键选择切片工具。
当您创建切片时，你可以进行如下三个样式设置:正常，固定长宽比和固定大小。
a.正常:随意切片，切片的大小和位置取决于你在图像中所画的框开始和结束的位置b.固定长宽比:给高度和宽度设置数字后，你得到的切片框就会是这个长宽比c.固定大小:固定设置长和宽的大小当分割图像时你会碰到一些选项。
如果精确度不那么重要时，你可以手工切片图像，必要的时候，可以使用切片选择工具对已完成的切片图像进行调整。
如果精确度很重要，可以使用参考线在图像上标出重要的位置。
《图像处理》课程标准
图像处理课程标准课程代码：建议课时数：136（两学期，每学期68）学分：8适用专业：电子商务、计算机应用先修课程：计算机基础、美术后续课程：网页设计与制作、电子商务运营综合技能训练一、前言1、课程的性质《图像处理》课程是江苏省五年制高职电子商务专业的一门主干专业课程。
通过学习，学生要正确理解图像处理技术的基本概念和术语，熟练掌握图像处理的基本操作方法和技巧，具有较强的处理图像的综合操作能力，并初步形成设计意识和思维，此外，通过本课程的学习，培养学生踏实认真、精益求精、团结合作、创新精神，培养良好的职业素质。
2.设计思路本课程的设计体现“以能力为本位、以职业实践为主线、以项目课程为主体”，引入企业项目，每个项目通过真实的案例展开，通过系统的分析企业需求、构画设计立意到完成最终作品，让学生了解完整的设计流程。
项目根据学习进度设置阶梯状操作难度，通过实践操作掌握商务知识、PS基本概念和平面设计相关知识等。
该课程分两学期讲授，第一学期主要讲授图像处理软件工具的应用，第二学期主要通过具体项目讲授设计的理念及技巧。
教学中立足学生实际，注重学生自主学习、合作学习和个性化教学，根据进阶项目的逐个完成，培养学生学习自主性、创造性和成就感，发展职业能力，提高学生的就业竞争力和综合素质。
二、课程目标1、知识目标：1）熟悉PS工作环境；2）理解工具箱内工具的作用和常用控制面板的功能；3）理解色彩的基本概念和色彩调整的知识3）理解图层、蒙版、滤镜、路径、通道的概念、特点及其作用；4）理解切片在网页图像中的作用；5）理解动作、批处理的作用。
2、能力目标：1）熟练使用PS工具箱中的工具、各主要菜单处理图像；2）熟练使用图层、蒙版、滤镜、路径等进行图像编辑和处理；3）了解通道在图像编辑中的应用；4）掌握切片技术在网页图像中的使用方法；5）掌握动作、批处理在网站建设中批处理图像的方法。
3、素质目标：1）具有勤奋、精益求精、创新的学习的态度；2）具有良好的心理素质和职业道德素质；3）具有高度责任心和良好的团队合作精神；4）具有一定的科学思维方式和判断分析问题的能力；5）具有较强的图像创意思维、艺术设计素质。
第12课：切片、变换图像和热点
创建和编辑切片
切片将 Fireworks 文档分割成多个较小的部分并将每部分导出为单独的文件。导出时， Fireworks 还创建一个包含表格代码的 HTML 文件，以便在浏览器中重新组合图形。
切片将一个文档分割成多个部分，它们都以单独文件的形式导出。 将图像切片至少有三个主要优点： “优化” 网页图形设计的挑战之一是在确保图像快速下载的同时保证质量。切片 使您可以使用最适合的文件格式和压缩设置来优化每个独立切片。有关更多信息， 请参阅优化和导出。 “交互性” 您可以使用切片来创建响应鼠标事件的区域。有关如何使切片具有交 互性的信息，请参阅使切片交互。 “更新网页的某些部分” 切片使您可以轻松地更新网页中经常更改的部分。例如， 贵公司的网页中可能包含每月更改一次的“本月雇员”部分。切片使您可以快速 更改雇员的姓名和照片而不用更换整个网页。
创建 HTML 切片
HTML 切片指定浏览器中出现普通 HTML 文本的区域。HTML 切片 不导出图像，它导出出现在由切片定义的表格单元格中的 HTML 文 本。 若要创建 HTML 切片：
1. 2. 3. 4.
5.
绘制切片对象并将其保留为选定状态。 在“属性”检查器中，从“类型”弹出菜单中选择“HTML”。 单击“编辑”。 在“编辑 HTML 切片”窗口中键入文本，如果需要，通过添加 HTML 文 本格式设置标记来设置文本的格式。 注意：或者，可以在使用文本编辑 器或 HTML 编辑器（如 Macromedia Dreamweaver）导出 HTML 后，将 HTML 文本格式设置标记添加到 HTML。 单击“确定”以应用更改并关闭“编辑 HTML 切片”窗口。 您输入的文 本和 HTML 标记以原始 HTML 代码的形式出现在 Fireworks PNG 文件中 切片的正文上。 注意：在不同的浏览器以及不同的操作系统中查看 HTML 文本切片时， 它们的外观可能会有所变化，这是因为浏览器中可以设置字体大小和类 型。
切片的导出
电子商务网页设计与制作
Design and Creation of E-commerce Web Pages
切片的导出
1
Content
2
导入：基础任务分析 切片的导出 切片的注意事项
导 入-基础任务分析
本次任务是承接前面的农 产品电商形象展示网站的首页 效果图切片，继续完成切片并 且导出。通过任务实施掌握 Photoshop的切片的导出以及相 关注意事项。
THIS IS
电子商务网页设计与制作
Design and Creation of E-commerce web pages
感谢收看
8
3
切片的导出
• 完成后的切片可以图片形式导出也可 以包含在网页形式导出，但是都不是直 接通过“文件|导出|导出为…”菜单命 令导出，而是选择“文件|导出|存储为 Web所用格式（旧版）…”命令
4
切片的导出
在“存储为Web所用格式”对 话框中，可以通过“抓手工具” 、“缩放工具”、“切片选择工 具”等来选择切片，右侧主要是 对不同图片格式的优化设置。点 选“存储”按钮后，在“将优化 结果存储为”的对话框中，可以 选“仅限图像”、“仅限HTML” 和“HTML和图像”，切片可以为 “所有切片”、“所有用户切片 ”和“选中的切片”。
6
切片的注意事项
2.切片如何使用 从浏览器窗口中页面显示没有问题
，但实际该页面是由各图片文件切片 拼成，可以通过Dreamweaver打开，在 拆分视图可以看到整个页面的布局混 乱，只是简单的拼接，如图所示。作 为实际的网页CSS3来进行页面 布局。
7
5
切片的注意事项
1.切片选择工具的使用
切片选择工具主要用于选择切片并 可对切片进行排列、提升、划分等相应 操作。在切片选择工具选项栏最前面的 四个是调整切片的堆叠顺序，有“置为 顶层”、“前移一层”、“后移一层” 和“置为底层”。可在有多层切片时， 进行指定和调整。注意的是，无法排列 自动切片的堆叠顺序。
PhotoshopCS2实用教程网页图像设计
从垂直标尺拖移以创建垂直参考线，如图11-8所示。
图11-8 创建垂直参考线
选择切片工具，在选项栏中单击“基于参考线的切片”，如 图11-9所示。
图11-9 根据拖出的参考线创建的切片
3.基于图层的切片 在处理翻转时，基于图层的切片特别有用。如果将诸如投影 或发光等效果应用于图层以创建翻转状态，切片将自动调整以包 含新的像素。 （1）在图层调板中选择图层，如图11-10所示。 （2）选取“图层”→“新建基于图层的切片”，结果如图 11-11所示。
11.1.3 创建切片 1.使用切片工具创建切片 在图像中使用切片工具拖出一矩形定义的切片称为“用户切
片”。一旦在一幅图像中定义了一个“用户切片”，Photoshop
或ImageReady就会把周围没有定义的区域生成为“自动切片”。 具体操作步骤如下： （1）在Photoshop CS2中，打开软件自带的ImageReady Files文件夹中名为Button Factory.psd的图像文件，如图11-2所示。 （2）选择切片工具箱中的切片工具，任何现有切片都将自动 出现在文档窗口中，01是灰色的自动切片，02、03、04、05为 用户切片，如图11-3所示。
图11-10
选择图层
图11-11
Hale Waihona Puke 新建基于图层的切片（3）单击工具箱中的按钮，进入ImageReady的编辑窗口， ImageReady用一个“图层切片”取代了“自动切片”。注意切 片左上角数字右侧的图标，它表示此切片（05）是一个“图层切 片”，如图11-12所示。“Web内容”调板，如图11-13所示。
图11-2 打开的图像文件
图11-3 现有切片都将自动出现在文档窗口中
（3）相应的工具选项栏，如图11-4所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第14章 Web图形处理与切片
14.2 切片的创建与编辑
为了使网页浏览更加流畅，在网页制作中往往不会直接使用整张大尺寸的图像。通常情况下都会将整张图像“分 割”为多个部分，这就需要使用到切片技术。切片技术就是将一整张图像“切割”成若干小块，并以表格的形式 加以定位和保存。
时单击并拖动即可复制出新
第14章 Web图形处理与切片
删除切片
1. 使用“切片选择工具”选择一个或多个切片以后，按 Delete 键或 Backspace 键可以删除切片。
2. 执行“视图 ” →“ 清除切片”命令，可以删除所有的用户切片和基于图层的切片。 3. 选择切片以后，单击鼠标右键，在弹出的菜单中选择“删除切片”命令，也可以删除切片。
第14章 Web图形处理与切片
锁定切片
1、执行“视图” →“锁定切片”命令，可以锁定所有的用户切片和基于图层的切片。 2、锁定切片以后，将无法对切片进行移动、缩放或其他更改。在切片上进行操作时会弹出对话框，提示无法移 动。 想 要 解 除 锁 定 切 片， 可 以 再 次 执 行“视图 ” →“ 锁定切片”命令。
第14章 Web图形处理与切片
基于图层创建切片
选择图层，执行“图层 ” →“新建基于图层的切片”命令，就可以创建包含该层所有像素的切片。基于图层创 建切片以后，当对图层进行移动、缩放、变形等操作时，切片会跟随该图层进行自动调整。
第14章 Web图形处理与切片
切片选择工具”按钮，在图像中单击选中一个切片。
第14章 Web图形处理与切片
详解“切片工具”
使用“切片工具”创建切片时，可以在其选项栏中设置切片的创建样式。
●正常：可以通过拖拽鼠标来确定切片的大小。 ● 固定长宽比：可以在“宽度”和“高度”文本框中设置切片的宽高比。 ●固定大小：可以在“宽度”和“高度”文本框中设置切片的固定大小。 ●基于参考线的切片：创建参考线以后，单击该按钮可以从参考线创建切片。
将自动切片转换为用户切片
要为自动切片设置不同的优化设置，必须将其转换为用户切片。使用“切片选择工具”选择一个或多个要 转换的自动切片。在选项栏中单击“提升”按钮，即可将所选的自动切片或图层切片提升为用户切片。
第14章 Web图形处理与切片
划分切片
“划分切片”命令可以将自动切片沿水平、垂直或同时沿这两个方向划分出用户切片。使用“切片选择工具”选 中某一切片。在选项栏中单击“划分”按钮，打开“划分切片”对话框。
第14章 Web图形处理与切片
在安全色状态下工作
（1）在“拾色器”中选择颜色时，可以选中底部的“只有 Web 颜色”复选框，选中之后可以始终在 Web 安全色下 工作。
第14章 Web图形处理与切片
（2）在使用“颜色”面板设置颜色时，可以在其菜单中选择“Web 颜色滑块”命令。“颜色”面板会自动切换 为“Web 颜色滑块”模式，并且可选颜色数量明显减少。
第14章 Web图形处理与切片
什么是切片
在 Photoshop 中存在两种切片：用户切片和基于图层的切片。用户切片是使用“切片工具”创建的切片，而基于图 层的切片是通过图层创建的切片。创建新的切片时会生成附加的自动切片来占据图像的区域，自动切片可以填充图像 中用户切片或基于图层的切片未定义的空间。每一次添加或编辑切片时，都会重新生成自动切片。用户切片和基于图 层切片由实线定义，而自动切片则由虚线定义。
按住 Shift 键的同时单击其他切片进行加选。
第14章 Web图形处理与切片
如果要移动切片，可以先选择切片，然后拖拽鼠标即可。
如果要调整切片的大小，可以拖拽切片定界点进行调整。
第14章 Web图形处理与切片
复制和粘贴切片
如果要复制切片，可以在使用“切片选择工具”状态下按住 Alt 键，待光标变为 的切片。
第14章 Web图形处理与切片
利用切片工具创建切片
选择“切片工具”，然后在选项栏中设置“样式”为“正常”，与绘制选区的方法相似，在图像中单击并拖拽 鼠标创建一个矩形选框。释放鼠标就可以创建一个用户切片，而用户切片以外的部分将生成自动切片。
第14章 Web图形处理与切片
基于参考线创建切片
在包含参考线的文件中可以创建基于参考线的切片。按 Ctrl+R 组合键显示出标尺，然后分别从水平标尺和垂直标 尺上拖拽出参考线，以定义切片的范围。单击工具箱中的“切片工具”按钮，然后在选项栏中单击“基于参考线的 切片”按钮 ，即可基于参考线的划分方式创建出切片。
第14章 Web图形处理与切片
组合切片
使用“组合切片”命令，Photoshop 会通过连接组合切片的外边缘创建的矩形来确定所生成切片的尺寸和位置， 将多个切片组合成一个单独的切片。使用“切片选择工具”选择多个切片，单击鼠标右键，然后在弹出的菜单中选 择“组合切片”命令，所选的切片即可组合为一个切片。使用“切片选择工具”同时选中这两个切片（按住Shift 键可以加选）， 接着单击鼠标右键，选择“组合切片”命令，此时这两个切片会组合成一个单独的切片。
第14章 Web图形处理与切片
详解“切片选择工具”
使用“切片选择工具”可以对切片进行选择、调整堆叠顺序、对齐与分布等操作，在工具箱中单击“切片选择工 具”按钮 。
设置切片选项
切片选项主要包括对切片名称、尺寸、URL、目标等属性的设置。在使用“切片工具”状态下双击某一切片或选 择某一切片并在选项栏中单击“为当前切片设置选项”按钮可以打开“切片选项”对话框。
第14章 Web图形处理与切片
本章学习要点：
● 认识 Web 安全色 ● 掌握切片工具的使用方法 ● 掌握创建、编辑切片的方法 ● 掌握 Web 图形的优化和输出
第14章 Web图形处理与切片
14.1 了解Web安全色
将非安全色转化为安全色
在“拾色器”中选择颜色时，若在所选颜色右侧出现警告图标，则说明当前选择的颜色不是 Web 安全色。单击该 图标，即可将当前颜色替换为与其最接近的 Web 安全色。