准备工作

1、切图工具（firework ，Photoshop ，px_cook）

本文分享一些用Photoshop切图的一些经验。需要把Photoshop功能面板设置成我们前端常用的并保存下来，这样以后每次使用的时候就不需要花时间再去设置一次了。

2、设置标尺单位

——CSS里面用的最多的单位是像素(px)，测量和读取的值也都是以像素为单位的值）

设置步骤： ps首选项设置：编辑>首选项>单位与标尺 ——— 将标尺和文字单位设置为像素

3、将面板调整为适合切图

——其他不经常用的可关闭

设置步骤：在“窗口”菜单下开启：工具、选项、信息(F8)、图层(F7)、历史记录

4、辅助视图

在“视图”菜单下开启：

1）对齐(在移动图层的时候当它靠近文档边缘或参考线时会有一定的吸附力)、

2）标尺(Ctrl+R)(显示隐藏标尺)

3）显示>参考线(Ctrl+;)(需勾选[显示额外内容])Ctrl+h也可以显示/隐藏参考线；

获取信息

1、尺寸信息

——测量（宽度、高度、内外边距、边框、定位、文字大小、行高、背景图位置）

方法：矩形选框工具和信息面板结合使用——画一个矩形框在信息面板中读取矩形框的宽高(尽可能的将画布放大以减小误差)

矩形选框工具

选区相加：按住Shift

选区相减：按注+Alt

选区相交：按住Shift

2、颜色信息

——取色（边框色、背景色、文字颜色） —— 使用吸管工具或拾色器（faststone）

1、确定背景是否为纯色——使用取色工具（吸取背景不同位置看颜色是否有变化）

2、确定背景是否为线性渐变——使用魔棒工具

选中图层，选择魔棒工具，容差值改低(可直接设置为0)，用魔棒工具多次击图层不同位置，若每次选中的区域为线性的并且多次点击域都为线性并平行，背景色则为线性渐变。反之则不是。

切图之前

1、那些图片需要切出来？

修饰性（一般用在background属性）：

图标、logo

有特殊效果的按钮、文字等：

非纯色的背景

2、内容性的（一般用在img标签）：

banner、广告图片

文章中的配图

3、切出来的图片存为哪种类型？

修饰性：

PNG24——支持全透明和半透明（IE6不支持半透明）

PNG8——不支持半透明

内容性的：

一般存为JPG（有时还要做些压缩来保证图片不要太大）

切片方法

1、使用矩形选框工具：

1、切图PNG24

——移动工具选中所需图层（按住Ctrl或Shift多选）——需切到一张图上的多个图层，合并在一个图（Ctrl+E）右键复制图层到新文件或直接拖至已有文件

2、PNG8

——带背景切

合并图片的（可见）图层（Shift+Ctrl+E）

矩形选框工具选择内容

魔棒工具去除多余部分（减去相减：按住Alt）——适度调整容差值

用移动工具拖至新文件或已有文件

3、可平铺背景

——主要针对css里面background-repeat的属性

用矩形选框工具选区一块区域——尺寸尽可能小（例如：一个横向渐变的背景图片可将图片切为高同原图一致，宽为一像素的图片）

2、使用切片工具：

快速切片：

1.拉参考线

2.选择切片工具

3.点击选项栏中的“基于参考线的切片”按钮

4.导出切片

手动选择：也可以按住鼠标左键拖动鼠标选区切片区域，然后导出切片

存储

存储为Web所用格式——选择所需要的切片（按住Shift多选）——选择图片格式——存储——选择（用户选中切片）

保存类型

1、当图片色彩丰富且无透明要求时——建议保存JPG格式并选择合适的品质。

——品质越大图片质量越高图片文件越大。
设置图片的一个原则是：品质不要设置为100。设为100相当于没有对图片进行任何的压缩，会使文件相当大。一般60-80就可以了（具体数值根据项目需要）

2、当图片色彩不太丰富时无论有无透明要求——！保存为PNG8格式

——文件较小、支持透明，但不支持半透明。

