Web前端 PS切图

网页切图常用的工具有ps、fireworks，这儿使用ps对网页进行切图，我们通过切图得到所需的图片（.png、.jpg文件），用于给网页提供需要的素材。
ps切图常用的快捷键：
初始化PSD文件：F12
手抓PSD文件：H
放大：ctrl+加号
缩小：ctrl+减号
打开标尺：ctrl+R
切片工具快捷键:C
自由浏览图片：按住空格后，鼠标拖动
自由缩放图片：按住alt+滚轮
工作区类型的切换:Tab
新建一个透明背景的画布：ctrl+N
ps使用小技巧：
1、快速查找某个图片所在图层时，先选中移动工具（V），然后鼠标点击图片，就会看到图片所在图层。
2、撤销以前的操作，点开历史记录，删除要撤销的操作。
3、可以先用切片工具选择图片，然后ctrl+c和ctrl+v将图片复制到新建的图层。
4、双击图层上的T，按ctrl + c和ctrl + v复制PSD上的文字。
切图前的准备：
1、另存网页PSD文件。
2、整合PS图片，整理图层。
切片的具体操作：
1、分割切片
2、切片类型：用户切片（蓝色），非用户切片（灰色）。
切片要点：
1、根据颜色范围来切。
2、切片大小：把网页的切片切的越小越好，网页打开的速度更快。
3、切片区域完整性：保证完整的一部分在一个切片内，例如某区域的标题文字，以后修改时方便。
4、导出类型：GIF：颜色单一，过渡少，有动画的部分，比如灰色的阴影、背景，缺点最多；JPG：颜色过渡比较多，颜色丰富的，且无透明要求时，适用范围广泛，品质选择60-80；PNG-8：颜色色彩不太丰富，无论有无透明要求，保存时需要重新设置无仿色和无杂边；PNG-24：图片有半透明要求时。
5、保留源文件：即使页面做好了也要保留带切片层的源文件，说不上哪一天要修改某一部分。
6、切片命名规则，不要有特殊的字符，最好不要有中文，一般图片的名称都是英文。
需要切片的内容：
1、修饰性的（一般用在background属性）:图标、logo、有特殊效果的按钮、文字、非纯色的背景，一般保存为PNG-8,PNG-24。
2、内容性的（一般用在img标签）：banner、广告图片、文章中的配图，一般保存为JPG。
实际操作：
1、选择切片工具，对需要的素材进行切取，图片微小的修改可以右击编辑切片选项，设置具体的宽高。

2、对于一些带有背景的图片或者带有颜色的图标，可以用移动工具将图标拖到新画布进行切取，也可以点击图层上的眼睛图标将背景隐藏后再切片。

3、切片切好后，点击文件，选择存储为web所用格式，用抓手工具对图片进行移动，切片选择工具对每个切片进行详细的设置。

4、存储时选择所有用户切片。

5、切片后的结果保存在images文件夹下面。

另一种切图的小技巧
1、选择移动工具，勾选自动选择图层。
2、矩形选框工具截图，右击图片所在图层，选择转换为智能选择对象。
3、ctrl + c复制切片，ctrl + n新建图层，ctrl + v将切片复制到图层上。