PS for 前端

前提

之前真的对PS一点都不懂，因为上一周突然被仍了一份psd文档，让我根据那份psd文件写一个web页面和一个移动端页面。当时因为时间紧急，只能求助公司的设计同事。但是我相信很多公司前端是根据psd来开发的。所以，简单的切图还是要会的。

界面设置

1、菜单 -》视图 -》勾选【标尺】& 【显示 -》智能参考线】
2、菜单 -》窗口 -》选择（图层、字符、信息、历史记录），一些默认打开的面板，可以通过鼠标右键点击关闭。
2.1、设置信息面板：
切换到信息面板 -》点击 -》选择面板选项

第一颜色模式、第二颜色模式选择【RGB颜色】、标尺单位选择【像素】、勾选文档尺寸、保存。

3、菜单 -》编辑 -》首选项 -》单位与标尺 -》把标尺和文字的单位均改成【像素】

4、菜单 -》窗口 -》工作区 -》新建工作区 -》保存，这样一来就不用每次都设置一遍。在PS右上角，可以去切换工作区。

定位图层

1、选择移动工具 -》勾选自动选择 -》选择图层 （如下图）-》点击psd文件 （如下图）
      

除了图层选项，还有组选项。
选了图层，会定位到点击点所在的图层；选了组，会定位到点击点所在图层所在的组。

2、选择移动工具 -》不勾选自动选择 -》选择图层 （如下图）-》按住ctrl去点击psd文件
注意：如果没有勾选自动选择的话，单用移动工具点击psd文件，不能定位到点击点对应的图层或组。

3、图层和组的关系：
组包含图层，一个psd文件可能包含很多图层，为了便于管理，会将一些相关性强的图层包含进一个组。

快捷键

隐藏/显示参考线：ctrl + ;
增加垂直/水平参考线：鼠标移动到垂直或水平方向上的标尺，按住左键分别拉取垂直和水平方向上的参考线
放大/缩小psd：ctrl + +，ctrl + -

切图

前端开发人员需要的切图技巧一
前端开发人员需要的切图技巧二
前端开发人员需要的切图技巧三
切图视频