怎樣從Photoshop輸出透明背景的gif圖像,是很多初學者碰到的棘手問題,下面我們就來看看常用的幾種方法。
方法一:
選擇菜單命令 File > Export > Gif89a Export ,用吸管吸取要透明的部分,保存圖片。沒有Gif89a Export這個選項,可以在Photoshop 5.5中找到Adobe Photoshop 5.5/Plug-Ins/Adobe Photoshop Only /Import-Export/GIF89a Export.8be,把這個名為GIF89a Export.8be的文件拷貝到相應的路徑下就可以了。
方法二:

保證你要輸出的圖像已經在透明背景上,選擇菜單命令 File > Save for Web (Photoshop 5.5 以上版本),調出 Save for Web 對話框,設置好調色板及屬性、容差范圍、顏色數、仿色等參數后,確定 Transparency選項被選中,保存圖片。
方法三:

選擇菜單命令 Help > Export Transparency Image,調出 Export Transparency Image Wizard 對話框,選擇合適的方式,一步步根據提示選擇適當的選項,最后保存圖像。這種方法要求你想要輸出的圖像已經在透明背景上,或者已經選擇了需要處理成透明的部分。
]]>這張圖是我小時候比較喜歡的一款街機“侍魂”的場景圖,看到之后特別的喜歡。但是這張圖片是橫向構圖,而且分辨率也不合適,所以得修改一下才能正常的使用。(以手機屏幕分辨率為176×220為例)

要作修改的GIF動畫
下面我們使用ImageReady來修改GIF圖片,ImageReady是Adobe軟件包里的一個軟件,在安裝PhotoShop的時候就會自動安裝上。操作也和PhotoShop非常相似,比較容易上手。

ImageReady操作界面
首先,當然是選擇你自己喜歡的GIF動畫,復制下來之后在ImageReady里打開。

然后在軟件界面左側的工具箱中選中裁切工具。

確認選中“裁切工具”之后,在軟件頂部狀態欄里填上你所要得到的圖片分辨率,也就是你的手機屏幕的分辯率。這里以分辨率為176 ×220為例。


最后,選擇“將優化結果儲存為”一項,將你修改好的圖片保存到適當位置。

保存的時候注意選擇儲存格式,應選擇:“僅限圖像(*.gif)”一欄保存。

這樣,我們的手機桌面就會有更豐富的選擇了,無論是論壇里的個性簽名檔、有趣QQ表情,還是帥氣十足的視頻截圖,都可以輕松的作成自己的手機桌面。





那么,是不是就一定要使用更多的色彩才能產生較好的過渡效果呢?不一定,我們可以在設置框中選擇不同的仿色選項,將會看到如下的效果。明顯感覺到色彩的過渡變得柔和了。注意設置框中的顏色數仍然是8,這意味著顏色的數量并沒有變化。


仿色在網頁設計中較為常用,因為減少顏色數可以減小圖片的字節數,有利于在帶寬有限的網絡上快速傳遞。當然過少的顏色也必然損失圖像的質量和細節,因此在圖像質量和圖像字節數之間的權衡是進行網頁制作時常會遇到的問題。有些新手追求高圖像質量,結果導致整個網頁圖片字節數龐大,傳輸緩慢。或者過分追求傳輸的速度,大幅降低圖像質量。這兩個極端都是不可取的。而熟練的制作者必備的本領就是在兩者間取得最好的平衡點。這些人制作出來的網頁不僅圖像質量高,傳輸速度也快。
這里所說的在兩者間取得最好的平衡點,不單單指如何對圖像進行優化(即盡量減少字節數同時盡量保證質量),還包括在設計過程中就要為以后的優化做好準備。比如不要大面積地使用過渡色等。 ]]>
GIF(CompuServe GIF/Graphic Interchange Format)。它是在INTERNET上(作為附件、WEB頁、E-MAIL等)進行
圖像信息傳送的兩種主流文件格式之一(另一為JPG)。GIF有幾種版本,包括GIF87a、GIF89a。PHOTOSHOP使用GIF89a,但也能夠打開GIF87a。這些文件格式都采用索引顏色,支持8位的彩色或灰度及一個單獨Alpha通道。
這種文件的特別之處是能夠保存動畫,并允許漸次打開,并支持透明。
對于有限顏色數目和只有兩種顏色梯度的圖像,GIF是一種很好的格式。GIF采用無損LZW壓縮,但這種無損壓縮是相對的,對于某一圖像,如果要存盤成為GIF圖像,就是從源圖像的RGB顏色到GIF索引顏色進行轉換,即從16777216色到最大可能的256色(GIF最多支持256色)進行轉換,這就已經對圖像造成了損害。然而,對于WEB圖像來說,為了得到緊縮的大小尺寸和快速的下載,計劃采用顏色數目有限的圖像最終會產生好的綜合效果。
GIF最好用于顏色數目有限的圖像(如圖像按鈕)。GIF本身并不是具有照相精度的圖像而設計的。對于彩色圖片來說,在網頁上還是使用JPEG圖像格式比較好。
一、GIF保存有下面幾種方式
方法1、文件\存儲為WEB所用格式(這種方法是常用的首選方法,可調整度高)
1、點菜單“文件\存儲為WEB所用格式”
2、彈出下面這個工作框
3、下面我們對這個對話框中的每個部分進行細分
(1)工具欄。
2)視圖選項卡,共有四個,通常用二聯或四聯預覽查看,以方便優化前后的對比。
(3)點按對話框中“雙聯”或“四聯”視圖,并在應用優化設置之前選擇一個視圖。“黑色框”表示被選中并優化后的視圖。
每個圖像的對話框下方的注釋區域提供了優化信息。原稿圖像的注釋顯示文件名和文件大小。優化圖像的注釋顯示當前優化選項、優化文件的大小以及使用所選的調制解調器速度時的估計下載時間。
(4)可以在“預覽”彈出式菜單中選取是否使用瀏覽器仿色、使用何種顏色配置及調制解調器速度。
(5)左下角是預覽比例,右下角是WEB瀏覽器預覽按鈕,中間的部分是顯示RGB、Alpha、十六進制和索引色階值的“取樣顏色信息欄”,隨鼠標在圖像上的移動而改變。

