除咗ulead gif animator 外,仲有邊d係做gif 圖ge 好software?

除了用 ulead gif animator 外，
你何以利用 Photoshop 配合ImageReady 來製作動態的圖片 (animated GIF).

以下是教學：
1. 想 一 起 做 的 話, 請 右 按 這 裡 把 圖 片 (tsingyi.zip) 儲 存 到 電 腦, 解 壓 縮 後再 用 Photoshop 開 啟 tsingyi.psd.
2. 動 態 圖 片, 說 穿 了 就 是 由 多 張 靜 態 圖 片 組 合 在 一 起, 一 張 一 張 地 播 放, 做 成 會 動 的 錯 覺. 現 在 我 們 先 在 Photoshop 製 作 好 這 幾 張 靜 態 圖 片.
3. 就 好 像 拍 攝 電 影 一 樣, 製 作 動 態 圖 片 前 要 先 想 好 劇 本. 這 次 的 劇 本 將 會 如 下:
01: Cutout 特 效 2 (Opacity <不 透 明 度> 20%)

02: Cutout 特 效 2 (Opacity <不 透 明 度> 40%)

03: Cutout 特 效 2 (Opacity <不 透 明 度> 60%)

04: Cutout 特 效 2 (Opacity <不 透 明 度> 80%)

05: Cutout 特 效 2

06: Cutout 特 效 4

07: Cutout 特 效 6

08: Cutout 特效 8

09: 原 圖

10: 加 入 文 字 "青 衣 城"

11: 加 入 文 字 "青 衣 城 - 舊 墟"

12: 加 入 文 字 "青 衣 城 - 舊 墟" (Opacity <不 透 明 度> 80%)

13: 加 入 文 字 "青 衣 城 - 舊 墟" (Opacity <不 透 明 度> 60%)

14: 加 入 文 字 "青 衣 城 - 舊 墟" (Opacity <不 透 明 度> 40%)

15: 加 入 文 字 "青 衣 城 - 舊 墟" (Opacity <不 透 明 度> 20%)
簡 單 來 說:
01 - 05: 圖 片 一 開 始 是 用 誇 張 的 cutout 效 果 (程 度 2 是 最 誇 張) 淡 入 (由 不 透 明 度 20% 轉 至 100% <沒 有 寫 不 透 明 度 的 地 方 即 是 不 透 明 度 100%>).
06 - 09: 逐 漸 減 少 cutout 效 果 至 程 度 8 (最 接 近 原 圖), 再 轉 至 原 圖.
10 - 15: 加 入 文字, 再 慢 慢 淡 出.

如 果 仍 是 看 不 明 白 的 不 用 害 怕, 因 為 一 如 已 往 將 會 有 非 常 詳 細 的 教 學 來 指 引 你 完 成 今 次 的 範 例.

4. 現 在 開 始 製 作 圖 片 01. 選 擇 menu Filter -> Artistic -> Cutout....


圖片參考：http://antony5.com/kissingphotoshop/images/cutout.jpg

5. 在 No. of Levels 鍵 入 2, 再 按 OK.

圖片參考：http://antony5.com/kissingphotoshop/images/cu2.jpg


6. 在 Layers 的 工 具 視 窗, 於 Opacity 輸 入 20%.


圖片參考：http://antony5.com/kissingphotoshop/images/op2.jpg




7. 選 擇 menu File -> Save As.... 此 時 無 論 你 打 算 儲 存 圖 片 在 那 裡, 都 請 先 建 立 一 個 資 料 夾, 因 為 我 們 將 會 有 十 多 張 的 圖 片. 我 建 立 的 資 料 夾 名 叫 "tsingyi" (即 青 衣, 範 例 圖 片 中 就 是 青 衣 機 鐵 旁 商 場 中 的 "舊 墟" - 現 在 已 經 不 存 在 於 這 個 商 場 了, 可 能 因 為 人 流 不 多 的 關 係). 輸 入 File name 為 01 並 選 擇 Format 為 JPEG, 再 按 Save.




圖片參考：http://antony5.com/kissingphotoshop/images/sa.jpg




8. 選 擇 Quality 為 6 (如 果 你 想 圖 片 質 素 好 一 些 可 以 輸 入 較 大 的 數 值, 但 當 然 出 來 的 圖 片 file size 也 會 較 大). 按 OK.

