前端工程师必备技能——切图

photoshop界面设置

新建设置（ctrl+n）

• 预览：自定义
• 分辨率：72像素/英寸
• 颜色模式：RGB颜色 8位
• 背景内容：透明
• 新建图层ctrl+shift+n

移动工具（v）

• 自动选择：图层
• 按住ctrl键，在图层上单击鼠标左键，定位到选中的图层

视图设置

• 视图 - 显示 - 智能参考线
• 标尺（ctrl+r）
• 窗口（图层、历史记录、信息、字符）
• 信息选项-模式：RGB颜色 - 标尺单位：像素 - 文档尺寸
• 编辑 - 首选项 - 单位与标尺：像素
• 窗口 - 工作区 - 新建工作区

photoshop简单工具操作

移动工具（v）

选区图层

选取工具（m）

• 填充
• 选取四大属性
• 切换shift+m，alt
• 变换shift

套索工具（l）

快速选择工具(w)

• 删除选取ctrl+d

裁剪工具（c）

• 自动选择，按ctrl选择选区

吸管工具（i）

• 吸取颜色

画笔工具（b）

仿制图章工具（s）

历史记录画笔工具（y）

橡皮擦工具（e）

渐变工具（g）

钢笔工具（p）

• 点击滑动，小角可以拉动
• 路径：工作区域
• ctrl+鼠标左键选区

横排文字工具（p）

矩形工具（u）

• 前景色填充（alt+del）
• 背景色填充（ctrl+del）
• 右键-变换选区 - shirt+alt  - ent - del
• 自由变化（ctrl+t），按住shift
• 复制按住alt

视图（v）

• 标尺（ctrl+r）
• 参考线（alt+v+e），关闭（ctrl+；）

ps切图

切片工具（c）

• 切换（shift+c）
• 调整（alt）

参考线-切片

• 基于参考线的切片
• 存储web（crtl+alt+shift+s）保存

自动切图

文件-脚本-将图层导出到文件

cc：

1. 编辑-首选项-增效工具-启用生成器
2. 文件-图片资源
3. 复制css：图层-复制css

 

转载于:https://my.oschina.net/alan01/blog/1358781