DIY玩化學

不規則圖框設計製作方法

含gif5動畫軟體工具應用

之前兩篇框圖教學，教學成果豐收，看到大家都能做出美美的框圖，真是歡喜。

框圖教學相關文章：

1. 動畫框線圖製作教學上篇~如何把可愛圖框裁成漂亮框線圖~(修正) 

2. 動畫框線圖製作教學下篇~左彎下框邊圖跟左下彎角圖及左右側直邊圖製作~套用語法應用(修正)

而這篇進階要講的是，如何將有圖片的框圖素材裁剪成獨立框圖。

↑以這張可愛貓兒招呼語框為例，感謝joan提供圖片參考。

看到這張圖後，我會先想要如何將它拆組。

因為它是不規則的圖，所以比較麻煩，若是直接從中間剖則右邊的貓兒就分屍了。

呵，所以若要讓貓兒完整，就是把貓兒圖裁成單一圖片，然後再來組合到想要放置的位置。

之後要再計算貓兒的尺寸要剛好佔住左右欄邊上方（左右欄寬大約是155以內）。

原圖片若太大，就要先縮小↓

原圖素材太大，若將貓兒剪下來放在上方，則組合框圖時，出現在欄位的貓兒圖就不會完整，

因此圖片若能剛好是欄位的大小，那麼圖片就可以完全呈現。

所以我都會先把原圖尺寸修改到適合奇摩部落左右欄位的尺寸大小( 約155)後，再來剪裁圖片。

如何在G5縮放圖片

1.打開G5軟體 → 2. 將素材圖片叫進來 → 3. 按編輯，點選調整影像大小

4. 修改圖片尺寸(※維持寬高比若打勾，則只要修改一個尺寸，另一個尺寸會跟著正比縮放。)

5.在G5縮放圖片，儲存時都會有白邊出現，這時只要把鏤空罩選無，則白邊就會不見了。

↓

好囉!圖片縮小完成 ^^~

動手吧！開始剪裁囉~

首先把主角貓兒圖剪裁出來

因為我想要把貓兒圖放在左上邊圖的左上邊位置，所以貓兒要修改成獨立的去背圖片。

這樣放在左上邊圖時，圖片才不會怪怪的。

在Ｇ5裡如何將貓兒圖去背呢？請跟著圖示做喔！

這部份比較麻煩又複雜，需要耐心，所以請用好心情來修圖吧！

現在要把有背景的貓兒圖↓

修改成這樣的去背貓兒圖

  ↓

貓兒圖去背作法：

1. 先把貓兒圖放大

2. 把貓兒圖多餘背景用擦子工具擦掉

3. 這貓兒圖有兩個畫格，第一個畫格擦好後，要記得點選第二畫格，繼續擦。

兩個畫格都去背後，要一.二畫格對照看看，有沒有哪裡沒擦乾淨喔。

※4. 去背完成後，就可按最佳化儲存圖片，記得要先把鏤空罩色彩，選無後，才能儲存喔！

這樣完成的去背圖片，才不會有白邊產生。

完成的去背貓兒圖↓尺寸168*47

※注意：

1. 去背是很費事的動作，圖片要好看，就要慢工出細活，要看仔細慢慢來喔！

2. 按了橡皮擦工具後，上方工具列會出現↓這些項目設定

形狀可任選。大小是指擦子的擦頭大小，尺寸越大，擦的範圍越廣。

透明度則是擦過的地方，圖片顏色會變淺，但不會完全讓圖消失。

柔邊是指擦過的地方，邊緣看起來會比較柔和。

線條要選任意形狀才不會受限。

※3. 這貓兒圖由兩個畫格合成，完成去背後，要在一畫格二畫格間點來點去，

而眼睛要注視中間的貓兒圖，才能看出圖片哪裡沒擦到。

貓兒圖去背完成，就可以繼續剪裁其他的六個框圖了。

一. 剪裁左上邊圖1

1. 打開Ｇ5程式，將縮小的貓兒圖框素材叫進來

一次剪裁出右上邊圖1及右上彎角圖2

↓剪裁出來的上邊圖

　↓再次剪裁左上邊圖範圖

↓這就是所需的左上邊圖1樣式

  →將圖1寬度尺寸複製加長成

1100*26 → http://hk.geocities.com/qwe36900/table/cat01.gif

※上邊圖寬度尺寸加長，請參考→ 動畫框線圖製作教學上篇

