前端学习笔记之页面制作（一）——PS切图

摘要

前端工程师在在构建页面的时候，往往是从设计师那里拿到.psd格式的设计稿，所以在psd文件中切出页面所需组件并获取相关尺寸和信息就成了构建页面的第一步。这篇文章就描述了切图的整体流程以及一些注意事项，供学习参考。

---

使用PS工具

• 首选项设置： 设置->首选项->单位与标尺：像素！
• 常用面板：
  
  • 信息面板（F8）：显示尺寸信息以及光标位置
  • 图层面板（F7）：修改图层信息咯
  • 历史记录面板： 无限回退
• 常用工具：
  
  • 移动工具： 勾上自动选择，下拉列表选择图层而不是组（图层的组合）。
  • 矩形选框工具(以下快捷键适合所有的选择工具)：
    
    • 添加到选区：按住shift
    • 从选区减去：按住alt
    • 与选区交叉： 按住Shift+Alt
    • 移动选区： 按住Ctrl
  • 魔棒工具：
    
    • 容差：设置颜色取样时的范围，值越小选择颜色范围越小
  • 裁剪工具+切片工具
  • 缩放工具：
    
    • 缩放按钮；
    • 快捷键：Ctrl + & Ctrl -
    • Alt+滚轮；
  • 历史记录： Ctrl+Alt+z : 可以连续撤销
  • 取色器
• 辅助视图：视图菜单下：
  
  • 对齐： 移动时边界和参考线等会有吸附力；
  • 标尺（Ctrl+R）： 可以拖出参考线；
  • 显示 > 参考线 Ctrl+；： 需要先将显示额外内容开启。

测量和取色

测量：尺寸信息

所有数字都要测量

• 内容： width, height, padding, margin, border, position, text, line-height, background-position
• 方式： 矩形选框+信息窗口
• 字体大小：
  
  • 独立文字图层：用文字工具
  • 已经合并到背景的文字： 矩形选框，测高度！高度即为字号。不同字体会有些误差，选大一点的字会准一点
• 行高：
  
  • 独立文字图层： 属性面板里；
  • 已合并到背景的文字： 矩形选框：第一行字最下到第二行字最下即为行高

取色：颜色信息

所有的颜色都要取色

• 内容： 边框色，背景色，文字色
• 方式： 拾色器+吸管工具
• 文字颜色：
  
  • 独立文字图层： 选项面板里有颜色信息
  • 合并到背景后的文字或者文字有一系列效果：拾色器+吸管工具
• 判断背景是否为纯色： 拾色器乱点=_=
• 判断是否为线性渐变： 魔棒工具（看同一颜色区块的边界是否规则）

切图

• 内容：
  
  • 修饰性的：图标，logo，按钮，文字，非纯色背景
  • 内容性的： banner，广告图片，配图
• 格式：
  
  • 修饰性：PNG8, PNG24（支持半透明，注意IE6不支持半透明）
  • 内容性： JPG
• 步骤：
  
  • 隐藏文字
    
    • 文字为独立图层，去掉眼睛图标
    • 文字和背景合并，都需要先用矩形框选择一块背景
      
      • 若背景可拉伸，则使用自由变换工具（Ctrl+T）拉伸背景矩形框将文字覆盖；
      • 若背景不可拉伸（纹理），则使用移动工具+Alt来移动选中的背景覆盖文字
        

        tips: 按shift可以控制移动过程中只会左右平移而不会上下移动

  • PNG24(不带背景)
    
    • 用移动工具选中所需图层（按Ctrl多选）
    • 右键合并图层（Ctrl+E）
    • 右键复制图层到新文件，或者直接拖至已有文件(新建文件Ctrl+N)
  • PNG8 (带背景切)
    
    • 合并可见图层（Shift+Ctrl+E）
    • 矩形选框选择，魔棒工具去除多余部分，按住Alt
  • 可平铺背景的切图
    
    • 矩形选框选取一块区域复制并粘贴到新文件中
      沿X轴复制的背景要充满文件的宽，沿Y轴复制的背景要充满文件的高
  • 切片工具：适合一刀切的活动页
    
    • 拉参考线
    • 选择切片工具
    • 点击“基于参考线的切片”按钮
    • 用切片选择工具给各部分命名
    • 保存（全选切片，统一设置存储格式）：存储为web所用格式

保存

• 存储所需内容，复制，新建（背景一般透明），粘贴
• 存储为web所用格式，Ctrl+Shift+Alt+S
• 保存类型：
  
  • 图片色彩丰富且无透明要求：JPG格式并选择合适的品质（降低品质用来压缩图片，不要100，一般60-80）
  • 图片色彩不太丰富时无论透明度要求：PNG8（只有256种颜色，比较小）
    

    设置：杂边： 无；颜色： 256； 无仿色；勾选 透明度

  • 半透明要求（e.g. 阴影）： PNG24（不压缩文件，偏大）
  • 保留PSD文件，在PSD文件上修改，使用时导出各种格式

修改与维护

• 更改画布大小： 图像->画布大小（注意定位）
• 移动图标
  
  • 独立图层： 移动工具直接拖动
  • 非独立图层： 选区工具选中图标区域，移动工具拖动图标
• 减小画布到指定区域： 选定区域 -> 裁剪
• 修改PNG8的图片：需要更改颜色模式为RGB模式（默认为索引模式）[图像->模式->RGB模式]

图片优化与合并

• 合并原因： 减少网络请求，提升网页加载速度
• 大小与质量
  
  • 平衡与取舍：视觉要求（图片品质）和速度（图片大小）的平衡
  • 压缩工具：
    
    • 无损：minimage（效果不明显）
    • 有损：tinyPng（效果明显）
• 排列
  
  • 图片间保留空隙，容错性提高
  • 排列方式：横向，纵向
• 分类
  
  • 同属于一个模块的图片合并
  • 大小相近的图片合并
  • 色彩相近图片合并
  • 综合以上三种
  • 推荐：
    
    • 只本页用到的图片合并
    • 有状态的图标合并 (e.g. 表达鼠标hover图标颜色稍微改变的效果)
• 兼容方案
  
  1. IE6不支持PNG24半透明，存两份：
     
     • 高级浏览器用PNG24
     • ie6用PNG8
  2. 切图与CSS3
     
     • 高级浏览器：css3
     • ie6：切图