3、当图片有半透明要求时——！PNG24

——支持半透明，并且不对图片进行压缩，文件较大。
4、保留一份psd格式

sprite拼图

图片精灵（CSS Sprites，又称css精灵）即把网页设计图里面的小图标小按钮合并到同一个文件，命名为sprite，用的时候引入sprite这个文件，同时通过background-position这个属性来定位这个文件。利用CSS Sprites最大的优点是能很好地减少了网页的http请求，从而大大的提高了页面的性能；并且CSS Sprites能减少图片的字节。

精灵图遵循的原则

1、合并—排列

1）图片之间必须保留空隙；

——防止之后有更改图片大小的需求时，还要去更改css的background-position属性；有一定的容错性，防止css写的不准确时其他不需要的部分显示出来。（建议整像素点）
2）图片排列方式——横向排列、纵向排列

2、合并—分类

1）把属于一个模块的图片进行合并
2）把大小相进的图片进行合并
3）把色彩相近的图片进行合并可以使文件比较小
4）综合以上方式合并

3、合并--推荐

1）只本页用到的图片合并
2）有状态的图标合并（这样在写css代码时状态的图标只是x轴或y轴的区别）

Photoshop如何切图相关推荐

Photoshop CS6切图
Photoshop CS6切图基础工具切图基础工具标尺: 在视图中选择标尺,标尺将显示在上边和左边辅助线: 利用放大镜放大需要计算尺寸的图,鼠标左键选择标尺,向下拖动到相应位置生成辅助线,方 ...
Photoshop快速切图技巧
作为一名前端开发,"切图"是必不可少的工作.在切图这种"低级"工作中,除了向设计师学习各种复杂技能,有没有一种低门槛.高效率的切图方式呢?今天就让博主这个从小就 ...
photoshop android 切图插件,摹客PS插件-摹客PS插件(PS切图插件)下载 v2.1.3官方版--pc6下载站...
摹客PS插件是一款PS切图插件,可以自定义切图尺寸,使用摹客PS插件可以一键上传图片,智能标注数据,不再需要手工切图,智能标注查找方便,摹客PS插件可以提高用户工作效率. 摹客PS插件是一款PS切图插 ...
photoshop android 切图插件,CutSlice me 切图神器（PhotoShop强力割图插件）
前些时候,一同事给我装了这么一个插件 Cut&Slice me .说是一切图神器,只要我设计的时候按照该插件的规则进行图层命名和分组,至少减少百分之50以上的切图工作量.试之,甚爽~~~把它分 ...
使用Photoshop记录切图动作
作为前端,切图是繁琐费事又必不可少的工作,但可以将复杂的操作记录下来,再次切图时,可以实现一键切图的功能. 一.使用Photoshop打开一个PSD文件,打开动作窗口. 二.在打开的动作窗口新建动作, ...
Photoshop的切图的常规流程以及常用快捷键
PS切图常规流程打开ps软件(cc/cs都OK),选择工具栏中的文件,点击打开相应你要导入的文件打开一个文件,锁住图层(防止放大缩小时图片大小发生改变) (放大缩小 alt+鼠标滚轮上下滑动) 3 ...
css学习任务二：切图写代码
今天的任务是根据UI给的图进行切图,然后写出相应的页面,UI如下: 收获:学习前端知识一年有余,却因为老是找不到实战项目而得不到实际的提高,直到今天的学习我才知道切图是怎么一回事,明白了你看到一张漂亮 ...
android ps切图工具下载,移动APP设计之PS切图插件大汇总，值得收藏
移动APP界面设计切图和标注是一项必不可少的步骤.所以,设计界也涌现出了很多切图神器和标注神器. 包括25学堂之前介绍过的很多切图工具和切图教程. 今天25学堂的小编为大家精选了几个不错的移动APP设 ...
Web中图片的使用，下载与切图
一.图片的使用 1.图片在网页中的默认排列顺序 <img src="img/1.jpg" /> <img src="img/2.jpg" /& ...

Photoshop如何切图