第15章 处理 Web 图形与切片《Photoshop CC平面设计核心技能》同步练习 （工信版）（课件）

处理 Web 图形与切片 Photoshop CC平面设计核心技能一本通（ 移动学习版） 15 1 15.1 Web图形 15.2 切片 15.3 15.4 编辑切片 画板 15.5 导出图层与文件 15.6 综合实训：制作家居网站首页 2 15.1.1 Web图形与安全色 Web图形是指为了用于网页传输而经过优化后的图像，通常为JPG、GIF、SVG、PNG等格式。当用户通过其他途径展示自己制作的图像时，可能会因为计算机系统设置、浏览器等原因呈现出不同的效果，造成色差。为了避免这种情况，在制作Web图形时用户应优先使用Web安全色，它是浏览器使用的216种颜色，当在8位屏幕上显示颜色时，浏览器会将图像中所有颜色更改成Web安全色。 Web安全色是浏览器使用的216种颜色。当在8位屏幕上显示颜色时，浏览器会将图像中所有颜色更改成Web安全色。当设计人员把在自己计算机上制作的图像通过其他途径进行展示时，图像可能会由于计算机系统设置、浏览器等原因而呈现出不同的效果，造成颜色的差异。 15.1.2 使用Web安全色 将非Web安全色转换为Web安全色 01 在拾色器中选择Web安全色 02 在“颜色”面板中设置Web安全色 03 15.1 Web图形 15.2 切片 15.3 15.4 编辑切片 画板 15.5 导出图层与文件 15.6 综合实训：制作家居网站首页 5 15.2.1 切片类型 Photoshop CC中有两种切片类型，即用户切片和自动切片。用户切片是指用户通过切片工具手动创建的切片；自动切片是指Photoshop自动生成的切片。 手动创建新切片或编辑切片时，图像中都会生成自动切片来占据图像区域，自动切片可以填充图像中的用户切片或图层切片中未定义的空间。 15.2.2 创建切片 B A 使用工具创建切片 通过菜单命令创建切片 “切片工具”属性栏 15.1 Web图形 15.2 切片 15.3 15.4 编辑切片 画板 15.5 导出图层与文件 15.6 综合实训：制作家居网站首页 8 15.3.1 选择、移动与调整切片 在完成切片绘制后，设计人员可使用“切片选择工具” 对切片进行选择，再进行进一步移动或调整。“切片选择工具” 主要用于选择切片、调整切片堆叠顺序、对齐与分布切片等。 15.3.2 划分与组合切片 “切片选择工具”属性栏 划分切片 组合切片 15.3.3 转换切片 15.3.4 设置切片选项 01 通过按钮转换 02 通过命令转换 将自动切片转换为用户切片后，可以进行切片选项的设置。在“切片选择工具” 的工具属性栏中单击 按钮，或者在需要设置的切片上单击鼠标右键，在弹出的快捷菜单中选择【编辑切片选项】命令，即可打开“切片选项”对话框。 15.3.5 复制切片 15.3.6 删除切片 使用“切片选择工具” 选择切片，再按【Alt】键，当鼠标指针变为 形状时单击并拖动鼠标，即可复制并粘贴切片。 使用快捷键删除 A 使用命令删除 B 使用鼠标右键删除 C 15.3.7 优化与输出切片 网页中图片的格式一般为GIF、JPEG或PNG格式，设计人员可根据不同的需求对切片后的图像进行优化和输出操作。 存储为Web所用格式 Web图形的输出设置 Web图形优化选项 15.1 Web图形 15.2 切片 15.3 15.4 编辑切片 画板 15.5 导出图层与文件 15.6 综合实训：制作家居网站首页 13 15.4.1 画板的用途 画板可以在原有画布之外创建出新的画布。画板可以将任何所含元素的内容剪切到其边界中，它相当于一种特殊类型的图层组。画板中元素的层次结构显示在“图层”面板中，其中还有图层和图层组，一个画板下可以包含图层和图层组，但不能包含其他画板。从外观上看，画板可充当文档中的单个画布。文档中未包含在画板中的任何图层会在“图层”顶部进行编组，并保持未被任何画板剪切的状态。 15.4.2 创建画板 15.4.3 调整画板位置与大小 在“图层”面板中选择需要调整的画板后，选择“画板工具” ，在图像编辑区中单击画板并拖动鼠标，可自由移动画板。选中画板，选择【窗口】/【属性】菜单命令，打开“画板”属性面板，在其中设置“X”和“Y”参数调整画板的水平位置和垂直位置，设置“W”和“H”参数修改画板的宽度和高度。 在图像文件中添加画板 新建包含画板的图像文件 03 01 15.4.4 删除画板 15.4.5 导出画板为单独的文件 在“图层”面板中选择画板后，选择【文件】/【导出】/【画板至文件】菜单命令，打开“画板至文件”对话框，在其中进行相应的设置后，单击 按钮，即可导出画板为单独的文件。 画板可以像图层组一样被解散或删除。在“图层”面板中选择需要删除的