前端Photoshop切图快速入门

﹏ヽ暗。殇╰゛Y 2022-07-16 17:22 179阅读 0赞

如果你是一个从没用过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设计师用了图层混合模式、或调整图层、或滤镜-渲染中的相关效果， 此时需要设计师协调。

### 隐藏 / 显示图层 ###

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

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

### 删除图层 ###