一、PS切图基础
1、 PS界面设置
1) 新建设置：
Ctr+N（新建快捷键）
预设选定web或自定义，宽1920，高2000像素，背景透明，分辨率72像素/英寸，RGB颜色 8位。
在设置好参数后可以点击存储为预设，以后需要使用直接打开就行了。
2) 移动工具设置：介绍移动工具针对网站前端的设置属性及其快捷键操作。
V（移动工具快捷键）
在PSD中选图层：
1、按ctrl+你点击图中需要的图层，在图层面板中鼠标就会跳到那个图层。记得选中图层而不是选择组。
2、改各个标尺像素。打开视图的显示的只能参考线，标尺Ctrl+R，打开窗口的信息和字符。Ctrl+鼠标左键（你需要的图层），不用选自动选择，图层面板的光标就会跳至你需要的那个图层中，就可*移动，然后显示一切信息和想要的字符。信息面板，改为RGB颜色，像素，打开文档尺寸。
3) 视图设置：介绍针对前端在视图方面的设置以及设置中的技巧
需要在视图中打开标尺（ctrl+R）和智能参考线（M）。
不需要的面板可以关闭，只打开图层，信息，字符，历史记录。这四大面板。
4) 
5) 在设置好信息面板中的参数之后，会显示图片的信息，如鼠标所在的位置，RGB的值，文档的大小以及分辨率之类的信息。
利用这个定位的功能，对解决前端的绝对定位和固定定位有一定的帮助。
还可以显示选区的大小
6) 打开编辑的首选项的单位和标尺，把单位都改为像素。
7) 
8) 最后，打开窗口，工作区，新建工作区，叫web切图。下面框快捷键都可以打勾选。
防止在做的过程中不小心把工作区复位为基本功能，只要再次点击你刚刚工作中所保存的工作区，就可再次回到刚才工作的页面，不会有多余或者少工作面板。
2、 PS基本操作
1) 简单工具操作：介绍PS最基本的工具操作及其技巧
1、第一行是菜单栏，第二行是属性栏。
2、选区工具（M），按住shift键和鼠标左键，变成正方形或圆形。要先放鼠标左键，再放shift键。同时按住shift+Alt键，能以圆心化圆，同理是矩形的中点。按shift键，可以添加选区；按Alt键，可以减掉选区。M键是选区快捷键，按住shift键，再按住M键，可以在选区轮流切换。
3、矩形选框工具四个操作：1新选区，2添加到选区（可同时选中两个选区，选中区域交叉部分自动合并），3从选区中减去－与操作2相反，选中区域从原区域中减去，4与选区交叉－为当前选中区域增加区域
4、选择图层：ctrl+鼠标左键
选区：
1）画正方形、画圆形：shift+鼠标左键拖动
2）画固定圆心的圆：alt+shift+鼠标左键拖动
3）增加选区：shift
4）减去选区：alt
5）删除选区：ctrl+d
6）在工具的扩展中轮流切换：shift+工具的快捷键
放大：ctrl++;
缩小：ctrl+-;
可拖动：space；
快速选择工具：
缩小：[
放大：]
裁剪对应图层，点击Alt并点击图层前面的眼睛（其他图层隐藏只保留这个图层，导出png）
移动（V）、选择（M）、套索（L）、魔棒（W）
alt键+眼睛，只显示当前图层
alt+钢笔，alt可以调整曲线弧度，移动曲线方向（使得选中的路径为自己想要的图案）
H+鼠标左键：缩小，查找,放大局部
2) 图层的原理及操作：介绍PS中图层的基本原理以及结合工具的操作技巧
画五环
1：alt椭圆形选框工具
2：背景色填充：shift+delete
前景色填充：alt+delete
3：右键-变换选区
4：shift+alt+鼠标左键变换选区
5：delet删除中间区域
6：如果圆不合适，ctrl+t变换裁剪图形大小。shift键缩小图形
7：复制图层，移动功能中，alt键拖动图层，可以快速建立第二个圆
8：为了方便可以给每个图层命名
9：快速选择当前图层图形选区， 选择图层-ctrl-图层缩略图单击
10：重复以上步骤
11：ctrl键选中所有图层，拖动全部图案，设置居中
12：选择蓝色，ctrl单击蓝色图层
13：选区工具，在选择黄色图层，alt键选中不需要删除部分，delet删除
3) 参考线及其辅助：介绍如何灵活运用参考线做辅助操作
设置默认参考线
视图-新建参考线-默认单位像素或者ctrl+r--标尺当中拖动参考线即可
删除参考线--鼠标拖动即可
横向变竖向参考线快捷键 alt
alt快捷键识别菜单栏，然后再按相应快捷键的字母调出相应的菜单栏
新建参考线的快捷键：
alt+v+e+v可以快速新建垂直参考线
alt+v+e+h可以快速新建垂直参考线
参考线隐藏ctrl+； ,重新打开ctrl+；
3、 PS传统切图
传统切图
1,切片工具：灰色代表被动切片，蓝色代表主动切片
2,使用参考线切图
3,先使用裁剪工具---再使用参考线切图
4,切图完毕，导出步骤 文件---存储为web所用格式（快捷键：alt+shift+ctrl+s）
5,存储格式png-24
存储为WEB所需格式（快捷键：alt+shift+ctrl+s），预设PNG_24
4、 PS精准切图
1)
单击文件-脚本-将图层导出到文件
文件类型：png-24
透明区域，交错，裁剪图层勾选
注意：比如说要做一个gif动画，如果是ps导出，半透明效果出不来，我们用ps导出一个一个png序列帧，由于命名是很顺的，我们可以在脚本当中引入堆栈，那是非常炫的一个功能.
如果做网页设计把每个图层命名使用网页中合法的命名，就可以不需要导出后再调整名称。
2)
1.编辑——首选项—— 增效工具——勾上 启用生成器
2.文件--生成--图像资源
3.直接通过向图层或文件夹添加或删除后缀名 .png / .jpg / .svg ，自动导出或删除图片，此方法可替代手工切图
4.200%xx @2x.jpg
5.保存到svg，可获取前端代码。
6.抽出资源，可抽出图层
4.直接在图层上单击右键，选择复制css,可复制图层的css样式代码！
复制css：选择-图层-复制成css样式（非智能对象），可用于自己制作的图片或文字
1.编辑——首选项ctrl+k——勾选启动生成器
2.文件——生成——勾选图像资源【文件夹.assets】
3.文件命名--200%文件名[email protected]/文件名8（尺寸/大小）
4.图层--复制CSS sublime text2【这个技能不错】
5.图层管理
二、Ps切图将psd转化成一个html网页
1、Sublime text3 快捷键以及插件的使用
2、前端中的命名规范
3、Css代码初始化
4、浏览器的兼容性
知识点：
Css和html代码配合
Css命名和html标签结构应用
如何用好Photoshop去审视一个设计稿
浏览器兼容性
1、拿到psd之后进行操作的步骤：
1-1、样式和初始化
1、拿到一个psd时
首先对psd进行审视 ：
头部 、尾部 、公共区域 、logo 、（页面的一些元素）、列表
2、 样式文件和初始化
1)新建项目
2)新建首页index.html同时创建文件夹:CSS 、images 、js
3)写页面之前先在CSS中创建三种样式:重置样式reset.css/公共样式common.css/独立样式index.css
3)写页面之前先在CSS中创建三种样式:重置样式reset.css/公共样式common.css/独立样式index.css
重置样式reset.css:
Html的许多标签，网页对他定义有默认样式，通过reset.css文件对一些样式初始化，如margin，padding问题或者a标签的下划线以及等等
公共样式common.css:
一系列页面共用
独立样式index.css:
在reset.css中可以进行以下初始化：
1.body,div,dl,dt,ul,ol,li,h1,h2,h3,h4,h5,input,fore,a,p,textarea的padding、margin、font-family初始化。
2、li、ul、ol的list-style。
3、a的text-decoration、display
4、img的border、display
5、clearfloat{zoom:1;} 清除浮动
// 设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题
3、写页面时注意规范：（可查看前端人员css命名规范）
1)开始页面进行div布局
最好都使用class控制页面元素，还有注意class的命名要规范
1、公共头部<div class="publice-header"></div>
2、导航
3、列表
4、版面
5、公共页脚
-》Id或者class等的命名，一般使用class进行标识
Id或者class等的命名的时候要注意规范，要有实在的意义，不要用拼音命名
-》对页面用div进行布局
-》sublime text3快捷键
按ctrl键可以选中5项然后空格一起更改class为item
li*5>a按tab键即可5项列表
5、开始写div内部内容，并在psd中截取素材
1）psd中获取网页所需素材
h 手抓图片。
1、选择，自动选择：图层。
2、选中图层后，右键选择：转换为智能对象。
3、框选要选择的那部分图。
4、ctrl c 、ctrl n.
ctrl n是新建，会记住选择的宽度、高度等的信息。 Ctrl+v
5、ctrl+alt+shift+s存储为png-24。
1-2、html页面结构整理
2、公共部分的开发
2-1、公共头部和尾部
3、psd局部模式开发
3-1、主体部分介绍
3-2、banner
3-3、menu
3-4、主体pannel结构
3-5、tab切换
3-6、图片库
知识点：
psd还原html要保证px为偶数，切图，作图区域及图片尽量用偶数
不能让内联元素和块级元素处于同一层次，所以a初始化display：block。（块级元素）
public-container有高度所以要加浮动clearfloat
不常更新的图片，如网站的logo，可以作背景，而需要经常更换的图片，需要用img标签展示，像logo这样不常换的图片建议写在css中。
css中不建议对li命名样式的。
<a class="footer-tell" href="tel:718-749-1714">718-749-1714</a>
声明了属性 href="tel:718-749-1714",安装了网络电话可以直接点击打了
为避免窗口缩小时，背景图出现滚动条。
.index-banner-bg {
overflow: hidden;
}
- 当整个页面写好的时候，就检查浏览器兼容问题
- 需要进浏览器进行微调然后再源代码
- 用其他浏览器打开看有没不兼容的问题，然后再调试代码