前端涉及的PS简单介绍

PS前言

PS一般是用来设计海报做电商和UI的，而在前端设计中，我们通常需要熟悉以下几点

• 简单的抠图
• 简单的修改PSD效果图
• 熟练的切图

PS（photoshop）基本使用

PS界面组成

上面两层为：菜单栏、具体工具选项栏；       左边为工具栏、工作区（或者操作面板）

基本操作

1. 新建文档：ctrl+N     单位可选：像素、厘米、毫米        屏幕显示：单位  像素  72像素/英寸    RGB颜色模式
2. 关闭文档：ctrl+W
3. 存储：ctrl+S（文件名相同则为替换存储意思）
4. 另存为：ctrl+shift+S（另存一份文件   存储格式一般有两种，一种是PSD格式原图保留了各图层，可进行再次操作留给自己；另一种是jpg格式，有损压缩格式，品质最高为12，一般发给客户）
5. 打开文件：   一种方式是下拉菜单打开，快捷键为ctrl+O；另一种为双击软件空白处打开图片文件

改变图像的大小和方向：ctrl+T选择图片，可等比例缩放或旋转，确定完后按回车键

图层操作判断

• 先选择移动工具
• 然后根据图层缩览图判断目前所选中的图层是哪个
• 或按住ctrl键，鼠标单击需要编辑的图片区域，查看所处图层
• 或将光标放置在目标图片上，单击鼠标右键，选择所需要编辑的图层名称

图层面板中选则多个图层方法

1. 单击第一个图层，然后按住shift键，再单击另一目标图层，则中间所有图层都会被选中
2. 按住ctrl键，逐个单击需要选择的图层

复制图层方法

1. 先要在移动工具状态下
2. 按alt键，鼠标拖拽图像实现图层的复制；或按住ctrl+J，此时复制的图层是重合在一起的

图层分组

为了方便管理图层，就像新建文件夹为管理文件或文档一样

• 选中需要分在同一组的图层然后按住ctrl+G，取消编组按住ctrl+shift+G
• 双击图层名称可进行重命名，组名的重命名也一样双击
• 需要编辑图层时，选择移动工具然后进入移动工具的具体选项栏可进行单个图层或一个组的图层编辑

图层上下位置移动

1. 选择目标图层，直接进行拖拽
2. ctrl+】，向上移动图层，一次只能移动一位；ctrl+【，向下移动图层，每次只能移动一位
3. ctrl+shift+】，直接将图层置顶；   ctrl+shift+【，直接将图层置底

移动某个图层或图像技巧

移动过程中，按住shift键，可进行三大方向的移动。分别只能是同一水平、同一垂直线、45°移动

PS撤销操作

ctrl+Z  只能撤销一步

ctrl+alt+Z  可进行多步撤销

图层合并

当觉得多个图层一编辑好而且不需要改时，或要改的话是将一组同时移动，则可以将图层进行合并。

选中多个需要合并的图层按住ctrl+E即可将图层进行合并

图层透明度

在右侧图层下的透明度一栏，可直接输入数字来快速设置透明度数值

工具栏具体工具介绍：

1. 移动工具（1，v）：不同文件之间拖拽图像，或实现将A图插进B图中要先选择移动工具才可将图片整合在一起
2. 矩形选区工具（2，M）：
3. 套索工具（L）：在屏幕上拖拽鼠标左键，释放后生产候选区，delete为删除当前点。
4. 魔棒工具（W）：以单击的位置为目标选择色，选择相似颜色生成选择区，该工具的选项栏里有容差和连续选项                                   容差：选择的颜色范围，容差越小，颜色选择越精确，范围为：0-255.                                                                                                   连续：勾选连续时，指把连在一起的颜色生成选择区；不勾选时，指画面中所有相似的颜色都分别生产选择区                                     若选择区不满意，还存在想要的选择区，则可按住shift点击想要生成的选择区                                                                                       选择区反选：ctrl+shift+I
5. 钢笔工具（P）：指抠图，组成路径和描点。绘制完路径后，ctrl+回车，生成选区。

选区布尔运算

添加到选区：相加运算（按住shift再绘制选区）

从选区减去：相减（按住alt再绘制选区）

与选区交叉：重合部分保留（按住alt+shift再绘制选区）

切图

ps切图分为手动利用切片切图以及利用ps的插件（cuttermen）快速切图

1. 利用裁剪里面的切片工具手动划线（一般是矩形）
2. 选择图层菜单下的新建基于图层的切片
3. 利用标尺，然后选择基础参考线的切片

裁剪完后就是导出切片：导出方式为，文件菜单下的存储为web设备所用格式。