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

摘要

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

---

使用PS工具

• 首选项设置： 设置->首选项->单位与标尺：像素！
• 常用面板：
  
  • 信息面板（F8）：显示尺寸信息以及光标位置
  • 图层面板（F7）：修改图层信息咯
  • 历史记录面板： 无限回退
• 常用工具：
  
  • 移动工具： 勾上自动选择，下拉列表选择图层而不是组（图层的组合）。
  • 矩形选框工具(以下快捷键适合所有的选择工具)：
    
    • 添加到选区：按住shift
    • 从选区减去：按住alt
    • 与选区交叉： 按住Shift+Alt
    • 移动选区： 按住Ctrl
  • 魔棒工具：
    
    • 容差：设置颜色取样时的范围，值越小选择颜色范围越小
  • 裁剪工具+切片工具
  • 缩放工具：
    
    • 缩放按