PS切图篇

1.什么是切图

设计稿-产出物（如png、jpg文件）

2.为什么要切图

给网页提供图片素材   html：img     css:background

3.如何切图？

1.使用PS工具

​1)PS首选项设置

编辑>首选项>单位与标尺​ >设置为像素

​​​2)面板

在“窗口”菜单下开启：             

              1.工具   2.选项  3.信息(F8)  4.图层 (F7) 5.历史记录​

如图，最后保存为工作区（窗口>工作区>新建工作区​

3）切图常用工具：

1.移动工具

选择工具面板>自动选择+图层 (组是一个文件夹，方便管理，如选择到组​，无法选择到图层)

2.矩形选框工具

1.添加到选区 按住Shift    2.从选区减去 按住Alt   3.与选区交叉 按住Shift+Alt​

矩形选框工具&信息面板

测量 宽度、高度 ​内边距、外边距 边框、定位、背景图位置

文字大小(如是T，则通过T工具，查看相关信息否则用矩形选框工具​)

行高 

​如是T，则通过T工具，查看相关信息，打开切换文字和段落面板，查看行高

否则，用矩形选框工具从段落距离上个段落开始测量直到文字底部

3.魔棒工具   

      ​主要是用来抠图

4.裁剪工具+切片工具

       适合于可以一刀切的活动页

1.拉参考线 选择切片工具 点击“基于参考线的切片”按钮 保存（全选切片​，统一设置存储格式）

5.缩放工具

 放大：ctrl+加号   缩小：ctrl+减号  ALt+滚轮（正向+，逆向-）​ ctrl+1  100%缩放​

6.取色器

如是文本图层，则通过打开切换文字和段落面板，查看颜色 ,否则用取色器吸取颜色

取色器&吸管工具  可以用于汲取边框色 背景色 文字色​

取色工具的巧用    1.确定背景是否为纯色  2.确定是否是线性渐变 （使用魔棒工具）​

7.辅助视图

在视图菜单下开启：   1.对齐 2.标尺 ctrl+R  3显示额外内容  4 显示>参考线ctrl+;​

切图​过程

1.明确哪些是需要切出来的？

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

2.内容性的（一般用在img标签)​ 如Banner,广告图片 文章中的配图

2.切出来的图片存为哪种类型？

修饰性的 PNG24 (IE6不支持半透明，需兼容）PNG8​   共同点都支持全透明

内容性的 一般存储为JPG​

3.  切图方法

PNG 24的切图方法切图（隐藏文字只留背景）

           若文字为独立图层，隐藏文字图层： 先找到文字图层，然后去掉眼睛图标

​           若文字和背景合并，平铺背景覆盖文字 

            步骤：矩形选框工具 +自由变换（CTRL+T)   适合图片背景可以平铺的情况

                      矩形选框工具+使用移动工具+ALT+Shift   适合图片背景不可以平铺的情况,有纹理的情况

 切图保存

 如果是单个图层，则移动工具选中所需图层（按住Ctrl多选）​，否则右键合并图层（Ctrl+E)， 再右键复制图层到新文件 或拖拽至已有文件（新建：Ctrl+N)

PNG 8的切图方法

​带背景切      1.合并（可见）图层（Shift+Ctrl+E)， 矩形选框工具选择内容， 魔棒工具去除多余部分（从选区中减去：按住Alt​）

 可平铺背景的切图

 用矩形选框工具选取一块区域，复制粘贴到新文件中 平铺内容充满文件的宽（x轴）或高（y轴）​

​4.切图的保存

存储所需内容

1.复制，新建，粘贴 或者拖动内容至新文件 2.存储为web所用格式（Alt+Shift+Ctrl+S)​

保存类型

1.当图片色彩​丰富且无透明度要求时，建议保存为JPG格式并选择合适的品质（60-80比较合适）。

2.当图片色彩不太丰富时无论有无透明度要求，都保存为PNG8格式（在格式中需设置杂边无，​无仿色，可以保存设置格式）

3.当图片有半透明的要求时，保存为PNG24格式

4.为保证图片质量 保留一份PSD,在PSD上进行修改​

修改与维护

1.要继续放更多的图片  更改画布大小​，设置画布定位为左上角，方便已有图标的定位

2.移动图标

1）若图标为独立图层，则使用移动工具拖动即可

2）若图标为非独立图层 用选区工具选中图标区域，再用移动工具拖动图标​

3.要减少画布到指定区域  选定选区，裁剪

注意事项：修改png8的图片，需更改颜色模式为：RGB颜色​​

2.使用背景图

3.图片合并方案

​1.什么是Sprite拼图：就是将所需图标放在一张图片里

2.Sprite拼图好处：减少网络请求，提高网页加载速度​

3.图片优化合并

1.大小与质量

平衡和取舍：如果质量高，文件大

压缩工具：   无损：Minimage 工具：NetEaseWD minimage 

                    有损​：TinyPng     工具：tiny png

2.合并

排列 :图片之间必须保留空隙

排列方式 ：横向排列，纵向排列​

分类规则​： 1.把同属于一个模块的图片进行合并         2.把大小相近的图片进行合并                          

                  3.把色彩相近的图片进行合并                   4.综合以上方法合并

合并推荐  1.只本页用到的图片合并 2.有状态的图标合并​

4.浏览器兼容​

IE6不支持PNG24半透明          解决方法：存 png8 和png24两种格式

CSS3&​切图