ps 切图

目录

1.常见的图片格式

4.2图层切图

切片器切图

4.3ps插件切图

网页布局总结

---

1.常见的图片格式

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

ps有很多的切图方式：图层切图、切片切图、ps插件切图等。

4.2图层切图

最简单的切图方式：点击图层-->快速导出为PNG

但是很多情况下，我们需要合并图层再导出：

1.图层菜单-->合并图层（ctrl+e）

2.右击->快速导出为PNG

切片器切图

1.利用切片选中图片

利用切片工具手动划出

2.导出选中的图片

文件菜单->导出->存储为web设备所用格式->选择我们要的图片格式->存储

4.3ps插件切图

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

官网：http://www.cutterman.cn/zh/cutterman

注意：Cutterman插件要求你的ps必须是完整版，不能是绿色版，所以大家需要安装完整版本

网页布局总结

通过盒子模型，清晰知道大部分html标签是一个盒子。

通过CSS浮动，定位可以让每个盒子排列成为网页。

一个完整的网页，是标准流，浮动，定位一起完成布局的，每个都有自己的专门用法 

1.标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局

2.浮动

可以让多个块级元素一行显示或者对齐盒子，多个块级盒子水平显示就用浮动布局

3.定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局