CSS前端基礎(chǔ)了解PS切圖

時(shí)間：2023-07-23 02:48:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-23 02:48:01 來源：網(wǎng)站運(yùn)營(yíng)

CSS前端基礎(chǔ)了解PS切圖：前端學(xué)習(xí)筆記教程不定期更新中，傳送門：

• 前端HTML第一天：什么是網(wǎng)頁(yè)？什么是HTML？網(wǎng)頁(yè)怎么形成？
• HTML標(biāo)簽大全
• 前端學(xué)習(xí)：表格學(xué)習(xí)，附練習(xí)+源碼
• 前端學(xué)習(xí)之列表，附送全套源碼
• CSS入門最全筆記
• CSS樣式表
• CSS之emmet語(yǔ)法
• CSS的復(fù)合選擇器
• CSS的顯示模式
• CSS背景：顏色、圖片、平鋪、背景圖片位置、背景圖像
• CSS三大特性：疊層性、繼承性、優(yōu)先級(jí)
• 前端學(xué)習(xí)之CSS盒子模型以及PS基礎(chǔ)
• CSS之圓角邊框、盒子陰影、文字陰影
• CSS之浮動(dòng)知識(shí)點(diǎn)匯總

下面開始繼續(xù)更新內(nèi)容，前面鏈接大家用來查漏補(bǔ)缺哦。

一、常見的圖片格式

| 1 | jpg | JPEG（.JPG）對(duì)色彩的信息保留較好，高清，顏色較多，我們**產(chǎn)品類的圖片** 經(jīng)常用jpg格式的 |

| 2 | gif | GIF格式最多只能儲(chǔ)存256色，所以通常用來顯示簡(jiǎn)單圖形及字體，但是可以保存透明背景和動(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ù)制文字,獲得圖片,還可以測(cè)量大小和距離**. |

PS 有很多的切圖方式：圖層切圖、切片切圖、PS 插件切圖等。

二、圖層切圖

簡(jiǎn)單版步驟：

① 使用**移動(dòng)工具**，點(diǎn)擊需要的圖片

② 查看右側(cè)，找到圖片對(duì)應(yīng)的圖層，右擊圖層 → 快速導(dǎo)出為 PNG

但是很多情況下,我們需要合并圖層再導(dǎo)出:

步驟：

? ① 選中需要的若干個(gè)圖層：選擇一個(gè)圖層，再按住shift鍵，繼續(xù)選第二個(gè)圖層:

? ② 圖層菜單 → 合并圖層(ctrl+e)

③ 查看右側(cè)生成的新圖層，在合并后的圖層上，右擊 → 快速導(dǎo)出為 PNG

三、切片圖

步驟：

? ① 利用切片選中圖片 ：利用切片工具手動(dòng)劃出

② 導(dǎo)出選中的圖片：文件菜單 → 導(dǎo)出 → 存儲(chǔ)為 web 設(shè)備所用格式 → 選擇我們要的圖片格式 → 存儲(chǔ) 。

? 注意：保存的時(shí)候，要選“選中的切片”：

四、插件切片

4.1 介紹

Cutterman是一款運(yùn)行在photoshop中的插件，能夠自動(dòng)將你需要的圖層進(jìn)行輸出， 以替代傳統(tǒng)的手工 "導(dǎo)出web所用格式" 以及使用切片工具進(jìn)行挨個(gè)切圖的繁瑣流程。

它支持各種各樣的圖片尺寸、格式、形態(tài)輸出，方便你在pc、ios、Android等端上使用。 它不需要你記住一堆的語(yǔ)法、規(guī)則，純點(diǎn)擊操作，方便、快捷，易于上手。

4.2 安裝

注意： **cutterman插件要求你的ps 必須是完整版**，不能是綠色版，所以大家需要從新安裝完整版本。

查看 “窗口菜單”里面的“擴(kuò)展功能”：

? ① 如果是擴(kuò)展功能的是灰色的，表示就是綠色版的，需要重新安裝PS

? ② 如果是擴(kuò)展功能右側(cè)是可以使用的，表示就是完整版的，可以安裝cutterman插件快速切圖

官網(wǎng)：http://www.cutterman.cn/zh/cutterman

當(dāng)cutterman 安裝完成后，重啟PS，會(huì)發(fā)現(xiàn)擴(kuò)展功能里面多了一個(gè)cutterman工具：

4.3 使用步驟

? ① 選擇需要的圖層

? ② 選擇web端，點(diǎn)擊web下面的下拉三角

? ③ 選擇需要的圖片格式

? ④ 設(shè)置好存儲(chǔ)路徑

? ⑤ 點(diǎn)擊 “導(dǎo)出選中圖層” 按鈕