切图,顾名思义,将图片切成若干块,以供web开发使用。
原始图片如下:
直接使用切片工具
简单的切图工作我们可以直接使用切图工具。
比如我们需要切出左上角第二张图片。
首先我们选中切片工具:
shift加鼠标拖动是构建一个正方形,然后进行微调。
蓝色部分就是切出来的图片,切完后存储为web所用样式即可。
根据参考线切片
如果是较为复杂的切图需求,建议先建立参考线。
比如我们要刚才那片图片的中间四个子图片。
我们首先通过ctrl+r打开标尺,然后从标尺中拖出参考线:
可以看到青绿色的线就是参考线。
然后我们点击切片工具,选择基于参考线的切片:
可以看到蓝色切图区域生成:
接下来就是一个个的选中然后右键编辑,来微微调整了。
最后还是保存为web样式。四个图就切出来了: