美麗珍藏的部落格

一. 前言　

看到可愛的留言板圖框或招呼語框或相片框圖，會不會想到，若是拿來做成框線圖，圍在部落格欄位邊，應該很漂亮的。

因為這樣，我在逛部落格時，若看到有框的圖，都會忍不住的想把它改成框線圖，因此，若有圖片取自您格上的貼圖，或有侵犯到您的權利，請告知喔，我會立即把這些圖刪掉的。

也好在有魔女音符，她格子裡發表的素材，也夠我用的，還有鍵鍵的媽咪也提供我漂亮圖框應用。

這次的素材是取自雪兒的圖框素材來應用的。

雪兒為了幫我找圖框，也到處去搜集素材，雪兒這次發表的圖框，很適合用來做框線圖，而且適合教學教材。

這次要講解更清楚的動畫框線圖裁剪步驟，讓大家也能學習如何製作框線圖，那下次看到漂亮圖框時，就可以自己做出適合自己格子的框圖風格了。

在此感謝，所有提供我素材的格友們，謝謝您們大方的分享喔～

 框圖相關文章 　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>