框線圖製作進階上篇-不規則圖框設計製作方法
含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>
留言列表
奇摩背包 (16)
