Photoshop——切图小技巧

准备工作

---

把Photoshop功能面板设置成我们前端常用的并保存下来，这样就不用我们每次使用的时候都要花时间再去设置一次了。

1、设置标尺单位

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

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

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

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

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

3、辅助视图

在“视图”菜单下开启：  1）对齐(在移动图层的时候当它靠近文档边缘或参考线时会有一定的吸附力)、  2）标尺(Ctrl+R)  3）显示>参考线(Ctrl+;)(需勾选[显示额外内容])Ctrl+h也可以显示/隐藏参考线；

【Ctrl+h隐藏选择区】这项功能是有时候用选取工具选定了选择区后，但还要在同一图层完成其它的操作，可以按Ctrl+h进行暂时隐藏，需要时在按一下Ctrl+h就会显示出来，当你的图层很多时，要选择同一样的选区只需Ctrl+h一次，然后关掉当前操作图层的眼睛，显示出下一图层时，在按Ctrl+h就会显示出选区，而且选区是一样的，所以Ctrl+h更适合多图层进行同一样的选区操作，另外还可以隐藏和显示路径、选区、栅格线、标尺、网格等等。

获取信息

---

1、尺寸信息

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

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

【！一般设计稿都比较大，当我们要选择比较大的区域是就会很不方便。这时我们可以先在左侧画一个矩形框，再按住Shift在右侧画一个矩形框。在信息面板中查看它的宽度的值，以同样的方法查看它的高度】

颜色信息

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

1.确定背景是否为纯色——使用取色工具 吸取背景不同位置看颜色是否有变化2、确定背景是否为线性渐变——使用魔棒工具 选中图层，选择魔棒工具，容差值改低(可直接设置为0)，用魔棒工具多次击图层不同位置，若每次选中的区域为线性的并且多次点击域都为线性并平行，背景色则为线性渐变。反之则不是。

切图

---

切图之前

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

修饰性（一般用在background属性）：图标、logo有特殊效果的按钮、文字等：非纯色的背景

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

banner、广告图片文章中的配图

[有些图片是从服务器拉过来的数据——这些图片不用切图 只需用]img标签占位就可以了]

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

修饰性：PNG24——支持全透明和半透明（IE6不支持半透明）PNG8——不支持半透明内容性的：一般存为JPG（有时还要做些压缩来保证图片不要太大）

切图步骤：

1、隐藏文字

文字作为内容是需要写道HTML标签里的，除非有的文字有一些特殊的效果我们不能用代码写出来，这时我们才会把文字切成图片

若文字为独立图层——隐藏文字图层若文字和背景合并在了一个图层——平铺背景覆盖文字使用矩形选框工具>自由变换（Ctrl+T）>进行拉伸或使用移动工具+Alt(按住Shift可垂直或水平移动)

切片方法：

使用矩形选框工具：

1、切图PNG24

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

2、PNG8

——带背景切

合并图片的（可见）图层（Shift+Ctrl+E）矩形选框工具选择内容魔棒工具去除多余部分（减去相减：按住Alt）——适度调整容差值用移动工具拖至新文件或已有文件

3、可平铺背景

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

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

切片工具——有一定的使用范围（比较适合可以一刀切的活动页）

拉参考线选择切片工具点击选项栏中的“基于参考线的切片”按钮保存

存储

---

存储为Web所用格式——选择所需要的切片（按住Shift多选）——选择图片格式——存储——选择（选中切片）
保存：文件>脚本>将图层导出到文件

保存类型：

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

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

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

文件较小、支持透明，但不支持半透明。
PNG8默认索引颜色模式更改时会造成颜色的丢失，因此更改时PNG8格式的图片时要将颜色改为RGB格式。

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

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

sprite拼图

---

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

图片优化与合并

大小与质量

——平衡和取舍、使用压缩工具

合并时需遵循的原则

1、合并—排列

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

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

2、合并—分类

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

3、合并推荐——

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



此为我在网易云课堂上付费教程课堂上的笔记再综合自己已有的知识所写。
云课堂上面有很多这方面的免费教程，里面的教程相对初学者而言还算可以~此处非广告的哈~