著作權所有 © 旗標出版股份有限公司

第 1 7 章

製作適用於網頁與行動裝置的影像

2

本章重點► 17-1 將影像轉存為網頁圖檔► 17-2 切割影像與輸出網頁

3

17-1 將影像轉存為網頁圖檔► 在設計好網頁所要使用的影像後 , 可執行 Pho

toshop 的 『檔案 / 儲存為網頁與裝置用』 命令 , 就能在最佳的影像品質與檔案大小之間找出平衡點 , 然後再轉存成網頁通用的 JPG (JPEG) 、 GIF 或 PNG 圖檔格式。

轉存為 JPG (JPEG) 格式► JPG (JPEG) 格式可儲存全彩的影像 , 因此像

是風景照、人物照 ... 等 , 都適合儲存成 JPG 格式。請開啟範例檔案 17-01.psd, 然後執行 『檔案 / 儲存為網頁與裝置用』命令 , 開啟儲存為網頁和裝置用交談窗：

4

轉存為 JPG (JPEG) 格式

5

轉存為 JPG (JPEG) 格式►如果想要對照比較原稿和最佳化的影像 , 可以

切換到 2 欄式頁次：

6

轉存為 JPG (JPEG) 格式► 若切換到 4 欄式頁次 , 則可一次設定 3 種不同品質的影像來與原稿做比較 , 以找出畫質不失真而檔案最小的最佳設定：

7

轉存為 GIF 格式► GIF 格式最多只能儲存 256色 , 適用於構圖簡單、顏色分明的圖片。此外 , GIF檔支援透明色彩及動畫 , 因此常常應用於製作去背的影像 , 以及會動的廣告橫幅、小圖示等。

► 請開啟範例檔案 17-01A.psd, 這是我們將 17-01.psd 調整並去背後的影像 , 請執行 『檔案 /儲存為網頁與裝置用 』 命令 , 然後如下設定：

8

轉存為 GIF 格式

9

轉存為 GIF 格式► 勾選透明項目後 , 除了可儲存影像中原本透明

的部分外 , 還可以在色彩表頁次中將原本不透明的色彩指定為透明 , 製造不同的去背效果：

10

轉存為 GIF 格式

11

轉存為 PNG格式► PNG 格式分為

PNG-8 和 PNG-24 兩種 , 其中 PNG - 8 近似於 GIF 格式 , 最多只能儲存 256 種顏色 , 你可以在顏色列示窗中選擇要使用多少顏色 ,也可勾選透明項目來保留影像中透明的部分。

12

轉存為 PNG格式► PNG-24 則接近於 JPG 格式 , 可以儲存全彩的影像 , 但採用非破壞性壓縮 (多次存檔也不會失真 ), 所以壓縮率比 JPG 低 ( 檔案會比JPG 大 )。此外 , 若在 PNG-24 中勾選透明選項 , 可以儲存全彩又含有透明區域的影像 ( 支

援 256 種不同程度的透明度 )。

13

轉存時指定影像尺寸與檔案大小►除了改變影像的品質外 , 若你在製作完成後發現影像的尺寸和網頁的需求不符 , 可在儲存為網頁和裝置用交談窗中右下的影像尺寸頁次修改影像大小：

14

轉存時指定影像尺寸與檔案大小►如果你想直接將圖檔壓縮成指定的檔案大小 , 可以在儲存為網頁和裝置用交談窗中直接指定檔案大小 , 再從預視框檢視影像品質是否可以接受 , 滿意之後再儲存檔案。

15

17-2 切割影像與輸出網頁►切割影像是製作網頁時常用的技巧 , 例如要在網頁中使用大型圖片時 , 為了避免因檔案過大造成使用者等待很久還看不到內容 , 那麼就可以先將影像切割為數個切片 , 讓部分影像提前顯示出來。

16

