1. PS 切圖
1.1. 常見的圖片格式
| 序號(hào) | 格式 | 特點(diǎn)和常用的用途 |
|---|---|---|
| 1 | jpg | JPEG（.JPG）對(duì)色彩的信息保留較好，高清，顏色較多，我們產(chǎn)品類的圖片 經(jīng)常用jpg格式的 |
| 2 | gif | GIF格式最多只能儲(chǔ)存256色，所以通常用來顯示簡單圖形及字體，但是可以保存透明背景和動(dòng)畫效果, 實(shí)際 經(jīng)常用于一些圖片小動(dòng)畫效果 |
| 3 | png | png圖像格式，是一種新興的網(wǎng)絡(luò)圖形格式，結(jié)合了GIF和JPEG的優(yōu)點(diǎn)，具有存儲(chǔ)形式豐富的特點(diǎn)，能夠保持透明背景. 如果想要切成 背景透明的圖片 ,請(qǐng)選擇png格式. |
| 4 | psd | PSD圖像格式，Photoshop的專用格式，里面可以存放圖層、通道、遮罩等多種設(shè)計(jì)稿. 對(duì)我們前端人員來說,最大的優(yōu)點(diǎn),我們可以直接從上面復(fù)制文字,獲得圖片,還可以測量大小和距離. |
PS 有很多的切圖方式：圖層切圖、切片切圖、PS 插件切圖等。
1.2. 圖層切圖
簡單版步驟：
① 使用**移動(dòng)工具**，點(diǎn)擊需要的圖片
② 查看右側(cè)，找到圖片對(duì)應(yīng)的圖層，右擊圖層 → 快速導(dǎo)出為 PNG
但是很多情況下,我們需要合并圖層再導(dǎo)出:
步驟：
① 選中需要的若干個(gè)圖層：選擇一個(gè)圖層，再按住shift鍵，繼續(xù)選第二個(gè)圖層:
② 圖層菜單 → 合并圖層(ctrl+e)
③ 查看右側(cè)生成的新圖層，在合并后的圖層上，右擊 → 快速導(dǎo)出為 PNG
1.3. 切片切圖
步驟：
① 利用切片選中圖片 ：利用切片工具手動(dòng)劃出
② 導(dǎo)出選中的圖片：文件菜單 → 導(dǎo)出 → 存儲(chǔ)為 web 設(shè)備所用格式 → 選擇我們要的圖片格式 → 存儲(chǔ) 。
注意：保存的時(shí)候，要選“選中的切片”```
### 1.\. 插件切圖
#### 1.4.1\. 介紹
Cutterman是一款運(yùn)行在photoshop中的插件，能夠自動(dòng)將你需要的圖層進(jìn)行輸出， 以替代傳統(tǒng)的手工 "導(dǎo)出web所用格式" 以及使用切片工具進(jìn)行挨個(gè)切圖的繁瑣流程。
它支持各種各樣的圖片尺寸、格式、形態(tài)輸出，方便你在pc、ios、Android等端上使用。 它不需要你記住一堆的語法、規(guī)則，純點(diǎn)擊操作，方便、快捷，易于上手。
#### 1.4.2\. 安裝
注意： **cutterman插件要求你的ps 必須是完整版**，不能是綠色版，所以大家需要從新安裝完整版本。
查看 “窗口菜單”里面的“擴(kuò)展功能”：
① 如果是擴(kuò)展功能的是灰色的，表示就是綠色版的，需要重新安裝PS
② 如果是擴(kuò)展功能右側(cè)是可以使用的，表示就是完整版的，可以安裝cutterman插件快速切圖
官網(wǎng): [http://www.cutterman.cn/zh/cutterman](https://links.jianshu.com/go?to=http%3A%2F%2Fwww.cutterman.cn%2Fzh%2Fcutterman)
當(dāng)cutterman 安裝完成后，重啟PS，會(huì)發(fā)現(xiàn)擴(kuò)展功能里面多了一個(gè)cutterman工具：
1.4.3 使用步驟
① 選擇需要的圖層
② 選擇web端，點(diǎn)擊web下面的下拉三角
③ 選擇需要的圖片格式
④ 設(shè)置好存儲(chǔ)路徑
⑤ 點(diǎn)擊 “導(dǎo)出選中圖層” 按鈕
## 2\. CSS屬性書寫順序（重點(diǎn)）
建議遵循以下順序：
1. **布局定位屬性**：display / position / float / clear / visibility / overflow（建議 display 第一個(gè)寫，畢竟關(guān)系到模式）
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;
}
作者：禾土
鏈接：http://www.itdecent.cn/p/d7da6e54e9b0
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
