【重识 HTML + CSS】Photoshop 简单使用

系统管理员 2022-10-17 15:00 65阅读 0赞

Photoshop

  • Photoshop 简介
    • 常用功能
    • 常用面板
    • 常用设置
      • 单位设置
      • 标尺设置
      • 颜色模式设置
      • 移动工具设置
      • 增加画布大小
    • 常用快捷键
    • 矩形选框工具 (D)
    • 裁剪工具、切片工具 (C)
    • 吸管工具 (I)
    • 参考线
    • 文字工具 (T)
    • 移动工具 (V)
  • Photoshop 操作 - 切图
    • 规则图形：矩形选择框工具
    • 规则图形：切片工具
    • 不规则图形：利用魔棒工具 + 矩形选择框
  • Photoshop 操作 - 测量
    • 盒子模型属性：矩形选框工具
    • 盒子模型属性：切片工具
    • 文字测量：参考线 + 矩形选框工具
  • Photoshop 文件格式 - psd

博文集合：【重识 HTML + CSS】知识点目录

Photoshop 简介

常用功能

测量：

  • 盒子模型属性：宽度、高度、内边距、外边距、边框
  • 文字：字体大小、行高

切图：

  • 图标
  • 有特殊效果的按钮、文字
  • 非纯色的背景
  • 产品图、文章配图、广告图、Banner

行高细节：
微软雅黑的行高：上边距 >= 下边距
宋体的行高：上边距 <= 下边距

常用面板

  • 信息（F8）
    在这里插入图片描述
  • 历史记录
    在这里插入图片描述
  • 图层（F7）
    在这里插入图片描述

常用设置

单位设置

在这里插入图片描述

标尺设置

在这里插入图片描述

颜色模式设置

如果是PNG8图片，颜色可能是索引颜色，需调整为RGB颜色，才不会失真
在这里插入图片描述

移动工具设置

在这里插入图片描述

增加画布大小

在这里插入图片描述

常用快捷键

  • 缩放：Alt + 鼠标滚轮
    Ctrl + +：放大
    Ctrl + -：缩小
    Ctrl + 1：缩放到 100%
  • 手抓：空格键 + 鼠标左键
  • 移动：Ctrl + 鼠标左键
  • 复制选中的区域：Ctrl + C
    如果是拷贝图层，需要先选中图层
  • 粘贴选中的区域：Ctrl + V
  • 新建画布：Ctrl + N
  • 历史记录回退：Ctrl + Alt + Z
  • 复制 + 移动：Ctrl + Alt + 鼠标左键

矩形选框工具 (D)

在这里插入图片描述

  • 取消选择：Ctrl + D
  • 删除像素：Backspace 或 Delete键
  • 自由变换：Ctrl + T
    可以将选区内容进行拉伸
    退出 Esc、确定 Enter

在这里插入图片描述

  • 添加到选取：Shift+ 左键
  • 从选取减去：Alt + 左键
  • 与选取交叉：Shift + Alt + 左键
  • 反向选择：Shift + Ctrl + I

在这里插入图片描述

  • 配合魔棒工具使用，可以选中不规则的图形

测量技巧：
如果测量的元素尺寸比较大，可以在元素两边界使用 Shift 添加选区，使用 Alt 减少选区
在这里插入图片描述

裁剪工具、切片工具 ©

在这里插入图片描述

  • 切片工具：常常用来测量元素的位置和尺寸、切图
  • 右键编辑切片区域能看到具体的位置和尺寸

导出图片快捷键：Shift + Ctrl + Alt + S（能够导出所有的切片）

  • 图片颜色丰富，无透明需求：JPG（品质一般在 50 ~ 80 就OK，建议最高 95%）
    在这里插入图片描述
  • 图片颜色不丰富：PNG8
    在这里插入图片描述
  • 图片如果有半透明效果：PNG24
    在这里插入图片描述

建议：每一份单独的图片都要保留一份对应的 PSD 格式文件，方便以后修改调整

吸管工具 (I)

在这里插入图片描述
常见用途：

  • 吸取颜色
  • 确认背景是否为纯颜色（如果要确定是否为线性渐变，可以使用魔棒工具）

