前端之ps切片
切片的基本要點(diǎn)
切片的好處
手動切圖
??? 手動切圖需要切圖人員完全手動的使用“切片工具”一個一個的去切割圖片。首選，選擇“切片工具”，然后在需要切圖的圖標(biāo)上使用“切片工具”選擇一個包含了圖標(biāo)區(qū)域。例如下圖的ADDRESS文字上方的圖標(biāo)就使用了“切片工具”選中。繼續(xù)切其他圖標(biāo)，從圖中也可看出每個切圖左上角都有一個數(shù)字，這個數(shù)字就是切圖的編號，表示當(dāng)且切圖時第幾個切圖。
???? 上面的切圖也暴露除了幾個疑問，我先把上圖的底部放大一點(diǎn)，能看清楚些。圖片的右下角有一個區(qū)域，區(qū)域左上角有一個數(shù)字為30的編號，這個區(qū)域也是一個切圖，30是我們看到的最大數(shù)字，這說明了其實我們一共切了30個圖。明明我們只切了8個圖片，為什么一下子又變成了30個切圖？
??? 這是因為我們在切圖的時候，PS自動的添加了一些切圖。我們就拿07號切圖來說，當(dāng)我們手動切割了電話圖標(biāo)，在07好切圖的右邊（08）和下邊（10）都會自動生成一個切圖。隨著切圖越來越多，自動生成的切圖也會越來越多，最終一共包含了30個切圖。而且這些自動生成的切圖我們是不能刪除的。
??? 有時候看著這么多切圖覺得挺煩，那可不可以只顯示我們自己切的圖？答案是肯定的。我們先把工具切換到“切片選擇工具”，上面的菜單欄多了一個“隱藏自動切圖”按鈕。
??? 點(diǎn)擊“隱藏自動切片”按鈕，然后我們再看看切圖一個就只有8個切圖了，這8個切圖真是我們自己切的。但細(xì)心一點(diǎn)的同學(xué)看到最后一個切圖的編號是29，“隱藏自動切片”只是隱藏了自動生成的切片，而不是刪除切片。
??? 切圖完成之后就可以執(zhí)行導(dǎo)出了。打開“文件”->“導(dǎo)出”->“存儲為Web所用格式”（老版本打開方式為“文件”->“存儲為Web所用格式”），彈出“存儲為Web所用格式”窗口。需要設(shè)置幾個選項，右上角下拉列表選擇“PNG-24”，勾選“透明度”和“交錯”選項。最后點(diǎn)擊“存儲…”，選擇我們存儲的路徑。到目前為止，手動切圖工作基本上就完成了。
參考線切圖
??? 在介紹參考線切圖之前，我們需要搞清楚什么是參考線。先討論一個問題，假如我們需要使用PS設(shè)置一個網(wǎng)頁，在網(wǎng)頁內(nèi)容居中顯示，左右兩邊都流出200像素的寬度。如果兩邊都有一條參考線做參考，這樣是不是就很方便了。
????參考線的添加有兩種方式：
????第一種：打開菜單“視圖”->“新建參考線”，彈出“新建參考線”。參考包括“取向”（水平或垂直）、“位置”。例如畫布寬度為1200，那么在垂直方向需要在位置分別為200和1000像素添加兩條垂直方向的參考線。
??? 有了參考線，布局就比較簡單了。在使用選擇工具選擇區(qū)域時，可以參考添加的參考線。下圖的布局就是依賴參考線完成的。
????第二種：如果參考線都是按照第一種方式添加，那就顯得效率太低了。特別是馬上要介紹的參考線切圖，如果按照第一種方式添加幾十條參考線，那要等到猴年馬月。第二種添加參考線的方式非常簡單，直接在垂直標(biāo)尺或者水平標(biāo)尺處按住鼠標(biāo)左鍵，一直往外拖動就可拖出一條新增的參考線。
??? 參考線切圖就是使用的第二種添加參考線的方式切圖。例如現(xiàn)在我們需要把設(shè)計圖上的ADDRESS、MAIL、PHONE三個圖標(biāo)使用參考線切圖，從水平標(biāo)尺和垂直標(biāo)尺拖動添加參考線，添加成下圖的樣子。
??? 然后在工具欄中選中“切片工具”，此刻工具菜單欄中多了一個“基于參考線的切片”按鈕。點(diǎn)擊這個按鈕。設(shè)計圖中自動生成了幾個切片，切片工具基于參考線自動生成切圖。這樣生成切圖的方式比傳統(tǒng)的一個一個手動切圖效率要高一些。
??? 并且參考線切圖有一個好處是生成的切圖我們都可以手動刪除，如果我們覺得有些附加的切圖不需要，那么我們可以使用“選擇切片工具”右鍵單擊切圖，選擇刪除操作。下圖是使用參考線切圖得到的最終切圖，只有三個切圖。
??? 切圖完成了，接下來的操作和手動切圖一樣，使用“存儲為Web所用格式”導(dǎo)出圖標(biāo)即可，這里不再作介紹了。
精準(zhǔn)切圖
??? 精準(zhǔn)切圖是CC版本引入的新功能，何為精準(zhǔn)切圖？精準(zhǔn)切圖解放了切圖人員的雙手，PS通過腳本自動對每個圖層執(zhí)行切圖。切圖人員只需選擇幾個菜單執(zhí)行切圖命令，剩下的工作就是等待PS執(zhí)行切圖。另外一方面，精準(zhǔn)切圖是計算機(jī)基于”圖層對象“切圖，所有切出來的圖形精準(zhǔn)度肯定也比人工切圖高。
??? 打開菜單“文件”->”導(dǎo)出"->“將圖層到處到文件”,彈出導(dǎo)出窗口：
??? 上面窗口需要填寫幾個參數(shù)，“目標(biāo)”即導(dǎo)出到哪個目錄下，“文件名前綴”為所有導(dǎo)出圖片文件名稱的前綴，“僅限可見圖層”只導(dǎo)出可見圖層，“文件類型”為導(dǎo)出文件的類型（例如png、jpg等）。最后點(diǎn)擊“運(yùn)行”按鈕開始執(zhí)行自動切圖。下圖是切圖過程PS“圖層”自動切圖的一個截圖。可以看出PS在自動選擇每個圖層然后執(zhí)行導(dǎo)出。
??? 由于自動切圖時PS會把每個圖層都導(dǎo)出，所有花的時間可能比較長，需要耐心等待。當(dāng)自動切圖執(zhí)行完成后，我們可以在目標(biāo)目錄下看到導(dǎo)出的所有圖片。
擴(kuò)展點(diǎn)-自動切圖
??? CC版本另一個強(qiáng)大的功能叫做“自動切圖”，首先解釋下什么叫自動切圖。精準(zhǔn)切圖我們能夠看到PS切圖的過程，自動切圖我們根本就看不到切圖的過程，當(dāng)我們把圖層設(shè)計好了，我們的切圖也就完成了。
?? 在使用自動切圖功能之前，我們需要做兩個操作：
?? 操作一，選擇菜單“編輯”->”首選項"->“增效工具”，彈出下面的窗口。勾選“啟用生成器”。
??? 操作二，勾選“文件”->“生成”->“圖像資源”菜單。
??? 現(xiàn)在準(zhǔn)備工作已經(jīng)完成了，接下來就看看怎樣自動切圖。舉個例子，現(xiàn)在我們需要導(dǎo)出下圖的圖層，并且不包含背景色。
??? 其實上面圖片的所有資源都放在一個叫做“Address”的圖層分組下。現(xiàn)在把分組名稱重新改為“Address.png”。然后我們到psd文件目錄下，psd文件名字為“Artica - One Page PSD Template“，可以看到同目錄下生成了另外一個叫做”Artica - One Page PSD Template-assets“的文件夾。????
??? 然后打開”Artica - One Page PSD Template-assets“文件夾，看到有一個叫做Address.png的文件，正好是我們圖層分組的名字，并且圖片背景是透明的。這樣的功能是不是很強(qiáng)大？
??? 自動切圖也是生成svg的利器。ps不僅可以把圖層生成為png文件，還支持生成svg文件。現(xiàn)在我想把下面的圖標(biāo)保存為svg格式，我們僅需要把圖層文件名字改為“Icon.svg”。打開”Artica - One Page PSD Template-assets“文件夾，可看到生成了Icon.svg文件。
??? 用文本編輯器打開Icon.svg文件看看生成了什么內(nèi)容。文件中包含了width和height以及css樣式，正是一個比較常見的svg文件。我們通過修改css樣式就可以改變圖片的顏色了。例如現(xiàn)在把”fill:#fff”改為“fill:#FF3300”，然后保存文件。用瀏覽器打開，可看到圖片顏色變成了紅色。
?
總結(jié):
1.切片可以改變背景漸變(減少css代碼使用)
選中要編輯的背景圖層----右擊------混合選項----漸變疊加 ---添加想要的顏色漸變(也可以反向)-----確定
2.切邊框陰影(解決box-shadow兼容問題)
將切好的圖片生成css sprite雪碧圖
1.打開CssSprite.exe文件
2.打開圖片
點(diǎn)擊左上角按鈕打開圖片
選擇多張圖片，點(diǎn)擊打開按鈕
3.排布圖片
可以選擇上面的最上面按鈕今天橫豎的默認(rèn)排布，也可以鼠標(biāo)選中圖片拖動位置，拖動完成后程序會根據(jù)內(nèi)部圖片的位置生成面積最小的雪碧圖，當(dāng)然也會改變相應(yīng)的圖片位置
4.代碼生成
在程序中可以生成sass代碼，以及css代碼，看自己需要嘛，自己選擇，選中“是否是手機(jī)端”的時候會把所有的尺寸除以2，因為手機(jī)端往往會設(shè)計圖比較大，所以要縮放，建議生成圖片后再復(fù)制生成的代碼
5.保存雪碧圖
點(diǎn)擊“生成雪碧圖”按鈕，程序會默認(rèn)選中你在第3步的時候打開圖片的地址，然后點(diǎn)擊確定后生成雪碧圖。
總結(jié)
- 上一篇： 利用朴素贝叶斯进行新闻文本分类
- 下一篇： SAP C4C HTML Mashup