【PConline教程】通過Photoshop圖片分割可以將網(wǎng)頁中的大圖一次性加載，圖片分割又是怎么做到的呢？微博中的九宮格是不是很好玩，那一張圖又是用了什么工具把它分成九等份的呢？它就是我們這個(gè)PS教程中要介紹的切片工具。下面就讓我們一起來學(xué)習(xí)吧！

如何正確使用Photoshop切片工具

　　在網(wǎng)頁中處理圖片時(shí)，有時(shí)會(huì)想要加載一個(gè)大的圖像，比如頁面上的主圖，或者是背景。如果文件很大，它加載的時(shí)候需要的時(shí)間就會(huì)長，尤其是用戶網(wǎng)速比較慢的時(shí)候。你可以通過壓縮來減小文件大小，但是這會(huì)使圖像質(zhì)量受到影響，壓縮文件也要適可而止。因此你需要注意以下幾個(gè)問題：一是實(shí)際文件的大��；二是分辨率；三是壓縮。

　　解決這個(gè)問題的方法就是把圖片分割，它將允許你在加載圖片的時(shí)候可以一片一片地加載，直到整個(gè)圖像出現(xiàn)在你的屏幕上。

　　1 它的使用原理

　　首先概述下它的工作原理,當(dāng)你有一個(gè)需要花很長時(shí)間來加載的大圖像時(shí)，你可以使用Photoshop中的切片工具把圖像切成幾個(gè)小圖。這些圖像將被作為一個(gè)單獨(dú)的文件保存，還可以進(jìn)行優(yōu)化通過保存為中Web所用格式。

　　此外,Photoshop生成HTML和CSS以便用來顯示切片圖像。在網(wǎng)頁中使用時(shí)，圖像通過使用前面提到的HTML或CSS在瀏覽器中重新組合以便達(dá)到一個(gè)平滑流暢的效果。下面是一個(gè)關(guān)于圖像切片的例子。

圖01

　　2  切片的基礎(chǔ)知識(shí)

　　為了簡單起見,我們只在一個(gè)圖上使用切片工具。在這個(gè)例子中,我使用的圖片大小為960 x722px。在我們開始之前你需要了解一些知識(shí):

　　a.在創(chuàng)建切片時(shí),你可以使用切片工具或構(gòu)建使用層。

　　b.切片可以選擇使用選擇工具來選中。

　　c.你可以移動(dòng)它，設(shè)置它的大小，還可以讓切片與其他切片對(duì)齊。而且你還可以給切片指定一個(gè)名稱,類型和URL。

　　d.每個(gè)切片都可以通過保存時(shí)的網(wǎng)頁對(duì)話框進(jìn)行優(yōu)化設(shè)置。

　　按下鍵盤上的C鍵，選中裁剪工具，右鍵選擇切片工具。

圖02

　　當(dāng)您創(chuàng)建切片時(shí)，你可以進(jìn)行如下三個(gè)樣式設(shè)置:正常,固定長寬比和固定大小。

　　a.正常:隨意切片，切片的大小和位置取決于你在圖像中所畫的框開始和結(jié)束的位置

　　b.固定長寬比:給高度和寬度設(shè)置數(shù)字后，你得到的切片框就會(huì)是這個(gè)長寬比

　　c.固定大小:固定設(shè)置長和寬的大小

　　當(dāng)分割圖像時(shí)你會(huì)碰到一些選項(xiàng)。如果精確度不那么重要時(shí),你可以手工切片圖像,必要的時(shí)候,可以使用切片選擇工具對(duì)已完成的切片圖像進(jìn)行調(diào)整。如果精確度很重要，可以使用參考線在圖像上標(biāo)出重要的位置。

圖03

　　在頂部的切片菜單欄,點(diǎn)擊C或切片工具激活它片上面菜單欄圖片,畫好參考線后選擇基于參考線的切片的按鈕。

圖04

　　它就會(huì)自動(dòng)為您繪制切片。你還可以使用切片選擇工具重新定位切片。

圖05

2正確使用Photoshop切片工具（二）

　　3  編輯切片信息

　　創(chuàng)建切片之后,您可以編輯切片信息通過以下兩種方式中的任一種。一種要做的就是點(diǎn)擊切片選擇工具,單擊你想編輯的切片，然后點(diǎn)擊菜單欄中>為當(dāng)前切片設(shè)置選項(xiàng)的按鈕。

圖06

　　另一個(gè)選擇是右鍵單擊切片，在彈出的菜單中,選擇編輯切片選項(xiàng)。

圖07

　　兩種選擇都將彈出如下的切片選項(xiàng)對(duì)話框。

圖08

　　正如您所看到的，對(duì)話框里有許多設(shè)置。

　　a.切片名稱：打開網(wǎng)頁之后顯示的名稱

　　b.URL：點(diǎn)擊這個(gè)被編輯的圖片區(qū)域后，會(huì)跳到你輸入的目標(biāo)網(wǎng)址內(nèi)

　　c.目標(biāo)：指定載入的URL幀原窗口打開，表示是在還是在新窗口打開鏈接

　　d.消息文本：鼠標(biāo)移到這個(gè)塊時(shí)瀏覽器左下角顯示的內(nèi)容

　　e.Alt標(biāo)記：圖片的屬性標(biāo)記，鼠標(biāo)移動(dòng)到這塊時(shí)鼠標(biāo)旁的文本信息

　　f.切片的尺寸：設(shè)置塊的x、y軸坐標(biāo)，W、H的精確大小

　　4  保存網(wǎng)頁

　　一旦你滿意你的布局后，選擇文件>存儲(chǔ)為Web所用格式，保存圖片。

圖09

　　在這里,您可以為切片設(shè)置文件類型或者使用網(wǎng)頁對(duì)話框中列出默認(rèn)設(shè)置。完成設(shè)置后,單擊存儲(chǔ)按鈕。

圖10

　　這時(shí)會(huì)彈出一個(gè)存儲(chǔ)優(yōu)化結(jié)果的對(duì)話框，底部的對(duì)話框是幾個(gè)重要的設(shè)置。

　　a.格式:你有三個(gè)選擇，分別是HTML和圖像,僅限圖像和僅限HTML。

　　b.設(shè)置:您選擇自定，背景圖像，默認(rèn)設(shè)置，XHTML和其他。

　　c.切片:所有切片，所有用戶切片和選中切片。

　　對(duì)于本教程我使用的是HTML和圖像（一般都這么保存），默認(rèn)設(shè)置和所有切片。完成設(shè)置后,選擇您想要保存文件的文件夾，并單擊保存按鈕。這時(shí)會(huì)創(chuàng)建一個(gè)HTML文件和一個(gè)包含六個(gè)圖像文件，它們?cè)谕�一個(gè)大文件夾中。

　　這是一個(gè)在Adobe Dreamweaver中的分區(qū)屏幕的HTML文件。你可以看到，代碼很簡單也很好用。

圖11

　　5  結(jié)論

　　正如您可以看到的,當(dāng)你有一個(gè)大圖片時(shí)，圖像分割是非常有用的。通過將它分解成小圖,加載時(shí)小圖一個(gè)一個(gè)加載,讓用戶逐步看到更多。這對(duì)于網(wǎng)速慢的用戶很有幫助。

　　希望這個(gè)教程能讓 你更加了解PS切片工具，也希望你喜歡這個(gè)教程哦！

來源：pconline 原創(chuàng)