[轉貼自]http://www.softcov.com/zh-tw/design-and-optimization/imageready-slicing-and-optimization.html

ImageReady的切片和優化

ImageReady誕生時，是作為一個獨立的軟件發布的。那時它並不依附於Photoshop。直到 Photoshop更新到5.5版本的時候，Adobe公司才將升級到2.0版本的ImageReady和它捆綁在一起，搭配銷售。前些日 子，ImageReady更以三級跳的速度與Photoshop同時升級到了7.0，給了大家一個不小的驚喜。

ImageReady在很 大程度上擴展了Photoshop在網絡圖像方面的功能。在最近的這次升級後，它和Photoshop的配合更為默契。雖然圖像編輯的能力變得更強大，但 圖像的切片和優化仍然是它最突出的特徵。與Photoshop相較，ImageReady提供了更多用於高級Web處理的工具和調板。在這篇文章中，我們 就來對這兩個功能做一個較為詳細的探討。

在開始之前，我們先來看看將大圖片切成小圖，並將它們放入一個HTML表格中的原因，也是我們這 篇教程的初衷：下載時間和圖片質量。許多人喜歡在Photoshop中設計用於網頁的圖片，甚至整個網頁。在通常情況下，構成網頁的圖像有著不同的圖像格 式，也許一些圖片很適合用jpg格式來保存，另一些存為gif格式會得到更好的質量和更快的下載速度。把一張大圖片切成一些小部分，這樣，你就能對每一部 分進行單獨的優化處理，使其圖片質量和文件大小的比例更合理。

用jpg格式對那些單調圖像進行壓縮，你會看到處理後的圖像出現難看的斑駁 色塊，並且文件尺寸也會比你實際需要的大得多；同樣，如果你試圖以gif格式壓縮一張有光滑漸變或是色彩極為豐富的連續色調圖片，那麼圖像質量和文件大小 的問題也會給你帶來困擾。 gif格式只支持256色，更多的顏色只能通過抖動盡可能的模擬出相近的顏色。這樣就會使圖像失去重點，文件尺寸也會增大。好了，現在該是我們對切片選擇 jpg或是gif格式的時候了，什麼時候使用jpg，什麼時候用gif？正確的選擇才能得到合適的圖像切片。

　　一、創建原始圖像

讓 我們從在Photoshop中創建我們的原始圖片開始。我們並不打算花太多的時間去創造一幅精緻的圖像，因為本篇的目的是切片而非製圖。我們需要盡快開始 切圖的問題。新建一寬350像素、高250像素的新文檔，分辨率為72像素／英寸，RGB模式。我將整個背景區域填充為藍色，然後用直線工具繪製兩條寬為 30像素的黃色直條，像瑞士國旗一樣，橫豎交叉（圖01）。記得要在直線工具的選項中取消消除鋸齒這一項。需要特別注意的是，在這篇教程中，使用或取消消 除鋸齒這一選項都有說明。待會兒，我們開始進行切片和優化時，你將會更好的理解那些優化設置的應用。 （圖02）



圖01



圖02

下 面，你需要找到一張合適的圖片。這裡，我們提供了一張，如果你希望和我們的腳程同步的話，可以使用這張圖片（圖03，右擊“另存為…”可下載）。在 Photoshop中打開這張jpg圖片，使用磁性套索工具，將邊對比度設為10％，選擇圖中的吉他手。然後用套索工具修整選區，使之更貼切。用選擇菜單 下的羽化命令，將選區柔化，半徑為2像素。複製圖像，將圖像粘貼到我們新建文檔的瑞士國旗背景之上，Photoshop會自動新建圖層1。把它移動到文檔 的右下角，貼近文檔邊界。想要更精確的貼近文檔邊緣，可以在視圖菜單下選擇對齊到文檔邊屆。 （圖04）



圖03



圖04

一 般來說，Photoshop教程是不該這麼羅嗦的敘述像圖片元素該置於何處這樣的細節問題的，讀者在進行的過程中，應該根據自己的圖片、需要以及經驗等， 加以判斷。但在這篇關於ImageReady切圖的文章中，我們希望建立一幅有精確元素的圖像，它可以在下面切圖的過程中幫助我們了解到更多東西。所以， 請你在製圖的過程中也盡量做到精確。

