一. 前言
看到可愛的留言板圖框或招呼語框或相片框圖，會不會想到，若是拿來做成框線圖，圍在部落格欄位邊，應該很漂亮的。
因為這樣，我在逛部落格時，若看到有框的圖，都會忍不住的想把它改成框線圖，因此，若有圖片取自您格上的貼圖，或有侵犯到您的權利，請告知喔，我會立即把這些圖刪掉的。
也好在有魔女音符，她格子裡發表的素材，也夠我用的，還有鍵鍵的媽咪也提供我漂亮圖框應用。
這次的素材是取自雪兒的圖框素材來應用的。
雪兒為了幫我找圖框，也到處去搜集素材，雪兒這次發表的圖框，很適合用來做框線圖，而且適合教學教材。
這次要講解更清楚的動畫框線圖裁剪步驟，讓大家也能學習如何製作框線圖，那下次看到漂亮圖框時，就可以自己做出適合自己格子的框圖風格了。
在此感謝，所有提供我素材的格友們，謝謝您們大方的分享喔～
框圖相關文章 
1. 框線圖語法應用 2. 靜態框線圖教學 3. 動畫框線圖教學下篇
4. 聖誕框圖寵物框圖分享 5. 新增框線圖分享
二. 框線圖認識
大家應該都知道什麼是框線圖，而框線圖是由六個圖所組合的，有人或許還不清楚，不過這是做框線圖的基本認識，所以要記得喔。
因此我們把圖框拿來裁剪時，就必需要裁成六張圖。
因為要配合部落格的語法，而一般在網路上的框線圖素材，大部份都是四個圖或八個圖組成，有時真不好下手，因此使用圖框素材就好做多了。
而六個圖是如何分配的，就以下面這個圖框素材來說。
框線圖的分布圖：
|
原圖框稿↓
剪裁位置→ |
|
被各顏色蓋住的位置，就是我們要裁剪的部位。
裁剪原則：要看圖的樣式，以這張圖來說，它上方沒有小東西，所以裁剪時會簡單多了。
而下方圖有個草莓籃存在，所以裁剪時要把它全部裁進來，這樣在接圖時，才不會有空隙或者連接不齊的情形產生。
好了，我們先了解一下要裁剪的範圍後，現在我們就來實際操作了。
三. 製作框線圖事前準備工具
工具1：當然就是要有一張圖框素材了→雪兒框圖素材
工具2：要有GIF5這套動畫軟體了。
←請點圖按右鍵下載G5動畫軟體。
(下載完就解壓縮，先安裝英文正式版，再安裝中文化程式～這套軟體是做動畫圖必備的～）
四. 框線圖製作流程
打開G5動畫軟體→把圖框素材叫進來→1.先裁剪上方圖後→2.再把右上彎圖裁出來儲存→3.把右上邊框圖拉寬到1100，完成後儲存→
4.然後裁剪下方圖→5.先把右下彎圖裁出來儲存6.再把右下邊框圖拉寬到1100，完成後儲存。
7.裁剪一小段左側直邊圖儲存→8.然後也一樣裁剪一段右側直邊圖儲存。如此就把六張圖都裁好了。
五. 框線圖製作步驟
步驟一 請開啟G5動畫程式
開啟程式後，若出現動畫精靈小視窗，請直接關閉。
G5面版工具介紹
步驟二 叫出要做框線圖的素材
1. 按圖示工具→按開啟舊檔→出現圖檔選擇視窗→點取圖片後按開啟，或快點兩下直接開啟圖片。
步驟三 剪裁上方圖
※ 圖片叫出來後，會出現在工作台面板上。要先把上方框圖選取裁剪出來。
※ 圖片若太小了，可以按編輯面版工具列下面有個十跟一的放大鏡，圖片太小不好裁，按放大鏡十，圖片就會拉近(放大)了。
裁剪上方圖作法：
1. 要對圖片(物件)做任何動作時，一定要在選取物件的情形下才能工作。
而黑色虛框有出現就是表示這個物件已經被選取的意思。
2. 按選取工具-矩形按鍵，把上方圖選出來.
點擊編輯面板的選取工具-矩形按鍵，把上方圖選出來。
3. 剪裁上方圖
上方圖選出來後，就可以剪裁了。 (G5 版本不同時，文字名稱會有所不同，但是位置都一樣的。)
↓
※ 上方圖剪裁出來，是為了能夠輕鬆的裁剪1.左彎上框邊圖跟2.右上彎角圖。
步驟四 剪裁右上彎角圖並儲存
1.有了上方圖，右上彎角圖裁剪就簡單多了。
作法跟上面剪裁上方圖一樣，物件要在被選取的狀態下(黑色虛框存在)
然後按點取工具-矩形，這時游標會變成剪刀形狀。
之後到圖片上選取要剪裁的範圍(右上彎角的位置)，最後再按編輯裡的剪裁底框。
↓
5. 儲存右上彎角圖
點工作台右上邊的最佳化功能鍵→在右下角按儲存後→出現儲存視窗→填上檔案名稱→再按儲存→這樣右上彎角圖就ＯＫ了。
步驟五 製作左彎上邊框圖
1.點擊最佳化左邊的編輯鍵，回到工作台面
右上彎角圖儲存好了之後，請點擊最佳化左邊的編輯按鍵，回到工作台面。
先按圖示工具列的復原按鍵一下，就能把剩下的右上彎角圖復原到剛才的上方圖。
2.剪裁左彎上邊框圖
因為是要製作左彎上邊框圖，所以不需要右上彎角圖，因此要先把右上彎圖剪掉。
一樣的，請按選取工具-矩形，這時游標會變成剪刀形狀。
然後把滑鼠移到工作台的圖片上，按著滑鼠左鍵不放，然後拖曳，放開滑鼠後藍黑虛框會出現，
這樣就把左彎上邊框的範圍選出來了，之後再點編輯裡的剪裁底框，剪裁後就會剩下左彎上邊框圖了。
↓
3. 刪除重覆的畫格
因為這個圖框的原圖是由20個畫格組成的動畫圖，但我發現它的動作單數是一樣，雙數是一樣。
因此只有兩張圖是不同動作的，因此只要留下第一畫格跟第二畫格的圖就可以了。
少了畫格數，圖片容量會跟著減少，等一下要做加寬的動作時，也會比較簡單。
（您可以在下面的畫格面板點單數的圖，跟雙數的圖片看看。）
刪除多餘的畫格後，現在就剩兩張畫格，這樣在做底框加寬的動作時就不會辛苦了。
因為兩張圖只要做兩次，20張圖要做二十次，所以圖片越少越好。
而JPG圖檔是靜態圖，只要做一次就可以。不過我們這篇教的是動畫框線圖製作，
因此圖片一定會超過兩個畫格以上，所以製作上會多一道程序。
4.儲存左彎上邊框圖
重覆畫格也刪除後，就可以先把左彎上邊框圖儲存起來，這樣要製作下面步驟時，會簡單許多。
5.開新檔案，設底框的寬度為1100px，高度不變。
請按最佳化左邊的編輯，回到編輯面版。
因為左彎上邊框圖的寛度要1100px，才能配合部落格的欄寬，而我們的圖寬只有150px，所以我們要把底框加寬。
按確定鍵之後，再把左上彎框邊圖重新叫進來。
作法如圖所示↓：
※確定後，會出現一個小視窗，問是否儲存修改到......直接按否。
※圖片的尺寸，就是底框的尺寸，從文字工具編輯清單裡的調整影像大小或底框大小點進去，
就可以看到圖片或底框的寬高尺寸。
6. 用新增影像，把左彎上框邊圖叫出來
剛才已經設定了底框尺寸(1100*21)，現在要用新增影像的方法，將左彎上框邊圖叫出來，
才能把圖片套在設定好尺寸的底框上。
把剛剛儲存的左上彎框邊圖叫出來，
7.用複製貼上，把底框1100px填滿
因為原圖的寬長太短，所以要一次一次的複製貼上拉開，才能把寬長的圖片接連起來到1100寬。
就是說左上彎角不動，而邊框長要加寬。因此要選取邊框長的範圍，按下複製後，再按貼上。
按貼上後，框邊圖就會被貼在選取的藍黑色區框範圍內。因為圖片重疊，所以看不到貼上的圖。
※若是複製及貼上鍵是沉下的面板顏色，表示物件沒有被選取，所以按鍵無法作用。
這時只要點一下圖片就會出現黑色虛框，表示物件被選取了。
8.拉出貼上的圖，接到原圖後面邊緣
按挑選工具，將重疊的圖片拉出來。
↓
拉出的圖要對齊原圖的後面邊緣，會比較好看。
↓
複製圖貼上七次，應該就能填滿底框寬了。加油～
↓
繼續努力～
↓
第二畫格的填滿動作，跟第一畫格是完全一樣的喔～
↓
喔喔～終於做到這個步驟了～修改畫格秒數
↓
秒數越大，動作會越慢。
呵～多做框圖，拉圖就會順手多了。
哇～終於完成了，這就是左彎上框邊圖的製作過程。
以上就是右上彎角圖跟左彎上框邊圖的製作方法喔～
希望您們可以看得懂
現在右上彎角圖跟左彎上框邊圖做好了，那麼就剩下四個圖了，請繼續加油吧～
請看下篇↓
動畫框線圖製作教學下篇~左彎下框邊圖跟左下彎角圖及左右側直邊圖製作~及套用語法應用~
敬祝大家 快樂開心~
玄音合十
本文為網頁嵌入發表，若想收藏，只要複製下列語法，貼到文章發表語法區就可以囉！
<embed src="http://a33a.myweb.hinet.net/TT/table/table02.htm" width="700" height="15700"></embed>