如何將左上邊圖1(尺寸：1100*26) +貓兒圖(尺寸168*47)組合成有貓兒圖的左上邊圖↓

(去背的貓兒圖可任意放在想放的位置與左上邊圖組合)

完成的去背貓兒圖↓尺寸168*47

左上邊圖1網址↓(因為寬度太長，故這裡就貼網址)

1100*26 → http://hk.geocities.com/qwe36900/table/cat01.gif

如何將兩張圖組合成左上邊圖製作步驟↓

兩圖要組合前，必需先算出兩圖加起來的高度是多少，

而寬度就以做好的左上邊圖為準。

所以以這裡為例，左上邊圖1高度尺寸 26 +貓兒圖高度尺寸是 47 =73

兩圖組合的高度為73，則寬度就是1100

1. 那麼要先在G5按開新檔案工具，設定底框大小為1100*73

　↓

2.按確定後，會出現一個詢問視窗，修改到....直接按否就可以了。

之後工作檯上會出現一個長長的透空框↓

↓

3.按新增影像將左上邊圖1→http://hk.geocities.com/qwe36900/table/cat01.gif 叫進來

↓右欄顯示物件所選取的物件反白不見了

↓將工作圖(左上邊圖)的兩個畫格都靠下對齊

↓工作圖移到下邊了

↑上面動作完成後，接著要再按新增影像把貓兒圖叫進來↓

記得中間工作圖樣是要顯示第1畫格圖，之後才能按新增影像，加入圖片。

↓選取貓兒圖後，點著貓兒圖不放，滑鼠拖曳，將貓兒圖往下拉，拉到上邊圖上方，讓兩圖連接

↓

6. 第1畫格的貓兒圖拉好位置後，就換拉第2畫格的貓兒圖

作法：點選第2畫格→按挑選工具(黑虛框)點一下第2畫格貓兒圖↓

點著貓兒圖不放，滑鼠拖曳，將貓兒圖往下拉到上邊圖上方，讓兩圖連接。

第2畫格作法跟第1畫格一樣，也要將貓兒圖往下拉到跟1畫格的貓兒圖位置相同。

7. 第1.2畫格都拉好後，可以按預覽看看

8. 預覽時，發現合併成的左上邊圖動作跳太快了。

這時只要將畫格內容的延遲時間拉長，就可行了。

↓

↓

9. 再次預覽看看，若是滿意了，就可以按最佳化儲存圖片，不滿意就再繼續調整。

到這裡兩圖連接製成左上邊圖1工作，終於完成了。

左上邊圖1完成圖尺寸1100*73(部份顯示)↓

　二. 剪裁右上彎角圖2

↓加上光芒的右上彎角圖2

※技巧： 如何在圖上點綴光芒

有看到這個右上彎角圖會發光嗎？

原本的稿圖並沒有這項功能，這是應用G5的畫筆工具做成的。

作法：

這圖是由兩個畫格組成，但是圖片動作都一樣，所以看不出有動畫效果存在。

若要讓圖會動，只要把其中一個畫格圖改變一下，就會有動畫效果產生了。

↓

預覽滿意後，就可以按最佳化儲存了。

儲存時要注意，要記得將鏤空罩色彩選無，之後再儲存喔！這樣才不會有白邊出現。

右上彎角圖2完成圖後尺寸是40*23↓

※還記得框線圖的製作規則嗎？

圖1跟圖2高度要一樣。圖3跟圖4高度要一樣。圖1跟圖3寬度要一樣。

所以左上邊圖經過合併修改後的高度尺寸為73，因此右上彎角圖高度也要跟著改成73。

↓

↓

按新增影像叫出右上彎角圖

↓

將工作圖兩個畫格都靠下對齊

↓

↓

更改延遲時間秒數

↓

右上彎角圖2完成圖。尺寸40*73

哇！到這裡，總算把複雜的去背貓圖及合併到左上邊圖完成了。

因為這篇框圖教學圖文實在太長了，怕文章開啟時太慢。

所以下面四個框圖製作教學步驟，就請看下一篇囉！

↓

框線圖製作進階下篇-不規則圖框設計製作方法含gif5動畫軟體工具應用

祝學習愉快 ^^~

玄音合十

本文為網頁嵌入發表，若想收藏，只要複製下列語法，貼到文章發表語法區就可以囉！

<embed src="http://a33a.myweb.hinet.net/Table/teach/cat.htm" width="600" height="16400"></embed>