PS for 前端

前提

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

界面设置

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

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

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

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

定位图层

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

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

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

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

快捷键

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

切图

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