前端之Photoshop切片

切片：將圖片切成幾部分，一片一片往上傳，這樣上傳的速度比較快。每個切片作為一個獨立的文件傳輸，文件中包含切片自己的設置、顏色調板、鏈接、翻轉效果及動畫效果。

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

切片是網頁制作過程中非常重要的一個步驟，往往切片的正確與否會影響著網頁的后期制作。一般是用Ps或者Fw對網頁的效果圖或者大幅度的圖片進行切割。重要的正確的切片會給網站帶來一非常正面的影響。比如：減少網頁加載時間、制作動態效果、優化圖像、鏈接等。

一、網頁切片的制作

1、 減少網頁加載時間

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

2、 優化圖像

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

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

切片的具體準備：分割切片、切片的類型（用戶切片、非用戶切片）

切片的基本要點:

1、根據顏色范圍來切；

2、切片大�。喊丫W頁的切片切的越小越好；

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

4、導出類型：顏色單一過渡少，應該導出GIF，顏色過渡比較多，顏色豐富的應該導出JPG，有動畫的部分應該導出為GIF動畫；

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

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

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

刪除切片

編輯切片選項：切片類型、名稱：自動生成的，一般采用英文命名，網頁代碼中運用英文比較友好、URL：是鏈接地址、目標、ALT標記：通過可以搜索優化圖片、 尺寸W H X Y、切片背景：一般默認無

劃分切片：水平劃分、垂直劃分 組合劃分

保存切片（存儲為web所用格式）ctrl+shift+alt+s：一般常用格式為jif、png—24支持背景透明（透明度勾選支持背景透明）、jpeg（圖片品質一般80以上）。 然后點擊保存，保存格式，格式有極限圖像，設置為默認設置，切片（所有切片：不管是用戶切片還是非用戶切片都會導出來、所有用戶切片：只會導出 切到的切片、選中切片：只會導出在選中的切片），會自動生成一個文件夾（images）

切片的格式：

1、三種切片格式的介紹：顏色范圍比較鮮艷的使用jpg格式、png支持網頁透明、jif支持顏色范圍比較單一。

2、三種切片格式的比較（適用范圍）：jpg網頁中都支持這種格式；png支持透明和背景無關；jif動畫可以發表情。

3、三種切片的適用范圍及優缺點：png：IE6不支持圖片透明；gif動畫導出的顏色單一，當顏色鮮艷時會出現鋸齒狀。

切片的保存及重命名：

1、切片的導出保存

2、切片的重命名，名稱最好是英文的，也不要以特殊的符號開頭

切片的技巧（漸變、陰影、不規則） ：

漸變：可以單獨拉一個切片

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

不規則：背景隱藏掉，保存png格式

網頁切片實戰練習

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

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

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

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

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