前端工程师--切图部分

一.PS界面设置

    1.新建设置：初始化的尺寸参数设置，以及一些常用的快捷键

           1.1新建文件 ctrl+N

           1.2设置一些参数（宽度，高度，单位为像素，背景为透明，分辨率为72），存储预设，给文件起个名字，下次直接按照之前的设置新建PSD文件

    2.移动工具设置

          2.1 移动工具的快捷键  V

          2.2移动工具的作用

                  可以自动移动图层到自己想要的位置

          2.2移动工具针对前端的设置

                   勾选自动选择，设置为图层

                   或者不勾选自动选择，设置为图层，在移动的时候ALT+移动

    3.视图设置

        3.1打开智能参考线（视图-->显示-->智能参考线）

             3.1.1智能参考线的作用（切图时有帮助）

                     移动时可以自动吸附到参考线上，绘制图形，在排列时会自动生成参考线方便校准               

       3.2打开标尺（ctrl+R）

       3.3打开必要的窗口

            信息，字符，图层，历史记录 面板打开

             信息面板-->面板选项-->设置第一颜色信息为RGB颜色，第二颜色信息为RGB颜色，标尺单位为像素，勾选文档大小和文档尺              

       3.4 参数设置

                      编辑-->单位和标尺-->标尺和文字都选择像素        

       3.5保存工作区的设置

                 窗口--->工作区-->新建工作区-->设置一个名字

小结：在使用PS时，先需要进行一些基本的设置

            1.新建文件，存储一个基本的设置

             2.移动工具，自动勾选，还有选择图层

             3.打开标尺和智能参考线

             4.打开所需的四个面板（信息，字符，历史记录，图层）

             5.信息面板的配置设置

             6.首选项，修改单位和标尺

             7.保存工作区 

二.PS基本操作

        1.PS的基本工具操作和技巧

             1.1.ps基本介绍

                   从上到下：菜单  属性  

            1.2.移动工具

                    1.2.1.ctrl可以选择同时选中多个图层

                    1.2.2. 按下CTRL键，点击图层中间，可以形成一个以这个图层为选区的选区，我们在信息面板上可以看到这个图层的信息，比如宽和高。

            1.3 .选区工具

                   1.3.1.一旦有了选区，任何操作都是针对选区的

                            比如：框住选区，右键填充

                   1.3.3. 选区工具的扩展

                             单行选区（一个像素）

                             单列选区

                             椭圆选区

                   1.3.4. shift+选区工具--》

                            按住shift和矩形选区工具--》正方形

                            按住shift和椭圆选区工具--》圆形

                            先放开鼠标再放开shift

                   1.3.5. alt+选区工具--》

                           选中某点 按住alt和矩形选框工具--》以这个点为一个角的矩形

                           选中某点  按住alt和椭圆工具--》以这个点为圆心的椭圆

                  1.3.6.shift 和alt 配合选区工具

                            画一个以某点为圆心的圆

                           画一个以某点为角的正方形

                   1.3.6.选区工具的菜单

                           

                           1.

                           2.并  （快捷：shift键+选区：先放开鼠标)

                           3.差 （快捷：ALT键+选区：先放开鼠标）

                           4.交

                1.3.7 选区工具的快捷键

                         1.M->选区工具

                         2.shift+M-->椭圆选区工具，和矩形选区循环切换

          1.4.放大镜工具

                1.4.1. ALT+鼠标滑轮向上--》放大

                          ALT+鼠标滑轮向下 --》减小

                          空格键+鼠标--》移动画布

          1.5.套索工具

                1.5.1.套索工具快捷键L

                1.5.2.shift+L--》切换套索的扩展工具

                1.5.3. 多边形套索工具（一定闭合）

                           磁性套索工具

          1.6快速选择工具

              1.6.1快速选择工具

                     选中颜色相同的选区（[放小]放大）

               1.6.2魔棒工具

                    选中容差为一定大小的选区

