第一章 web开发学习必备ps知识

常用功能

1. 测量
   1. 盒子模型属性：宽度、高度、内边距、外边距、边框
   2. 文字：字体大小、行高
2. 切图
   1. 图标
   2. 有特殊效果的按钮、文字
   3. 非纯色的背景
   4. 产品图、文章配图、广告图、banner

安装

1. 通过https://xclient.info教程安装

常用面板

1. 信息（F8）
2. 历史记录
   1. 用于查看、回退曾经操作的内容
3. 图层（F7）
4. 关闭掉主区域右侧的其他面板，只显示这3个面板

常用快捷键

1. 缩放：alt+鼠标滚轮
   1. ctrl +:放大
   2. ctrl - : 缩小
   3. ctrl+1 : 缩放到100%
2. 手抓：空格键+鼠标左键,用于移动放大的图片
3. 移动：ctrl+鼠标左键
4. 复制选中的区域：ctrl+c
   1. 如果是拷贝图层，需要先选中图层
5. 粘贴选中的区域：ctrl+v
6. 新建画布：ctrl+n
7. 历史记录回退：ctrl+alt+z，mac：cmmand+z
8. 复制+移动：ctrl+alt+鼠标左键
9. 取消当前操作：ctrl+d

标尺

1. 标尺和文字单位设置
   1. 点击左上角Photoshop->首选项->常规->单位与标尺
      1. 将单位那一栏中，标尺、文字，全部换为像素为单位，然后点击确定
2. 标尺设置
   1. 视图->点击勾选“标尺”，也可以使用快捷键（ctrl/cmmand+R）切换
   2. 视图->点击勾选“显示额外内容”，也可以使用快捷键（ctrl/cmmand+H）切换
   3. 参考线：在“标尺”下，可以按住鼠标左键，在纵横标尺处分别拉出n条参考线，将内容框住
      1. 取消参考线，视图->显示->参考线，也可以用快捷键ctrl/cmmand+;切换

常用工具

1. 横向工具栏
   1. 当前选择的工具类型
   2. 单选框，只能框柱一个
   3. 多选框，可以框柱多个，按住（shift）选择
   4. 裁剪框（裁剪掉多余的），按住（alt/option）选择
   5. 重叠框（只保留重叠的）
2. 纵向工具栏
   1. 第一个图标：拖动图片
   2. 第二个图标：图形选框工具
      1. 用于选择一块区域，一次只能选择一个
      2. 按住shift可以选择多个
   3. 第四个图标：长按选择魔法棒，用于快速框选图片内容
   4. 第5个图标：长按选择器切片工具，快速截规则图片

测量图片尺寸

1. 用图形选框工具
   1. 将图片放大
   2. 用选框工具框住图片最左边一个框
   3. 然后缩小，移动（空格键+移动）到图片最右边，放大，按住shift，再在图片最右边框住一个框
   4. 右侧”右侧信息面板”出W值就是图片的宽度值
2. 用魔棒工具快速选中相应图片，来测量尺寸
   1. 先用图形选框工具粗略框住图片
   2. 点击纵向的第4个工具，长按选择魔棒工具
   3. 然后按住alt/option，点击粗略选择区域中图片之外的其他区域
   4. 这样就能够快速精准框住图片，既能够切除图片，也能够测量尺寸
3. 用切片工具框选测量
   1. 优点：可以微调选中区域
   2. 选中调整好之后右击->编辑切片选项，然后可以看出XY/WH
   3. 测量精灵图特别方便

测量文字

1. 测量文字大小
   1. 直接量取文字的高度，就是文字大小
2. 测量一段文字行高
   1. 第一行文字的顶部，与第二行文字的顶部，之间的高度就是行号

取色

1. 点击胶头滴管图标：“吸管工具”
2. 点击纵向工具栏的上下层叠图标,显示“拾色器面板”
3. 然后用滴管指向所选择的颜色区域，“拾色器面板”将显示当前颜色值

切图

1. 规则图片的切图
   1. 方法1:
      1. 用图形选框工具直接框住一个图片，ctrl+c复制
      2. ctrl+n新建一个画布,设置画布样式，ctrl+v粘贴
      3. 点击文件->导出->存储为web所用格式
      4. 点击存储即可
   2. 方法2：
      1. 选择第5个图标，长按，选择切片工具
      2. 框住要剪掉的图片，这个工具可以调整选择的区域
      3. 点击文件->导出->存储为web所用格式，选择“所有用户切片”
      4. 点击存储即可
      5. 注意，切片工具同时可以切出n个图片
2. 不规则图片的切图
   1. 用图形选框工具+魔棒工具尽量精确的框住不规则图片
   2. 放大图片，切换到图形选框工具,按住shift，选择没有被框住的像素，按住ctrl/cmmand，删除多选框住的像素
   3. 直到全部圈住位置，ctrl+c复制
   4. ctrl+n新建一个画布,设置画布样式，ctrl+v粘贴
   5. 点击文件->导出->存储为web所用格式
   6. 点击存储即可

PSD文件的文字与行高

1. 通过文字选择工具可以查看当前选择文字的字体大小、行高等信息。

导出图片格式

1. 图片颜色丰富，无透明需求：JPG(“品质“选择一般在50-80就OK,建议最高59%)
2. 图片颜色不是很丰富：PNG8
3. 图片如果有半透明效果：PNG24

简单补图

1. 打开图片，此时该图片叫做背景
2. 用锁套工具、矩形框选择一块区域，ctrl+C、ctrl+V，即可复制粘贴到新的一个图层上
3. 此时使用ctrl+T会定位到复制后的那一块图，然后移动、旋转到需要覆盖的地方，然后点击return即可完成一次操作
4. 注意:下次进行选择区域时（重复第二步），一定要选择第一个图片背景，因为该图片有内容才能进行复制粘贴，否则提示：“不能完成拷贝命令，因为所选区域是空的”