先说一下为什么要对设计图进行切片处理，我们的设计图是由很多的文字、图片以及模块组成，如何将整张图片保存放到网页中使用，一来图片太大，网页的打开速度就会很慢，用户等待时间就会很长，体验度就会很差;二来，如果使用纯图片不利于百度搜索引擎的抓取，对网站的排名优化有影响。
所以我们要使用切片工具将设计图图文分离，纯色背景以及文字类的我们可以使用代码书写，主要将图片分割成一个个的小模块。图片的存储格式主要有三种：jpg、png和gif。
jpg格式：不支持背景透明，文件比较小，网页加载速度快，对多色彩表现较好，多适用于产品图片、广告banner图片等色彩丰富的图片。
png格式：支持背景透明，文件比较大，多适用于logo等小图标、特殊文字、颜色相近的图片。
gif格式：gif格式图片使用较少，主要是用于制作动图使用，由于文件本身太大，图片保存后不清晰，在网页端应用较小。
要做网页怎么切片?我们参考下边的这张网站首页图片来介绍下如何切片。
这是一个网站首页的设计图，我们可以大体观察一下，整个页面可以分为头部、banner、中间图标以及产品图片。
按照我们之前所说的，多色彩图片保存jpg格式，单色彩图标保存为png格式;
1)jpg图片的切片
第一步：左侧工具栏中选择切片工具(快捷键C);
第二步：我们将banner图片以及成功案例图片使用切片工具整体切片划分好，每张图片我们都单独进行切片;
第三步：右击每个切片进行单独的命名，命名我们一般使用纯英文来表示，最好是能表现该图片的模块特征;(比如，第一个是banner图片我们可以命名banner01,下边的案例图我们可以命名case01、case02、case03)
第四步：选择文件-导出-存储为web所用格式(快捷键：Alt+Shift+Ctrl+S)，按住Shift选中我们切好的图片，然后右侧选择jpg格式，品质我们选择60即可(60既可以保证图片的清晰度，又可以缩减图片的大小)，然后选择对应存储目录进行存储。
最后一步：选择我们要存储的目录，切片我们选择选中的切片，系统会自动创建images文件夹并将图片统一放到里边。这样我们的图片就存储的本地了。
对于png格式的图片应该如何存储呢?
首先第一步：我们先将这几个图片使用切片工具切割出来，名字分别命名为about01-04如下图所示：
第二步：这一步比较关键，我们要降这几个图层放到一个文件组中，然后使用alt键点击隐藏其它图层，这样我们图标的背景层就变成透明的了。
第三步：选择文件-导出-存储为web所用格式(快捷键：Alt+Shift+Ctrl+S)，按住Shift选中我们切好的图片，然后右侧选择jpg格式，品质我们选择60即可(60既可以保证图片的清晰度，又可以缩减图片的大小)，然后按照存储jpg的过程选择对应存储目录进行存储即可。
好了，关于切片工具今天就说到这里，大家可以自己多练习了，熟悉下操作流程。
微信扫一扫