框線圖製作進階下篇-不規則圖框設計製作方法含gif5動畫軟體工具應用 @ 美麗珍藏的部落格

框線圖製作進階下篇-不規則圖框設計製作方法

含gif5動畫軟體工具應用

框圖教學相關文章：

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

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

三. 剪裁左下邊圖3

　一次就將圖左下邊圖3跟右下彎角圖4剪裁下來

↓

　剪取左下邊圖3↓

↓

→將左下邊圖3寬度尺寸複製加長成

左下邊圖3尺寸為1100*22 →http://hk.geocities.com/qwe36900/table/cat03.gif

部份顯示↓

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

四. 剪裁右彎角圖4

↓

去掉粉斜線再加上閃光的愛心右下彎角圖4

　→　

技巧：如何去掉粉斜線加上閃光！這是應用G5的滴管工具及畫筆工具塗上的。

作法：

因為原圖稿就是由兩個畫格組成，所以剪裁出來的框圖都會有兩個畫格。

有的框圖兩個畫格動作都一樣，所以沒有動畫效果。

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

1.把粉斜線塗蓋作法 → 先按挑選工具，點一下工作圖(黑虛框有出現，才能進行修改)。

2. 按滴管工具後，將滴管游標移到粉斜線旁邊的淺粉底色點一下

意思就是要把粉斜線顏色塗成跟淺粉底色一樣，這樣粉斜線就跟底色融合了。

↓塗抺完成之右下彎角圖4

↓如何在圖片上，加上閃光動畫

因為要加上閃光，所以第二畫格的圖就不需要再塗改，只要按下方工具列的刪除畫格就可將2畫格刪除。

2畫格刪除後，圖片必需有兩個畫格才能做成動畫。

所以再按下方工具列新增畫格，然後將1畫格的圖片複製貼到2畫格。

↓將1畫格圖貼到2空白畫格中

↓貼上後，兩個畫格圖都一樣了。

↓

在圖片上加上閃光製作步驟

先畫第一畫格的閃光↓

第一畫格畫好後，接著畫第二畫格的閃光↓

6. 看了預覽之後，有沒有覺得閃光閃的很快。

這裡只要把2畫格的畫格內容的延遲改成0.25秒就會慢一點了。

更改動畫秒數↓

　↓2畫格變為0.25秒了

7. 更改好秒數後，再看看預覽，滿意了，就可以按最佳化儲存圖片。

到這裡，總算做好四個框圖了，再來就是左直線邊圖及右直線邊圖的剪裁。

右下彎角圖4完成圖尺寸為48*22

五. 剪裁左直線邊圖5

↓剪裁左直線邊圖5

4.左直線邊圖5 → 尺寸14*13

5. 按最佳化儲存左直線邊圖5

六. 剪裁右直線邊圖6

↓剪出的框圖還有空白地方

↓讓直線圖佔滿空間

第2畫格一樣如此做或是將之刪除亦可

↓實際的右直線邊圖6完成尺寸→ 3*9

最後就是按最佳化儲存框圖↑

哇，全部框圖終於剪裁完成了，來看看組合後的框線圖是不是OK。

先將所有製作好的框線圖一一上傳到網路空間↓

左上邊圖1 1100*73	http://a33a.myweb.hinet.net/Table/teach/c01.gif
右上彎角圖2 40*73	http://a33a.myweb.hinet.net/Table/teach/c02.gif
左下邊圖3 1100*22	http://a33a.myweb.hinet.net/Table/teach/c03.gif
右下彎角圖4 48*22	http://a33a.myweb.hinet.net/Table/teach/c04.gif
左直線邊圖5 14*13	http://a33a.myweb.hinet.net/Table/teach/c05.gif
右直線邊圖6 3*9	http://a33a.myweb.hinet.net/Table/teach/c06.gif

把上傳的框線圖網址一一套用在框圖加框公式語法中↓

/*Shared rounded corner for all modules　左貓兒框圖*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(http://a33a.myweb.hinet.net/Table/teach/c01.gif) left top no-repeat;margin-right:10px;}
.ycntmod .rctop div {background:url(http://a33a.myweb.hinet.net/Table/teach/c02.gif) right top no-repeat;height:73px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcbtm {zoom:1;background:url(http://a33a.myweb.hinet.net/Table/teach/c03.gif) left bottom no-repeat;margin-right:10px;}
.ycntmod .rcbtm div {background:url(http://a33a.myweb.hinet.net/Table/teach/c04.gif) right bottom no-repeat;height:22px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcl {padding-left:14px;background:url(http://a33a.myweb.hinet.net/Table/teach/c05.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:3px;background:url(http://a33a.myweb.hinet.net/Table/teach/c06.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

喔喔喔!!不錯喔!!尺寸完美無誤，以上就是比較複雜的不規則框圖設計製作教學。

祝您　學習愉快

玄音合十

以下兩個框圖語法也是以這個貓兒素材製作

大家可以參考看看，有哪裡不一樣

G5軟體應用，有很多要學習的功能

所以等您摸熟了G5軟體功能，相信一定能設計出比玄音更美更炫的框圖喔！

/*Shared rounded corner for all modules　右貓兒框圖*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/qwe36900/table/cat01.gif) left top no-repeat;margin-right:10px;}
.ycntmod .rctop div {background:url(http://hk.geocities.com/qwe36900/table/cat02.gif) right top no-repeat;height:60px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/qwe36900/table/cat03.gif) left bottom no-repeat;margin-right:10px;}
.ycntmod .rcbtm div {background:url(http://hk.geocities.com/qwe36900/table/cat04.gif) right bottom no-repeat;height:22px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcl {padding-left:14px;background:url(http://hk.geocities.com/qwe36900/table/cat05.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:3px;background:url(http://hk.geocities.com/qwe36900/table/cat06.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

/*Shared rounded corner for all modules　左貓兒框圖*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(http://hk.geocities.com/qwe36900/table/01-3.gif) left top no-repeat;margin-right:10px;}
.ycntmod .rctop div {background:url(http://hk.geocities.com/qwe36900/table/cat02b.gif) right top no-repeat;height:59px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcbtm {zoom:1;background:url(http://hk.geocities.com/qwe36900/table/cat03.gif) left bottom no-repeat;margin-right:10px;}
.ycntmod .rcbtm div {background:url(http://hk.geocities.com/qwe36900/table/cat04.gif) right bottom no-repeat;height:22px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcl {padding-left:14px;background:url(http://hk.geocities.com/qwe36900/table/cat05.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:3px;background:url(http://hk.geocities.com/qwe36900/table/cat06.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}