前端PS基操

1.PS 基本操作

因为网页美工大部分效果图都是利用 PS(Photoshop)来做的，所以以后我们大部分切图工作都是在 PS 里面完成。

• 文件→打开:可以打开我们要测量的图片
• Ctrl+R:可以打开标尺，或者视图->标尺
• 右击标尺，把里面的单位改为像素
• Ctrl+加号(+)可以放大视图，Ctrl+减号(-)可以缩小视图
• 按住空格键，鼠标可以变成小手，拖动PS 视图
• 用选区拖动 可以测量大小
• Ctrl+D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

2.PS切图

2.1 常见的图片格式

1. jpg图像式:JPEG(JPG)对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用ipq格式的.
2. gif图像格式:GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果
3. png图像格式:是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景.如果想要切成背景透明的图片,请选择png格式.
4. PSD图像格式:PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿.对我们前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离

2.2 切片切图

1. 利用切片选中图片
2. 利用切片工具手动划出
3. 导出选中的图片
   文件菜单 → 导出 → 存储为 web 设备所用格式→选择我们要的图片格式→ 存储。

2.3 PS 插件切图

Cutterman 是一款运行在Photoshop 中的插件，能够自动将你需要的图层进行输出，以替代传统的手工"导岀 web 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。

官网:http://www.cutterman.cn/zh/cutterman
注意:Cutterman 插件要求你的 PS 必须是完整版，不能是绿色版，所以大家需要安装完整版本。