前端PhotoShop切图

工具 、面板、视图

一、搭建舒服的切图环境

第一步

打开photoshop 编辑——首选项——单位与标尺 改成下图

第二步

在“窗口”菜单下开启：工具、选项、信息（F8）、图层、历史纪录

如下图:

切图常用工具

移动工具、矩形选框工具、魔棒工具、裁剪工具+切片工具、缩放工具（放大：Ctrl+加号  缩小：Ctrl + 减号）、取色器

第三步：自动选择工具配置

自动选择工具上方，勾选自动选择并且将“组”改为“图层”，如图所示：

这样我们就可以随意的选择想要移动的图片：
#####第四步

在“视图”菜单下开启：
 - 对齐
 - 标尺 Ctrl+R
 - 显示 >参考线 Ctrl + ；（需勾选显示额外内容）

测量、取色

获取信息

尺寸信息      通过测量 	    width ： 200px；
颜色信息      通过测量		color：   #fff000；

需要测量的数据（所有数字都要测量）：

• 宽度、高度
• 内边距、外边距
• 边框
• 定位
• 文字大小
• 行高 = 字体大小 + 行间距
• 背景图位置
  通过矩形选框工具结合信息面板做测量：
  效果如图：
  

矩形选框工具：下面这三个快捷键可以实现一些不规则的功能。

• 添加到选区： 按住 Shift
• 从选区减去：按住Alt
• 与选区交叉：按住Shift+Alt
  取色工具：
  

切图

切图之前

哪些是需要切出来的？

修饰性的（一般用在background属性）
 - 图标、logo
 - 有特殊效果的按钮、文字
 - 非纯背景色

内容性的（img标签）

 - Banner、广告图片
 - 文章中的配图...

切出来的图片 存为哪种类型？

内容性的：一般存为 JPG
修饰性：PNG24【支持半透明】（IE6不支持半透明）、PNG8【支持半透明】

切图

若文字为独立图层，隐藏文字图层：

 - 找到文字图层
 - 去掉眼睛图标

若文字和背景合并，平铺背景覆盖文字：

 - 矩形选框工具
 - 自由变换（Ctrl+T）
   使用移动工具 + Alt

放入新的图层里：

 - 移动工具选中所需图层（按住Ctrl多选）
 - 右键合并图层（Ctrl+E）
 - 再右键复制图层到新文件
   或直接拖至已有文件（新建：Ctrl+N）

要切小图标

运用矩形选框工具——魔棒工具——Ctrl C选区——Ctrl ——V到新的图层

切片工具

适用于一刀切的活动页

 - 拉参考线
 - 选择切片工具
 - 点击“基于参考线的切片”按钮
 - 保存（全选切片，统一设置存储格式）
 - 一般保存为web所用格式： Shift+Alt+Ctrl+s

保存类型

类型一：当图片色彩丰富且无透明要求时：
			   建议保存为JPG格式并选择合适的品质（一般不推荐设置为100）
类型二：当图片色彩不太丰富时，无论有无透明要求
			   请保存为PNG8格式（适合网络传输）【杂边设置为：无。扩散选择为：无仿色】
类型三：当图片有半透明要求，请保存为PNG24格式

图片使用

		<button class="u-btn">按钮</button>

	.u-btn{background:url(images/btn.png) no-repeat 0 0;}
	.u-btn{background:url(images/sprite.png) no-repeat 0 -50px;}
	

大小与质量

• 平衡与取舍

• 压缩工具
  无损：Minimage NetEaseWD/minimage（基于Node.js 托管在git上）
  有损：TinyPng（网站）
  图片的分类与合并

• 把属于一个模块的图片进行合并

• 把大小相近的图片进行合并

• 把色彩相近的图片进行合并

• 综合以上方式合并
  浏览器兼容方案

IE6不支持PNG24半透明
存两份：sprite.png 24
sprite_ie.png 8
CSS&切图