1. PS 切图

1.1. 常见的图片格式

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

1.2. 图层切图

简单版步骤：

① 使用**移动工具**，点击需要的图片

② 查看右侧，找到图片对应的图层，右击图层 → 快速导出为 PNG

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

步骤：

① 选中需要的若干个图层：选择一个图层，再按住shift键，继续选第二个图层:  

② 图层菜单 → 合并图层(ctrl+e)   

③ 查看右侧生成的新图层，在合并后的图层上，右击 →  快速导出为 PNG

1.3. 切片切图

步骤：

① 利用切片选中图片 ：利用切片工具手动划出

② 导出选中的图片：文件菜单  →  导出  → 存储为 web 设备所用格式  →  选择我们要的图片格式 →  存储 。

注意：保存的时候，要选“选中的切片”```

### 1.\. 插件切图

#### 1.4.1\. 介绍

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

它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

#### 1.4.2\. 安装

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

查看 “窗口菜单”里面的“扩展功能”：

① 如果是扩展功能的是灰色的，表示就是绿色版的，需要重新安装PS

② 如果是扩展功能右侧是可以使用的，表示就是完整版的，可以安装cutterman插件快速切图

官网: [http://www.cutterman.cn/zh/cutterman](https://links.jianshu.com/go?to=http%3A%2F%2Fwww.cutterman.cn%2Fzh%2Fcutterman)

当cutterman 安装完成后，重启PS，会发现扩展功能里面多了一个cutterman工具：

1.4.3 使用步骤

① 选择需要的图层

② 选择web端，点击web下面的下拉三角

③ 选择需要的图片格式

④ 设置好存储路径

⑤ 点击 “导出选中图层” 按钮

## 2\. CSS属性书写顺序（重点）

建议遵循以下顺序：

1.  **布局定位属性**：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2.  **自身属性**：width / height / margin / padding / border / background
3.  **文本属性**：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4.  **其他属性（CSS3）**：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

**举例：**

.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
border-radius: 10px;
}

作者：禾土
链接：//www.greatytc.com/p/d7da6e54e9b0
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。