学习PS切图教程，PS网页制作基础教程：学习切图那点儿事。切图的目的就是把设计图转化成网页代码，不用理解代码的含义也可以操作，所以独立一篇来讲。
早年间我学切图的时候，网上就没看到过什么教程的，只能靠自己摸索学习，挺简单的东西还是绕了点弯子。这次写出来应该会帮助其他人学会切图的。
先说下软件，我用的是PhotoShop CS5 这个版本，你要用其他版本也行，反正对切图这个功能影响不大。
如上图红框所示，我们要用到的切图工具有两个，一个是切片工具，另一个是切片选择工具。左边有个小按钮，你按住它这三个选项就会显示出来。
上图是我等下用做示范的图片。
在切图之前有一点需要说明的是，如果你需要辅助切图，你可以先添加参考线。在PS上方的菜单栏，你可以在视图里找到新建参考线选项。如上图，我已经添加两条参考线，因为参考线在鼠标靠近的时候有吸附功能，所以切图不容易切错位置。
好了现在我们开始切图，我用切图工具先裁一个框出来，我们可以看到图片上已经有01的框，但是右边02显示为灰色。
我继续用切图工具裁第二个框，记住01和02的框一定要贴合，否则会出现一个03的框。如果你这次切图位置没切对，可能给后面带来麻烦的是换图片会比较麻烦。这个时候切图的框是可以移动的，你可以把鼠标放在边框上试着移动下，看下效果。你只能移动02，不能移动01。
当我发现切图的位置出现错误，开始调整，刚才我把02位置往右挪好，它从02变成了03。
