1. 认识PhotoShopAdobe Photoshop，简称'PS'，是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。 1.1 PhotoShop历史 最初进入中国市场的版本是5.0 。 后来就有6.0，7.0，8.0(CS)，9.0(CS2)，CS3，CS4，CS5，CS6 ，到后面的CC。 1.2 PhotoShop介绍 图1-1 Photoshop CC界面介绍 2. 图像基础2.1 图像的基本概念 2.1.1 位图 Photoshop使用位图来表示黑白图像，其逻辑是每一个像素对应1个数据位。位图图像又称为点阵图像，是由一系列像素组成的可识别的图像。位图图像与分辨率有关，任何位图图像都含有有限数目的像素。 图2-1 位图 2.1.2 矢量图 矢量图与分辨率无关，其形状通过数学方程描述，由边线和内部填充组成。 图2-2 矢量图 2.1.3 像素 像素(pixel)是图形单元的简称，是位图图像中最小的完整单位。 2.1.4 分辨率 · 在数字化的位图图像中，分辨率的大小直接影响到图像的品质。 · 分辨率越高，图像就越清晰，而生成的文件也就越大，操作过程中所占用的内存和CPU处理时间也就越多。 · 当图像用于打印输出时，分辨率就要设置得高一些；当图像用于屏幕展示时，分辨率可以相应设置得低一些。 2.1.5 位分辨率 用于衡量每个像素储存信息的位数。通常有8位、16位、24位或32位色彩。 2.2 图片格式 2.2.1 JPEG(.jpg) JPEG图片以24位颜色存储单个位图。 支持最高级别的压缩，但这种压缩是有损耗的，压缩率越大的图片，显示的内容越模糊。 2.2.2 PNG(.png) PNG是一种无损压缩的位图图形格式，是网页常用的图片格式，原因是它压缩比高，生成文件体积小。同时其支持透明效果，使彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘。 2.2.3 GIF(.gif) GIF格式可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画，也就是我们常见的动图。 GIF图片不一定就是动图，其也可以是一张图片，由于其具有高压缩的算法，所以网页中也常有出现不是动图的GIF图。 2.2.4 PSD(.psd) Photoshop自身的文件格式，当使用Photoshop直接保存的时候就是PSD格式的文件。 3. 工具使用与快捷键操作3.1 文件操作 功能 快捷键 新建文件：Ctrl+N 打开文件：Ctrl+O 保存文件： Ctrl+S 关闭文件：Ctrl+W 3.2 工具操作 移动工具：V 吸管工具：I 裁剪工具：C 字体工具：T 抓手工具：H 自由变换：Ctrl+T 画布放缩： Alt+滚轮 隐藏选择框：Ctrl+H 取消选择框：Ctrl+D 图像大小： Ctrl+Alt+I 3.3 图层操作 新建图层：Ctrl + Alt + Shift + N 复制选中图层：Ctrl + J 合并选中图层：Ctrl + E 合并可见图层：Ctrl + Shift + E 组合选中图层： Ctrl + G 快速选择图层：Ctrl + 单击鼠标左键 连续多选图层：Shift + 单击鼠标左键 拖动并复制图层：Alt + 拖动 3.4 图层锁定解锁与对齐 图片解锁与上锁:锁定图层是为了防止误操作。 3.4.1 锁定图层 Photoshop提供了4种锁定方式 1. 锁定透明像素： 锁定透明图层，当前图层透明部分不会发生任何变化。 2. 图像像素锁定： 禁止对图层图像的绘制或者修改。但可移动图层，因为，虽然在效果上看图像改变了，但这并不是修改像素。另外，也可改变图层不透明度和混合模式，这也不属于修改图像的操作，因为图层像素本身并没有被修改，只是更改了表现方式。 3. 锁定位置： 该图层就无法移动，鼠标，键盘都不能移动它。 4. 锁定全部： 这个图层既无法绘制也无法移动。完全锁死。 图3-1 锁定图层 3.4.2 解锁图层 选中该图层，在最上边有个锁头的图标，点击一下即可解锁，再次点击即可锁定。 选中该图层，点击图层上的锁头图标，也可以解锁图层 。 图3-2 解锁图层 3.4.3 图层对齐 找到需要操作的图层。 切换到移动工具（快捷键V）。 在选中多个图层的情况下，对齐工具会被激活，点击即可。 图3-3 图层对齐 3.5 切图操作 3.5.1 切片切图法 1. 使用切图工具（快捷键C）对所选的图片进行切图 图3-4 切片切图法1 2. 选择所切图片存储为 web 所用格式（ctrl+alt+shit+s） 图3-5 切片切图法2 3.5.2 图层切图法 1. 选中该图层 · 图3-6 图层切图法1 2. 在图层区域，右键 -> 复制图层 -> 文档：新建 -> 确定 图3-7 图层切图法2 图3-8 图层切图法3
3. 对新建图层进行图像->裁剪->确定
· 图3-9图层切图法4
· 图3-10 图层切图法5 5. 存储为 web 所用格式 （ctrl+alt+shit+s） 3.5.3 快捷键的操作 由于图层切图3.5.2的步骤过于繁琐，可以使用 动作 （Alt+F9） 记录下来 并使用快捷键 进行操作。 1. 打开动作 -> 新建动作 -> 设置快捷键 -> 记录
· 图3-11 图层切图法1 2. 重复图层切图1-3步骤（录制过程 不要多余按键操作 异步到位），停止录制，完成录制
· 图3-12 图层切图法2 3.6 移动工具 · 使用移动工具（快捷键V）对所选的元素进行移动。 · 使用鼠标左键长按可以拖拽所选元素。 3.7 选区工具 使用矩形选区工具（快捷键M）对图层内的元素进行选中。 作用： 1. 只针对选框内的内容进行操作。 2. 可以复制剪切选框内的内容。 3. 配合移动工具可以拖拽被选中的图像。 4. 图片优化4.1 雪碧图(Sprites)制作 雪碧图也称精灵图（英文:Sprites）,是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中。
图4-1 雪碧图(Sprites) 3. 优点 · 减少http请求次数 · 减少图片数量，提升网页加载速度 · 减少网络带宽占用 4. 缺点 · 提高了网页开发和维护成本。 · 合并内容性图片会影响页面的可读性，语义化降低 5. 应用场景 · 一般只有描述性图片用来制作雪碧图，比如页面中使用的各种小图标 · 按钮背景图及其各种效果的图片，适合做成雪碧图 · 对于img标签设置的内容性图片，是不能合成到雪碧图的 · 开发游戏使用的素材图片 6. 制作规范 · 图片在合并之前必须保留空隙 · 图片排列方式有横向和纵向 · 合并分类的原则 · 把同属一个模块的图片进行合并 · 把大小相近的图片进行合并 · 把色彩相近的图片进行合并 4.2 图片压缩 7. 调整图片大小 8. 存储为web所用格式 9. 使用第三方工具 总结通过本篇文章，你可以学到以下知识点： · 认识PhotoShop工具操作界面 · 图像基础 · 工具使用与快捷键操作 · 图片优化 |
|
|