圖片參考：http://antony5.com/kissingphotoshop/images/op.jpg



9. 重 複 步 驟 6- 8, 但 這 次 把 Opacity 轉 為 40%, 另 存 新 檔 為 02.
10. 重 複 步 驟 6- 8, 但 這 次 把 Opacity 轉 為 60%, 另 存 新 檔 為 03.
11. 重 複 步 驟 6- 8, 但 這 次 把 Opacity 轉 為 80%, 另 存 新 檔 為 04.
12. 重 複 步 驟 6- 8, 但 這 次 把 Opacity 轉 為 100%, 另 存 新 檔 為 05.
13. 在 History 的 工 具 視 窗, 拉 到 最 上 面 並 按 一 下 tsingyi.psd 來 還 原 到 原 來 的 樣 子.

圖片參考：http://antony5.com/kissingphotoshop/images/his.jpg

14. 選 擇 menu Filter -> Artistic -> Cutout.... 在 No. of Levels 輸 入 4, 按 OK.
15. 選 擇 menu File -> Save As.... 輸 入 File name 為 06 並 選 擇 Format 為 JPEG, 再 按 Save.
16. 選 擇 Quality 為 6. 按 OK.
17. 重 複 步 驟 13 - 16, 但 這 次 cutout 的 No. of Levels 輸 入 6, 另 存 新 檔 為 07.
18. 重 複 步 驟 13 - 16, 但 這 次 cutout 的 No. of Levels 輸 入 8, 另 存 新 檔 為 08.
19. 在 History 的 工 具 視 窗, 拉 到 最 上 面 並 按 一 下 tsingyi.psd 來 還 原 到 原 來 的 樣 子.
20. 選 擇 menu File -> Save As.... 輸 入 File name 為 09 並 選 擇 Format 為 JPEG, 再 按 Save. 選 擇 Quality 為 6. 按 OK.
21. 在 工 具 列 選 擇 Horizontal Type Tool.

圖片參考：http://antony5.com/kissingphotoshop/images/type.jpg


22. 請 看 下 圖 視 窗 頂 部 的 工 具 列 來 設 定 好 文 字 工 具 選 項 (注 意 我 用 了 白 色), 然 後 在 圖 片 的 上 方 click 一 下 來 輸 入 "青衣城".


圖片參考：http://antony5.com/kissingphotoshop/images/text.jpg


23. 在 視 窗 頂 部 的 工 具 列, click Commit any current edits 來 確 定.

圖片參考：http://antony5.com/kissingphotoshop/images/commit2.jpg


24. 選 擇 menu File -> Save As.... 輸 入 File name 為 10 並 選 擇 Format 為 JPEG, 再 按 Save. 選 擇 Quality 為 6. 按 OK.
25. 在 Layers 的 工 具 視 窗, double-click 在 "青衣城" 這 個 layer 的 "T" 字 位 來 編 輯 文 字.

圖片參考：http://antony5.com/kissingphotoshop/images/dc2.jpg

26. 輸 入 " - 舊墟" 在 原 有 的 文 字 之 後.

圖片參考：http://antony5.com/kissingphotoshop/images/old.jpg


27. 在 視 窗 頂 部 的 工 具 列, click Commit any current edits 來 確 定.
28. 選 擇 menu File -> Save As.... 輸 入 File name 為 11 並 選 擇 Format 為 JPEG, 再 按 Save. 選 擇 Quality 為 6. 按 OK.
29. 選 擇 menu Layer -> Merge Down來 把 所 有 的 layer 結 合. 這 樣 做 是 因 為 我 們 將 要 把 圖 片 的 opacity 改 變 來 製 作 淡 出 的 效 果, 如 果 不 先 結 合 所 有 layer, 我 們 便 要 每 個 layer 都 設 定 一 次 opacity, 很 不 方 便.




圖片參考：http://antony5.com/kissingphotoshop/images/md.jpg



圖片參考：http://hk.yimg.com/i/icon/16/1.gif
由於字數所限，詳情可參看以下網址；
http://antony5.com/kissingphotoshop/animated_gif.htm

Fireworks 8