资源简介

(共17张PPT)
第7章
乐能企业网站页面设计
7.4
网页切片与输出
本节将通过对7.2节制作的“网站首页.psd”文件进行切片与输出，介绍网页切片与输出的一般方法。
切片是指在网页制作过程中，利用切片工具将大尺寸网页效果图分割为一系列小图像，这些小图像称为原大尺寸图像的切片。根据图像特点可对这些切片进行优化处理，并批量输出，从而方便网站前端设计人员使用，以及在实际应用中有效提高网页下载速度。7.4.1切片概述选择切片对象：设计师需要对页面中的图片或Logo等无法通过代码实现的复杂图像进行切片处理，而页面背景或图像外的文字等均可通过代码实现，因此无需切片处理。切片方法：根据页面结构和图像特点选择合适的方法对网页效果图进行切片。例如，当处理Logo或按钮等不规则图像时，应先隐藏其周围图层，然后再进行切片处理；当对产品展示页和一些功能较多的页面进行切片时，由于切片对象尺寸各异，因此可使用“切片工具” 逐一框选切片对象制作切片。网页美工设计师在对网页效果图进行切片时应注意以下几点：优化和输出：根据切片图像的特点，采用JPG、PNG或GIF等格式对图像进行优化，然后根据用途输出为“HTML和图像”“仅限HTML”或“仅限图像”格式。7.4.2切片输出视频讲解按【Ctrl+O】组合键打开本章7.2节制作的“网站首页.psd”文件。步骤1提 示本例需要切片的图像主要有Logo、Banner、切换按钮和商品图片。其中Banner和商品图片适合输出为JPG或PNG格式，Logo和切换按钮则适合输出为PNG格式。由于输出格式不同，且Banner和切换按钮处于叠加状态，因此应分两次对图像进行切片和输出处理。制作Banner和商品图片切片。在“图层”面板中隐藏“背景”“导航栏”和遮挡商品图片的相关图层，如图7-58所示。步骤2图7-58 隐藏图层使用“切片工具” 依次框选Banner图像、手机版块中的各商品图片和电脑Banner图片，然后选择“切片选择工具” ，按住【Shift】键，分别单击手机版块中的切片和电脑Banner切片，接着按住【Alt+Shift】组合键，垂直下拖切片框至电脑版块图片处，释放鼠标复制切片框，再按此操作，制作配件版块切片，效果如图7-59所示。步骤3图7-59 制作Logo和商品图片切片
知识库
切片有两种形式，分别是用户切片和自动切片。左上角为蓝色标识的切片是用户切片，它是用户通过“切片工具” 或“基于参考线创建切片”命令制作的；左上角为灰色标识的切片是自动切片，它是用户在制作切片时系统为填充文档区域自动生成的切片。用户可使用“切片选择工具” 选中自动切片，通过单击工具属性栏中的“提升”按钮将其提升为用户切片，也可单击“隐藏自动切片”按钮隐藏所有自动切片。
按【Ctrl+Alt+Shift+S】组合键打开“存储为Web所用格式”对话框，在其中设置参数对图像进行优化处理，然后单击“存储”按钮，如图7-60所示。步骤4图7-60 设置Banner和商品图片的输出参数
知识库
在优化图像时，应注意下面两点：
在JPEG格式中，一般将“品质”参数设置为80，这样能兼顾图像的清晰度和下载速度，但在某些网站限制上传尺寸时，可适当降低“品质”参数，以压缩图片。
当图像高度超过8 000像素时，Photoshop会自动对图像进行等比例缩放（用户可观察图7-60的“图像大小”设置区中的“百分比”参数，以此确定图像是否被缩放），此时设计师可将图像分两次进行切片输出处理。
在“将优化结果存储为”对话框中设置参数，然后单击“保存”按钮将图像保存，接着在弹出的对话框中勾选“不再显示”复选框，单击“确定”按钮，可将切片图像存储在一个名为“images”的文件夹中，如图7-61所示。步骤5图7-61 输出Banner和商品图像
知识库
在保存切片时，应注意以下两点：
在“格式”下拉列表中一般不会选择HTML格式，因为通过Photoshop直接输出的HTML文件会包含很多冗余代码，从而导致网页文件增大，因此通常选择“仅限图像”作为图像的存储格式。
在“切片”下拉列表中一般选择“所有用户切片”项，但当对某个切片的内容做了修改，需要单独导出时，可以返回“存储为Web所用格式”对话框，在预览窗口中选中该切片，然后单击“存储”按钮，接着在“切片”下拉列表中选择“选中的切片”选项。
制作Logo和切换按钮切片。返回Photoshop界面，执行“视图”>“清除切片”命令，然后隐藏“Banner”图层，显示“切换按钮”图层，接着使用“切片工具” 依次框选Logo和两个切换按钮，如图7-62所示。步骤6图7-62 调整图层显隐并制作切片按【Ctrl+Alt+Shift+S】组合键打开“存储为Web所用格式”对话框，在其中设置参数，单击“存储”按钮，如图7-63所示。参考“步骤5”的方法保存图像，完成网站首页的切片和输入。步骤7图7-63 设置Logo和切换按钮的输出参数
举一反三
制作乐能网站的“全部商品”子页，如图7-64所示。此页用于商品展示，其结构与首页相似，在制作时可打开首页源文件，删除多余图层，然后从上至下依次制作分类、商品展示和页码版块（相关素材位于本章配套素材“全部商品子页”文件中）。
图7-64 “全部商品”页面
THANK YOU!

展开更多......

收起↑