网切片与输出

1、第14章 网页切片与输出网页设计是近年来比较热门设计类型，与其它类型平面设计不一样，网页因为其展现介质不一样，在设计制作过程中需要注意一些问题，比如颜色问题，文件大小问题等。当我们打开一个网页时，会自动从服务器上下载网站页面上图像内容。那么图像内容大小在很大程度上能够影响网页浏览速度。所以在网页内容输出时就需要设置适当输出格式以及图像压缩比率。网切片与输出第1页14.1 Web安全色Web安全色是指能在不一样操作系统和不一样浏览器之中同时正常显示颜色。为何在设计网页时需要使用安全色呢？这时因为网页需要在不一样操作系统下或在不一样显示器中浏览，而不一样操作系统或浏览器颜色都有一些细微差异。所以确

2、保制作出网页颜色能够在全部显示器中显示相同效果是非常主要，这就需要我们在制作网页时使用“Web安全色”。14.1.1 将非安全色转化为安全色在“拾色器”中选择颜色时，在所选颜色右侧出现 警告图标，就说明当前选择颜色不是Web安全色，如图所表示。单击该 图标，即可将当前颜色替换为与其最靠近Web安全色，如图所表示。网切片与输出第2页14.1.2 在安全色状态下工作在“拾色器”中选择颜色时，勾选窗口左下角“只有Web颜色”选项，勾选之后，拾色器色域中颜色显著降低，此时选择颜色皆为安全色，如图所表示。网切片与输出第3页14.2 网页切片在网站设计工作中，页面美化是至关主要一个步骤。页面设计师在Pho

3、toshop中完成版面内容编排后，并不能直接将整张网页图片传到网络上。而是需要将网页进行“切片”。“切片”是将图片转化成可编辑网页中间步骤，经过切片能够将普通图片变成DreamWeaver能够编辑网页格式。而且切片后图片能够更加快在网络上传输。14.2.1什么是“网页切片”“网页切片”能够简单了解成将网页图片切分为一些小碎片过程。为了使网页浏览流畅，在网页制作中往往不会直接使用将整张大尺寸图像。通常情况下都会将整张图像“分割”为多个部分，这就需要使用到“切片技术”。“切片技术”就是将一整张图切割成若干小块，并以表格形式加以定位和保留。如图所表示为一个完整网页设计图片，如图所表示为将网页切片导出

4、后效果。网切片与输出第4页14.2.2 认识“切片工具”切片工具“隐藏”在裁剪工具组中，右键单击工具组按钮，在弹出列表中能够看到两种切片工具：“切片工具”和“切片选择工具”。如图所表示。单击工具组中“切片工具” ，在选项栏中样式列表内能够设置绘制切片方式，选择“正常”能够经过在画面中按住并拖动鼠标来确定切片大小。选“固定长宽比”能够在后面“宽度”和“高度”输入框中设置切片宽高比。选择“固定大小”能够在后面“宽度”和“高度”输入框中设置切片固定大小。如图所表示。假如当前文档包含参考线，单击“基于参考线切片”按钮能够从参考线创建切片。网切片与输出第5页14.2.3 使用“切片工具”创建切片创建切片

5、右键单击工具组，在其中单击“切片工具” ，然后选项栏中设置“样式”为“正常”。在图像中按住鼠标左键并拖动鼠标，绘制出一个矩形框，如图所表示。释放鼠标左键以后就能够创建一个用户切片，而用户切片以外部分将生成自动切片，如图所表示。网切片与输出第6页切片选择右键单击工具组，在其中单击“切片选择工具” ，在图像中单击即可选中切片，如图所表示。假如想同时选中多个切片，能够按住“Shift”键同时单击其它切片，如图所表示。假如要移动切片，能够使用“切片选择工具” 选择切片，然后按住鼠标左键并拖动鼠标即可。网切片与输出第7页14.2.4 基于参考线创建切片在包含参考线文件中能够创建基于参考线切片。单击工具箱

6、中“切片工具”按钮，然后在选项栏中单击“基于参考线切片”按钮，如图所表示。即可基于参考线划分方式创建出切片，如图所表示。网切片与输出第8页14.2.5 基于图层创建切片选择需要以其创建切片图层，如图所表示。执行“图层新建基于图层切片”菜单命令，就能够创建包含该图层全部像素切片，如图所表示。基于图层创建切片以后，当对图层进行移动、缩放、变形等操作时，切片会跟随该图层进行自动调整，如图所表示。删除图层后，基于该图层创建切片会被删除，（无法删除自动切片）。网切片与输出第9页14.2.6 自动划分切片使用“切片选择工具” 单击选择一个切片，然后单击选项栏中“划分”按钮，如图所表示。打开“划分切片”对话