小结：套索工具  快速选择工具  选区工具都是选中一个选区

         1.7 裁剪工具

               1.7.1.画出区域，剪裁，存储为一个PSD

               1.7.2 使用选区工具选中一个区域，按裁剪工具，可以将选区（包含选区最小的矩形）直接裁剪出来

               1.7.3.使用选区工具选中字体选区，按裁剪工具，裁剪出来，按alt+点击图层中间，可以只将字体这个图层留下，可以用来导出PNG

               1.7.4.扩展工具：切片工具和切片选择工具

         1.8 吸取工具

         1.9.污点修复画笔工具

               1.9.1 污点修复画笔工具：抹掉某些内容

               1.9.2修复画笔工具：按下ALT键，放开，然后再涂出来。

               1.9.3修补工具：可以画出一个区域，然后修补成别的内容

         2.图层的原理及其操作（图层的基本原理以及结合工具 的操作技巧）

                2.1以画一个五环为例子（alt+delete 填充前景色  ctrl+delete填充背景色）

                    步骤：

                             1.ctrl+shift+n新建图层

                             2.shift+椭圆选区---》画出一个圆

                             3.alt+delete填充颜色

                             4.右键--》变换选区  alt+shift 缩小  delete删除

                             5.ctrl+T自由变换

                             6.alt+移动工具--》赋值出多个图层

                             7.给每个圆环填充颜色

         3.参考线及其辅助（如何灵活应用参考线做辅助操作）

                3.1 菜单的快捷键  （alt+对应的菜单快捷键）然后再按对应选项的快捷键

                3.2 ctrl+;隐藏参考线，再按，打开参考线

小结：PS快捷方式的总结

                ctrl+N-->新建文件

                V-->移动工具

                M-->选区工具

                L-->套索工具

                CTRL+R -->打开标尺

                CTRL+；-->关闭参考线

                alt+菜单对应的快捷键

                 CTRL+T自由变换

                alt+delete 填充前景色

                ctrl+delete填充背景色

                shift+椭圆--》圆

               shift+矩形选框工具--》正方形

               alt+椭圆--》形成以某个点为圆心的圆

               alt+矩形--》形成以某个点为角的正方形

               shift+L-->切换套索扩展工具

               shift+M-->切换选区扩展工具

               alt+鼠标 改变画布大小

               shift+选区工具--》并

               alt+选区工具--》交

三.PS传统切图

          1.切图和切片（切图和切片的基本概念和区别）

               1.1使用切片工具将必须的图片切出来

                       文字可以使用HTML实现的不切

                       基本的LOGO要切

               1.2借助参考线实现切片

                      拉了参考线完成之后，点击切片工具，再基于参考线进行切片

          2.切片的基本操作及其技巧（介绍切片工具以及基本操作，介绍切片的技巧）   

          3.导出操作（导出为web可用格式）

                     快捷键ATRL+SHIFT+CTRL+S

四.PS精准切图(传统切图的误差不可避免)

         1.切图流程的改变

             文件--》脚本--》将图层导入到文件  

              选中 透明  交错 裁切图层

补充：

1.现在切图都不这样一下子全部切出来

 对于切图你要懂得什么时候切JPG、GIF或PNG格式的图片，了解这三种格式图片的区别，另外PNG格式的它还分PNG8、PNG24和PNG32这三种格式。然后我们有时可能会采用到css sprite技术，这时你要知道什么一类icon等图标可以整合到一张大图中，减少对服务器的请求加载次数。

2.现在的’切图‘是一种思路。看到设计稿，脑子里迅速形成’’切图‘‘思路，哪些平铺、哪些用纯css实现，哪些用png24，哪些合并, UI的层次是怎样的,模板怎么组织...... ，这是现在的’’切图”方式，是前端工程师必备的最基本能力。而最终只是把必须分离出来的图用PS“切”出来。

3.图片，文件的命名规范

4.尽量可能的少用图片

五.扩展知识介绍

           1.自动切图

               1.1.使用 PSCC版本开始集成的新功能实现自动切图

                     这个需要先进行一些基本的设置   编辑-->首选项（ctrl+K）-->增效工具-->勾选启用生成器(注意下次开启PS时，设置才起到作用)

                                                                           文件-->生成-->图像资源

                     为图层重命名，增加后缀就会保存相应的图层到某种图片格式  

                    .jpg8(80%的品质)  .jpg10(默认是100%的品质)  .png8  .png24(png8和png24透明度是不一样的)  100%**@2x.jpg(放大2倍)

                    JPG是一种对图片进行有损压缩的图片格式

                    PNG是一种对图片进行无损压缩的图片格式

                    可以直接命名好                

               1.2.介绍SVG和webP格式导出技巧

                     svg格式（矢量图的格式）：后缀：.svg

                     webP格式：方式如上

           2.抽出资源

               2.1介绍PSCC2014开始导出SVG格式的办法

           3.复制CSS

               3.1.介绍PSCC自动生成CSS的办法

                      选中图层-->图层菜单-->复制CSS-->粘贴到sublime中

           4.图层管理

               4.1.如何对PSD图中的大量图层进行管理

                 

           2.

六.总结