用矩形選框工具選擇演奏者的左半部分，將選區羽化10像素，然後應用模糊濾鏡組中的動感模糊，角度為0，距離為13像素，然後取消選擇。不用模糊的太多，否則就看不出來他正在演奏吉他。 （圖05）



圖05

現 在，我們開始在文檔左邊、黃色的水平條上添加文字。選擇文字工具，在水平條的上面寫上文字。打開文字工具調板，將文字設為和背景上黃色水平條相同的顏色。 這裡，我們選擇了像素字體，對這種特別細小的字體來說，保持清晰銳利的方法是將文字消除鋸齒的方法設為“無”。現在來重複這一過程，不過這一次要將文字放 置在黃色水平條之中，顏色要和背景藍色相同。依然選擇不要消除文字鋸齒。隨後，調整文字的位置。 （圖06）



圖06

接 下來是圖像頂部的主要文字了。我選擇了一種裝飾字體“hollow”，本例中使用的是一種星星圖案裝飾的文字形式，但任何一種這類形式的字體都符合我們的 目的。隨意地寫上文本。這次我們選擇一種比背景色稍微深一點的藍色，將文字消除鋸齒的方式設為平滑。使文字大到足以填充文檔頂部的水平空間。然後在文字層 之下新建一層，將前景色設為前面所用到的黃色，用任意方法填充：可以用畫筆塗滿文字的空洞部分，或是用魔棒工具配合Shift鍵，選擇所有文字中間的空 洞，擴展1～2個像素，填充黃色，等等……


 

[下一頁]

 

在用 ImageReady切圖以前，我們再來仔細的觀察一下：將圖像放大，對比未消除鋸齒的文字和消除鋸齒為平滑的文字，可以看到，沒有消除鋸齒的文字邊緣清 晰銳利，能很明顯的看到黃色的文字和藍色背景的分界，不存在起光滑文字邊緣作用的額外顏色（圖07a）；而消除鋸齒為平滑方式的文字，我們只為它設定了三 種顏色：黃色的文字，藍色的背景和深藍色的文字外框，但你能看到的卻不止這三種顏色，在文字的邊緣部分，多出來的是Photoshop為了平滑鋸齒而補充 的介於兩種相鄰色之間的顏色（圖07b）。



圖07a



圖07b

這張簡單的圖像完成後，下一步我們就要準備開始創建切片了。

　　二、創建切片

下面的工作我們要在ImageReady中進行，所以，在Photoshop工具箱的底部選擇轉跳到ImageReady。這樣，你正在編輯的圖像就會在ImageReady中打開。 （圖08）



圖08

在 創建切片之前，我們先來了解一下，到底什麼是切片。切片就是圖像的一塊矩形區域，可用於在結果網頁中創建鏈接、翻轉和動畫。將圖像切片可以有選擇地優化圖 像，使圖片下載速度更快，畫面質量更高。這篇教程我們不涉及動畫部分，只針對圖像優化。雖然在Photoshop中也進行一些基本的切片操作，但無法組 和、對齊或分佈切片。 ImageReady具備專業的切片調板和菜單，其切片編輯功能要比Photoshop更強大，所以，我們習慣在完成圖像之後轉跳到ImageReady 中對圖像切片。

我們先來認識一下ImageReady的文檔窗口。在ImageReady中，可直接在文檔窗口中查看和處理優化圖像。像 Photoshop中的保存為Web所用格式的對話框一樣，它可以以原稿（未優化圖像）、優化（應用了當前優化設置的圖像）、雙聯（原稿與優化後的圖像， 或兩種優化圖像的比較）、四聯（原稿和三種優化格式，或四種不同圖像版本的比較）這四種形式來顯示當前圖像。一般來說，在加工圖像時，我們多采用原稿顯 示；在比較優化圖像時，雙聯和四聯被更多的使用。在你拿不定主意該用什麼設置來保存圖像時，四聯的形式可以讓你預覽不同設置時圖像的品質和大小，這樣就不 用反复的保存比較了。 （圖09）