7、框，勾选“水平划分为”/“垂直划分为”选项后，能够在水平/垂直方向上划分切片，设置切片数值。网切片与输出第10页14.2.7 切片编辑操作创建出切片还能够进行复制、组合、删除等操作，方便于得到适当切片。复制切片使用“切片选择工具”选择切片，然后按住Alt键同时拖动切片，即可复制出相同切片。将多个切片组合为一个切片在组合切片之前，先使用“切片选择工具”选择多个切片，然后单击鼠标右键在弹出快捷键菜单中执行“组合切片”命令。所选切片即可组合为一个切片。删除切片使用“切片选择工具”选择切片以后，单击鼠标右键，在弹出菜单中选择“删除切片”命令，能够删除切片。也能够按Delete键或Backspace键。

8、去除全部切片执行“视图去除切片”命令，能够删除全部用户切片和基于图层切片。锁定切片执行“视图锁定切片”菜单命令，能够锁定全部用户切片和基于图层切片。锁定切片以后，将无法对切片进行移动、缩放或其它更改。再次执行“视图锁定切片”即可取消锁定。网切片与输出第11页14.2.8 提升：自动切片转换为用户切片“自动切片”无法进行优化设置，只有“用户切片”才能够进行不一样优化设置。所以需要将“自动切片”转换为“用户切片”。首先选择“切片选择工具”，然后在“自动切片”上单击，接着单击选项栏中“提升”按钮，如图所表示。随即“自动切片”能够转换为“用户切片”，如图所表示。网切片与输出第12页14.2.9 设置切

9、片选项使用“切片选择工具”选择某一切片，并在选项栏中单击“为当前切片设置选项”按钮 ，能够打开“切片选项”对话框，在这里能够设置切片名称、尺寸、URL、目标、等属性设置。如图所表示。网切片与输出第13页14.3 网页翻转按钮网页上通常都包含很多按钮，而按钮通常都有几个不一样状态，比如按钮空闲时、将光标放在按钮上时、单击按钮时， 这些不一样状态下按钮可能都展现出不一样颜色或者不一样样式，来方便用户了解当前操作状态，这就是“翻转按钮”。如图和图所表示。网切片与输出第14页要创建按钮翻转效果，最少需要两个图像，一个用于表示处于正常状态图像，另一个则用于表示处于更改状态图像。而创建按钮翻转方式则很多，

10、能够经过更改按钮底色，更改按钮上文字，也能够更改按钮上图形，如图和图和图所表示。网切片与输出第15页14.4 Web图形输出对于网页设计师而言，在Photoshop中完成了网站页面制图工作后，需要对网页进行切片，如图所表示。创建切片后对图像进行优化能够减小图像大小，而较小图像能够使Web服务器愈加高效地储存、传输和下载图像。然后需要对切分为碎片网站页面进行导出。执行“文件导出存放为Web所用格式（旧版）”菜单命令，打开“存放为Web所用格式”窗口，在该窗口中能够对图像格式以及压缩比率进行设置。如图所表示。设置完成后单击“存放”按钮，选择存放位置，接着我们会在设置存放位置看到导出为切片图片文件，

11、如图所表示。网切片与输出第16页14.4.1 使用预设输出网页对已经切片完成网页执行“文件导出存放为Web所用格式（旧版）”菜单命令，打开“存放为Web所用格式”窗口，在窗口右侧顶部单击“预设”下拉列表，在其中能够选择内置输出预设，单击某一项预设方式，然后单击底部“存放”，如图所表示。接着选择储存位置，如图所表示。网切片与输出第17页14.4.2 设置不一样储存格式不一样格式图像文件其质量与大小也不一样，合理选择优化格式，能够有效地控制图形质量。可供选择Web图形优化格式包含GIF格式、JPEG格式、PNG-8格式、PNG-24和WBMP格式。网切片与输出第18页14.5 导出为Zoomify“导出为Zoomify”命令用于导出高分辨JPEG文件和HTML文件，然后能够将这些文件上载到Web服务器上，方便查看者平移和缩放该图像更多细节，如图所表示。该命令适合于需要对商品细节进行展示时使用。打开一个图片，如图所表示。执行“文件导出Zoomif”菜单命令，能够打开“ZoomifTM导出”对话框，