相對于程序來說，切圖門檻很低，只要有一些ps基礎(chǔ)，摸索個(gè)五分鐘基本也就了解各大概。但是就跟其他的所有技能一樣，切圖也是有很多技巧性和經(jīng)驗(yàn)在里面的，這些東西可以讓你的切圖工作更有效率，更有目的性。本文希望把我?guī)啄曜銮袌D的心得整理歸納一下，希望對各位前端，程序員，設(shè)計(jì)師有所幫助。

 

說明

筆者用photoshop cs5做示例，不同版本功能會(huì)有稍許差異。

 

第一部分：一些快捷鍵

相對于設(shè)計(jì)和繪畫，切圖用到的ps并不多，以下我總結(jié)一些在切圖中比較常用的快捷鍵，這些快捷鍵能答復(fù)的提高你的工作效率，并且看起來很酷。

 

自由的控制視圖系列

自由的瀏覽圖片：按住空格后，鼠標(biāo)拖動(dòng)

自由的縮放圖片：按住alt+滾輪

切換到實(shí)際像素（100%）：Ctrl + 1

工作區(qū)類型切換：Tab

 

控制內(nèi)容系列

通過畫面上點(diǎn)選一個(gè)圖層：Alt + 鼠標(biāo)右鍵

在畫面上拖動(dòng)一個(gè)圖層：V 切換到移動(dòng)模式 鼠標(biāo)拖動(dòng)

復(fù)制拖動(dòng)一個(gè)圖層：移動(dòng)模式下 Alt+拖動(dòng)

刪除一個(gè)圖層：選中要?jiǎng)h除的圖層 按下 Delete

合并多個(gè)圖層：選中要合并的圖層 按下 Ctrl+E

選區(qū)內(nèi)填充顏色：Alt+Delete (前景色) Ctrl+Delete(背景色)

縮放當(dāng)前選擇圖層：Ctrl+T(自由變換模式)

 

實(shí)用工具系列

畫一個(gè)選區(qū)：點(diǎn)擊M進(jìn)入選區(qū)模式 ， 鼠標(biāo)拖畫

放棄選區(qū)：Ctrl+D

吸管工具：點(diǎn)擊I進(jìn)入吸管模式，點(diǎn)選畫面顏色

文字工具：點(diǎn)擊T進(jìn)入文字模式，點(diǎn)選畫面的文字或者創(chuàng)建新文本

切片工具：點(diǎn)擊C進(jìn)入切片模式（舊版本會(huì)有不同）

 

第二部分：一些實(shí)用技巧注意PS所處的狀態(tài)

photoshop開啟一個(gè)文件，軟件本身就處于不同的狀態(tài)之中，總結(jié)下來有這樣幾種

工具狀態(tài) -- 代表當(dāng)前是出于移動(dòng)模式，選區(qū)模式，切片模式或者是吸管模式等等，工具狀態(tài)代表你當(dāng)前對文檔操作的類型。

      有一些特殊的狀態(tài)下，要求你必須做出選擇，這時(shí)候狀態(tài)的切換會(huì)暫停。比如，文字輸入模式和自由縮放模式下，你必須先對當(dāng)前所做修改做出確認(rèn)，才可以進(jìn)行下面的操作。這種情況的特點(diǎn)是狀態(tài)欄會(huì)出現(xiàn)如下選擇，如需快速放棄修改可點(diǎn)擊ESC

 

圖層狀態(tài) -- 代表你當(dāng)前操作的對象，有一些對象只接受特殊類型的操作。

比如一些填充和繪制的功能無法在文字圖層進(jìn)行，圖層組不能進(jìn)行操作。總之，你在進(jìn)行涂層修改操作的時(shí)候，一定要注意當(dāng)前操作的對象，否則容易造成誤操作和操作不能

色彩索引模式 -- 這是一個(gè)常見錯(cuò)誤，通過導(dǎo)出web格式圖片出來的png會(huì)自動(dòng)換成索引模式，如果要繼續(xù)修改需要把索引模式轉(zhuǎn)成RGB模式

 

操作圖層

如果不是設(shè)計(jì)者自己來切圖，那么切圖者需要從圖層里來體會(huì)設(shè)計(jì)者的意圖。如何分組，層次間的關(guān)系都體會(huì)了設(shè)計(jì)者對頁面結(jié)構(gòu)個(gè)人的理解。所以對一個(gè)設(shè)計(jì)稿來說，第一步是粗看圖層，理解設(shè)計(jì)意圖，其次是根據(jù)自己的理解對圖層進(jìn)行新的操作和轉(zhuǎn)換。以下是關(guān)于圖層操作的一些經(jīng)驗(yàn)：

關(guān)閉圖層可見性 --關(guān)閉圖層可見性非常常用，因?yàn)橛行╉撁嬖厥墙豢椩谝黄鸬模阃ǔＰ枰P(guān)閉其中某項(xiàng)先切一部分，再切一部分

