前端PS切图（笔记）

Posted 2020-06-16

一 界面设置

• 预设WEB 1920*1080

  自定义    *2000   72  RGB  背景：透明

• 自动选择图层  Ctrl+单击

• 视图》显示》智能参考线》标尺（Ctrl+R）

• 窗口   图层，历史记录，信息，字符

       信息面板中  单位：像素    一、二颜色：RGB  文档尺寸

• 编辑》首选项》单位与标尺  单位：像素

• 保存  窗口》工作区》新建工作区》WEB切图

二 PS基本操作

 1.简单工具

• 选区  单击选择   双选区，单击同时，shift加选区  alt减选区

• shift正圆  alt固定圆心画圆  Ctrl +放大   Ctrl -缩小  Space移动

• 移动V 选区M + Shift 切换下三角选择项

• 快选 [大  ]小   魔棒 填充，内容识别 

• 裁剪C  选中图层裁；选区裁，自动按包含选区的最小矩形裁

• 吸管 点改前景色

• 污点修复（有羽化值）  画笔、图章

• 历史记录画笔  高斯模糊后使用，可以去斑点

• 模糊、涂抹、减淡、海绵

• 字体毛边Window LCD，走钢笔路径

• 蒙版 选区

• 快捷键 Ctrl+Alt+Shift+E：盖印图层  Alt+Del：填充前景色

      Ctrl+T：自由变换   Alt+拖动：复制图层  Ctrl+R：标尺  

      参考线拖拉过程中，按Alt横竖参考线互变

 2.图层原理、操作

• 变换选区缩小得同心圆选区

 3.参考线及辅助

 视图》新建参考线  或者Alt+V+E+H 水平参考线

                      V 垂直

 选中图层后，拉参考线会自动吸附边缘

 Ctrl+；隐藏/显示参考线

三 切图

 1.传统切图：拖参考线，切片》基于参考线切图》导出（先裁剪再切会快些）

        Alt+Shift+Ctrl+S生成WEB所用格式（导出）

 2.精准切图：脚本》将图层导出到文件，PNG24全勾选（仅限高版本PS）

 3.（1）编辑》首选项》增效工具》启用生成器 

  （2）文件》生成》图像资源

  （3）图层重命名为 图层.png  会自动生成图片 也可.svg

              200%[email protected] 双倍Retina屏使用

• 文件》抽出资源   图层》复制CSS（生成CSS代码）