颜色模式配置（如果是 PNG8 图片，颜色可能是索引颜色，需调整为 RGB 颜色，才不会失真）
在这里插入图片描述

参考线

参考线：用鼠标左键从标尺中拖拽出来

  • 按住 Ctrl 键可以更精准挪动辅助线
    在这里插入图片描述

显示标尺快捷键：Ctrl + R
在这里插入图片描述

文字工具 (T)

在这里插入图片描述
如果文字是单独的文字图层（用移动工具点击文字），就可以用使用文字工具测量出颜色、大小、行高
在这里插入图片描述

如果文字不是单独的文字图层，需要借助矩形选框工具、吸管工具等测量文字的颜色、大小、行高

  • 一般，文字高度就是 font-size 大小
    在这里插入图片描述
  • 一般，两行文字顶部之间的间距就是 line-height 大小，比如以下选框的高度就是 line-height 大小
    在这里插入图片描述

移动工具 (V)

在这里插入图片描述
按住 Alt 键来移动内容，可以用来覆盖其他内容

  • 如果再同时按住Shift键，表示保持水平移动

Photoshop 操作 - 切图

规则图形：矩形选择框工具

常规知识点：
空格 + 鼠标：移动视角
Alt + 鼠标滚轮：放大、缩小
Ctrl + N：新建画布，如果剪切板复制了图片，则默认根据图片尺寸新建画布

使用矩形选择框工具，选中要切的图：

矩形选择框知识点：
按住 Shift 再使用矩形选择框，增加选择区域；
按住 Alt 再使用矩形选择框，减少选择区域；

在这里插入图片描述
选择好要切的区域后，按 Ctrl + C 复制，然后按 Ctrl + N 新建画布，建立画布后按 Ctrl + V 粘贴，即可将要切的区域放到一个画布中：
在这里插入图片描述
然后按 Ctrl + Alt + Shift + S 导出为图片

规则图形：切片工具

使用切片工具框选需要裁剪的区域 —> 拷贝（Ctrl + C） —> 新建画布（Ctrl + N） —> 粘贴（Ctrl + V）—> 导出为图片（Ctrl + Shift + Alt + S）

如果存在多个切片，可以直接一键导出（Ctrl + Shift + Alt + S）

  • 建议：导出时选择导出所有 “用户切片”

在这里插入图片描述
在这里插入图片描述

不规则图形：利用魔棒工具 + 矩形选择框

常规知识点：
魔棒工具：可以根据颜色，自动选取相应的边框

在这里插入图片描述
先使用魔棒工具大致选出来，然后周围有一些小像素点需要增加或删减，则使用矩形选框工具完善选择框：
在这里插入图片描述
与之前一样，按 Ctrl + C、Ctrl + N、Ctrl + V，Ctrl + Alt + Shift + S 导出为图片：
在这里插入图片描述

切片工具 与 魔棒工具 无法结合使用

Photoshop 操作 - 测量

盒子模型属性：矩形选框工具

在这里插入图片描述

盒子模型属性：切片工具

切片工具在测量中的好处就是：框选完成后可以拉边框微调
在这里插入图片描述

文字测量：参考线 + 矩形选框工具

参考线知识点：调出参考线
在这里插入图片描述
已有的参考线，按住 Ctrl 可移动参考线

在这里插入图片描述

Photoshop 文件格式 - psd

psd 由于存在图层的概念，所以很多操作会比常规的 png 图片方便许多

切图

  • 矩形选框工具 (M)
    跟 png 图片的处理差不多
    要用移动工具 (V) 选中对应的图层，才能进行拷贝 (Ctrl + C) 操作
  • 切片工具
    跟 png 图片的处理差不多
    可以选择性地将一些后面的图层隐藏，保证切出来的图片是透明背景的
  • 直接复制图片图层

测量

  • 盒子模型属性
    跟 png 图片的处理基本一样
  • 文字
    跟 png 图片的处理基本一样
    如果文字是单独的文字图层，可以直接使用文字工具 (T) 测量文字大小和行高

发表评论

表情：
评论列表 （有 0 条评论，65人围观）

还没有评论，来说两句吧...

相关阅读