PS切图

切图 设计稿中切出网页素材
给网页提供图片素材

使用PS工具

编辑>首选项>单位与标尺-像素
需要用到的面板
工具 -列出了ps提供的工具
选项 -
信息 -显示颜色 位置 尺寸信息
图层 -当前打开的文件图层
历史记录-记录了当前文件的所有历史操作 可以回提到任意历史操作

工具
切图常用工具：

• 移动工具
• 矩形选框工具
  • 添加到选区：按住Shift
  • 从选区减去：按住Alt
  • 与选区交叉：按住Shift+Alt
• 魔棒工具
• 裁剪工具+切片工具
• 缩放工具
  • 放大：Ctrl+加号
  • 缩小：Ctrl+减号
• 取色器
  辅助视图
  "视图"菜单下开启：
• 对齐
• 标尺 Ctrl+R
• 显示>参考线Ctrl+；
  测量
  矩形选框工具&信息面板
• 宽度、高度
• 内边框、外边框
• 边框
• 定位
• 文字大小
• 行高
• 背景图位置

取色

• 边框色
• 背景色
• 文字色

切图准备工作
确定哪些是需要切出来的
修饰性的（一般用在background属性）

• 图标、logo
• 有特殊效果的按钮、文字等
• 非纯色的背景
  一般存为PNG24 PNG8
  内容性的（一般用在 img 标签）
• Banner、广告图片
• 文章的配图…
  一般存为JPG
  切图第一步
  隐藏文字只留背景
  若文字为独立图层，隐藏文字图层
• 找到文字图层
• 去掉眼镜图标
  若文字和背景合并，平铺背景覆盖文字
• 矩形选工具
• 自由变换（Ctrl+T）
  使用移动工具+Alt
  按住shift水平移动

切图
PNG24

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

带背景切

• 合并（可见）图层（Shift+Ctrl+E）
• 矩形选框工具选择内容
• 魔棒工具去除多余部分
  -从选区中减去：按住Alt

可平铺背景的切图

• 用矩形选框工具选取一块区域
• 复制粘贴到新文件
  平铺内容充满文件的宽（x轴）或高（y轴）

切片工具
适用于可以一刀切的活动页

• 拉参考线
• 选择切片工具
• 点击"基于参考线的切片"按钮
• 保存（全选切片，统一设置存储格式）

保存
存储所需内容

• 复制、新建、粘贴
  Ctlr+C Ctrl+N Ctrl+V
  （拖动内容到新文件）
  格式选择
  当图片色彩丰富且无透明要求时
  建议保存为JPG格式并选择合适的品质

当图片色彩不太丰富时无论有无透明要求
请保存为PNG8格式

当图片有半透明要求
请保存PNG24格式

为保证图片质量
保留一份PSD，在PSD上进行修改

图片修改与维护

更改画布大小
图像-画布大小-
（定位需要选在左上角）
减小画布到指定区域
选定区域-裁剪
移动图标

• 若图标为独立图标，则用移动工具拖动即可
• 若图标为非独立图层
  • 用选区工具选中图标区域
  • 用移动工具拖动图标

修改PNG8的图片
需要改颜色模式为：PGB颜色

使用背景图

HTML
<button class="u-btn">1</button>

CSS
.u-btn{background:url(images/btn.png)no=repeat 0 0;}