phtoshop切图的几种方式

                                                phtoshop切图的几种方式

            作为一个前端开发者，想必多多少少要掌握一定的切图技巧，通过几天的摸索，从了解psd是什么文件到安装ps并对其简单的工具进行一点的了解继而到最后怎么样切图并将设计稿变成一个实实在在的网页！在此处总结了关于切图的几种方式！

1.传统的切图（手动切图）：

工具栏中的“剪切工具”，其实剪切工具里边一共为我们提供了四个工具。分别为“裁剪工具”、“透视裁剪工具”、“切片工具”、“切片选择工具”，如下图所示：

图中的“切片工具”、“切片选择工具”是我们切图需要用到的两个工具。“切片工具”和“选择工具”有点相似，都是选择一个区域，不同的是切片工具选择了区域后会标记为一个切图。例如下图中我使用了切片工具切了一个小片，左上角的03表示切片的名字，如下图所示：

如果我们使用切片工具切了十几张图，现在觉得某些需要调整或者删除，这个时候我们就可以使用“切片选择工具”，顾名思义可以用来选择我们之前切出的图。然后右键选择的图弹出菜单，菜单有包括“删除”操作，如下图所示：

发现切图的时候少了或者多了像素：进行微调
右键编辑，写入（该有的像素可以让切出来的框大小改变）就可以了！
不过默认向上！用切片工具点击切好的框按上下左右移动就可以了！ ---jpg

切图完成之后就可以执行导出了。打开“文件”->“导出”->“存储为Web所用格式”（老版本打开方式为“文件”->“存储为Web所用格式”），弹出“存储为Web所用格式”窗口。需要设置几个选项，右上角下拉列表选择“PNG-24”，勾选“透明度”和“交错”选项。最后点击“存储…”，选择我们存储的路径。到目前为止，手动切图工作基本上就完成了，如下图所示：

默认存储的时候，由于ps会默认给我们切好的区域旁边也会默认是一个切片，那么我们保存的时候不仅保存了我们要切的图片，而且旁边的我们不想要的切片也会保存，不过我们可以在保存的时候选择---选择的切片！




2.（精准切图）：

精准切图是CC版本引入的新功能，何为精准切图？精准切图解放了切图人员的双手，PS通过脚本自动对每个图层执行切图。切图人员只需选择几个菜单执行切图命令，剩下的工作就是等待PS执行切图。另外一方面，精准切图是计算机基于”图层对象“切图，所有切出来的图形精准度肯定也比人工切图高

。打开菜单“文件”->”脚本"->“将图层到处到文件

（不过此方法切出来的图片贼多）！

3.自动切图（可推荐）

1. C版本另一个强大的功能叫做“自动切图”，首先解释下什么叫自动切图。精准切图我们能够看到PS切图的过程，自动切图我们根本就看不到切图的过程，当我们把图层设计好了，我们的切图也就完成了。

   在使用自动切图功能之前，我们需要做两个操作：

   操作一，选择菜单“编辑”->”首选项"->“增效工具”，弹出下面的窗口。勾选“启用生成器”，如下图所示：

   

2.  操作二，勾选“文件”->“生成”->“图像资源”菜单，如下图所示：

   

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

   

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

   

   

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

   

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

   

7.   用文本编辑器打开Icon.svg文件看看生成了什么内容。文件中包含了width和height以及css样式，正是一个比较常见的svg文件。我们通过修改css样式就可以改变图片的颜色了。例如现在把”fill:#fff”改为“fill:#FF3300”，然后保存文件。用浏览器打开，可看到图片颜色变成了红色，如下图所示：

   

   

-----------------------------------------------------------------------------------------------------------------------------------------------------

                                                                               关于css sprite

  在网页中的大一点的图片可以是切出来的，可是关于一些图标，一般是制作成雪碧图的方法，在这儿，记录下来怎么制作雪碧图以及小一点的图标的方式！

1.制作小图标的方式：

选中要制作的图标或文字或其它，

图层右键---转换为智能对象，

接下来双击此图层，即可将图标切下来！

（2.选中此图层----框选住此图层---ctrl+c----ctrl+n(记忆图层的大小自动新建一个同样大小的画布)）----ctrl+v)!

2.雪碧图是同样的一个道理就是画布的大小改变了：

新建一个画布-----选中图层（ctrl+点击 --选中多个图层  有的图不止一个图层）

---右键复制图层到已经建立的画布

---ctrl+T（自由变换即可看见图层）！

（2.选中此图层----框选住此图层---ctrl+c---再到新建的画布 ctrl+v即可）!

                                    保存的时候要把背景色给去掉这样做出来的图才是透明的图片! ---png

                                   排版：当画布不够大或小的时候可以调整画布的大小：

                                    对画布进行大小修改，图像----画布大小----调整大小选择要保留的方向

                                   进行矩形拉一个边框，选择填充色，再对每个图标进行细节上的排版！

                                   用<span>,<i>建立图标

-----------------------------------------------------------------------------------------------------------------------------------------------------

