前端PS切图

PS基础

一、快捷键

1、放大/缩小：cmd +/-
2、按shift键, 可以套索时多选几个区
3、首选项菜单: cmd + k

二、功能

• 1、选中图层
  

• 2、拖动图片显示位置

  • a、选中套索工具(M快捷键) -> 按住空格键 -> 触摸板左右上下拖动

• 3、套索时：合并多选区(shift)和删除多个选区的重复块(option)

• 4、多边形套索工具, 最后一下要双击, 形成闭合图形

• 5、裁剪技巧

  • a、精准裁剪图层:在移动工具(V)中单击按选定图层，右下角的”图层”栏会选中该选区，
    按住cmd后鼠标左单击一下右下角该”图层”选区, 会出现选中该图层，
    【注意】对于图层错乱情况, cmd+双击,操作会出现正常选区图形
    然后点击切换到裁剪工具(C)后，双击就能得到图形或最小矩形区域。（非常实用）

• 6、参考线及其辅助

  • a、显示ps边框辅助标尺, cmd + r
  • b、显示/隐藏辅助线, cmd + ;
  • c、新建参考线
  • 菜单: “视图” -> “新建参考线” -> 输入1000px
  • 直接从ps边框拉参考线
  • 参考线精确到某个图层的边缘
    选中图层, 从ps边缘拉参考辅助线到图层边上后小浮动都不影响参考线位置

三、切图

1、普通切图

• 切图与切片
  
  • 两者概念和区别
• 切片的基本操作及其技巧
  
  • 切片工具及其基本操作
  • 切片技巧
• 导出操作
  
  • 存储为Web所用格式(PNG24格式)

2、精准切图

利用photoshop的脚图层
“文件” -> “脚本” -> “将图层导出到文件”(文件类型:PNG-24,勾选上’透明区域’、交错、裁切图层)

【自动切图可参考】(https://segmentfault.com/a/1190000004085170)

3、切图实践

• 1、先选中图层,然后将该图层背景颜色出除，
• 2、然后在使用上面的精【准裁剪图层】后切图
  精准裁剪图层:在移动工具(V)中单击按选定图层，右下角的”图层”栏会选中该选区，
  按住cmd后鼠标左单击一下右下角该”图层”选区, 会出现选中该图层，
  【注意】对于图层错乱情况, cmd+双击右下角图层,操作会出现正常选区图形
  然后点击切换到裁剪工具(C)后，双击就能得到图形或最小矩形区域。（非常实用）
• 3、保存;”文件” -> 存储为web所用格式,选’PNG-24’格式.

参考慕课网视频教程《前端工程师必备的PS技能——切图篇》