在wordpress主題開發的整個過程中，切圖雖然是一個很不顯眼的流程，但有時卻是不可或缺的，尤其是團隊協同開發的時候。wordpress主題的效果圖，往往是一張很大的圖片，我們在開發wordpress主題的靜态模闆時，不會也不可能把整張效果圖放到web頁面上給客戶看。我們需要把這張超大的效果圖中圖片分割下來，給wordpress主題靜态模闆的前端開發人員，由他們通過HTML代碼和CSS代碼來把它們展現在web網頁上，這個過程，就是切圖。那麼，我們怎樣給我們的wordpress主題模闆的效果圖進行切圖呢？

首先，切圖人員要熟悉切圖的軟件，我們這裡以photoshop為例，因為，我一般都是通過photoshop來進行切圖的。這裡，我們先弄一張效果圖，這裡我就不通過photoshop來設計了，我直接找到一個自己比較喜歡的網站——時美網，然後通過搜狗浏覽器來對它整個頁面進行截圖。在搜狗浏覽器打開《時美網》，然後點擊搜狗浏覽器的“文件”導航菜單中的“保存為圖片”子菜單（如下圖），這樣，我們就把時美網的首頁以圖片的形式保存到了我們的本地電腦中。

第一步：打開photoshop軟件。

我們打開photoshop軟件，我這裡安裝的是 photoshop CS5，版本比較老，但用起來還是挺順手，你們可以下載更新一點的版本，現在應該是photoshop 2021了吧，最近，也沒太關注這個。我覺得，不管什麼軟件，隻要夠用就行。

第二步：在photoshop中打開效果圖。

點擊photoshop頂部菜單中的“文件”，在下拉菜單中點擊“打開”，這時會彈出一個窗口，在這個窗口中找到我們剛剛在浏覽器中截取的wordpress主題效果圖，如下圖：

雙擊打開它 或者 鼠标左鍵點擊選擇它，再點擊“打開”按鈕，這時wordpress主題效果圖就在photoshop的編輯區域展示，如下圖：

第三步：放大圖片。

這時，在編輯區域，圖片是以全景的形式展示，所以看上非常小，不好切割。我們按住 ctrl 鍵後，再連續點擊 号鍵，就可以把圖片放大，如下圖：

第四步：選擇“切片”工具。

光标移到photoshop的左側的工具欄中的“裁剪工具”上，單擊鼠标的右鍵，這時，會顯示這個按鈕上的右鍵菜單，如下圖：

然後，我們在這個彈出來的右鍵菜單中，點擊選擇“切片工具”。

第五步：切割效果圖中的圖片。

選擇好切割圖片後，我們就可以對wordpress主題效果圖進行切割操作了。切片工具操作是很簡單的，我們隻需在那些需要切割的地方，按下鼠标左鍵，然後拖拽到适當的區域，就可以創建切片，如下圖：

在這個演示中，我切割了7次，也就是說，我隻切割了效果圖中的圖片，因為，在我編寫前端靜态模闆時，我隻需要這些圖片來作為素材，而文字部分我可能直接用文字來添加。我們每切割一次，就會在被的圖片上顯示一個藍色的标記，意思是我們切割了這部分。

第六步：保存切圖。

我們切割好效果圖後，我們還要保存它們。點擊photoshop頂部菜單中的“文件”，在下拉菜單中選擇點擊“存儲為web和設備所用的格式”子菜單，如下圖：

這時會彈出一個“存儲為web和設備所用的格式”的窗口，如下圖：

在這個窗口中，我們可以對存儲圖片的格式、大小等進行設置，然後點擊“存儲”按鈕，這時會彈出“将優化結果存儲為”窗口。在這個窗口中，我們可以選擇保存的格式，這裡我選擇的是“僅限圖像”，如下圖：

然後，在“切片”選項中，我選擇的是“所有用戶切片”，如下圖：

“所有用戶切片”就是我們用切片工具切割過的圖片，如我們在第五步中切割的那7個圖片。當然，我們也可以選擇“所有切片”，我們在切割我們需要的圖片時，photoshop會把不需要部分自動切割成其它的部分，所有切片包括用戶切片和其它切片。

這些設置成後，我們就可以點擊“保存”按鈕，就開始保存到本地電腦上。保存後的圖片會放到一個images文件夾中，而每個圖片都會以效果圖名作為前綴來命名的，如下圖：

好了，這就是我們對wordpress主題的效果圖進行切割的整個過程。還是那句話，在wordpress主題的整個開發過程中，切圖并不是必須的，一般情況下，隻有團隊協同開發中，可能會用到切圖。在我個人的wordpress主題模闆開發過程中，我很少用到切圖這個流程。當然，這要視每個人的習慣而定了。嗯，有關切圖就介紹到這裡。如有疑問，歡迎點評或私信。