圖09

現在該介紹我們今天這篇文章的主要工具——切片工具了。在工具 面板中，那個像小切刀一樣的圖標就是切片工具。點擊工具圖標下的小三角，與切片工具組合在一起的就是它的最佳搭檔——切片選擇工具。無論當前所選擇的是切 片工具還是切片選擇工具，只要按住Ctrl鍵，你就能在這兩者之間隨意切換。記住：我們把一幅圖片切成一定數量的小圖片，其目的在於根據每一片的不同特 徵，對其進行單獨優化。 （圖10）



圖10

現在，選擇切片工具，以原稿的方式顯示圖像，將切片工具的刀尖放置在圖像的左上角，向下和右拖動鼠標，直到形成的切片矩形框包括了整個文檔頂部的文字。要確保切片邊界精確和圖像邊界重合，不可留下縫隙，如圖11所示。



圖11

現 在，如你所見，圖像中出現了兩塊切片，分別名為01和02。01是我們剛才創建的，這種使用切片工具創建的切片稱之為“用戶切片”；圖像剩餘的部分被 ImageReady自動創建為“自動切片”，每次添加或編輯用戶切片或基於圖層的切片時都重新生成自動切片。這樣就能在HTML文件生成包含完整圖像的 文檔。現在使用切片選擇工具選擇用戶切片，然後再選擇自動切片，你會發現用戶切片的邊緣有用於改變切片大小的手柄，當鼠標出現在框線上時，就會變成小小的 雙向箭頭，就像我們常見變形框一樣，而自動切片則不存在這樣的手柄。而且，用戶切片以實線顯示，自動切片的邊緣則顯示為虛線。如果你對創建的用戶切片不十 分滿意，那麼你隨時可以用切片選擇工具選擇這個切片，抓取切片的邊手柄或角手柄並拖移以調整切片大小。在ImageReady中，如果選擇相鄰切片並調整 其大小，則這些切片共享的公共邊緣將一起調整大小。我建議你將所有的切片都定義為用戶切片，因為對用戶切片可以進行移動、複製、組合、劃分、調整大小、刪 除、排列、對齊和分佈，還可以應用不同的優化設置。而自動切片是鏈接在一起並共享相同優化設置的。而且將自動切片轉換為用戶切片還可防止自動切片在重新生 成時發生更改。將自動切片轉換為用戶切片，方法是選擇這個切片，在切片菜單或右鍵菜單中選擇“提升到用戶切片”命令。

提示：使用放大工具，你可以更準確的接近切片邊緣。或者你可以打開切片調板，用數字坐標的方法調整切片位置，這樣可以精確到像素。不過這個方法相當的麻煩，在大多數時候，還是使用放大工具方便快捷。

繼 續將圖像切片，將圖像中的單色區域全都創建為用戶切片。其中02包含兩種顏色，03、05、07、08、09、10只包含一種顏色；剩下的04、06、 11、12區域被創建為自動切片，這些切片包含了模糊的吉他手的圖像。在切片時，要使單色切片的邊緣完全貼近圖像中的單一色塊。要特別注意切片和切片之間 不要留下任何空隙，用上面提到的放大工具能使你看的更清楚。此外，在保證已創建的切片位置正確的情況下，用對齊到切片選項，也會使你剩下的切片工作更輕 鬆，切片工具會4個像素的範圍內自動貼近相鄰的參考線或切片。 （圖12）



圖12


 

[下一頁]

 

在 默認狀態下，所有的切片邊線的顏色都是藍色，而出現在每個切片上的彩色小數字都是它們被分配的切片編號。切片從圖像的左上角開始，從左到右、從上到下的順 序編號。用切片選擇工具，按住Shift鍵，選擇03、05、07、08、09、10這些單色切片，從切片菜單或右鍵菜單中選擇“鏈接切片”命令。將 04、06、11、12同時選擇，提升到用戶切片後鏈接。在未做鏈接之前，所有的符號都是藍色的，在鏈接第一組切片後，這個組內的所有切片符號都變成了紅 色，未被鏈接的切片符號依然為藍色；鏈接第二組切片，這一組中的切片符號變成了綠色。新的鏈接組中的切片符號會以新的顏色出現。 ImageReady用顏色將不同的切片組加以區別。如果這些符號和顏色阻擋了你的視線，你可以在預置>切片選項中取消數字和符號的顯示 （或使用大編號和標記）。同時選擇多個切片，是ImageReady的特有功能。

