Photoshop7.0 網頁圖像存儲,PS技巧,PS課程

Photoshop7.0不斷地在工具組裡面加入新的功能來滿足設計師們越來越高的要求，並採用最有效的方法來處理廣泛多變的影像處理工作。前面我們介紹了「圖案生成器」和「修復筆刷」等工具，Photoshop7.0還增強了網頁功能，新的網頁圖像存儲讓我們能夠選中圖像上的某一種或者多種顏色，按下去除鍵就把這些顏色從圖像中去掉，讓網頁元素快速透明化。

　　在Photoshop7.0和image_Ready7.0中使用網頁圖像存儲這個功能我們可以在圖片上實現透明混色效果（Dithered），重新對應透明色（Remap）、處理透明的混合色（Dithered Transparency）。

　　打開Photoshop7.0，在工作區中導入一張圖片，在文件File菜單下選擇「存儲為網頁所用格式」（Save for Web），立即彈出網頁存儲對話框。

圖一

　　我們可以在網頁存儲對話框中選擇圖像最優化效果，並進行預覽。

圖二

　　上圖中左邊是工具選項，中間是預覽區，右邊是顏色處理選項。

　　左邊的工具箱中包括：移動工具、切片選擇工具、放大鏡工具、滴管選色工具、切片顯示工具。

　　切片選擇工具（slice select tool）：對那些已經被切圖的圖像選擇處理區域，可以從中選擇一塊出來進行透明處理。下圖中我們使用切片選擇工具在已經被切圖的圖像上選擇了中間區域（03）作為處理對象。

圖三

　　切片顯示工具（Toggle Slices Visibility）：可以在對話框中顯示和隱藏所有切片。就如上圖，使用切片顯示工具我們就可以選擇顯示或不顯示切片。

　　滴管選色工具（Eyedroppor Tool）：可以直接在圖片要去除的顏色處點擊選中顏色，然後再按除去按鈕將這個顏色去掉。

　　中間的預覽區有幾個選擇，包括分為幾欄來預覽圖像，旁邊還有一個擴展菜單按鈕。

圖四

　　如果我們選中擴展菜單中的「Hide Auto Slices」自動隱藏切片，在預覽區中我們只看見被選中的那一塊切片了（如圖四）。

　　下方有圖像的顯示比例選項，以及在瀏覽器裡預覽網頁。

圖五

　　在瀏覽器裡預覽網頁，不僅可以看到已經被處理的圖像的文件大小等信息，還有網頁源代碼同時顯示出來。如圖六

圖六

　　右邊是設置圖像透明度的參數。在「設置」（Settings）下拉菜單中，我們可以選擇一種圖片的格式和色彩像素。

圖七

　　圖七中，「1」選擇文件格式、「2」文件壓縮運算菜單、「3」混色運算菜單、「4」透明混色運算菜單、「5」擴展功能菜單。

　　如果在設置裡選中「Gif 128 Ditrhered」設置面板將出現相應的參數設置選項在下面的「顏色表」（Color Table）中出現128種顏色，我們可以選擇其中的一些顏色把它們刪掉，製成透明色。

　　「Lossy」是處理圖片的損耗程度，數值越大，圖片效果越差（只針對Gif格式）。

　　「Matte」邊緣調和，選擇一種顏色使透明的圖片和它融合。我們看下面的對比效果。

圖八

　　其中「Transparency」選項是處理圖像透明效果最重要的一個，我們可以使用它製作出透明的混色效果，這樣網頁圖片可以和任何背景完美的融合，即使是花紋背景，我們也不需要事先選擇用來邊緣調和（Matte）的顏色。在它的下拉菜單中，有No（無）、Diffusion（擴散）、Pattern（圖案）、Noise（躁音）四種Transparency Dither（透明抖動）的選項。
圖九是製作透明圖片的重要工具，在「Color Table」顏色表中我們選擇要去除的顏色，按下第一個按鈕就可以把顏色去掉。

　　
圖九

　　效果如圖十，文字和圖片是兩個層上的元素，但是都可以一起被去掉顏色。其他幾個按鈕有鎖定顏色、增加顏色、刪除顏色等等功能。

圖十

　　上面所講的功能在image_Ready中的「Optimize」（優化）面板中同樣適用，另外點擊「Optimize」字樣旁邊的上下箭頭圖標，點一下面板展開一層，多點幾下可以將面板所有的功能選項全部打開。右邊向下的箭頭，可以把在優化面板參數設置設置的結果保存下來。

圖十一

　　瞭解了網頁圖像存儲功能的基本操作，下面我們來看它在實際中的運用。
有這樣一幅圖片，我們要把它處理為透明圖片嵌入在網頁中。

圖十二

　　在Photoshop7.0中導入這幅圖片，打開「存儲為網頁所用格式」對話框，在「設置」中選擇「Gif 128 Ditrhered」在「設置」（Setings）中選中一個「Gif 128 Ditrhered」，「顏色表」（Color Table）出現128種顏色，其中有一個顏色中心帶有一個小孔，這個是將圖片背景製作成透明色。選中它按刪除按鈕，圖片變成透明效果了。

圖十三

　　圖片變化效果如圖十四，最後把這個圖片保存為Html網頁和image_格式，Photoshop會自動生成一個Html文件和一個image_文件夾，image_文件夾內有這張圖片。

圖十四

　　現在把這個網頁的背景顏色改一下，看實際效果。

　　通過本篇文章我們瞭解網頁圖像存儲的基本原理和功能，以後在處理透明圖片效果的時候使用它將會大大減輕工作程序，並且在使用Photoshop製作網頁的時候，更好的處理圖片效果，得到最優化的圖像。