快捷键：
ctrl+alt放大镜
alt+放大镜----可以缩小
空格      ----变为拖动

----------------------------------------------------------------------------------------------------------------------------------------------

切图方式有各种各样的，比如还有参考线的切图方式，不管怎么样的切图方式，最重要的还是找到适合自己的方式！

最后个人的切图方式：一般是图片-------传统切图-----jpg

                                    图标做成雪碧图，（图标很少可以单独切出来）-----------png

                                    同时可以结合智能切图，这种得到图片的方式的确很方便，只需要改一下文件夹的名字就可以了

----------------------------------------------------------------------------------------------------------------------------------------------

小技巧的运用（裁剪）：

用选区工具选择某部分内容，然后单击裁剪工具（先点击要选的区域，继而在图层哪里ctrl+点击再用裁剪工具就可以了）
，这样所选择的内容就已经被裁剪好了，再按下回车键就可以！

放大功能：按住H键不放，点击鼠标，有一个小的方框，

 -------------------------------------------------------------------个人记录--------------------------------------------------------------------
 在窗口上选择有用的工具1.图层2.历史记录3.信息4.字符
信息：选项设置中改为像素，选中文档大小
编辑--首选项--改为像素

步骤：1.视图/显示/智能参考线以及视图/字符，这两个都要选上；
2.窗口/信息；窗口/字符，两个打开，其他的多余的可不需要，将前面的勾取消；
3.点击信息面板那一个小三角，打开面板选项/标尺单位：像素；两个像素模式：RGB颜色；文档尺寸选上，然后确定；
4.编辑/首选项/单位与标尺【标尺：像素；文字：像素，其他默认不用改动】
这样的做的好处：在PS里打开一个网页，随便点击哪个图片或者某个字符，就可以知道详细的信息。
5.窗口/工作区/新建工作区/名称：web切除，后两个选上，然后点击存储，这样就可以保存下来，防止丢失了。





1.选取区域
选取之后可以进行填充
选取有几种方式1.选取一个区域2.选取多个区域(可重叠+)3.选取减去部分(-)4.选取交叉部分
右下角左击扩展区域;可选椭圆,一列,一行,都为一个像素！
shift+选中 变成圆形,一定要先放开鼠标才有效！alt+选中定位中心点
shift相当于+ alt相当于-


2.套索工具
可以选择不规则的区域
shift相当于+ alt相当于-
多边形套索，双击可闭合



小技巧的运用：用选区工具选择某部分内容，然后单击裁剪工具
（先点击要选的区域，继而在图层哪里ctrl+点击再用裁剪工具就可以了）
，这样所选择的内容就已经被裁剪好了，再按下回车键就可以！
如果想要更精细的选区，上面部分完成后，单独对所选的内容进行修改，除了上面老师所讲的，还有一种办法就是：如果所需要的内容比较复杂，颜色较样式多，就可以用魔棒工具选择颜色单一且占据比例较大的那个，然后再在属性栏那里点击反向，就可以把所需要的内容选下来，再对其进行颜色填充对各种修改。

放大功能：按住H键不放，点击鼠标，有一个小的方框，


填充选取：alt + del
自由变换----alt + shift得到小一点的选区del删除选区
ctrl + T 自由变换，shift+拖动变小
alt+拖动 ---- （复制一个图层）建立图层
ctrl+单击缩略图，即选中图层所在区域

alt+裁剪定义中心线，再alt拖动至想要的大小
在一个图层选中区域，然后再另外的一个图层选中区域，只会对相交的部分操作(删除)

参考线：ctrl+R出现标尺，从标尺的地方拖动即可拖出参考线，删除就是回到原来的位置即可！
拖出参考线以后，alt+拖动==改变方向
新建参考线---方向+位置

alt聚焦区域就变成了菜单栏，再按相对应的字母即可！alt+V+E新建参考线的快捷键
ctrl+''网格    ctrl+;参考线



1.传统切图：切片工具1.一张一张切图2.利用参考线切
2.精准切图：利用脚本切图



3.集成功能的切图：启动生成器，生成图片资源，改一下文件夹的名字，*.png
还可以通过名字改为200% *** .png
文件夹中不想要了的图片就把名字改了一下就可以了

***.png8 ----***.png24改格式

4.svg导出技巧
将文件夹名字改为*.svg

5.图层：复制css效果如下：
.蓝色背景 {
  background-image: url("蓝色背景.png");
  position: absolute;
  left: 0px;
  top: 31px;
  width: 1600px;
  height: 85px;
  z-index: 127;
}


6.搜索图层
类型：名称搜索
       颜色搜索
       等等

慕课网：
选中区域,1.转换为智能对象---ctrl+c  ctrl+n  ctrl+v
         2.直接裁剪：完了以后ctrl+alt+z还原
存储为web格式

  参考资料（干货）：http://jingyan.baidu.com/article/19020a0a149b71529d2842bb.html

                                 http://www.imooc.com/learn/93

                                http://www.imooc.com/learn/506                               

                                 http://www.imooc.com/learn/668