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

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

### Photoshop ###

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

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

# Photoshop 简介 #

## 常用功能 ##

**测量**：

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

**切图**：

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

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

## 常用面板 ##

*  信息（F8）  
    ![在这里插入图片描述][20210603225943927.png]
 *  历史记录  
    ![在这里插入图片描述][20210603225951695.png]
 *  图层（F7）  
    ![在这里插入图片描述][20210603225959886.png]

## 常用设置 ##

### 单位设置 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]

### 标尺设置 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]

### 颜色模式设置 ###

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

### 移动工具设置 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]

### 增加画布大小 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]

## 常用快捷键 ##

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

## 矩形选框工具 (D) ##

![在这里插入图片描述][20210603230503243.png]

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

![在这里插入图片描述][20210603230528857.png]

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

![在这里插入图片描述][20210603230549503.png]

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

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

## 裁剪工具、切片工具 © ##

![在这里插入图片描述][20210603230943497.png]

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

--------------------

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

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

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

## 吸管工具 (I) ##

![在这里插入图片描述][20210603231232749.png]  
常见用途：

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

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

## 参考线 ##

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

*  按住 Ctrl 键可以更精准挪动辅助线  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]

> 显示**标尺**快捷键：Ctrl + R  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]

## 文字工具 (T) ##

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

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

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

## 移动工具 (V) ##

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

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

# Photoshop 操作 - 切图 #

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

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

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

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

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

## 规则图形：切片工具 ##

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

> 如果存在多个切片，可以直接一键导出（Ctrl + Shift + Alt + S）
> 
>  *  建议：导出时选择导出所有 “用户切片”

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 14]

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

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

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

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

# Photoshop 操作 - 测量 #

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 17]

## 盒子模型属性：切片工具 ##

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 20]

# Photoshop 文件格式 - psd #

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

**切图**

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

**测量**

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

[HTML _ CSS]: https://blog.csdn.net/weixin_43734095/article/details/117025820
[20210603225943927.png]: /images/20221014/ad10ea41767a4ca8a55a314856313678.png
[20210603225951695.png]: /images/20221014/89818317c8c8434cab55bbb91c1064df.png
[20210603225959886.png]: /images/20221014/12a0409a289b44d19edaeb1b8f5c8bb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: /images/20221014/1c009ceb363e445c90da165a99e5863e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/1da031550b2243ca94e10f988cb08cea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]: /images/20221014/a12e9da25d684bb38620b79cdf3fd56d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]: /images/20221014/7efaccd043e64725bd88af4efd0e5325.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]: /images/20221014/0f8f13188f18421ea00fd8aeba357a09.png
[20210603230503243.png]: /images/20221014/13236880087f4082a385077b5d9c0535.png
[20210603230528857.png]: /images/20221014/a22d99208dce4010a29bfa21d2d23b2e.png
[20210603230549503.png]: /images/20221014/f002a665e96c49a7922a3ad6dcb8e8fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]: /images/20221014/ff1a8229f6df4649b14e916d46ac846a.png
[20210603230943497.png]: /images/20221014/999573119ecb4ff69c907374a2faa64b.png
[20210603231127290.png]: /images/20221014/408a5f9987f04f87a932906126f1ba6b.png
[20210603231147199.png]: /images/20221014/1a6a1668458c4b3f871de9537be21270.png
[20210603231159411.png]: /images/20221014/32bdb2f4f7404989a05b18aba7d9f469.png
[20210603231232749.png]: /images/20221014/b18de3d759914c1fb9f5b8c4dd27a937.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]: /images/20221014/1d613ae23601424abacf9cabf448b401.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]: /images/20221014/d8968d30dbcd4f10a52e5e9f68563017.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]: /images/20221014/f713c21c67034455a58e8bb394f2ac77.png
[20210604235630792.png]: /images/20221014/c25b8dbbf00741cab236534c710ecf2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]: /images/20221014/57b6023d48ea496c8821fd8fc997bdc0.png
[20210604235824963.png]: /images/20221014/3252d72944b6473b9eebc96846c9e0af.png
[20210604235846348.png]: /images/20221014/41c5700f07ef4aa4bb4ae0d89fac2fe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]: /images/20221014/e5e0c11b240f451893207db73609a2bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 11]: /images/20221014/770c16edcdc14dfb94b7fa7653de52d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 12]: /images/20221014/8c7ddcb4f3e945b0b193773fd1a53e20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 13]: /images/20221014/8271ab52fc5f40efa9e4bead13cc093b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 14]: /images/20221014/d705278b08714198b29380cd8cad08c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 15]: /images/20221014/e4061e9ff8d44e7fbba5befb90c6fa9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 16]: /images/20221014/97554219a88d45a18b5b93995f5a1582.png
[20210604212255563.png]: /images/20221014/d42fc468266840ebb7b6d72801a5b767.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 17]: /images/20221014/3e6c84913cde42e0ab116d8f9a156e6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 18]: /images/20221014/2e2306659c3a4fa789b7de683637cafc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 19]: /images/20221014/c3d96272a15c4344af576df55dea09d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 20]: /images/20221014/f879f0ac337b4c4a9baeeba1a95eec76.png