前端PS切图
一、Photoshop的界面设置
二、Photoshop的基本操作
三、Photoshop的传统切图
四、Photoshop的精准切图
五、Photoshop的扩展知识
视频学习：http://www.imooc.com/learn/506
--------------------------------------------------------------------------------------------------------------------
一、Photoshop的界面设置
（1）新建设置
预设-->自定 宽：1920px 高：2000px 分辨率72px 颜色模式：RGB颜色8位 背景内容：透明
（2）移动工具设置<V>
在移动工具的属性栏上将“组”改为“图层”后， Ctrl+鼠标左键选中PSD图片中的小物件进行所需要要的位置移动
（3）视图设置
勾选两个东西：视图—>显示—>智能参考线、视图—>标尺
关闭不需要的窗口：窗口—>库、颜色、路径、通道、属性
移动/打开的窗口：历史记录与图层同栏，窗口—>信息、字符
信息面板初始化设置：RGB颜色、RGB颜色、像素；勾选文档尺寸
首选项设置：文件—>首选项—>单位与标尺：单位上的标尺与文字都改为“像素”
（4）最后为避免丢失做好的设置，可以在窗口处新建一个工作区，命名为“Web切图”，捕捉键盘快捷键、菜单，进行存储即可。
--------------------------------------------------------------------------------------------------------------------
二、Photoshop的基本操作
♦ 简单工具操作
（1）选择工具<V>
在移动工具的属性栏上将“组”改为“图层”后， Ctrl+鼠标左键选中PSD图片中的小物件进行所需要要的位置移动
（2）框形选区工具<M>
属性栏上有：单选、+选< shift>、-选<alt>、*选
长方形<M>变正方形、椭圆< shift+M>变圆：shift+鼠标左键画选区
圆选定圆心：shift+alt+左键选区
Ctrl+D 取消选区
（3）套索、多边形套索、磁性套索选区<L>
魔棒工具选区<W>
相关操作类似框形选区工具
（4）裁剪工具<C>
选区+裁剪：精确裁剪
*
*
*
*******************************************************************************************
♦ 图层的原理及其操作
复制一个图层：Alt+鼠标左键拖动<ps界面>
图层选区：Alt+鼠标左键按图层的矩形区
*******************************************************************************************
♦ 参考线及其辅助
窗口—>新建参考线（单位是像素）<Alt—>V—>Z>
标尺快捷键：Ctrl+R 后，从左或从上拖动参考线
删除参考线：只需将参考线拉回标尺处
关闭/隐藏参考线：Alt +‘；’（分号） 再按一次打开
--------------------------------------------------------------------------------------------------------------------
三、Photoshop的传统切图
♦ 切图与切片
选择裁剪工具下的“切片工具”，在所需要的地方进行切片，切完后导出（复杂度较大）
*******************************************************************************************
♦ 切片的基本操作及其技巧
简单：先裁剪大部分，然后在需要的图层上（Ctrl+鼠标左键）拉参考线作矩形围住需要的图形，而后选择“裁剪—>切片工具（基于参考线的切片）”
*******************************************************************************************
♦ 导出操作
文件—>存储为web所用格式—>格式：PNG-24，存储
--------------------------------------------------------------------------------------------------------------------
四、Photoshop的精准切图
- 介绍如何利用Photoshop的脚本，进行一种更加快捷精准的切图方法
打开PSD文件
文件—>脚本—>将图层导出到文件（文件类型：PNG-24 勾选：裁剪图层、透明区域 选好导出目标以及修改好文件名前缀—>运行）
--------------------------------------------------------------------------------------------------------------------
五、Photoshop的扩展知识
♦ 整个图层组/精准图片导出：新功能实现自动切图
1）编辑—>首选项—>增效工具（勾选：启用生成器）
文件—>生成—>图像资源（在文件夹***-asset中）
2）给图层组重命名，在名后+“.png/.jpg” ，改成图片格式都行
*******************************************************************************************
♦ 自动生成CSS的方法
1）选中图层的非智能对象—>图层—>复制CSS—>在写前端代码的记事本上“粘贴”即可（记得样式的对应的名称）
*******************************************************************************************
♦ 如何对psd中的大量图层进行分类管理
在图层面板下的类型对图层进行筛选，即可将类型相同的图层快速找出