常见图片格式及简单切图操作

常见的图片格式
jpg图像格式:JPEG (JPG）对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用jpg格式的
.gif图像格式:GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果
png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景.如果想要切成背景透明的图片,请选择png格式.
.PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿.对前端人员来说,最大的优点我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.
（不能直接放到网页里）
ps切图
一． 基础操作：

a) Ctrl++ 放大图片，ctrl - -缩小图片

b) 按住空格键space+，点击鼠标左键，拖动图片。

c) 修改单位，点击编辑->首选项-> 单位与标尺，将厘米修改为像素px。

d) 点击视图，选择标尺（ctrl+R），清除默认参考线(ctrl+;)，清除切片(ctrl+,)。

e) 点击编辑->设置快捷键，将常用操作设置为我们熟悉的键。

f) 移动（V），选区（M），切片（C），将v图层转换成智能对象（ctrl+/）.

二． 切图过程：

1、打开psd图，先浏览整个页面，哪些是能用css实现，哪些是用图片实现的，能用css代码实现的尽量用代码实现；

2、页面中需要切成图片的，看是背景图还是内容图，背景图保存为png,内容图保存为jpg,页面中不是从后台获取的图片一般为背景图(png)，后台获取的一般为内容图（jpg）；

3、形状不均匀的背景图片使用图层切图，形状均匀的内容图用切片切图。具体切图方式按实际情况而定，切片切图与图层切图相结合。如果规则图片多的使用切片切图，其他的图片使用图层切图；

4、使用切片切图保存图片时，图片的格式视情况而定，可以自己为选中切片中的图片设置格式，若需要全部选中为同一种格式，全选中整个页面再选图片的格式。
5、最后保存时要注意，一定要选中所有用户切片；

6、命名时注意，（内容图）jpg图片以pic-xx.jpg命名，（背景图/小图标）png图片以icon-xx命名，xx要有语义。

图层切图（形状不均匀的内容图）：
a) 点击移动选择工具,将左上角的的自动选择勾上,再将旁边的组换成图层.

b) 用移动选择工具将我们要切得图层选中，在右侧的图层区，可以自动定位到我们的图层，点击左边的小眼睛确定此图层是否使我们要切得图层，确定之后，将右击将图层转换为智能对象（防止图片失真）。

c) 用矩形选框工具，将图层框起来（框框只能大不能小于图层）。

d) 依次执行以下操作：ctrl+c复制图层，ctrl+n新建透明背景画布，，ctrl+v粘贴图层，ctrl+alt+shift+s保存图层，如果切得是背景图，保存为png24格式，前缀为icon-xxx.，再保存到我们的项目工程里。

e) 背景图，类似于图标之类的都用png，其他的都用jpg，png可以代替jpg，但是jpg不能代替png。

切片切图（形状均匀的内容图）：

a) 选择切片工具。

b) 用辅助线将要切的图层框起来。

c) 用切片框住我们的图层。

d) Ctrl++alt+shift+s保存用户切片，格式选jpeg，前缀为pic-xxx。

e) 在保存时选中了假如默认为png，但是要选择jpeg时可能会出现有部分图片还是会有png的图片，此时需要自己选中图片修改为jpeg。

合并图层(需要切的图由多个图层组合而成)

按住shift，选中我们要合并的两个图层，快捷键：ctrl+E，合并完成。

图片格式.

切图出来的图片一般保存为png-24和jpeg格式