切图(Photoshop, GIMP)

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

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

Photoshop

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

然后,在图上划来划去。

ps slice button

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

GIMP

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

操作步骤:

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

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

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

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

最后的图可能是这样的:(被划分成了若干格子)

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

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

参: