PhotoShop從CS版本演變到現(xiàn)在的CC版本，切圖功能發(fā)生了比較大的變化，我們可以把PhotoShop CS版本時(shí)的切圖功能稱(chēng)為傳統(tǒng)切圖，而從PhotoShop CC版本開(kāi)始PS提出了精準(zhǔn)切圖。所謂傳統(tǒng)切圖就是切圖人員基本上都是自己分割圖層切圖，傳統(tǒng)切圖又分為全手工切圖和參考線切圖；現(xiàn)在CC版本提出的精準(zhǔn)切圖，切圖人員可以依賴(lài)計(jì)算機(jī)把圖層對(duì)象精確的切割出來(lái)，這樣切割出來(lái)的圖層肯定比傳統(tǒng)切圖切出來(lái)的精準(zhǔn)度高。另一方面，CC版本可通過(guò)腳本執(zhí)行全自動(dòng)切圖，這樣完全解放了切圖人員的雙手。

總體來(lái)說(shuō)，切圖方法分為：傳統(tǒng)切圖（手動(dòng)切圖、參考線切圖）、精準(zhǔn)切圖，希望本篇經(jīng)驗(yàn)對(duì)大家的學(xué)習(xí)和工作有所幫助！

切圖工具

工具欄中的“剪切工具”，其實(shí)剪切工具里邊一共為我們提供了四個(gè)工具。分別為“裁剪工具”、“透視裁剪工具”、“切片工具”、“切片選擇工具”，如下圖所示：

 圖中的“切片工具”、“切片選擇工具”是我們切圖需要用到的兩個(gè)工具。“切片工具”和“選擇工具”有點(diǎn)相似，都是選擇一個(gè)區(qū)域，不同的是切片工具選擇了區(qū)域后會(huì)標(biāo)記為一個(gè)切圖。例如下圖中我使用了切片工具切了一個(gè)小片，左上角的03表示切片的名字，如下圖所示：

如果我們使用切片工具切了十幾張圖，現(xiàn)在覺(jué)得某些需要調(diào)整或者刪除，這個(gè)時(shí)候我們就可以使用“切片選擇工具”，顧名思義可以用來(lái)選擇我們之前切出的圖。然后右鍵選擇的圖彈出菜單，菜單有包括“刪除”操作，如下圖所示：

傳統(tǒng)切圖

 不管是傳統(tǒng)切圖或者精準(zhǔn)切圖的方法介紹，我都使用下面的圖片作為例子。圖片設(shè)計(jì)比較簡(jiǎn)單，包含的內(nèi)容比較少，便于介紹，如下圖所示：

手動(dòng)切圖

 手動(dòng)切圖需要切圖人員完全手動(dòng)的使用“切片工具”一個(gè)一個(gè)的去切割圖片。首選，選擇“切片工具”，然后在需要切圖的圖標(biāo)上使用“切片工具”選擇一個(gè)包含了圖標(biāo)區(qū)域。例如下圖的ADDRESS文字上方的圖標(biāo)就使用了“切片工具”選中。繼續(xù)切其他圖標(biāo)，從圖中也可看出每個(gè)切圖左上角都有一個(gè)數(shù)字，這個(gè)數(shù)字就是切圖的編號(hào)，表示當(dāng)且切圖時(shí)第幾個(gè)切圖，如下圖所示：

上面的切圖也暴露除了幾個(gè)疑問(wèn)，我先把上圖的底部放大一點(diǎn)，能看清楚些。圖片的右下角有一個(gè)區(qū)域，區(qū)域左上角有一個(gè)數(shù)字為30的編號(hào)，這個(gè)區(qū)域也是一個(gè)切圖，30是我們看到的最大數(shù)字，這說(shuō)明了其實(shí)我們一共切了30個(gè)圖。明明我們只切了8個(gè)圖片，為什么一下子又變成了30個(gè)切圖，如下圖所示：

  這是因?yàn)槲覀冊(cè)谇袌D的時(shí)候，PS自動(dòng)的添加了一些切圖。我們就拿07號(hào)切圖來(lái)說(shuō)，當(dāng)我們手動(dòng)切割了電話圖標(biāo)，在07好切圖的右邊（08）和下邊（10）都會(huì)自動(dòng)生成一個(gè)切圖。隨著切圖越來(lái)越多，自動(dòng)生成的切圖也會(huì)越來(lái)越多，最終一共包含了30個(gè)切圖。而且這些自動(dòng)生成的切圖我們是不能刪除的，如下圖所示：

 有時(shí)候看著這么多切圖覺(jué)得挺煩，那可不可以只顯示我們自己切的圖？答案是肯定的。我們先把工具切換到“切片選擇工具”，上面的菜單欄多了一個(gè)“隱藏自動(dòng)切圖”按鈕，如下圖所示：

 點(diǎn)擊“隱藏自動(dòng)切片”按鈕，然后我們?cè)倏纯辞袌D一個(gè)就只有8個(gè)切圖了，這8個(gè)切圖真是我們自己切的。但細(xì)心一點(diǎn)的同學(xué)看到最后一個(gè)切圖的編號(hào)是29，“隱藏自動(dòng)切片”只是隱藏了自動(dòng)生成的切片，而不是刪除切片，如下圖所示：

  切圖完成之后就可以執(zhí)行導(dǎo)出了。打開(kāi)“文件”->“導(dǎo)出”->“存儲(chǔ)為Web所用格式”（老版本打開(kāi)方式為“文件”->“存儲(chǔ)為Web所用格式”），彈出“存儲(chǔ)為Web所用格式”窗口。需要設(shè)置幾個(gè)選項(xiàng)，右上角下拉列表選擇“PNG-24”，勾選“透明度”和“交錯(cuò)”選項(xiàng)。最后點(diǎn)擊“存儲(chǔ)…”，選擇我們存儲(chǔ)的路徑。到目前為止，手動(dòng)切圖工作基本上就完成了，如下圖所示：

參考線切圖

 在介紹參考線切圖之前，我們需要搞清楚什么是參考線。先討論一個(gè)問(wèn)題，假如我們需要使用PS設(shè)置一個(gè)網(wǎng)頁(yè)，在網(wǎng)頁(yè)內(nèi)容居中顯示，左右兩邊都流出200像素的寬度。如果兩邊都有一條參考線做參考，這樣是不是就很方便了。

參考線的添加有兩種方式。

 第一種：打開(kāi)菜單“視圖”->“新建參考線”，彈出“新建參考線”。參考包括“取向”（水平或垂直）、“位置”。例如畫(huà)布寬度為1200，那么在垂直方向需要在位置分別為200和1000像素添加兩條垂直方向的參考線，如下圖所示：

有了參考線，布局就比較簡(jiǎn)單了。在使用選擇工具選擇區(qū)域時(shí)，可以參考添加的參考線。下圖的布局就是依賴(lài)參考線完成的，如下圖所示：

第二種：如果參考線都是按照第一種方式添加，那就顯得效率太低了。特別是馬上要介紹的參考線切圖，如果按照第一種方式添加幾十條參考線，那要等到猴年馬月。第二種添加參考線的方式非常簡(jiǎn)單，直接在垂直標(biāo)尺或者水平標(biāo)尺處按住鼠標(biāo)左鍵，一直往外拖動(dòng)就可拖出一條新增的參考線，如下圖所示：

參考線切圖就是使用的第二種添加參考線的方式切圖。例如現(xiàn)在我們需要把設(shè)計(jì)圖上的ADDRESS、MAIL、PHONE三個(gè)圖標(biāo)使用參考線切圖，從水平標(biāo)尺和垂直標(biāo)尺拖動(dòng)添加參考線，添加成下圖的樣子，如下圖所示：

 然后在工具欄中選中“切片工具”，此刻工具菜單欄中多了一個(gè)“基于參考線的切片”按鈕。點(diǎn)擊這個(gè)按鈕。設(shè)計(jì)圖中自動(dòng)生成了幾個(gè)切片，切片工具基于參考線自動(dòng)生成切圖。這樣生成切圖的方式比傳統(tǒng)的一個(gè)一個(gè)手動(dòng)切圖效率要高一些，如下圖所示：

并且參考線切圖有一個(gè)好處是生成的切圖我們都可以手動(dòng)刪除，如果我們覺(jué)得有些附加的切圖不需要，那么我們可以使用“選擇切片工具”右鍵單擊切圖，選擇刪除操作。下圖是使用參考線切圖得到的最終切圖，只有三個(gè)切圖，如下圖所示：

切圖完成了，接下來(lái)的操作和手動(dòng)切圖一樣，使用“存儲(chǔ)為Web所用格式”導(dǎo)出圖標(biāo)即可，這里不再作介紹了。

精準(zhǔn)切圖

  精準(zhǔn)切圖是CC版本引入的新功能，何為精準(zhǔn)切圖？精準(zhǔn)切圖解放了切圖人員的雙手，PS通過(guò)腳本自動(dòng)對(duì)每個(gè)圖層執(zhí)行切圖。切圖人員只需選擇幾個(gè)菜單執(zhí)行切圖命令，剩下的工作就是等待PS執(zhí)行切圖。另外一方面，精準(zhǔn)切圖是計(jì)算機(jī)基于”圖層對(duì)象“切圖，所有切出來(lái)的圖形精準(zhǔn)度肯定也比人工切圖高。

打開(kāi)菜單“文件”->”導(dǎo)出"->“將圖層到處到文件”,彈出導(dǎo)出窗口，如下圖所示：

   上面窗口需要填寫(xiě)幾個(gè)參數(shù)，“目標(biāo)”即導(dǎo)出到哪個(gè)目錄下，“文件名前綴”為所有導(dǎo)出圖片文件名稱(chēng)的前綴，“僅限可見(jiàn)圖層”只導(dǎo)出可見(jiàn)圖層，“文件類(lèi)型”為導(dǎo)出文件的類(lèi)型（例如png、jpg等）。最后點(diǎn)擊“運(yùn)行”按鈕開(kāi)始執(zhí)行自動(dòng)切圖。下圖是切圖過(guò)程PS“圖層”自動(dòng)切圖的一個(gè)截圖?？梢钥闯鯬S在自動(dòng)選擇每個(gè)圖層然后執(zhí)行導(dǎo)出，如下圖所示：

     由于自動(dòng)切圖時(shí)PS會(huì)把每個(gè)圖層都導(dǎo)出，所有花的時(shí)間可能比較長(zhǎng)，需要耐心等待。當(dāng)自動(dòng)切圖執(zhí)行完成后，我們可以在目標(biāo)目錄下看到導(dǎo)出的所有圖片。

擴(kuò)展點(diǎn)-自動(dòng)切圖

CC版本另一個(gè)強(qiáng)大的功能叫做“自動(dòng)切圖”，首先解釋下什么叫自動(dòng)切圖。精準(zhǔn)切圖我們能夠看到PS切圖的過(guò)程，自動(dòng)切圖我們根本就看不到切圖的過(guò)程，當(dāng)我們把圖層設(shè)計(jì)好了，我們的切圖也就完成了。

在使用自動(dòng)切圖功能之前，我們需要做兩個(gè)操作：

操作一，選擇菜單“編輯”->”首選項(xiàng)"->“增效工具”，彈出下面的窗口。勾選“啟用生成器”，如下圖所示：

 操作二，勾選“文件”->“生成”->“圖像資源”菜單，如下圖所示：

 現(xiàn)在準(zhǔn)備工作已經(jīng)完成了，接下來(lái)就看看怎樣自動(dòng)切圖。舉個(gè)例子，現(xiàn)在我們需要導(dǎo)出下圖的圖層，并且不包含背景色，如下圖所示：

 其實(shí)上面圖片的所有資源都放在一個(gè)叫做“Address”的圖層分組下?，F(xiàn)在把分組名稱(chēng)重新改為“Address.png”。然后我們到psd文件目錄下，psd文件名字為“Artica - One Page PSD Template“，可以看到同目錄下生成了另外一個(gè)叫做”Artica - One Page PSD Template-assets“的文件夾，如下圖所示：

  然后打開(kāi)”Artica - One Page PSD Template-assets“文件夾，看到有一個(gè)叫做Address.png的文件，正好是我們圖層分組的名字，并且圖片背景是透明的。這樣的功能是不是很強(qiáng)大，如下圖所示：

 自動(dòng)切圖也是生成svg的利器。ps不僅可以把圖層生成為png文件，還支持生成svg文件?，F(xiàn)在我想把下面的圖標(biāo)保存為svg格式，我們僅需要把圖層文件名字改為“Icon.svg”。打開(kāi)”Artica - One Page PSD Template-assets“文件夾，可看到生成了Icon.svg文件，如下圖所示：

  用文本編輯器打開(kāi)Icon.svg文件看看生成了什么內(nèi)容。文件中包含了width和height以及css樣式，正是一個(gè)比較常見(jiàn)的svg文件。我們通過(guò)修改css樣式就可以改變圖片的顏色了。例如現(xiàn)在把”fill:#fff”改為“fill:#FF3300”，然后保存文件。用瀏覽器打開(kāi)，可看到圖片顏色變成了紅色，如下圖所示：

以上就是PS切圖方法匯總，教程比較實(shí)用，雖然介紹的很多，但介紹很詳細(xì)，推薦過(guò)來(lái)，希望能對(duì)大家有所幫助！

最新評(píng)論