Skip to content

S02-04 CSS-Photoshop

PS 工具是我们使用频率比较高的软件之一, 我们学习 PS 目的不是为了设计海报做电商和 UI 的,而是要求:

  1. 会简单的抠图
  2. 会简单的修改 PSD 效果图
  3. 熟练的切图
  4. 能和网站美工美眉有共同话题。。。。。

Photoshop 基本使用

PS 界面组成:

菜单栏、选项栏、工具栏、浮动面板(拖拽名称,可单独操作面板)、绘图窗口 ​ 窗口菜单,可显示隐藏所有面板

工作区:(新建)

调整浮动面板

基本操作

文件下拉菜单: ​ 1、新建 新建文档 CTRL+N

单位:像素 厘米 毫米

屏幕显示: 单位 像素 72 像素/英寸 RGB 颜色模式

2、关闭文档 CTRL+W

3、存储 CTRL+S (替存)

4、存储为 CTRL+SHIFT+S 另存一份文件

5、格式: ​ .psd PS 源文件格式 图层、文字、样式等,可再次编辑 ​ (给自己) ​ .jpg 有损压缩格式 (给客户) 品质 最高 12

6、文件打开: ​ 1)文件下拉菜单-打开(CTRL+O 欧)

2)双击软件空白处也能打开 ​

移动工具 V

1、不同文件之间拖拽图像。

自由变形

ctrl + T 可以改变图像的大小

按下 enter 回车确认操作。

图层操作(重点)

图层面板快捷键 F7 其实图层就是一张张透明的纸 可以实现叠加问题。

图层选择: 使用移动工具 V

1、图层缩览图判断

2、按住 CTRL,在目标图像上单击

3、将光标放置在目标图像上右键,选择图层名称

图层面板中加选图层:

1、按 SHIFT,单击另一目标图层 中间所有图层被选中

2、按 CTRL,单击另一目标图层 只选中目标图层

复制图层:选中目标图层后(移动工具状态下)

1、按 ALT 拖拽图像

2、CTRL+J (重合)

案例: 摆放一个自行车

图层编组

选中目标图层,CTRL+G

取消编组:CTRL+SHIFT+G

双击图层名称可重新命名

双击组名称,可命名组

移动工具 V 选择组或图层时,需设置选项栏

图层上下位置移动

1、选中目标图层,在图层面拖拽

2、CTRL+] 向上移动图层 ​ CTRL+[ 向下移动图层

3、CTRL+SHIFT+] 图层置顶 ​ CTRL+SHIFT+[ 图层置底

移动选区或图像时:

移动过程中,没释放鼠标,按住 SHIFT,可同一水平线、同一垂线、45 度移动。

ps 中的撤销操作是:

ctrl+z 撤销一步

ctrl+alt+z 撤销多步

图层合并

ctrl+e 可以合并图层

图层透明度

不透明度:设置图层的不透明程度 0%完全透明,不可见

100%完全不透明,真实可见

填充:与不透明度效果类似

键盘数字键,可快速设置透明度数值

矩形选区工具 M

用来选择某部分区域 我们成为选区工具

取消选区: ctrl+d

颜色填充

套索工具 L

1、套索工具 L 在屏幕上拖拽鼠标左键,释放后生成选区

2、多边形套索 L 连续单击绘制多边形选区

闭合方法:1、单击起始点 2、双击任意位置

DELETE 删除当前点

磁性套索 L

L 在颜色交界的位置单击后拖动。单击起始点后,生成选区。

魔棒工具 W

以单击位置为选择色,选择相似颜色生成选区。

容差:选择颜色的范围 容差小,颜色选择精确。 0-255

连续:勾选连续时,相连颜色生成选区。

不勾选,画面中所有相似颜色被选中生成选区。

按 SHIFT 在未生成选区位置单击,可选区相加。

选区反选:CTRL+SHIFT+I

选区布尔运算

选区面积大小的变化。

新选区:保持选中状态

添加到选区:相加运算(按住 SHIFT 再绘制选区)

从选区减去:相减(按住 ALT 再绘制选区)

与选区交叉:重合部分保留。(按住 ALT+SHIFT 再绘制选区)

梦幻星球

钢笔工具: P

作用:绘制路径,生成选区,抠图。

组成;路径线和锚点

绘制路径后,CTRL+回车,生成选区。

路径类型:

直线型路径:连续单击

曲线型路径:第一点单击,第二点拖动鼠标。

文字工具

T 可以直接输入文字

Photoshop 切图

PS 切图 可以 分为 手动 利用切片切图 以及 利用 PS 的插件快速切图

切片工具

  1. 利用切片工具手动划出

  2. 图层菜单---新建基于图层的切片

  3. 利用标尺 基于参考线的切片 (选择切片工具)

  4. 先选个一个整个的切片, 切片选择工具-- 属性面板中有 “划分” --可以等分数平分切图

导出切片: 文件-- 存储为 web 设备所用格式

辅助线和切片使用及清除

视图菜单-- 清除 辅助线/ 清除切片

切图插件

Cutterman 是一款运行在 photoshop 中的插件,能够自动将你需要的图层进行输出, 以替代传统的手工 "导出 web 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出,方便你在 pc、ios、Android 等端上使用。 它不需要你记住一堆的语法、规则,纯点击操作,方便、快捷,易于上手。

官网: http://www.cutterman.cn/zh/cutterman

注意: cutterman 插件要求你的 ps 必须是完整版,不能是绿色版,所以大家需要从新安装完整版本。