前端必备PS技巧
hai,how is it going？I'm MuQing.I come back。哈哈，最近在英语的路上奋战，小秀一下。又好久没写博客了，实习的生活渐行渐远了，回到学校也终于能够坐下来对很多东西进行沉淀和总结。今天就跟大家来聊聊前端需要会的PS那点事。
前端PS技巧有两大类：1 测量和取色 2 切图 1不用说，开发需要2，切图其实也是必备，说实话当我一开始知道前端需要自己切图的时候，我的内心是抗拒，但是后来我慢慢的发现，我是幸运的，切图真的是前端必会的技能。为啥呢，因为我们是前端，所以我们更清楚自己需要什么的图片。而且如果他们没有切出我们想要的图片或者有什么简单的改动，我们还得和UI沟通，改动，传文件，不仅效率低，而且神麻烦。你永远不知道一个项目会有多少改动，说多了都是泪，所以学会了切图，这都不是事儿！let's go.
1 下载工具PS
下载链接：http://www.lvyestudy.com/software/software0005.aspx
我是在这个网站下载了，下的是CS6，如果你有更喜欢的也可以用别的。（顺便说一下这个网站有很多前端的教程讲的很不错，而且特别清晰易懂，我之前收获很多，建议初学者可以多看看）
2 设置工具
打开PS首先准备我们需要的工具，PS博大精深，我们只需要用切图需要的工具就OK了。我们需要的一般有以下这些：
1 左边和上面的菜单栏：确定是存在的
2 信息面板：窗口--信息--右上角鼠标右键找到面板选项---标尺的单位改成像素
3 历史记录：窗口--历史记录（当我们有错误时，可以通过历史记录直接回到某个位置）
4 图层 ：窗口--图层
5 标尺： 先打开一张图片（有图片标识才能用），找到视图--标尺 ，标尺可以拉出参考线，帮助我们切图 。
6 建立工作区: 窗口--工作区--新建工作区--起名字--保存工作区（保存工作区就是保存当前你对PS软件的设置，即使你关闭了PS软件，再打开还是你的设置，工作区可以建立多个）
我的设置如下图：
3 测量和取色
【测量宽高】工具：参考线，矩形选框，信息面板。
1 从标尺上拉出参考线（在标尺上按住鼠标左键不松往你想要地方拉，就会出现一根线，上下左右都可以，也可以不拉，拉了会更精确些，选框会自动吸附到参考线上）
2 找到矩形选框（切图一般都用矩形选框，没用过别的，选中你要测量的地方，选中的时候你可以看两个地方：1 鼠标位置有显示宽高 2 信息面板也有显示。不过当你松开鼠标，就只有信息面板有显示信息了，如下。
【取色】：取色器+吸管工具
1 点击取色器，会出现一个面板，这个时候把鼠标放在图片上会发现自动变成了吸管工具，不用专门去找，然后点击你想要取的颜色，面板上就出现你想要的信息。
（还可以用取色器检查你的按钮或者背景是不是是纯色）
【文字的测量和取色】：文字工具（ 文字比较特别直接用宽高量可能量不准，所以优先用文字工具）
1 找到文字工具，点击你想要测量的文字，图层那边会自动移到文字图层的位置，看菜单上面，有你想要的字体大小和颜色以及字体的类型。
2 有可能你的文字不是单独的图层，这个时候就只能用选框和取色器测量了。
3 有可能你发现你看到的文字和你测出来的不一样，那就是文字图层加了别的效果，这个时候还是用取色器取。
4 切图 ：切片工具
1 确定需要切的图（有的图是上线的时候从后端加载过来的，所以不用切）。
2 可以用iconfont图标的就用，不能用的小图标就用CSS sprite.
3 能弄出来就不要切图，图片影响加载速度。
4 切片工具--你要切的图--图层面板中，关掉不需要的元素----用切片工具选中图--导出切片(快捷键alt+shift+ctrl+s ）或者（文件--脚本--存储为web所用格式）
5 选择图片要以哪种格式存储了，不同的格式会影响图片的质量和大小，自然也会影响到就加载速度，这里我推荐我最近读的不错的一篇文章，看完保证你收获满满： jpg,png等图片的区别
5 常用快捷键（快捷键是开发效率必备利器，多多练习）
放大/缩小：Alt+鼠标滚轮
拖动图片：长按空格键，鼠标会变成小手即可拖拽图片
取消选框：ctrl+D
隐藏参考线：ctrl+h
复制文件：ctrl+c
新建文件：ctrl+N
粘贴文件：ctrl+v
关于切图，也是件麻烦事，现在出了很多切图，标注能插件也很方便，大家可以看这篇文章 解放你的双手（顺便说下，很多工具都是最新的
PS版本才支持，所以要去下载对应的，本人还未实践）
以上内容都是我工作以及在很多地方学习的，有新的会继续更新，如有错误和不足欢迎纠正。
最新文章
- Java用来进行批量文件重命名，批量提取特定类型文件
- C#的变迁史 - C# 2.0篇
- 15款帮助你实现响应式导航的 jQuery 插件
- Scrum项目6.0
- 每日一词【命令行CMD】
- Java使用Flying Saucer实现HTML代码生成PDF文档
- yii 使用renderPartial调用另外一个控制器的视图
- in和exists的区别与SQL执行效率分析
- hdu More is better
- ASP.NET 5＋EntityFramework 7
- 查看mysql状态常用命令
- android — JNI注册方法说明
- python小练习（自己瞎倒腾）
- 【原创】大数据基础之Oozie（3）Oozie从4.3升级到5.0
- Java的动手动脑（六）
- CentOS挂载光盘
- PTA (Advanced Level) 1009 Product of Polynomials
- Reader 与 Guava MultiReader
- win10无法访问samba共享
- MySQL库表详细操作