合并圖層 -- 設(shè)計(jì)師載入第三方的元素這類的作法，會(huì)讓頁面某些小部件的圖層結(jié)構(gòu)異常復(fù)雜，這時(shí)候?qū)⒄麄€(gè)組合并Ctrl+E 不失為一個(gè)好辦法

 

合并圖層的時(shí)候需要注意的是圖層效果會(huì)跟隨合并，這一方面會(huì)帶來不好修改的問題，所以合并完了通常Ctrl+Alt+Z還原,另一方面在某些時(shí)候還是很有用的，但個(gè)圖層的效果跟空圖層合并也會(huì)起到圖層?xùn)鸥窕男Чㄎ淖謭D層也可以跟空圖層合并）。

復(fù)制圖層 -- 有些時(shí)候一些sprite效果可以直接通過復(fù)制圖層在原稿上列出來，再通過切片工具出圖

圖層蓋章 -- 在一些圖層特別復(fù)雜的頁面，有時(shí)需要用到圖層蓋章工具，選中最頂層的圖層，點(diǎn)擊Ctrl+Alt+Shift+E 可以把以下的所有圖層蓋到一個(gè)新的圖層上。這個(gè)操作的好處是可以在不影響圖層本身的情況下，合并圖層。

 

生成圖片

 

1)圖片格式 -- 圖片格式的原則簡單來說是架構(gòu)復(fù)雜，色彩眾多的圖片jpg優(yōu)先，色彩簡單，需求透明的png優(yōu)先。png24在IE6下不兼容。

 

2)切片工具 -- 切片工具是ps為切圖提供的強(qiáng)大的批量的工具，所以一定要盡可能的使用它。使用切片之前先采用上述的方法對圖層進(jìn)行處理，然后按需劃取需要的切片區(qū)域，使用切片工具的時(shí)候有如下幾個(gè)小技巧：

 

切片選項(xiàng) -- 劃取完分區(qū)以后，要對切片進(jìn)行一些設(shè)定是很重要的，切片工具下Alt+點(diǎn)擊切片，會(huì)彈出如下窗口

 

 

 

      首先，可以檢查切片的尺寸和位置，尤其是尺寸，比如你要切的按鈕定寬高，這里的檢查和設(shè)置就至關(guān)重要。其次，在這里直接命名，可以省去出圖以后重命名的時(shí)間。

 

切片儲(chǔ)存 -- 切片在儲(chǔ)存的時(shí)候，可以點(diǎn)選每個(gè)切片對其設(shè)定不同的圖片格式，保存的時(shí)候可以選擇保存選擇的切片而不是全部。

 

3)全新圖片 -- 很多時(shí)候，切片難以直接使用，圖片需要進(jìn)行二次處理。這時(shí)候我認(rèn)為有以下幾點(diǎn)需要注意：

 

千萬不要對jpg進(jìn)行二次處理：jpg就算質(zhì)量100%也是有損格式，二次處理的jpg會(huì)有肉眼可見的質(zhì)量損失，所以要采用png的各種作為中轉(zhuǎn)。

注意圖片尺寸：有些版本的ps在拖拽進(jìn)文檔的時(shí)候會(huì)默認(rèn)尺寸適應(yīng)，這會(huì)導(dǎo)致圖片尺寸在你不知情的情況下發(fā)生改變。解決的辦法可以是優(yōu)先創(chuàng)建尺寸正確的圖片，或者以源文檔圖層的形式拖拽進(jìn)新文檔。

縮放 ： 任何格式的圖片縮放都會(huì)產(chǎn)生質(zhì)量損失，盡可能采用矢量圖縮放，或者在源文件的路徑里縮放再拖拽。

 

4)新圖片處理 -- 新圖片的處理有以下幾個(gè)常用的技巧：

 

圖像裁切和顯示全部 ： 圖片小于畫布或者圖片大于畫布的情況下使用裁切和顯示全部命令，可以保證圖片的精確性。命令位于 圖像(I) -> 裁切/顯示全部

活動(dòng)選區(qū)，復(fù)制，粘貼 ：這三個(gè)命令配合使用可以實(shí)現(xiàn)很多轉(zhuǎn)換。比如一個(gè)漸變按鈕的縮短擴(kuò)大。

 

 

結(jié)束

本來是想寫一個(gè)切圖的十分鐘入門教程，發(fā)現(xiàn)寫著寫著有點(diǎn)跑題，越來越細(xì)致。本文是我自己切圖的心得，而切圖技巧也因人而異，也需要各位自己去發(fā)現(xiàn)總結(jié)自己的技巧。另外一方面，我想切圖的重點(diǎn)也許并不在其本身，而在切圖者知道要怎么切，熟悉web頁面構(gòu)建的原理，同時(shí)根據(jù)自己的需要切出不同的效果。