前端中常用的PS操作

PS的作用

前端主要用来切图，量取设计稿的开发尺寸；

PS的界面认识

PS复位基本功能

如果ps界面凌乱，我们需要复位
窗口 — 工作区 ---- 复位基本功能 — 回到PS最早安装的状态

PS常用的面板—图层面板

快捷键：F7 也可以去 窗口 — 图层
我们可以利用图层面板去查找我们需要的图层元素；

PS新建文件

Ctrl+N 新建画布，以下标红的属性选项一点要注意
宽度和高度的单位必须是像素；
分辨率为72；
颜色模式为RGB

PS打开文件的方法

拖拽法：选中文件直接拖拽到PS的工作区域皆可以打开，如果PS当前没有打开任何文件我们可以直接将文件拖拽到工作区域打开；如果工作区域已经打开文件，直接拖拽到工作区域就会嵌套到之前的项目，我们可以将文件直接拖拽到菜单栏松手既可以新打开一个文件；
快捷键方法：Ctrl+O可以之间打开文件；

PS缩放画布

放大画布 Ctrl+加号
缩小画布 Ctrl+减号
100%大小显示文件 Ctrl+Alt+0 让文件以设计稿的原始文件大小显示
Ctrl + 0 让文件根据PS工作区域的大小显示；

PS画布的移动

将画布放大以后我们想要查看某一个部位，我们可以按住空格键（键盘上最长的键）然后鼠标左键进行拖动即可；

PS文字工具

作用：可以在画布中输入文字并且更改文字的一些常见属性，比如大小，颜色、字体等
选中文字工具，然后在画布中任意位置单击就会在图层面板新建一个文字层，在画布中如果光标闪烁我们就可以直接输入文字；

更改文字的大小：选中文字然后去工具属性栏，直接修改；
更改文字的颜色：选中文字然后去工具属性栏点击颜色色板修改

文字工具在实际工作的种使用：

测量字体大小

01、如果我们查看的是psd文件，我们直接用文字工具去选中文字，去工具属性栏查看改文字的属性（大小和颜色）；
02、如果我们查看的是jpg图片，我们是不可以直接选中文字的，我们直接用文字工具在图片的文字位置输入文字，然后配合变换工具Ctrl+T,按住Shif+Alt键，鼠标左键拖拽放大缩小可以查看文字大小；

PS颜色吸取

打开前景色面板— 调出拾色器 — 鼠标就变成了吸管 — 可以去页面点选想要的颜色，最常用的是十六进制和RGB格式

16进制颜色值的使用

使用16进制色值的时候必须书写 # ----- #+16进制值 ------ #518e93

 `           /* 十六进制颜色使用必须在前面添加# */
            color: #ccc;`

#fff 纯白色
#000 纯黑色 #ccc 灰色 #666 浅黑色 #333 黑色 #999 深灰色
#f00 纯红色
#0f0 纯绿色 #00f 纯蓝色

三原色RGB色值的使用

使用三原色色值书写 — rgb(r,g,b) — r表示红色 g表示绿色 b表示蓝色，如果都取0表示纯黑色，都取255表示为白色

 /* rgb的使用 */
            color: rgb(30, 50, 136)

PS前景色和背景色的常见操作

填充前景色 Alt+delete
填充背景色 Ctrl+delete

PS自由变换

选中图层 ==== Ctrl+T调出变换控制杆 — 可以在控制杆的四个角进行放大缩小，一般常用右上角为操作点；
一般建议按住Shift+Alt键，可以等比例中心缩放元素，元素不会变形；

PS中图片放大缩小的弊端和解决方案

一般将图片进行放大和缩小的时候，图片会模糊
如果想让图片不模糊，我们需要将图片转换为智能对象：选中图层 — 右键 — 转化为智能对象

PS标尺和单位更改

Ctrl+R调出标尺 然后在标尺上鼠标右键— 选择单位为像素

PS选区工具

实际工作中我们用选区工具进行切图范围的控制、测量元素的宽高、测量多行文字的行高和高度；
实际应用的时候我们可以用选区工具绘制范围大小我们可以直接在绘制的选区右下角查看宽高

我们可以借助信息面板去查看选区的宽高，我们可以去窗口调出信息面板，也可以直接按快捷键F8，如果F8不生效，那就同时按住FN+F8
PS选区工具量取多行文本的行高，从一行文字的开始到第二行文字的开始的高度就是行高

PS点单位更改为像素

Ctrl+K ---- 首选项 ---- 单位与标尺 — 将单位全部更改为像素即可

PS自动选择图层

移动工具选中的状态下，将自动选择勾选，然后选择图层

图层面板

我们可以通过菜单栏的窗口调出窗口面板或者直接按快捷键F7（如果不生效就FN+F7）

图层命名

我们可以根据设计师提供的设机稿去查找相对应的图层进行操作，
选中图层 — 双击图层— 输入命名
图层命名很重要，图层命名清晰了可以让我们很方便的去查看想要选中的图层。

图层的显示隐藏

选中图层，最前面的小眼睛，如果小眼睛是关闭的图层隐藏，如果小眼睛打开是显示图层；

删除图层

拖拽法：选中图层按住鼠标左键直接将图层拖拽到图层面板右下角的垃圾箱即可；
直接删除：选中图层— 直接按delete键

新建图层

01：直接点击图层面板右下方的新建图层按钮
02：三键+N ==== Ctrl+Shift+Alt +N