提示：顏色表中包含的最少顏色數量是2，所以，即使是我們剛才所創建的單色切片，在保存時顏色表中仍然必須為兩種顏色。這樣的話，你就可以在同一組中包含兩種顏色的切片。

警 告：我並不希望你照著這篇教程比葫蘆畫瓢，機械的跟從，更甚者養成不良的習慣，所以，請你仔細研究這些切片和各種信息，研究出能最大限度減小你的圖像體積 的配製方法。請記住：你所做的切片越多，最後得到的表格單元也就越多，也就意味著更多的代碼和字節。這裡，我使用了大量的切片，其目的是為了示範切片工 具，但絕不是說你也應該做這麼多切片。像切片02，03，05，07，08，09，應該可以合為一個較大的切片（表格單元）。

如果你的切片和例圖不完全像例圖那樣，也沒有關係，你可以按照切片在最終輸出時被存為jpg或gif格式，按相同的壓縮設置或顏色表將它們鏈接起來。這樣，切片部分完成後，我們下面就要著手對圖像進行優化了。

　　三、優化切片

　 　下面我們要對切片進行優化。優化可以在調整圖像顯示品質的同時，有效地控製圖像文件的壓縮大小，在用於網頁之前，優化是必不可少的一步。有兩種優化圖像 的方法：一種是基本優化，是在Photoshop的“存儲為”命令，它可以根據文件格式的不同，可以指定圖像品質、背景透明度或雜邊、顏色顯示和下載方 法。但不支持Web特性，也就不能保留切片；還有一種是精確優化，在Photoshop和ImageReady中都可以實現，可以通過多個優化版本的比 較，選擇最適合的設置組合，這種精確優化就是今天我們這篇教程的另一個重點。

在此實現優化之前，我們先來認識一下ImageReady的 優化面板。如果沒有選擇任何切片，優化面板顯示為空。現在選擇任一切片，你會看到優化面板中的變化。選擇除原稿以外的顯示方式，切片就會顯示以當前優化方 式儲存的預覽。點擊優化面板右邊的小三角，從彈出菜單中選擇“顯示選項”，這樣優化面板會顯示全部選項，不然的話，優化面板就不顯示透明選項及其它選項 （圖13）。在優化調板中，最有影響力的選項是優化的文件格式、顏色（針對gif格式）和品質（針對jpeg格式）。



圖13

在這篇教程一開始，我們就介紹了一些選擇圖片壓縮格式的基本規則。 ImageReady包括的優化圖像格式共有gif、jpg、png-8、png-24、wbmp5種。在這裡例子中，我們涉及到前兩種，所以現在我們來具體看看這兩種壓縮格式。

gif： 這個格式最適合壓縮具有單調顏色和清晰細節的圖像，對諸如如藝術線條、徽標或帶文字的插圖這樣的圖像有很好的效果。 gif格式壓縮實色區域來減小文件大小，同時又能保留清晰細節。顏色數量是決定gif格式圖像大小和品質的關鍵。因此，減少圖像中的顏色數量是優化gif 圖像的關鍵因素。你可以從優化面板的顏色選項中選擇顏色表中顏色的最多數目。顏色數量越少，文件就越小，但圖像損失也就越大；但也並不是說顏色數量越多圖 像就越好。像我們選擇編號為01的切片，將顏色最大數量設為256，無仿色時的切片大小為4.574K，而將最大顏色數量減少到16，無仿色時，切片大小 變為2.907K，但圖像質量幾乎看不出有什麼差別。如果覺得一種顏色設置不太理想，還可以細微調整最大顏色數量。使用顏色表，你可以精確控製圖像中的顏 色。選擇不同的切片，顏色表也不同；如果同時選擇多個切片，那麼顏色表是空的，將切片鏈接後，這些鏈接切片共享顏色調板和仿色圖案，這樣，相鄰切片的邊界 就不會出現裂縫了。除了顏色數量，耗損值也可以減小文件大小，幅度達到5％～40％，自然，損耗設置越高，扔掉的數據越多。這個選項是gif格式特有的， 但它不能與交錯、雜色和圖案仿色一起使用。

