Photoshop切片工具的操作和講解

這節課我們來講下切片工具的使用方法和技巧。

切片工具在網頁設計，淘寶詳情頁設計這些都是最好一步輸出圖要做的。

打開photoshop軟體，找到和裁剪工具在一個組裡面的「切片工具」，除了有一個創建切片的工具，還有一個切片選擇工具，兩個可以配合著使用。

切片工具

我們來用切片工具，對我出版的新書《店鋪裝修+淘寶美工全攻略》介紹詳情頁來進行操作處理，設計好之後的圖，在photoshop軟體里是很長的尺寸，如下圖所示。

設計好的詳情頁圖

來看下圖像的尺寸，寬是800像素，高是12594像素，一個1.2萬像素高的詳情頁，肯定是太長，如果一張圖傳到網站上，動輒就10MB左右，這樣對載入速度，網頁打開速度，用戶體驗都是非常不好的。

圖像尺寸大小

通常，設計師在製作詳情頁的時候，會根據內容的多少，不斷設計，不斷的增加長度，到最後設計完，進行切圖處理，那麼這個長圖切圖就是下面這個樣子。

切圖處理后

把原來的，一張圖，切成12張圖，那麼算下來，每張圖的尺寸是1000像素的高度，這樣子就可以傳到網站上去，看著是一個詳情描述的內容，但是他是有12個分割后的圖組成的。

不管是打開網站速度，還是用戶瀏覽起來，都是非常好的。

在工具箱中，選擇切圖工具，在畫布中，選擇我們第一個模塊展示完的內容，比如我這個圖，就把圖書這個封面當做第一個要切的。

創建第一個切片

然後，用切片工具，把關於作者切圖成第二個。

創建第二個切片

然後，用同樣的辦法，把下面的信息，一個模塊一個模塊創建切片。

如果切片創建的不合適，可以選擇「切片選擇工具」把切片移動調整到合適的位置。

下面這張圖，是移動后的切圖效果。

切片移動

另外一個創建切片的方法，是對需要創建的模塊，統一建立參考線，參考線是可以只拖動出來的。

如下圖所示，創建完參考線之後，就在切片工具選項欄上，按鈕「基於參考線的切片」。

基於參考線創建切片

此時創建出來11個切片。

創建切片後效果

當我們創建好切片，接下來就是輸出圖了。

在文件菜單中，選擇「存儲為Web所用格式」（記住，一個圖上，創建N多切片，輸出N多切割后的圖，只能選擇「存儲為Web所用格式」，不能選擇，存儲，或者存儲為）。

存儲為Web所用格式

在彈出來的選擇面板，可以選擇存儲圖片的格式，GIF JPEG 或者PNG格式，還可以設置存儲的圖片品質信息。

選項設置

重點：值得注意的是，長圖超過8000像素的情況下，在圖像大小選項的位置，會自動進行等比例縮放處理。比如這個圖是12000像素，寬度是800像素，那麼photoshop軟體自己給他進行等比例縮放處理成520x8192像素了，縮放百分百65%，當遇到這樣的情況，通常情況下，設計師需要分兩次，對圖片進行切片輸出處理。

在選擇存儲之後，會出現將優化結果存儲為的選項面板，可以選擇圖像的存儲位置，在文件名里可以修改名稱，在格式里設置存儲圖像或HTML頁面。

存儲選項

關於存儲這個內容，我們在「科技類企業網站首頁設計」的這個課程里，最後一節講解的就是首頁切圖的操作。

感興趣的同學，可以看下那個視頻課程。

點擊存儲后，就會在桌面上創建一個「images」文件夾，這裡面就是我們切圖后輸出的所以圖片。

輸入后的圖片

切片工具我們就講到這裡。

希望每個同學都能掌握。