使用「切片工具」建立切片►請開啟範例檔案 17-02.psd, 在工具箱中點選切片工具 , 然後在 「北海道簡介」 的文字按鈕周圍拉曳出一塊切片：

17

使用「切片工具」建立切片►切割完成後 , Photoshop 會依切割框自動完成其他部分的切割 , 且每個切片左上角都有一個

編號 (從影像左上角的切片開始陸續編號 )。►我們自行切割出來的切片編號和外框會呈藍色 , 稱為使用者切片；而 Photoshop 自動產生的切片編號和外框會呈灰色 , 稱為自動切片。

18

使用「切片工具」建立切片

19

利用『分割切片』命令一次建立數個切片

►在建立相連的多個切片時 , 可以先建立一個大的切片 , 再透過 『分割切片 』 命令將該切片快速切割成數個小切片。

20

利用『分割切片』命令一次建立數個切片

21

利用『分割切片』命令一次建立數個切片

22

利用『分割切片』命令一次建立數個切片

►分割切片功能只能切割出大小相同的多個切片 , 若你需要的切片大小不一 , 可以在分割後手動調整：

23

調整切片大小的注意事項►在調整切片時請特別注意 , 如果你只選取某個切片來調整大小 , 可能會讓該切片與鄰近的切片重疊 , 或是和其他切片之間產生縫隙 , 而造成多餘的切片。

► 例如選取「 北海道簡介」 切片 , 然後往下拉大切片 , 結果就會與「 行程說明」 切片發生重疊；相反的 , 若你將該切片往上拉曳縮小 ,

那麼在「 北海道簡介」 與「 行程說明」 之間就會有縫隙 , 因此就會產生一個自動切片。

24

調整切片大小的注意事項► 為了避免這些麻煩的狀況 , 最好的方法就是同

時選取「 北海道簡介」 與「 行程說明」 切片 ,直接拉曳兩切片中間的控點來調整 , 就可以避免重疊或縫隙的情況。

25

利用參考線來建立切片►為了在拉曳切片時更準確 , 可先使用參考線來劃分要切割的區域：

26

利用參考線來建立切片►若你全部的切片都要依照參考線來切割 , 還可以使用更快速的功能 , 也就是按下切片工具選項列 的 鈕 , 即可自動依參考線的劃分來切割網頁：

27

刪除切片►要刪除切片十分簡單 , 只要切換到切片選取工具 , 然後如下操作：

28

刪除切片

29

為切片建立超連結►將影像切割為切片後 , 我們還可為切片設定超連結 , 這樣在稍後產生網頁時 , 就會自動在網

頁上加入超連結的功能。請接續前面的範例( 或開啟範例檔案 17-03.psd), 在 「北海道簡

介」切片上按右鈕執行 『編輯切片選項』命令 , 然後如下操作：

30

為切片建立超連結

31

為切片建立超連結

32

「切片選取工具」的選項列►在設定切片相關選項時 , 除了在切片上按右鈕執行命令外 , 你也可以從切片選取工具 的選項列設定這些選項：

33

儲存切片並產生網頁► 請開啟 17-04.psd, 這是我們已經切割完畢、並設定好相關超連結的影像 , 請執行『檔案 /儲存為網頁與裝置用 』 命令 , 依下列的步驟來儲存網頁：

1. 點選切片選取工具 , 即可選取任一切片來檢視或修改該切片的存檔設定 ( 按住 [Shift] 鍵可選取多個切片 )：

34

儲存切片並產生網頁

35

儲存切片並產生網頁2. 切換到 2 欄式或 4 欄式頁次來比較切片影像的品質和大小：

36

儲存切片並產生網頁3. 按下交談窗左上角的儲存鈕 , 開啟另存最佳化檔案交談窗：

37

儲存切片並產生網頁4. 開啟剛剛儲存的位置 , 可以看到 Photoshop

儲存了 17-04.html 這個網頁檔 , 並自動產生了 images 資料夾來存放所有的切片檔案：