PhotoshopCC网页设计与配色标准教程全套课件压缩包第4章.pptVIP

* 第4章 切片并导出网页文件 完整地网页布局，及整体外观效果并不足以直接用于网络。我们需要通过存储为Web所用格式命令将在网页设计制作中所采用的Photoshop默认的PSD格式文件输出为HTML文件。在利用该命令输出HTML文件前，有一个必不可少的操作环节——切片，将现有文件分割成多个小块，便于利用Dreamweaver软件编辑，便于网络浏览者可以快速浏览该网页。 * 4.1 创建与编辑切片 切片工具在网页设计制作中是必不可少的，是Photoshop默认的PSD格式文件输出为HTML文件的重要帮手。本节主要讲解切片工具的用法，以及如何根据需要进行切片和最后的优化输出。 * 4.1.1 创建切片 有三种方式可以为图像创建切片。一种是使用【切片工具】直接拖动鼠标创建，一种是基于参考线创建，还有一种是基于图层创建。 1. 使用切片工具 2．基于参考线创建切片 3．基于图层创建切片 * 4.1.2 选择并调整和移动切片 创建切片后，利用【切片选择工具】可以移动、组合切片，也可以复制或删除切片。还可以为指定的切片设置输出选项。 1．选择切片 2. 调整切片大小和移动切片 * 4.1.3 划分切片 可以均分选中的切片。使用【切片选择工具】选中一个切片，单击工具属性栏中的划分按钮，弹出【划分切片】对话框，在该对话框中可以设置水平或垂直等分切片。 * 4.1.4 组合和删除切片 切片是可以再次组合和删除的，下面我们就切片的组合和删除给大家讲述一下。 1. 组合切片 2. 删除切片 * 4.1.5 转化为用户切片 基于图层的切片和自动切片无法进行移动、组合、划分操作。如果需要对基于图层的切片和自动切片进行这些操作，需要首先将其转化为用户切片。另外，所有自动切片在优化时都采用共同的优化设置，若要为其设置不同的优化设置，也需要将其转化为用户切片。 * 4.1.6 设置切片选项 使用【切片选择工具】选中一个切片后，单击工具选项栏中的【为当前切片设置选项】按钮，打开【切片选项】对话框，设置相应选项即可。 * 4.2 编辑Web文件 Web文件就是网页文本文件，在网页设计制作中起到了非常重要的作用。本节主要讲述了Web文件的优化与导出。 * 4.2.1 快速导出可放大浏览Web文件 在Photoshop中执行【文件】|【导出】|【Zoomify】命令，弹出【Zoomify导出】对话框，在对话框中选择模板，设置好文件名称、保存路径、预览图大小，启用【在Web浏览器中打开】复选框，单击确定按钮，文件被导出并自动在浏览器中打开。 * 4.2.2 优化与导出Web图像 划分好切片的网页设计稿就可以优化导出了。利用【存储为Web所用格式】命令，为了最大化地降低输出文件的大小，有利网络浏览，可以对不同的切片应用不同的优化设置。 1. 存储为Web所用格式对话框 2. 优化为GIF和PNG-8格式 3. 优化为JPEG格式 4. 优化为PNG-24格式 5. 优化为WBMP格式 * 4.3 切片和导出要点 切片后的网页图像还需要利用Dreamweaver进一步编辑，因此切片不仅仅是把图片分割成小块。为了便于后续的编辑，切片需要遵循一定原则。 1．不需要切的元素 2．切片顺序 3．大图划小 4．按钮独立划出 5．标志和文字保持完整 6．渐变图可只切1px宽或高 7．导出设置 * 4.4 案例实战：餐饮网站首页切片 本案例对餐饮网站首页进行切片。对制作好的网页效果文件进行切片前，需要分析网页中的元素哪些是静止不变的，哪些是共用元素。对于共用元素，一般需要单独导出，导出时应该隐藏其他图层。