前端PS切图（笔记）

一 界面设置
预设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%button@2X.jpg 双倍Retina屏使用
文件》抽出资源 图层》复制CSS（生成CSS代码）