标签:前端切图
一 界面设置
预设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代码)
标签:前端切图
原文地址:http://djvvv9.blog.51cto.com/4575248/1745214