什么是切图
前端工程师拿到设计稿后,先通过「切图」工具获得网页素材,然后在代码中引用这些素材。
why 切图?为了给网页提供素材~
- HTML: img
<img src="images/avatar.jap" alt="头像">
- CSS: background
.icon{
background-image: url(../images/sprite.png);
background-position: 0 0;
}
如何切图
- 使用 ps 工具
- 使用背景图
- 图片合并方案
- 浏览器兼容
使用 ps 工具
ps 版本
- 03 年 Adobe Photoshop CS
- 13 年 Adobe Photoshop CC (CS6 是 CS 系列的最后一个版本)
基本设置和操作
- PS 首选项设置
- Photoshop CC > 首选项 > 单位与标尺 > 改为「像素」
- 调整工作区以适合切图
- 「窗口」下开启:工具,选项,信息(F8),图层(F7),历史记录
- 把信息、图层和历史记录三个窗口,拖到右边栏
- 保存当前工作区 (窗口 > 工作区 > 新建)
- 切图要用到的工具
- 移动 (选择图层,移动图层)
- 矩形选框 (查看所选矩形框的信息)
- 魔棒 (切不规则的图形)
- 裁剪 & 切片
- 缩放 (缩放工具,command +/-,option + 滑动)
- 拾色器
- 撤销操作
command + z
切换上一次操作与当前操作command + option + z
连续撤销- 在历史记录里选择
- 辅助视图
- 视图 > 打开对齐,显示额外内容,标尺(command + r)> 显示 > 参考线(command + ;)
测量和取色
了解了 PS 切图的基本操作后,就要开始正式切图了。切图的第一步,获取设计稿中的信息。
打开设计稿,获取信息
- 尺寸信息 → 测量
width: 200px;
- 颜色信息 → 取色
color: #ffcc00;
- 测量
- 测量什么?(所有数字都要测量)
- 宽度,高度
- 内边距,外边距
- 边框
- 定位
- 文字大小
- 行高
- 背景图位置
- 测量工具
- 矩形选框工具 & 信息面板
- 选区
- 添加到选取:按住 shift
- 从选取减去:按住 option
- 与选区交叉:按住 shift + option
- 测量什么?(所有数字都要测量)
- 取色
- 取啥色?(所有颜色都要取色)
- 边框色
- 背景色
- 文字色
- 取色工具
- 拾色器 & 吸管
- 小技巧
- 用拾色器确定背景是否是纯色
- 用魔棒确定是否是线性渐变
- 取啥色?(所有颜色都要取色)
切图之前
- 哪些是需要切出来的
- 修饰性的 (一般用在 background 属性)
- 图标,logo
- 有特殊效果的按钮,文字等
- 非纯色的背景
- 内容性的 (一般用在 img 标签)
- Banner,广告图片
- 文章中的配图
- 修饰性的 (一般用在 background 属性)
- 切出来的图片存为哪种类型?
- 修饰性的:PNG24,PNG8
- 内容性的:一般存为 JPG
切图的具体步骤
- 隐藏文字只留背景
- 若文字为独立图层,隐藏文字图层
- 找到文字图层
- 去掉眼睛图标
- 若文字和背景合并,平铺背景覆盖文字
- 矩形选框工具
- 自由变换 (command + T)
- 使用移动工具 + option (+shift)
- 若文字为独立图层,隐藏文字图层
- 保存
- png24
- 移动工具选中所需图层 (按住 command 多选)
- 右键合并图层 (command + E)
- 再右键复制图层到新文件,或直接拖至已有文件 (command + N 新建)
- png8 (不支持半透明效果,带背景切)
- 合并(可见)图层 (shift + command + E)
- 矩形选框工具选择内容
- 魔棒去除多余部分 (按住 option)
- png24
- 可平铺背景的切图
- 用矩形选框工具选取一块区域
- 复制粘贴到新文件中
- 切片工具(适用于可以一刀切的活动页)
- 拉参考线
- 选择切片工具
- 点击「基于参考线的切片」按钮
- 保存 (全选切片,统一设置储存格式)
保存
切完图后,需要对我们切出来的内容进行保存。
- 操作
- 复制(command + c)、新建(command + n)、粘贴(command + v) (or 拖动内容至新文件)
- 存储为 web 所用格式 (shift + option + command + s)
- 格式
- 当图片色彩丰富且无透明要求时,保存为 JPG 格式并选择合适的品质
- 当图片色彩不太丰富时,无论有无透明要求,保存为 PNG8 格式
- 当图片有半透明要求时,保存为 PNG24 格式
- 为保证图片质量,保留一份 PSD,在 PSD 上进行修改
修改和维护
- 要继续放更多的图片? → 更改画布大小 (图像 > 画布大小 > 选择宽高,定位左上角)
- 移动图标
- 若图标为独立图层,用移动工具拖动即可
- 若图标为非独立图层
- 用选区工具选中图标区域
- 用移动工具拖动图标
- 减小画布到指定区域
使用背景图
切完图且保存后,下一步就是在代码中使用这些图片。
图片合并方案
为什么要拼图?
-
什么是 Sprite 拼图:
- 推荐阅读:《谈谈CSS Sprites》
-
Sprite 拼图好处
- 减少网络请求,提升网页加载速度
图片优化合并
- 大小与质量
- 合并
- 排列
- 图片之间必须保留空隙
对于具体要保留多大的空隙呢,并没有一个明确的数值,遵循的一个宗旨就是保留的空隙足够后期维护就可以了。
如果是小图标,留的空隙可适当小一些,一般20像素左右;那如果是大图标,要留的空隙就要大一点,因为大图标在调整的时候,影响到的空间也会比较大。 有了一定的切图经验之后,对于保留多大空隙就会比较有概念,有自己的心得了。
- 图片排列方式:横向 & 纵向
- 分类
- 同属于一个模块
- 大小相近
- 色彩相近
- 综合以上方式
- 合并推荐
- 只本页用到的图片合并
- 有状态的图标合并
- 排列
浏览器兼容方案
- IE6 不支持 PNG24 半透明
- 存两份:sprite.png → 24 ;sprite_ie.png → 8
- CSS3 & 切图