0. 前言
本次示例教程以惡魔不要的項(xiàng)目psd文件講解，本文只是講解一些基本用法，基本上能滿(mǎn)足前端需要，深入了解Photoshop需要很長(zhǎng)的磨煉，大家有興趣可以學(xué)習(xí)。
1. 準(zhǔn)備前的工作
拿到一張psd設(shè)計(jì)稿，首先工作就是復(fù)制一份，以備不時(shí)之需。打開(kāi)后可能是這樣有密密麻麻的參考線或者整體圖像顯示的百分百過(guò)小的情況。清除參考線的方法是：執(zhí)行視圖-清除參考線；控制圖像的方法是：alt+鼠標(biāo)滾輪上下。關(guān)于參考線的簡(jiǎn)單用法，后續(xù)會(huì)提到。
關(guān)于Photoshop工作界面，建議窗口中除了工具和選項(xiàng)，其他只勾選信息，歷史記錄，圖層這三個(gè)顯示小窗口，擺放在右側(cè)。信息窗口用于實(shí)時(shí)查看像素寬高，歷史記錄可以回到歷史操作，圖層窗口自然不用說(shuō)了。
2.找圖層
可以說(shuō)psd文件都是以圖層的形式疊堆形成的。當(dāng)我們進(jìn)行圖像操作時(shí)候，就得在該圖像的圖層上進(jìn)行。一般找圖層都是由上級(jí)目錄往下級(jí)目錄逐步尋找。
3. 左導(dǎo)航處理示例
1. 背景處理：找到背景圖層，可以發(fā)現(xiàn)背景由兩個(gè)圖層混合制成的。不信？隱藏其中一個(gè)圖層試試。另外，你還能發(fā)現(xiàn)圖像的圖層最右側(cè)有個(gè)“fx”字樣，代表的意思是應(yīng)用了圖層樣式。
處理的方式：只需按Ctrl依次選中兩個(gè)圖層，執(zhí)行右鍵刪格化圖層樣式，然后你就發(fā)現(xiàn)那個(gè)“fx”不見(jiàn)了。然后右鍵合并圖層，這樣我們就得到一個(gè)新的圖層。而在后續(xù)的切圖中，往往會(huì)用到先刪格化圖層樣式，后合并圖層的方式這也是非常實(shí)用的一種方式。
接著：我們發(fā)現(xiàn)背景層是有規(guī)律的，似乎是由一個(gè)正方形的單位塊拼接而成的。Ctrl+R鍵打開(kāi)標(biāo)尺，點(diǎn)擊標(biāo)尺，拉出合適的參考線，粗略的量出大概是34x34像素的正方形。
然后：Ctrl+H鍵隱藏參考線，選擇選擇工具，樣式選擇固定大小（
特地的：別忘了操作完成后，樣式選擇正常，不然一直都是34x34的選擇區(qū)域），寬高填出粗略的量的34像素（偏大偏小自行修改），拖動(dòng)到合適的位置，Ctrl+C復(fù)制，+N新建，+V粘貼。摳出這個(gè)單位圖，然后css中設(shè)置背景填充即可。再熊貓壓縮圖片，這樣省不少空間了。
2. 數(shù)字1背景處理：基本方法同上，找到對(duì)應(yīng)圖層，先刪格化圖層樣式，再合并圖層，Ctrl+C復(fù)制，+N新建，+V粘貼。摳出保存png格式。
4. 補(bǔ)充
1.參考線
創(chuàng)建：Ctrl+R打開(kāi)標(biāo)尺，點(diǎn)擊標(biāo)尺拉動(dòng)到畫(huà)布上。
刪除單個(gè)參考線：選中該參考線，拉動(dòng)到標(biāo)尺上。
刪除所有參考線：視圖-清除參考線。
2.圖像Ctrl+C復(fù)制，+N新建，+V粘貼寬高會(huì)自適應(yīng)。比如你要摳下面?zhèn)€按鈕，只需在該圖層上，用選擇工具框起來(lái)起來(lái)，大點(diǎn)也無(wú)所謂。執(zhí)行Ctrl+C復(fù)制，+N新建，+V粘貼，得到的圖像就會(huì)自適應(yīng)寬高。特地的，最后保留png格式后，別忘記了隱藏背景層。或者雙背景層新建成默認(rèn)圖層0，再直接刪除背景層。
