切图(Photoshop, GIMP)

切图(Slice)，把一张大图切割作成多个小图片。在 Web 开发中，切图一般还包括将切割出的小图组织到 HTML 的过程。比较流行的切图软件是 Photoshop，但还有别的选择，如 GIMP，可能还有 Fireworks，但具体还不清楚。

切图的工作，不仅仅用于 Web 前端开发，也用于其他界面开发，如 Android 的应用界面效果图切成小图等。

Photoshop

Photoshop 中的操作非常简单，选择工具栏里的 Slice 工具：

然后，在图上划来划去。

最后用 File -> Save for web... 就好了。

GIMP

这个软件的切图操作需要详细说明一下。

操作步骤：

1. 拉好格子。这步看起来容易，会拉确实容易，但怎么拉还是需要说明下：

鼠标指到标尺线上，鼠标头稍稍过线

然后按住左键，然后往下拉

拉到目标位置，然后松手就可以了，这样的线可以拉很多条。这里说的是横线，纵线类似，工作区的左右两侧也有标尺线。注意，鼠标头不要低过标尺线，否则按住后拉不出线：

最后的图可能是这样的：（被划分成了若干格子）

2. 导出 Filters -> Web -> Slice，设置好弹出的对话框的内容，然后确认就好了

GIMP 切图其实是用所谓 Web Filter 来完成的，拉线比较精确，但不如 PS 好用，只能切成统一的格子。

参：

• http://docs.gimp.org/en/python-fu-slice.html
• http://docs.gimp.org/en/filters-web.html