第九次课程小结： 切图

常见的快捷键

放大图片：”CTRL” +“+” 缩小图片：“CTRL”+ “-”

存储为web所用格式alt+shift+ctrl+s

存储为png-24格式，png-24格式的图片质量比较高

具体操作：

手动切图详细操作

网站设计常用格式：宽度1920*2000像素 分辨率72像素/英寸

选择界面设置：快捷键V 转换到选择工具。

选框工具：

shift+鼠标左键：圈出正方形或原型

Alt+左键：定位圆心

Shift:增加选区

Alt:删除选区

Ctrl+d删除选区

工具的具体用途：
污点修复画笔工具（J）：从点击周围来取素材再做一个融合
修复画笔工具：ctrl+右键，取素材，鼠标放开画出的内容，有羽化效果（复用某个地方的素材）
修补工具：将修补区域圈起来，按住鼠标左键拖动，放开后，放开区域回合圈的区域融合可以盖掉涂抹工具

画笔工具（B）：可以通过属性面板调节硬度来实现画出来的轮廓的模糊程度
铅笔工具：画出的效果带毛边，硬度调到最小，画出的依然比较生硬

防制图章工具（S）：取到的素材，什么样子画出来就是什么样子；与修复画笔不同的是，修复画笔松开左键会羽化图片边缘
图案图章工具：sp库中存在的图案

历史记录画笔工具(Y)：打开历史记录面板，将历史记录画笔放在前面的方框内，点回原图，这时，画笔就带有历史记录，可以在原图上进行局部处理。

橡皮擦工具（E）：设置背景颜色后，使用橡皮擦，擦过的地方会被背景颜色填充。
背景橡皮擦工具：会将图片直接擦掉，露出背景图层。
魔术橡皮擦工具:颜色相同区域，会被直接擦掉，露出背景图层。

渐变工具（G）：设置前景色和背景色后，在图层上拉动，会出现渐变效果，属性面板上有各种渐变方式。
油漆桶工具

模糊工具
锐化工具：内容会变得干燥
涂抹工具：类似画板上画完画，用手抹一下,比如加长睫毛
污点修复画笔工具：照片处理，抹掉不需要的地方 修复画笔工具：复用某个地方的文字或图片 修补工具：选中要抹掉的区域，按住鼠标左键，拖至要填补成的区域，可以融合图片盖掉涂抹区域 画笔工具：可调整画笔硬度和大小 铅笔工具：线条细且硬，也可调整画笔硬度和大小 -- 减淡工具（O）：使脸部皮肤变白 加深工具 海绵工具
快捷键：
Alt+shift:变换选区

Alt+del填充前景色

Ctrl+del填充背景色

Alt+拖动图片：复制图像

Ctrl+t自由变换

按住Ctrl，在收敛图层上单击

切图的三种方式：

手动切图

手动切图需要切图人员完全手动的使用“切片工具”一个一个的去切割图片。首选，选择“切片工具”，然后在需要切图的图标上使用“切片工具”选择一个包含了图标区域。例如下图的ADDRESS文字上方的图标就使用了“切片工具”选中。继续切其他图标，从图中也可看出每个切图左上角都有一个数字，这个数字就是切图的编号，表示当且切图时第几个切图。
有时候看着这么多切图觉得挺烦，那可不可以只显示我们自己切的图？答案是肯定的。我们先把工具切换到“切片选择工具”，上面的菜单栏多了一个“隐藏自动切图”按钮。

参考线的添加有两种方式：

第一种：打开菜单“视图”->“新建参考线”，弹出“新建参考线”。参考包括“取向”（水平或垂直）、“位置”
第二种：如果参考线都是按照第一种方式添加，那就显得效率太低了。特别是马上要介绍的参考线切图，如果按照第一种方式添加几十条参考线，那要等到猴年马月。第二种添加参考线的方式非常简单，直接在垂直标尺或者水平标尺处按住鼠标左键，一直往外拖动就可拖出一条新增的参考线。
然后在工具栏中选中“切片工具”，此刻工具菜单栏中多了一个“基于参考线的切片”按钮。点击这个按钮。设计图中自动生成了几个切片，切片工具基于参考线自动生成切图。这样生成切图的方式比传统的一个一个手动切图效率要高一些。
精准切图
精准切图是CC版本引入的新功能，何为精准切图？精准切图解放了切图人员的双手，PS通过脚本自动对每个图层执行切图。切图人员只需选择几个菜单执行切图命令，剩下的工作就是等待PS执行切图。另外一方面，精准切图是计算机基于”图层对象“切图，所有切出来的图形精准度肯定也比人工切图高。
打开菜单“文件”->”导出"->“将图层到处到文件”,弹出导出窗口：
image
上面窗口需要填写几个参数，“目标”即导出到哪个目录下，“文件名前缀”为所有导出图片文件名称的前缀，“仅限可见图层”只导出可见图层，“文件类型”为导出文件的类型（例如png、jpg等）。最后点击“运行”按钮开始执行自动切图。下图是切图过程PS“图层”自动切图的一个截图。可以看出PS在自动选择每个图层然后执行导出。

自动切图

自动切图我们根本就看不到切图的过程，当我们把图层设计好了，我们的切图也就完成了。
在使用自动切图功能之前，我们需要做两个操作：
操作一，选择菜单“编辑”->”首选项"->“增效工具”，弹出下面的窗口。勾选“启用生成器”。

操作二，勾选“文件”->“生成”->“图像资源”菜单。

现在准备工作已经完成了，接下来就看看怎样自动切图。举个例子，现在我们需要导出下图的图层，并且不包含背景色。

其实上面图片的所有资源都放在一个叫做“Address”的图层分组下。现在把分组名称重新改为“Address.png”。然后我们到psd文件目录下，psd文件名字为“Artica - One Page PSD Template“，可以看到同目录下生成了另外一个叫做”Artica - One Page PSD Template-assets“的文件夹。

然后打开”Artica - One Page PSD Template-assets“文件夹，看到有一个叫做Address.png的文件，正好是我们图层分组的名字，并且图片背景是透明的。这样的功能是不是很强大？

自动切图也是生成svg的利器。ps不仅可以把图层生成为png文件，还支持生成svg文件。现在我想把下面的图标保存为svg格式，我们仅需要把图层文件名字改为“Icon.svg”。打开”Artica - One Page PSD Template-assets“文件夹，可看到生成了Icon.svg文件。imageimage

用文本编辑器打开Icon.svg文件看看生成了什么内容。文件中包含了width和height以及css样式，正是一个比较常见的svg文件。我们通过修改css样式就可以改变图片的颜色了。