Photoshop

内容介绍
1.精灵图(雪碧图)的原理以及实现
2.Photoshop基本切图

Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。

Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑
工作。Photoshop有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

Photoshop的工作界面由以下几个部分组成：

菜单栏：

 菜单栏为整个环境下所有窗口提供菜单控制，包括:文件、编辑、图像、图层、选择、滤镜、视图、
 窗口和帮助九项。 
 Photoshop通过两种方式执行所有命令，一是菜单，二是快捷键。

工具属性栏：

 会根据工具箱的不同工具出现不同的属性

工作区：

 平时可以缩放图像来进行细致操作。也可以把其他的都隐藏起来只剩下中间的，但你必须对PS极其熟练，
 对各种快捷键了如指掌。

浮动窗口：

 由三大块组成，第一块颜色和色板，这个主要就是选择和调节颜色很简单。第二块调整和样式，这个菜
 单栏都有，只是这些比较常用，放在这里方便使用，你也可以把你常用的添加上去。

 第三大块要单独说，首先说图层，图层可以说是PS中极其重要的精华之所在，可以把各种不同的操作分成
 不同的层，哪一层要调整或删除就弄哪一层，对别的层没有影响，极其方便，靠上一点一个可以调节图层
 模式，另一个可以调节不透明度的百分比，这两个也经常用到。

 通道是指RGB通道，也就是红，绿，蓝三个通道，可以利用通道抠图，通道磨皮等等，而路径就用的比较少了，在用钢笔工具时可能要用的多点。

 最下面一排小图标也是对图层的各种操作，有删除图层，新建图层，添加图层蒙版，还有图层调节样式等，这些也都是经常要用到的。

一、精灵图(雪碧图)的原理以及实现
1、什么是精灵图

精灵图直译为“精灵”，也被称为通常被解释为“图像拼合”、“贴图定位”或“图片精灵”、“雪碧图”
，是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一
来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

2.使用ps制作精灵图
步骤演示：
1.）新建一个透明图层

2.）使用alt+鼠标滚动建，放大图层
3.）新建参考线（点击切片工具在图层上面右键选划分切片）

在实际测量小图大致宽高后，就开始建立参考线。比如，我的图大致为25px25px（宽高不超过25px25px）。
所以，我在参考线取向上水平方向建立了3条参考线（25像素、50像素、75像素）；垂直方向建立了3条参考线
（25像素、50像素、75像素）。

4.）根据参考线放入各个小图标

3.使用代码显示精灵图

代码如下：

2、精灵图的优势和缺点
优势：

1.）加快网页加载速度 
  浏览器接受的同时请求数是10个，如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，
  加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染
  
2.）后期维护简单 
 该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪
 碧图，直接生成代码，简单易用

缺点：

图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会
出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出
现拼合相邻图片，干扰图片的情况;

二、Photoshop基本切图
切图分为俩种：一种是自动化切图，一种是手动切图
1.自动化切图
动化顾名思义就是不用我们人工去操作的，通过计算机脚本帮助我们进行切图，这样做的好处是十分精准和方便。但是如果切去的图片较多的时候是十分适宜的，但是如果只切去一小部分的图片。

步骤如下：
首先打开一张PSD文件，这里强调一定要是PSD文件。因为脚本的运行依据是图层，只有PSD文件才存在图层这种说法

第一步选择如下说是：

第二步参数如下所示：
这里特别要注意的一点是第一个红色的方框一定要是英文，因为博主使用的是CS5版本，这样设置会发生错误，其他的版本就不清楚了。为了避免出错，我们统一使用英文命名，第二个方框我建议选择PNG，因为png支持背景透明，这个有利于我们做自动切图

最终我们在运行后的test文件夹下面打开效果如下，同时图片背景也是透明的

但是这样切图算是对计算机运算能力的考验，有时候PS软件还会出现假死的现象，所以在做切图的时候我们需要在人工时间和计算机时间上面做一个权衡，毕竟不是什么都是自动化就是好的。

2.手动切图

5.）当需要删除切片时，选择切片，然后右键选择删除，或者直接按delete键删除。
6.）当需要全部删除切片时，这时选择工具栏中的“视图”-“清除切片”，这样就将切片全部清除掉了。
7.）当切片切完之后，就需要将切片导出。这时候选择工具栏中的“文件”-“导出”-“存储为Web所用格式”，
或快捷键ctrl+shift+alt+s
8.）在弹出的【存储为web所用格式】对话框中，下拉选择框选择JPEG格式
9.）按需求更改质量（低、中、高、非常高、最佳。这五个模式）

修图技巧
修图，是指对图像进行一些细微的调整，比如去除掉图像上一些不需要的元素，或者切图时想隐藏图层中的元素，但是UI使用的是合并了图层的元素，可以用修图技巧将这个元素去除掉。比如下面这张图片，按钮的文字和按钮合并图层了，我们想去掉文字，可以用矩形选框，然后执行“自由变换”命令，就可以横向拖动覆盖掉文字。

图层操作
UI在设计效果图时，会建立很多特殊的图层，这些图层如果直接切图，往往是得不到我们需要的图片，常用的操作是，需要把应用了图层样式的图层执行“栅格化图层样式”;需要把路径绘制的图层执行“栅格化图层”;需要把图层组执行“合并组”等操作，执行了这些操作后，把这些特殊图层转化为普通层，才能方便后续的切图操作。下面这张图片显示的是一个带图层的效果图的图层情况，我们需要认识这些图层。

编辑文件快捷键
撤销 CTRL+Z
向前一步 CTRL+SHILT+Z
向后一步 CTRL+ALT+Z
退取 CTRL+ALT+F
剪切 CTRL+X
复制 CTRL+C
合并复制 CTRL+SHILT+C
粘贴 CTRL+V
原位粘贴 CTRL+SHILT+V
自由变换 CTRL+Y
在次变换 CTRL+SHILT+T
色彩设置 CTRL+SHILT+K

图像调整快捷键
调整-->色阶 CTRL+L
调整-->自动色阶 CTRL+SHILT+L
调整-->自动对比度 CTRL+SHILT+ALT+L
调整-->曲线 CTRL+M
调整-->色彩平衡 CTRL+B
调整-->色相/饱和度 CTRL+U
调整-->去色 CTRL+SHILT+U
调整-->反向 CTRL+L
提取 CTRL+ALT+X
液化 CTRL+SHILT+X

文件快捷键
新建 CTRL+N
打开 CTRL+O
打开为 ALT+CTRL+0
关闭 CTRL+W
保存 CTRL+S
另存为 CTRL+SHILT+S
另存为网页格式 CTRL+ALT+S
打印设置 CTRL+ALT+P
页面设置 CTRL+SHILT+P
打印 CTRL+P
退出 CTRL+Q

选择操作快捷键
全选 CTRL+A
取消选择 CTRL+D
全部选择 CTRL+SHILT+D
反选 CTRL+SHILT+L
羽化 CTRL+ALT+D

图层操作快捷键
新建图层 CTRL+SHILT+N
新建通过复制的图层 CTRL+J
与前一图层编组 CTRL+G
取消编组 CTRL+SHILT+G
合并图层 CTRL+E
合并可见图层 CTRL+SHILT+E

1.移动区：分别是图层移动、文字移动、选择移动