ps切图

1.切图

切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面。
通俗来讲，把一张设计图 利用到切片工具 把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。

切图大家都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，把图片切出来这个过程是叫切片。

切图的目的：
第一个是让网页稿有了交互性，实现你平时看到的各种各样的功能。
第二个是体积，所以切图时候一定注意少用图片工具：主流是dreamweaver，也有公司自己开发平台进行制作的。
采用div+css布局更能减小网页体积是表现与内容分离。

2.将一张图分成相同大小几部分的切图

（1）ps打开要切的图，在左侧的工具栏中选择切片工具

（2）在图上右击，选择划分切片，这时候可以选择水平和垂直方向划分切片，将图均匀的划分。

划分为水平和垂直各2个切片

（3）在图中任意位置单击，就可以完成切图。完成后，辅助线变成了蓝色

（4）保存图片。选择存储为web所用格式，保存。

3.将一张图切成任意大小的小图

（1）打开需要切图的图片，手动选择参考线的位置。视图—新建参考线，然后可以选择参考线的方向和位置
参考线的作用：参考线在鼠标靠近时有吸附功能，所以切图不容易切错位置。

（2）切换到切片工具，沿参考线划出切片，右击可以看到有可以编辑切片的选项，可以设置切片像素大小。
注意：选中切片成功，切片边框线变成实线，并且对应编号颜色变蓝；未选中或选中切片失败，编号颜色是灰色，并且边框为虚线。

（4）选择要存储的切片，然后右上角可以设置图片的格式、质量大小。
文件—存储为web所用格式—存储
图片格式，可以选择JPEG、PNG或GIF等；
如果选择预设为“JPEG 高”，这时图片品质为60，保存后的图片背景为白色；
如果选择预设为“PNG24”，保存后的图片背景透明。
以一般情况下如果是网上使用的图片，品质可以设置60，既保证图片较小也不会模糊。

注意：也可以选择“切片选择工具”，然后右击划分切片，均匀划分成几个小图后直接保存

4.从psd中切图
（1）打开psd，ctrl+alt+滚轮可以实现图片的放大和缩小，将需要切的图标调整到合适的大小和位置。
假设本次需要切的是这个二维码

（2）选择—自动选择—图层—然后点击需要切得图标

这里的二维码包含多个图层，所以选择这个组，然后右击选择复制组

目标文档选择新建并输入名称，确定

（3）此时有一个新建的二维码文件，放大到一定比例开始切图

（4）左侧工具栏选择切片工具，然后沿着图标开始划线

（5）调整虚线，使得虚线紧挨图标的边缘，最后存储为web所用格式，保存选中的切片，将图片保存。

存储的图片