前端必备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

      选择图层： 1 移动工具:  1 勾选上方菜单自动选择和选择组/图层。这个时候点击图片任意位置，右边会自动切换到相对应的图层或者组。

                     2 在图片上选中某个图层：ctrl+鼠标右键。

      导出切片：alt+shift+ctrl+s  （文件--脚本--存储为web所用格式）

  隐藏参考线：ctrl+h

      复制文件：ctrl+c

      新建文件：ctrl+N

      粘贴文件：ctrl+v

关于切图，也是件麻烦事，现在出了很多切图，标注能插件也很方便，大家可以看这篇文章   解放你的双手（顺便说下，很多工具都是最新的

PS版本才支持，所以要去下载对应的，本人还未实践）

以上内容都是我工作以及在很多地方学习的，有新的会继续更新，如有错误和不足欢迎纠正。