001-Photoshop基础操作

Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。

一、Adobe Photoshop

(一)、Adobe Photoshop的安装

(二)、Adobe Photoshop的介绍

二、图像基础

(一)、图像的基本概念

1. 位图
   Photoshop使用位图来表示黑白图像，其逻辑是每一个像素对应1个数据位。位图图像又称为点阵图像，是由一系列像素组成的可识别的图像。位图图像与分辨率有关，任何位图图像都含有有限数目的像素。
   

2. 矢量图
   矢量图与分辨率无关，其形状通过数学方程描述，由边线和内部填充组成。
   

3. 像素
   像素(pixel)是图形单元的简称，是位图图像中最小的完整单位。

4. 分辨率
   在数字webp化的位图图像中，分辨率的大小直接影响到图像的品质。分辨率越高，图像就越清晰，而生成的文件也就越大，操作过程中所占用的内存和CPU处理时间也就越多。当图像用于打印输出时，分辨率就要设置得高一些；当图像用于屏幕展示时，分辨率可以相应设置得低一些。

5. 位分辨率
   用于衡量每个像素储存信息的位数。通常有8位、16位、24位或32位色彩。

(二)、图片格式

1. JPEG(.jpg)
   JPEG图片以24位颜色存储单个位图。支持最高级别的压缩，但这种压缩是有损耗的，压缩率越大的图片，显示的内容越模糊。

2. PNG(.png)
   PNG是一种无损压缩的位图图形格式，是网页常用的图片格式，原因是它压缩比高，生成文件体积小。同时其支持透明效果，使彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘。

3. GIF(.gif)
   GIF格式可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画，也就是我们常见的动图。
   GIF图片不一定就是动图，其也可以是一张图片，由于其具有高压缩的算法，所以网页中也常有出现不是动图的GIF图。

4. PSD(.psd)
   Photoshop自身的文件格式，当使用Photoshop直接保存的时候就是PSD格式的文件。

5. WebP(.webp)
   WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。但这种图片是有损压缩的，并且暂时只有chrome和Opera浏览器支持。
   智图WebP图片转化

三、工具使用与快捷键操作

(一)、快捷键

1. 文件操作

   功能	快捷键
   新建文件	Ctrl+N
   打开文件	Ctrl+O
   保存文件	Ctrl+S
   关闭文件	Ctrl+W

2. 工具操作

   功能	快捷键
   移动工具	V
   吸管工具	I
   裁剪工具	C
   字体工具	T
   抓手工具	H
   自由变换	Ctrl+T
   画布放缩	Alt+滚轮
   隐藏选择框	Ctrl+H
   取消选择框	Ctrl+D
   图像大小	Ctrl+Alt+I

3. 图层操作

   功能	快捷键
   新建图层	Ctrl + Alt + Shift + N
   复制选中图层	Ctrl + J
   合并选中图层	Ctrl + E
   合并可见图层	Ctrl + Shift + E
   组合选中图层	Ctrl + G
   快速选择图层	Ctrl + 单击鼠标左键
   连续多选图层	Shift + 单击鼠标左键
   拖动并复制图层	Alt + 拖动

4. 图片解锁与上锁

• 解锁图层
  

  • 锁定透明像素
    锁定透明图层，当前图层透明部分不会发生任何变化。
  • 图像像素锁定
    禁止对图层图像的绘制或者修改。但可移动图层，因为，虽然在效果上看图像改变了，但这并不是修改像素。另外，也可改变图层不透明度和混合模式，这也不属于修改图像的操作，因为图层像素本身并没有被修改，只是更改了表现方式。
  • 锁定位置
    该图层就无法移动，鼠标，键盘都不能移动它。
  • 锁定全部
    这个图层既无法绘制也无法移动。完全锁死。

• 解锁图层
  选中该图层，在最上方有个锁头的图标，点击一下即可解锁，再次点击即可锁定
  选中该图层，点击图层上的锁头图标，也可以解锁图层
  

5. 切图操作

   • 切片切图法

     1. 使用切图工具（快捷键C）对所选的图片进行切图
        

     2. 选择所切图片存储为 web 所用格式 （ctrl+alt+shit+s）
        

     3. 清除切片（Ctrl+V+C）

   • 图层切图法

     1. 选中该图层
        

     2. 在图层区域，右键 -> 复制图层 -> 文档：新建 -> 确定
        

  3. 对新建图层进行图像->裁剪->确定

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201014101503507.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J1bGFpeGlvbmc=,size_16,color_FFFFFF,t_70#pic_center)

  4. 存储为 web 所用格式 （ctrl+alt+shit+s）

* 快捷键的操作
  由于图层切图1-3的步骤过于繁琐，可以使用 动作 （Alt+F9） 记录下来 并使用快捷键 进行操作。
  1. 打开动作 -> 新建动作 -> 设置快捷键 ->  记录
   ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201014101522588.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J1bGFpeGlvbmc=,size_16,color_FFFFFF,t_70#pic_center)

  2. 重复图层切图1-3步骤（录制过程 不要多余按键操作 异步到位），停止录制，完成录制
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201014101535770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J1bGFpeGlvbmc=,size_16,color_FFFFFF,t_70#pic_center)

  3. 在选中图层的基础上 按下快捷键（Ctrl+F2） 就可以快速切图 然后存储为 web 格式 

6. 保存操作

四、图片优化

(一)、雪碧图(Sprites)制作

雪碧图也称精灵图（英文:Sprites）,是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中。

1. 优点

   • 减少http请求次数
   • 减少图片数量，提升网页加载速度
   • 减少网络带宽占用

2. 缺点

   • 提高了网页开发和维护成本。
   • 合并内容性图片会影响页面的可读性，语义化降低

3. 应用场景

   • 一般只有描述性图片用来制作雪碧图，比如页面中使用的各种小图标
   • 按钮背景图及其各种效果的图片，适合做成雪碧图
   • 对于img标签设置的内容性图片，是不能合成到雪碧图的
   • 开发游戏使用的素材图片

4. 制作规范

   • 图片在合并之前必须保留空隙
   • 图片排列方式有横向和纵向
   • 合并分类的原则
     • 把同属一个模块的图片进行合并
     • 把大小相近的图片进行合并
     • 把色彩相近的图片进行合并

(二)、图片压缩

1. 调整图片大小
2. 存储为web所用格式
3. 使用第三方工具
   https://tinypng.com

五、课后作业

• 熟悉Adobe Photoshop工具操作界面
• 理解图片的4种格式
• 测试工具面板的工具，以及快捷键
• 独立通过ps案例切图，熟悉操作切图的两种方法，并使用’存储为web所用格式’进行保存
• 根据案例制作雪碧图。
• 熟练掌握图片压缩的三种方式