调节图层的上下位置

01、选中图层，直接鼠标左键上下拖拽移动图层顺序
02、快捷键：
上移一层：Ctrl+右大括号
下移一层：Ctrl+左大括号
至于顶层：Ctrl+Shift+右大括号
至于底层：Ctrl+Shift+左大括号

锁定透明区域

	将图层中透明的区域锁定不能编辑，做精灵图的时候可能用到；

图层编组

按住Ctrl点击选中想要编为一组的图层，直接拖到图层 面板下方的创建新组按钮即可；
图层编组可以很好的将设计稿划分区域，让我们切图更方便；

图层锁定

选中想要锁定的图层 ---- 点击锁定选项中的锁定全部按钮即可将图层锁定到界面的某一个位置，不能更改位置和编辑属性；
实际工作中我们需要将我们不选中的图层锁定，然后可以用移动工具进行拖选其他没有锁定的图层；

图层合并

01 如果两个图层有剪贴蒙版的关系（如下图）我们一般要求ui设计师将其合并为智能对象，我们也可以自己操作：按住Ctrl键选中两个图层— 右键— 转化为智能对象
02、实际工作中有些小图标是分多层完成，我们需要将多个图层合并为一个图层，选中想要合并的图层 — 右键 ---- 转化为智能对象

盖印图层

我们可以通过盖印图层将设计稿中所有可见的图层合并为一张至于所有图层最上层图片：
选中图层中的最上面的一层，然后三键+E === Ctrl+Shift+Alt+E 可以在页面的最上层盖印一张图片，而且不会影响图层的分层效果；

复制图层

拖拽复制：选中图层 — 直接拖拽到图层面板的下面新建图层按钮即可复制；
原位复制：Ctrl+J 选中图层直接按快捷键；
随意复制：按住Alt键+鼠标左键拖拽即可复制

常见的图片格式

jpg ====jpeg 不透明的有背景的图片
png 透明的没有背景的图片
gif 透明的动图，动图
psd 分层的原始文件，一般设计师给到我们的都是psd
jpeg 不透明的图片 ，图片质量高
png 透明图片，图片的颜色值丰富，图片质量高
gif 透明的可以做动图模式，但是图片的高清度会降低；

图片的保存

PNG图片的制作

先将背景层隐藏掉，然后选中想要导出的图层直接在文件 — 导出 — 导出为web格式即可 — 选择png24质量

PS参考线

Ctrl+R调出标尺，将鼠标放在标尺上按下鼠标左键拖拽就可以出现蓝色的参考线
删除参考线：鼠标放到参考线上变成两边的双箭头就拖拽到页面视图以外即可消失；
隐藏参考线/调出参考线：Ctrl+分号 或者 Ctrl+H
全部清除参考线：菜单栏 — 视图 — 清除参考线

切图

切片工具切图

单独切一张：用切片工具画出想要切的区域将选中显示为咖啡色，我们可以直接导出图片，存储的时候我们必须要将切片选项设置为选中的切片；

切片工具切出多张的切片

用切片工具划出多个想要切的区域，然后导出切片，一定要注意存储的时候要设置切片选项为 所有的用户切片，这样我们就可以导出多个切片；

Ctterman神器插件切图

直接用切片绘制一个切片，然后导出，将切片模式设置为所有切片即可；

神器切图步骤

1. 安装神器，并且去官网注册自己账号，然后在PS中登录账号
2. 选中想要导出的图层或者元素
3. 按住Ctrl然后去点击图层的缩略图载入选区（只能导出一张图）
4. 菜单栏 ---- 窗口 — 扩展功能 — 切图神器
5. 选择导出选项：目前为止我们只需要输出web的图片，一般的不透明的我们导出JPEG，透明的我们都选png
   神器可以截取图片的一小块区域：用选区工具画出想要的区域，然后选择导出路径，点击导出即可；

精灵图

精灵图其实就是讲一堆小图标通过图片整合的技术放到一张图片上，这样可以减少对服务器的访问压力（一般的小公司不要求，如果公司要求了我们才使用精灵图）

制作精灵图

就是制作一张PNG图，先规定一个固定的宽度或者高度，然后根据设置不同的宽度或者高度的画布，然后将小图标依次的复制到画布中，按照间距排开，然后隐藏背景色，再导出为png；

常用快捷键/常用操作

Ctrl+N（新建画布）
Ctrl+Alt+Z （返回上一步）
选中图层 ==== 按住Ctrl===== 点击图层缩略图 ==== 将图片载入选区 （PS快速载入选区）
Ctrl+R（调出参考线）
菜单栏 ---- 视图 — 清除切片或者参考线 （清除参考线和切片）
Ctrl+D（ 取消选区）
F7 （图层面板）
按住空格键，拖动鼠标 （移动画布）
Ctrl+加号（放大画布 ）
Ctrl+减号（缩小画布 ）
Ctrl+Alt+0（100%大小显示文件 让文件以设计稿的原始文件大小显示）
Ctrl + 0 （让文件根据PS工作区域的大小显示）
Alt+delete（填充前景色 ）
Ctrl+delete（填充背景色）
Ctrl+右大括号（上移一层）
Ctrl+左大括号（下移一层）
Ctrl+Shift+右大括号（至于顶层）
Ctrl+Shift+左大括号（至于底层）
Ctrl+Shift+Alt +N（新建图层）
Ctrl+Shift+Alt+E（盖印图片）