(6)優化設置的已存儲組合。這里提供了GIF、JPG、PNG三種文件格式不同的組合方式,位數越高文件越大而圖像損失越小,反之損失越大。
這里提到一個仿色的概念,下面是PHOTOSHOP幫助文件對仿色的解釋:
“仿色”是指模擬計算機的顏色顯示系統中未提供的顏色的方法。若圖像所包含的顏色主要是純色,則在不應用仿色時通常也能正常顯示。包含連續色調(尤其是顏色漸變)的圖像,可能需要仿色以防止出現顏色條帶現象。
#p#副標題#e#
(7)下面是對各類下拉菜單的解釋,主要取自PHOTOSHOP幫助菜單,這是一部分
下面的名詞解釋是圖中沒有說明的
名詞解釋:位深度
位深度 — 稱為“像素深度”或“顏色深度”,用來度量圖像中有多少顏色信息可用于顯示或打印像素。 較大的位深度(每像素信息的位數更多)意味著數字圖像具有較多的可用顏色和較精確的顏色表示。
例如,位深度為1的像素有兩個可能的值:黑色和白色。而位深度為 8 的像素有 28 或 256 個可能的值。位深度為24 的像素有 224 或大約 1,600 萬個可能的值。常用的位深度值范圍為 1 到 64 位 / 像素。大多數情況下,Lab、RGB、灰度和CMYK 圖像的每個顏色通道包含 8 位數據。這將轉換為 24 位 Lab 位深度(8 位 x 3 通道);24 位RGB 位深度(8 位 x 3 通道);8 位灰度位深度(8 位 x 1 通道)和 32 位CMYK位深度(8 位 x 4 通道)。Photoshop 也可以讀取并導入每個顏色通道包含 16 位數據的 Lab、RGB、CMYK 和灰度圖像。
名詞解釋:加權優化
加權優化使您可以使用文本圖層、形狀圖層和 Alpha 通道中的蒙版,以平滑的方式改變整個圖像的優化設置。此方法可在關鍵圖像區域產生更高品質的效果,而且不會犧牲文件大小。利用加權優化,可以使 GIF、PNG-8、WBMP 仿色、損耗 GIF 設置和 JPEG 壓縮的變化更自然。加權優化還使您可以在生成顏色表時偏重于所選圖像區域的顏色。
(8)優化設置(主要取自PHOTOSHOP幫助文件)
使用“存儲為 Web 所用格式”對話框中的“優化”面板 (Photoshop) 和“優化”調板(ImageReady) 可以設置優化選項。如果使用的是“雙聯”或“四聯”模式,可以重組視圖,根據所選設置自動生成較低品質的圖像版本。
應用優化設置:
1.選擇要應用優化設置的視圖。
2.如果圖片包含多個切片,請選擇一個或多個要應用優化設置的切片。
3.執行下列操作之一:
?從“設置”菜單中選取一個已命名的優化設置。
?從“文件格式”菜單中選取一種文件格式。
4.設置其它優化選項。在第 3 步中選取的文件格式決定了您可以使用的選項。
基于文件大小應用優化設置:
1.從“優化”彈出式菜單 (Photoshop) 或“優化”調板菜單 (ImageReady) 中選取“優化文件大小”。
2.選取“起點”選項:
“當前設置”使用當前的優化設置。
“自動選擇 GIF/JPEG”自動生成 GIF 或 JPEG 文件。(Photoshop或ImageReady 選擇 GIF 或 JPEG 格式,具體取決于它對圖像顏色的分析。)
3.輸入文件大小值,然后點按“好”按鈕。
重組優化設置:
1.對“雙聯”或“四聯”模式的視圖應用優化設置。
2.從“優化”彈出式菜單 (Photoshop) 或“優化”調板菜單 (ImageReady) 中選取“重組視圖”。
在重組過程中,所選視圖和原稿視圖的優化設置不改變。
將圖像的優化版本恢復為原版本:
1.選擇“雙聯”或“四聯”模式的圖像的優化版本。
2.在“優化”面板/調板中,從“設置”彈出式菜單中選取“原稿”。
(9)顏色表及顏色調板菜單
顏色表所顯示顏色的數量是根據你所選的GIF顏色數設置而自動調整的,自動將圖像進行色彩壓縮,并可顯示保留顏色的色相色值。
#p#副標題#e#
Web 安全顏色
是瀏覽器使用的 216 種顏色,與平臺無關。在 8 位屏幕上顯示顏色時,瀏覽器將圖像中的所有顏色更改成這些顏色。216 種顏色是 Mac OS 的 8 位顏色調板的子集。通過只使用這些顏色,為用于 Web 而制作的圖片在設置為以 256 色顯示的系統上就一定不會出現仿色。
在 Adobe 拾色器中識別 Web 安全顏色:
點按拾色器左下角的“只有 Web 顏色”選項,然后選取拾色器中的任何顏色。選定此選項后所拾取的任何顏色都是 Web 安全顏色。
在拾色器中選取顏色。如果選取非 Web 顏色,則拾色器中的顏色矩形旁邊會顯示一個警告立方體 。點按警告立方體選擇最接近的 Web 顏色。(如果未出現警告立方體,則所選的顏色是 Web 安全顏色。)
使用“顏色”調板選擇 Web 安全顏色:
點按“顏色”調板選項卡,或選取“窗口”>“顏色”,查看“顏色”調板。
選取選擇 Web 安全顏色的選項:
從“顏色”調板菜單中選取“建立 Web 安全曲線”。選定該選項后,在“顏色”調板中選取的任何顏色都是Web 安全顏色。
從“顏色”調板菜單中選取“Web 顏色滑塊”(Photoshop),或從“顏色”調板菜單中選取任一“滑塊”選項(ImageReady)。默認情況下,在拖移“Web 顏色滑塊”時,Web 顏色滑塊緊貼著 Web 安全顏色(由勾號指示)。(如果要覆蓋 Web 安全顏色選區,請在拖移滑塊時按住 Alt 鍵 (Windows) 或 Option 鍵 (Mac OS)。)如果選取了非 Web 顏色,“顏色”調板左側的四色曲線圖上方會出現一個警告立方體 。點按警告立方體選擇最接近的 Web 顏色。在 ImageReady 中,在警告圖標周圍拖移以選擇其它接近的 Web 顏色。(如果未出現警告立方體,則所選的顏色是 Web 安全顏色。)
注釋:在 Photoshop 中,必須從“顏色”調板菜單中選取“Web 顏色滑塊”,才能查看 Web 安全警告立方體。在 ImageReady 中,用任何顏色滑塊選項都能查看警告立方體。
可以存儲優化圖像中的顏色表,用于其它圖像和載入在其它應用程序中創建的顏色表。將新的顏色表載入圖像后,優化圖像中的顏色會更改以反映新顏色表中的顏色。
存儲顏色表:
從“顏色表”調板菜單中選擇“存儲顏色表”。
為顏色表命名并選取存儲它的位置。默認情況下,顏色表文件的擴展名為 .act(用于 Adobe 顏色表)。
如果希望在為 GIF 或 PNG 圖像選擇“優化”選項時訪問顏色表,請將顏色表存儲在Photoshop 程序文件夾內的 Presets/Optimized Colors 文件夾中。
點按“保存”按鈕。
重要:當重新載入該表時,所有轉換的顏色都顯示為全色板,并且它們都將被解鎖。
載入顏色表:
從“顏色表”調板菜單中選擇“載入顏色表”。
導航到包含要載入的顏色表的文件: Adobe 顏色表 (.act) 文件、Adobe 色板 (.aco) 文件或 GIF 文件(以載入該文件的嵌入顏色表)。
點按“打開”按鈕。
將顏色映射為透明度
通過將現有顏色映射為透明度,可以在優化圖像中添加透明度。
將顏色映射為透明度:
1.在優化圖像或顏色表中選擇一種或多種顏色。(請參閱選擇顏色。)
2.執行下列操作之一:
在“顏色表”調板中點按“映射透明度”按鈕 。
從“顏色表”調板菜單中選取“將選中顏色映射為透明”。
透明度網格出現在每種映射顏色的一半位置。色板右下角的小方塊表示顏色被鎖定。
將透明度恢復為原稿顏色:
執行下列操作之一:
1.選擇要恢復的顏色,點按“映射透明度”按鈕 或從“顏色表”調板菜單中選取“從透明取消映射選中顏色”。
2.若要恢復所有映射為透明度的顏色,請選取“取消映射所有透明顏色”。
鎖定顏色表中的顏色
可以在顏色表中鎖定所選顏色,防止它們在顏色數量減少時被刪除和在應用程序中仿色。
注釋:鎖定顏色不能防止它們在瀏覽器中仿色。
轉換為 Web 安全色(WEB變化/無變化選中顏色)
若要保護顏色不在瀏覽器中仿色,可將顏色轉換為 Web 調板中最接近的顏色。這樣就確保了當在只能顯示256 種顏色的 Windows 或 Macintosh 操作系統上的瀏覽器中顯示時,顏色不會仿色。
將顏色轉換為 Web 調板中最接近的顏色:
在優化圖像或顏色表中選擇一種或多種顏色。(請參閱選擇顏色。)
執行下列操作之一:
點按“顏色表”調板中的“Web 轉換”按鈕 。
從“顏色表”調板菜單中選取“將選中顏色轉換為 Web 調板”。
原稿顏色出現在色板的左上角,新顏色出現在右下角。色板中心的白色小菱形表示顏色為 Web 安全色;色板右下角的小方塊表示顏色被鎖定。
將已做 Web 轉換的顏色恢復為原來的顏色:
執行下列操作之一:
在顏色表中選擇已做 Web 轉換的顏色并點按“顏色表”調板中的“Web 轉換”按鈕 。
若要恢復顏色表中所有已做 Web 轉換的顏色,請從“顏色表”調板菜單中選取“從 Web 調板轉換回原來的顏色”。
指定將顏色自動轉換為 Web 調板中最接近的顏色時的容差:
在“優化”面板/調板中,為“Web 對齊”輸入值或拖移彈出式滑塊。值越大,轉換的顏色越多。(在 ImageReady 中,點按“優化”調板選項卡上的“顯示選項”控制 或從“優化”調板菜單中選取“顯示選項”以查看“Web 對齊”選項。)
排序
這應該很好理解,僅僅是一個顏色位置排列。
(10)圖像大小。
這與我們常用的圖像大小一樣,可以做修改,但我們通常的習慣是設定好以后再做,所以這不一般不用考慮。
(11)當你完成需要的設置和優化以后,通過放大鏡預覽圖象,可以發現不同設置所導致的最終優化效果,并選定需要的優化,確定存儲即可。
這是通過方法1完成的不透明GIF圖
通過方法1完成的透明GIF圖(保存前關閉背景層的顯示或刪除背景層即可保存透明)
#p#副標題#e#
方法2、不推薦使用的方法
(1)文件\存儲為\GIF格式
(2)確定保存后,當文件包含圖層,則提示是否拼合圖層(必須拼合)
(3)當你在制作時候的圖像模式為RGB時,存GIF會自動提示轉為索引色,并要求你給予一定的設置,這些設置與前面說的類似(概念是相同的),但界面比較簡單,可以通過預覽來確定你調整的最終效果。
(4)上一步的調整確定后,會彈出對話框,選擇正常或交錯(前面已經說過了“交錯”的含義),一般正常即可。
(5)這是通過方法2完成的不透明GIF圖
(6)這是通過方法2完成的透明GIF圖(保存前關閉背景層的顯示或刪除背景層即可保存透明)
方法3、幫助\輸出透明圖像
除了上面說的2種方法,在PHOTOSHOP里還可以通過輸出透明圖像的方法來完成透明GIF
1、為了方便后面的操作,將背景層隱藏
2、幫助\輸出透明圖像
3、這時會自動生成一個新的帶透明的窗口,并彈出對話框,選擇“網上發布”
4、選擇GIF格式,PNG格式大家可以自己試驗一下
5、彈出對話框,按下一步
6、這一步完全是方法2的重復,自己按需設定
7、彈出“存儲為”對話框,輸入名稱后確定
8、依舊提示正常或交錯,選擇后確定
9、彈出對話框后點擊“完成”
完成后的GIF
ImageReady中的優化面板與PHOTOSHOP類似,所以就不再敘述了,如果有不很清楚的地方,大家可以先參考其幫助文件。