0. 前言
本次示例教程以惡魔不要的項目psd文件講解舶吗，本文只是講解一些基本用法赃份，基本上能滿足前端需要鸠姨，深入了解Photoshop需要很長的磨煉铜秆，大家有興趣可以學(xué)習(xí)。
1. 準(zhǔn)備前的工作
拿到一張psd設(shè)計稿讶迁，首先工作就是復(fù)制一份连茧，以備不時之需。打開后可能是這樣有密密麻麻的參考線或者整體圖像顯示的百分百過小的情況巍糯。清除參考線的方法是：執(zhí)行視圖-清除參考線梅屉；控制圖像的方法是：alt+鼠標(biāo)滾輪上下。關(guān)于參考線的簡單用法鳞贷，后續(xù)會提到坯汤。
關(guān)于Photoshop工作界面，建議窗口中除了工具和選項搀愧，其他只勾選信息惰聂，歷史記錄，圖層這三個顯示小窗口咱筛，擺放在右側(cè)搓幌。信息窗口用于實時查看像素寬高，歷史記錄可以回到歷史操作迅箩，圖層窗口自然不用說了溉愁。
2.找圖層
可以說psd文件都是以圖層的形式疊堆形成的。當(dāng)我們進(jìn)行圖像操作時候饲趋，就得在該圖像的圖層上進(jìn)行拐揭。一般找圖層都是由上級目錄往下級目錄逐步尋找。
3. 左導(dǎo)航處理示例
1. 背景處理：找到背景圖層奕塑，可以發(fā)現(xiàn)背景由兩個圖層混合制成的堂污。不信？隱藏其中一個圖層試試龄砰。另外盟猖，你還能發(fā)現(xiàn)圖像的圖層最右側(cè)有個“fx”字樣讨衣，代表的意思是應(yīng)用了圖層樣式。
處理的方式：只需按Ctrl依次選中兩個圖層式镐，執(zhí)行右鍵刪格化圖層樣式反镇，然后你就發(fā)現(xiàn)那個“fx”不見了。然后右鍵合并圖層娘汞，這樣我們就得到一個新的圖層歹茶。而在后續(xù)的切圖中，往往會用到先刪格化圖層樣式价说，后合并圖層的方式這也是非常實用的一種方式辆亏。
接著：我們發(fā)現(xiàn)背景層是有規(guī)律的风秤，似乎是由一個正方形的單位塊拼接而成的鳖目。Ctrl+R鍵打開標(biāo)尺，點擊標(biāo)尺缤弦，拉出合適的參考線领迈，粗略的量出大概是34x34像素的正方形。
然后：Ctrl+H鍵隱藏參考線碍沐，選擇選擇工具狸捅，樣式選擇固定大小（
特地的：別忘了操作完成后累提，樣式選擇正常尘喝，不然一直都是34x34的選擇區(qū)域），寬高填出粗略的量的34像素（偏大偏小自行修改）斋陪，拖動到合適的位置朽褪，Ctrl+C復(fù)制，+N新建无虚，+V粘貼缔赠。摳出這個單位圖，然后css中設(shè)置背景填充即可友题。再熊貓壓縮圖片嗤堰，這樣省不少空間了。
2. 數(shù)字1背景處理：基本方法同上度宦，找到對應(yīng)圖層踢匣，先刪格化圖層樣式，再合并圖層戈抄，Ctrl+C復(fù)制符糊，+N新建，+V粘貼呛凶。摳出保存png格式男娄。
4. 補(bǔ)充
1.參考線
創(chuàng)建：Ctrl+R打開標(biāo)尺，點擊標(biāo)尺拉動到畫布上。
刪除單個參考線：選中該參考線模闲，拉動到標(biāo)尺上建瘫。
刪除所有參考線：視圖-清除參考線。
2.圖像Ctrl+C復(fù)制尸折，+N新建啰脚，+V粘貼寬高會自適應(yīng)。比如你要摳下面?zhèn)€按鈕实夹，只需在該圖層上橄浓，用選擇工具框起來起來，大點也無所謂亮航。執(zhí)行Ctrl+C復(fù)制荸实，+N新建，+V粘貼缴淋，得到的圖像就會自適應(yīng)寬高准给。特地的，最后保留png格式后重抖，別忘記了隱藏背景層露氮。或者雙背景層新建成默認(rèn)圖層0钟沛，再直接刪除背景層畔规。
