前端之Photoshop切片

        什麼是切片 ？    （Photoshop中的切片）

切片：圖片切成幾個部分，一片一片往上傳，這樣上傳的速度比較快。每個切片作為一個獨立的檔案傳輸，檔案中包含切片自己的設定、色彩調板、連結、翻轉效果及動畫效果。

切片工具：主要是用來將大圖片分解為幾張小圖片，這個功能用在網頁中較多，因為現在的網頁中圖文並茂，也正因如此所須的時間就比較長，為了不讓瀏覽網頁的人等待時間太長，所以他們將圖片切成幾個小的來組成。

 

      切片是網頁製作過程中非常重要的步驟，通常切片的正確與否會影響網頁的後製。一般是用Ps或Fw來切割網頁的效果圖或大幅度的圖片。重要的正確的切片會為網站帶來一非常正面的影響。例如：減少網頁載入時間、製作動態效果、最佳化圖片、連結等。

一、網頁切片的製作

1、  減少網頁載入時間

     有時候網頁上可能需要大量的banner圖片，那麼瀏覽器下載這個圖片就要花費很長的時間，這是很不利於使用者體驗的。而網頁切片的出現就很好的解決了這個問題。切片的使用使整個大的圖片分成不同的很多的小圖片，瀏覽器也會對這些小圖片進行下載，這樣瀏覽器下載圖片的時間就大大的縮短了，節約了很多時間。

2、  最佳化圖像

    一般說一個完整的圖像只能是一種格式，jpg、gif、png、psd、dpf或其他，一種格式那麼我們就只能採取一種優化方式。而網頁切片可以把這張分割成很多小圖片，並且可以保存成其他格式，可以分別對其優化。這樣就能保證圖片品質高等的情況下還能減少圖片的內存，也能提高網頁的載入速度。

   切片前的準備：另存網頁PSD文件，整合ps的圖片

   切片的特定準備：分割切片、切片的類型（使用者切片、非使用者切片）

   切片的基本要點:

                        1、依照色彩範圍切割；

          #                        3、切片區域為完整性:保證完整的部分在一個切片內，例如某個區域的標題文字，以後修改時方便；

                        4、導出型：

相同顏色時，應該導出為單一過渡少，應該導出GIF，色彩轉換比較多，色彩豐富的應該匯出JPG，有動畫的部分應該匯出為GIF動畫；

                         5、保留檔案：即使頁面中了，也保留切片圖層的來源檔案也要保留切片圖層的來源檔案，說不上哪天要改某個部分，例如文字什麼的，直接修改單獨到處所用的切片就可以了。

    切片的圖層顯示與隱藏：背景圖片的切片；不規則圖片的切片。

    切片的編輯：大小、調整、刪除、清除切片（可一個個選取右鍵刪除，也可檢視所有都刪除）、儲存切片（儲存為web所用格式）

#刪除切片

                    編輯切片選項：切片類型、名稱：自動產生的，一般採用英文命名，網頁程式碼中運用英文比較友善、URL：是連結地址、目標、ALT標記：透過可搜尋最佳圖片,                                         尺寸W H X Y、食用 背景：一般預設無##       組合分割

                    保存切片（儲存為web所用格式）ctrl+shift+alt+s：一般常用格式為jif、png—24支援背景透明（透明度勾選支援背景透明）、jpeg（圖片品質為jif、png—24支援背景透明（透明度勾選支援背景透明一般)、jpeg（圖片品質為80以上）。 然後點選儲存，儲存格式，格式有極限影像，設定為預設設定，切片（所有切片：不管是使用者切片或非使用者切片都會匯出來、所有使用者切片：只會匯出                      會匯出在選取的切片），會自動產生資料夾（images）                                    

#                                    1、三種切片格式的引言：色彩範圍較為鮮豔的使用jpg格式、png支援網頁透明、jif支援顏色範圍比較單一。

                                    2、三種切片格式的比較（適用範圍）：jpg網頁上皆支援此格式；png支援可建立透明和背景無關；

                                    3、三種切片的適用範圍及優齒顏色符號：png：IE6不支持於透明；動畫的顏色就會出現單一顏色會出現的顏色鮮豔標籤時會出現鮮豔標籤時。

                    切片的保存與重新命名：

                                            2、切片的重複命名，且名稱為英文的，也不要以特別的前號

                   切片的技巧（漸進式、遮蔭、不規則） ：

         ##                                    陰影中：網頁中所如何實現，並可在網頁上實現陰影但是ie6、ie8不支持，可以單獨為陰影做一個切片，讓背景關掉保存為png-24格式

                                     實戰練習

     有的顏色可以自己表示、掛件製作（整個切）、視訊播放按鈕

     步驟：整理圖層、另存一下（為圖片做備份）、盡可能的做精確點、畫布多的話可以新建一個然後複製到新的畫布

切片如何快速插入：超鏈接或添加為背景鏈接

總結  切片的知識點及要點：切片的概念、作用、格式選擇

更多前端之Photoshop切片相關文章請關注PHP中文網！