前端工程师切图技能——PS工具准备

切图，在前端圈也是个热词，时常会看到“前端开发要不要掌握切图技能？”之类的问题。大牛们大致认为，作为前端，应更关注HTML、CSS、JavaScript的质量，而切图，应该是基本技能。

总归一句话，现在的前端，在以后不一定是前端，正如以前的前端就不完全是现在的前端。开挖掘机的也许还会开坦克呢……

所以此文适合还在对着某张设计稿，苦逼求进的前端小白。

窗口设置

你是个前端，所以就做一个干净利索清爽的前端，对于Photoshop那冗余繁杂的默认窗口显示，可选择性关闭。一般而言，只需要 信息 字符 图层 历史记录 这四个即可。

辅助线

请在 视图 工具栏中，勾选 标尺 ，以及 显示 下的 参考线 ；智能参考线。这也是切图必备的，因为需要拿这些辅助线来辅助你测量像素距离等。

工作区设置

窗口设置好后，为下次方便，可在窗口下的工作区，新建工作区，并保存。

快捷键

快捷键就是生命！快捷键就是金钱！快捷键就是时间！

工具快捷键

选框工具：M

移动工具：V

套索工具：L

快速选择工具：W

橡皮擦：E

钢笔工具：P

文字工具：T

抓手工具：H

缩放工具：Z

More……

与Shift一起使用的快捷键

按住 Shift时，可画出正圆和方形的选区、图形、直线

按住 Shift+“选区工具”可增加选区，Alt+“选区工具”可减少选区（Shift 与 Alt 经常出现在快捷键中）

按住 Shift+Alt 时可画出以某点为中心的正圆和正方形

按住 Shift+ Backspace 调出填充对话框

More……

与Alt一起使用的快捷键

tip：Alt大多数都是动作之间的切换操作

Alt+ 移动工具，可复制选区对象

Alt+ 双击图层面板上的眼睛 隐藏或显示除此图层外的其它图层内容

Alt+ 上方向键可以复制多个对象

Alt+Del （Backspace）用前景色填充图层和选区

More……

与Ctrl一起使用的快捷键

tip：Ctrl责任重大，身上背着好几十条快捷键，想想就可怕……

Ctrl+“N”或Ctrl+“双击”新建文件

Ctrl+ 0 满屏显示图像

Ctrl +“+”放大图像 Ctrl+“-”缩小图像

Ctrl+“J”把图层或图层中选重的部分复制一个新层

Ctrl+ Shift+“I”反选

Ctrl+“T”自由变换选区对象

Ctrl+“[”往下移动图层

Ctrl+“]”往上移动图层

Ctrl+Shift+“[”置底层

Ctrl+Shift+“]”置顶层

Ctrl+“Del” （Backspace）用背景色填充图层或选区

Ctrl+“H”显示隐藏选区边框,辅助线、网格

Ctrl+“R”显示和隐藏标尺

Ctrl+“;”显示和隐藏参考线

Ctrl+ 单击（在图层、通道、路径面板中单击）可载入相应的选区（管用！）

More……

快捷键重在快，要想快，唯有多练，任何领域都一样！