前端PS技巧有两大类：1 测量和取色 2 切图 1不用说.开发须要2.切图实则也是必备.说实话当我一开始知道前端须要自己切图的时候.我的内心是抗拒.但是后来我慢慢的发现.我是幸运的.切图真的是前端必会的技能。为啥呢.因为我们是前端.所以我们更清楚自己须要什么的图片。而并且假如他们没有切出我们需要的图片或者有什么简单的改动.我们还得和UI沟通.改动.传文件.不仅效率低.而并且神麻烦。你永远不知道一个项目会有多少改动.说多了都是泪.所以学会了切图.这都不是事儿！lets go.
1 设置工具
打开PS首先准备我们须要的工具.PS博大精深.我们只须要用切图须要的工具就OK了。我们须要的一般有以下这些：
1 左边和上面的菜单栏：确定是存在的
2 信息面板：窗口--信息--右上角鼠标右键找到面板选项---标尺的单位改成像素
3 历史记录：窗口--历史记录（当我们有错误时.能够通过历史记录直接回到某个位置）
4 图层 ：窗口--图层
5 标尺： 先打开一张图片（有图片标识才能用）.找到视图--标尺 .标尺能够拉出参考线.辅助我们切图 。
6 建立工作区: 窗口--工作区--新建工作区--起名字--存储工作区（存储工作区就是存储当前你对PS软件的设置.即使你关上了PS软件.再打开还是你的设置.工作区能够建立多个）
我的设置如下图：
打开凤凰新闻，查看更多高清图片2 测量和取色
【测量宽高】工具：参考线，矩形选框，信息面板。
1 从标尺上拉出参考线（在标尺上按住鼠标左键不松往你需要地方拉.就会出现一根线.上下左右都能够.还能够不拉.拉了会更精确些.选框会自动吸附到参考线上）
2 找到矩形选框（切图一般都用矩形选框.没用过别的.选中你要测量的地方.选中的时候你能够看两个地方：1 鼠标位置有显示宽高 2 信息面板也有显示。但是当你松开鼠标.就只有信息面板有显示信息了.如下。
【取色】：取色器+吸管工具
1 单击取色器.会出现一个面板.这个时候把鼠标放在图片上会发现自动变成了吸管工具.不用专门去找.然后呢.单击你需要取的颜色.面板上就出现你需要的信息。
（还能够用取色器检查你的按钮或者背景是不是是纯色）
【文字的测量和取色】：文字工具（ 文字比较特别直接用宽高量可能量不准，所以优先用文字工具）
1 找到文字工具.单击你需要测量的文字.图层那边会自动移到文字图层的位置.看菜单上面.有你需要的字体大小和颜色以及字体的类型。
2 也许你的文字不是单独的图层.这个时候就只能用选框和取色器测量了。
3 也许你发现你看到的文字和你测出来的不一样.那就是文字图层加了别的效果.这个时候还是用取色器取。
3 切图 ：切片工具
1 确定须要切的图（有的图是上线的时候从后端加载过来的.所以不用切）。
2 能够用iconfont图标的就用.不能用的小图标就用CSS sprite.
3 能弄出来就不要切图.图片影响加载速度。
4 切片工具--你要切的图--图层面板中.关掉不须要的元素----用切片工具选中图--导出切片(快捷键alt+shift+ctrl+s ）或者（文件--脚本--存储为web所用格式）
5 选择图片要以哪种格式存储了.不同的格式会影响图片的质量和大小.自然也会影响到就加载速度.
5 常用快捷键（快捷键是开发效率必备利器，多多练习）
放大/缩小：Alt+鼠标滚轮
拖动图片：长按空格键.鼠标会变成小手即可拖拽图片
取消选框：ctrl+D
选择图层： 1 移动工具: 1 勾选上方菜单自动选择和选择组/图层。这个时候单击图片任意位置.右边会自动切换到相对应的图层或者组。
2 在图片上选中某个图层：ctrl+鼠标右键。
导出切片：alt+shift+ctrl+s （文件--脚本--存储为web所用格式）
隐藏参考线：ctrl+h
拷贝文件：ctrl+c
新建文件：ctrl+N
粘贴文件：ctrl+v
作为前端工程师的你学会了吗？？