不規則圖框設計製作方法
含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 右貓兒框圖*/ /*Shared rounded corner for all modules 左貓兒框圖*/ |
框線圖製作進階上篇-不規則圖框設計製作方法含gif5動畫軟體工具應用
本文為網頁嵌入發表，若想收藏，只要複製下列語法，貼到文章發表語法區就可以囉！
<embed src="http://a33a.myweb.hinet.net/Table/teach/cat2.htm" width="600" height="11700"></embed>
