Photoshop基础教学-第14章-网页切片与输出.pptVIP

Photoshop 基础教学 第14章 网页切片与输出 网页设计是近年来比较热门的设计类型，与其他类型的平面设计不同，网页由于其呈现介质的不同，在设计制作的过程中需要注意一些问题，例如颜色的问题，文件大小的问题等。当我们打开一个网页时，会自动从服务器上下载网站页面上的图像内容。那么图像内容的大小在很大程度上能够影响网页的浏览速度。所以在网页内容的输出时就需要设置合适的输出格式以及图像压缩比率。 14.1 Web安全色 Web安全色是指能在不同操作系统和不同浏览器之中同时正常显示颜色。为什么在设计网页时需要使用安全色呢？这时由于网页需要在不同的操作系统下或在不同的显示器中浏览，而不同操作系统或浏览器的颜色都有一些细微的差别。所以确保制作出的网页颜色能够在所有显示器中显示相同的效果是非常重要的，这就需要我们在制作网页时使用“Web安全色”。 14.1.1 将非安全色转化为安全色 在“拾色器”中选择颜色时，在所选颜色右侧出现 警告图标，就说明当前选择的颜色不是Web安全色，如图所示。单击该 图标，即可将当前颜色替换为与其最接近的Web安全色，如图所示。 14.1.2 在安全色状态下工作 在“拾色器”中选择颜色时，勾选窗口左下角的“只有Web颜色”选项，勾选之后，拾色器色域中的颜色明显减少，此时选择的颜色皆为安全色，如图所示。 14.2 网页切片 在网站设计工作中，页面的美化是至关重要的一个步骤。页面设计师在Photoshop中完成的版面内容的编排后，并不能直接将整张网页图片传到网络上。而是需要将网页进行“切片”。“切片”是将图片转化成可编辑网页的中间环节，通过切片可以将普通图片变成DreamWeaver可以编辑的网页格式。而且切片后的图片可以更快的在网络上传播。 14.2.1什么是“网页切片” “网页切片”可以简单理解成将网页图片切分为一些小碎片的过程。为了使网页浏览的流畅，在网页制作中往往不会直接使用将整张大尺寸的图像。通常情况下都会将整张图像“分割”为多个部分，这就需要使用到“切片技术”。“切片技术”就是将一整张图切割成若干小块，并以表格的形式加以定位和保存。如图所示为一个完整的网页设计的图片，如图所示为将网页切片导出后的效果。 14.2.2 认识“切片工具” 切片工具“隐藏”在裁剪工具组中，右键单击工具组按钮，在弹出的列表中可以看到两种切片工具：“切片工具”和“切片选择工具”。如图所示。 单击工具组中的“切片工具” ，在选项栏中的样式列表内可以设置绘制切片的方式，选择“正常”可以通过在画面中按住并拖动鼠标来确定切片的大小。选“固定长宽比”可以在后面“宽度”和“高度”输入框中设置切片的宽高比。选择“固定大小”可以在后面“宽度”和“高度”输入框中设置切片的固定大小。如图所示。如果当前文档包含参考线，单击“基于参考线的切片”按钮可以从参考线创建切片。 14.2.3 使用“切片工具”创建切片 创建切片 右键单击工具组，在其中单击“切片工具” ，然后选项栏中设置“样式”为“正常”。在图像中按住鼠标左键并拖动鼠标，绘制出一个矩形框，如图所示。释放鼠标左键以后就可以创建一个用户切片，而用户切片以外的部分将生成自动切片，如图所示。 切片的选择 右键单击工具组，在其中单击“切片选择工具” ，在图像中单击即可选中切片，如图所示。如果想同时选中多个切片，可以按住“Shift”键的同时单击其他切片，如图所示。如果要移动切片，可以使用“切片选择工具” 选择切片，然后按住鼠标左键并拖动鼠标即可。 14.2.4 基于参考线创建切片 在包含参考线的文件中可以创建基于参考线的切片。单击工具箱中的“切片工具”按钮，然后在选项栏中单击“基于参考线的切片”按钮，如图所示。即可基于参考线的划分方式创建出切片，如图所示。 14.2.5 基于图层创建切片 选择需要以其创建切片的图层，如图所示。执行“图层新建基于图层的切片”菜单命令，就可以创建包含该图层所有像素的切片，如图所示。基于图层创建切片以后，当对图层进行移动、缩放、变形等操作时，切片会跟随该图层进行自动调整，如图所示。删除图层后，基于该图层创建的切片会被删除，（无法删除自动切片）。 14.2.6 自动划分切片 使用“切片选择工具” 单击选择一个切片，然后单击选项栏中的“划分”按钮，如图所示。打开“划分切片”对话框，勾选“水平划分为”/“垂直划分为”选项后，可以在水平/垂直方向上划分切片，设置切片的数值。 14.2.7 切片的编辑操作 创建出的切片还能够进行复制、组合、删除等操作，以便于得到合适的切片。 复制切片 使用“切片选择工具”选择切片，然后按住Alt键的同时拖动切片，即可复制出相同的切片。 将多个切片组合为一个切片 在组合切片之前，先使用“切片选择工具”选择多个切片，然后单击鼠标右键在