前端Photoshop切图快速入门

如果你是一个从没用过ps的同学，请打开软件边看边尝试。相信这样可以让你更快的熟悉切图的基本方法，自己多练习应该可以满足前端工作中遇到的切图需求啦。（坚持看完，你会有收获的，当然仅仅是入门一丢丢咯~）

PS新建文件

ctrl+n,弹出窗口，宽高一般单位都是为像素，网页的psd颜色默认是均为rgb,分辨率一般为72像素/英寸。

PS常用类

• 
  
• 工具类：移动工具，选框工具（可以查看选中区域的大小，选择目标区域），文字工具。
• 菜单类：编辑菜单，图像菜单。
• 图层类（核心）：新建图层，复制图层，删除图层，锁定图层（开启这种锁定后，那么这个图层既无法绘制也无法移动。并且无法更改图层不透明度和图层混合模式。）
  

注意：选框工具不能选择形状工具，需要和一个图层（可以是空白的也可以是有内容的）合并，才能裁剪出来。

常规操作快捷键

1. ctrl+r 切换标尺的显示和隐藏，默认是厘米为单位，右击标尺任意位置，设置为像素，以像素为单位。
2. 按着空格+鼠标单击，可以定位到某个鼠标位置，拖动可以查看文件的细节内容。
3. 按着alt+shfift+鼠标滚轮上下滚动,可以放大缩小当前的文件
4. ctrl+z可以撤回一次，ctrl+alt+z可以最多撤回20次。
5. 吸取颜色,单击前背景色色标，鼠标自动变成了吸管的样子，吸取颜色就会反应到弹 出的拾色器窗口中。
6. 单击移动工具，工具栏中左侧，有自动选择的复选框，右侧展开有图层和组，如果选择了自动选择-图层，鼠标拖动，可以移动当前图层，同样自动选择组是可以 移动当前组。

选择图层

1、选择整张图层

• 位图：ctrl+单击所需要切图的图层的缩略图，出现蚂蚁线就是选中了
• 矢量图（类似形状路径）：先栅格化图层，然后再ctrl+单击所需要切图的图层的缩略图，出现蚂蚁线就是选中了。
• 如果选择了自动选择-图层，鼠标拖动，可以移动当前图层，同样自动选择组是可以移动当前组。

2、选择图层的一部分

• 位图：先用选框工具框选需要的内容，ctrl+c,ctrl+n（背景内容选透明）,ctrl+v粘贴。
• 如果是形状路径，单击选中的只是轮廓，需要在形状路径的前面或者后面新建一个图层，然后ctrl+E合并图层。

合并图层

ctrl+E : 有需要的合并的图层，选中需要合并的图层，ctrl不连续选择图层，shift选中多个连续图层，ctrl+E合并选中图层

注意：如果图层合并后发黑或者不是合并前的正常效果，是ui设计师用了图层混合模式、或调整图层、或滤镜-渲染中的相关效果， 此时需要设计师协调。

隐藏 / 显示图层

单击想要隐藏图层左侧的眼睛图标

注意：只能单独隐藏，不能选中多个图层隐藏。

删除图层

选中需要删除的图层，ctrl不连续选择图层，shift选中多个连续图层，拖到图层底工具箱底部的删除按钮上，或者按delete删除。

保存图片

1.选择整张，右击图层直接另存为 2.选择图层的一部分，先选中图层，然后用矩形选框工具或者套索工具选择一部分，然后就有了下面两种保存方法：

1) ctrl+c，复制， ctrl+n新建， ctrl+v粘贴， ctrl+shift+alt+s另存为网页格式，起名字，保存。
2) ctrl+j复制一层，将复制的一层右击，快速导出为png或者存储为，存储为后，将复制的那一层删除掉。

到这里，作为一个前端开发者，你需要的图片就有了，至于更加精细的工作，比如美化和制作自己喜欢的图片就靠大家的尝试了。总之，ps的的世界还是非常奇妙的，等着你去探索啦。