网页设计在技术层面上，第一步是美工做出网页效果图，第二步就是网页前端进行网页切图。网页切图工具常用的有fireworks、PS，这里主要向各位介绍怎么使用PS进行网页切图。
1. 什么是切图？
切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面，有利于交互，形成良好的视觉感。
通俗来讲，把一张设计图利用到切片工具 把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。
2. 切图误区
切图大家都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，首先处理的是什么类型的页面图片型（EDM 或活动着陆页等）、图文型（门户网站或电商网站等）、界面型（Web App 等），把图片切出来这个过程是叫切片。
第二个是体积，所以切图时候一定注意少用图片工具，采用div+css布局更能减小网页体积是表现与内容分离。
如：
HTML：img <img src="images/avatar.jpg" alt="头像" />
CSS：background .icon{background-image:url(../images/sprite.png);background-position:0 0;}
2.为什么切图？
为网站后台编程者带来方便，提高效率，让网页有了交互性，实现你平时看到的各种各样的功能。画面浏览速度快，有利于优化。
3.如何切图？
PS切图的基本思路：
（1）打开PS软件，并打开原本准备好的一张图片，可以把图片直接拉到PS中，也可以用菜单栏上的文件工具来打开文件（二选一，按习惯来）。
如果看不清图，点开可以看大图
（2）把图片缩放到合适的大小，然后选择左手边工具栏上的一把像小刀一样的工具，然后右击，出同三个选择，选择“切片工具”
如果看不清图，点开可以看大图
（3）然后鼠标变成小到，在您想切片的地方开始切，然后往左拉或者往下拉，就出会现一个四方形的区域块，这就是你要切除的范围，直到拉到你觉得合适地方为止，小新切了几个案例，分别用了一些颜色来区分开给大家看得更清楚。每一个片块代码一个区域，都会在上面有蓝色数字标识的。
如果看不清图，点开可以看大图
（4）保存时，选择文件——存储为WEB和设备所用格式，这是一种专门为网页制作人设置的格式。
（5）选择存储。
如果看不清图，点开可以看大图
（6）格式类型可根据您的需求来，如果选择HTML类型就会有一个自动生成的网页模式给你看。小新选择了“HTML和图像”
如果看不清图，点开可以看大图
（7）根据之前保存的路径，找到该文件夹，然后打开就能看到一张张图片，就是根据您刚才切片的规格分开存放的
如果看不清图，点开可以看大图
如果看不清图，点开可以看大图
你学会了吗？
是不是很简单呢？