jpg：這也是我們最常用的壓縮格式之一，最適合用來壓縮連續色調圖像。它通過有選擇的扔掉數 據，達到減小文件大小的目的，是一種有損壓縮。像在gif格式中設定顏色數量一樣，你可以設定壓縮品質來控製圖像大小：品質越高，圖像損失越小，文件也就 越大。調節品質滑桿，可以更精確的控制壓縮效果（圖14）。更多的時候，我們需要打開雙聯或四聯，仔細觀察每一個細小改動對圖像的改變。視圖下方的註釋區 域提供了重要的優化信息，優化圖像的註釋顯示當前優化選項、優化文件的大小以及使用選中的調製解調器速度時的估計下載時間。這樣你或許會在圖像品質和大小 之間作出更恰當的選擇。你也可以在圖像信息欄中選擇顯示不同的信息，如不同的調製解調器速度等。 （圖15）



圖14



圖15

現 在，請打開雙聯面板，選取切片選擇工具，選擇吉他手的切片（切片編號為04）。在優化面板的設置菜單中，選擇一種預設的優化組合。通常情況下，我會選擇一 種基本的優化組合，然後再根據圖像狀態來調整其它選項。對這個有模糊的連續色調的切片而言，jpg格式應該是不錯的選擇。從設置下拉菜單中選擇“jpeg 高”，通常情況下，用這個選項保存會得到較好的圖像品質，但文件大小方面可能不盡人意。這樣的話，調節品質滑桿或直接輸入數字來改變圖像品質。最好一邊調 節，一邊注意觀察優化圖像以及圖像下面的優化信息。 （圖16）



圖16

還有一項很重要的信息是你應該知 道的：所有鏈接的切片將會共享同樣的優化設置。在這個例子中，我將吉他手的圖像分為了4個部分，分別為切片04、06、11、12），它們被鏈接在一起， 並用綠色切片標號區別於其它切片。一旦你調整了其中一塊切片的優化設置，其它的也立即自動更改。現在對其它組的鏈接切片也設定優化。如果你已經完全了解我 們前面所講的知識，那麼你也可以將切片02與03、05、07、08、09、10這一組切片鏈接，因為它只包含和這些切片相同的兩種顏色。你會發現，對這 一組切片來說，用最大顏色數量為2的gif格式優化是最合適不過的了，它可以將文件大小減小到最大限度，並且圖像質量不會有所損失。

最後 我們來處理最後一塊、實際上是我們創建的第一塊切片——帶有空洞文字的主要標題區域。你應該還記得，在這篇教程第一部分的末尾，我們曾經比較了兩種文字， 消除鋸齒的和未消除鋸齒的，以及它們各自所包含的顏色數量。鋸齒文字僅包含兩種顏色，而消除鋸齒的文字在兩種顏色相接的區域卻有一些過渡色出現。現在用切 片選擇工具選擇這塊切片，從優化面板的設置下拉菜單中選擇預設的“GIF　32　不彷色”。這樣的選擇應該接近這塊切片精確顏色數量，所以看起來比較很合 適。現在，你需要使用優化面板中顏色按鈕向上或向下的箭頭，來增加或是減少顏色數量，因而改變圖像質量和大小。

現在我們已經將全部的切片 都優化了。你可以在文件菜單下選擇預覽命令，在你擇任一瀏覽器中，對由所有不同的切片組合在一起的整體圖像進行全面的預覽。預覽頁面會顯示代碼和總體頁面 大小、圖像數量的信息。滿意的話，選擇文件菜單下的“將優化結果儲存為”命令，保存你的圖像及HTML。根據需要修改對話框中的設置參數，點擊保存後將輸 出HTML文件和一個名為“image”的文件夾，所有的切片圖像都在其中。至於如何繼續編輯這個HIML文件，那就是另一篇文章的事了。