動畫框線圖製作教學 BY 玄音

不規則圖框設計製作方法

含gif5動畫軟體工具應用

之前兩篇框圖教學,教學成果豐收,看到大家都能做出美美的框圖,真是歡喜。

框圖教學相關文章:

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

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

而這篇進階要講的是,如何將有圖片的框圖素材裁剪成獨立框圖。

↑以這張可愛貓兒招呼語框為例,感謝joan提供圖片參考。

看到這張圖後,我會先想要如何將它拆組。

因為它是不規則的圖,所以比較麻煩,若是直接從中間剖則右邊的貓兒就分屍了。

呵,所以若要讓貓兒完整,就是把貓兒圖裁成單一圖片,然後再來組合到想要放置的位置。

之後要再計算貓兒的尺寸要剛好佔住左右欄邊上方(左右欄寬大約是155以內)。

原圖片若太大,就要先縮小

原圖素材太大,若將貓兒剪下來放在上方,則組合框圖時,出現在欄位的貓兒圖就不會完整,

因此圖片若能剛好是欄位的大小,那麼圖片就可以完全呈現。

所以我都會先把原圖尺寸修改到適合奇摩部落左右欄位的尺寸大小( 155)後,再來剪裁圖片。


如何在G5縮放圖片

1.打開G5軟體 → 2. 將素材圖片叫進來 → 3. 按編輯,點選調整影像大小

4. 修改圖片尺寸(※維持寬高比若打勾,則只要修改一個尺寸,另一個尺寸會跟著正比縮放。)

5.G5縮放圖片,儲存時都會有白邊出現,這時只要把鏤空罩選無,則白邊就會不見了。

好囉!圖片縮小完成 ^^~


動手吧!開始剪裁囉~

首先把主角貓兒圖剪裁出來

因為我想要把貓兒圖放在左上邊圖的左上邊位置,所以貓兒要修改成獨立的去背圖片。

這樣放在左上邊圖時,圖片才不會怪怪的。

在G5裡如何將貓兒圖去背呢?請跟著圖示做喔!

這部份比較麻煩又複雜,需要耐心,所以請用好心情來修圖吧!

現在要把有背景的貓兒圖

修改成這樣的去背貓兒圖

 


貓兒圖去背作法:

1. 先把貓兒圖放大

2. 把貓兒圖多餘背景用擦子工具擦掉

3. 這貓兒圖有兩個畫格,第一個畫格擦好後,要記得點選第二畫格,繼續擦。

兩個畫格都去背後,要一.二畫格對照看看,有沒有哪裡沒擦乾淨喔。

4. 去背完成後,就可按最佳化儲存圖片,記得要先把鏤空罩色彩,選無後,才能儲存喔!

這樣完成的去背圖片,才不會有白邊產生。

完成的去背貓兒圖尺寸168*47


注意:

1. 去背是很費事的動作,圖片要好看,就要慢工出細活,要看仔細慢慢來喔!

2. 按了橡皮擦工具後,上方工具列會出現這些項目設定

形狀可任選。大小是指擦子的擦頭大小,尺寸越大,擦的範圍越廣。

透明度則是擦過的地方,圖片顏色會變淺,但不會完全讓圖消失。

柔邊是指擦過的地方,邊緣看起來會比較柔和。

線條要選任意形狀才不會受限。

※3. 這貓兒圖由兩個畫格合成,完成去背後,要在一畫格二畫格間點來點去,

而眼睛要注視中間的貓兒圖,才能看出圖片哪裡沒擦到。

貓兒圖去背完成,就可以繼續剪裁其他的六個框圖了。


. 剪裁左上邊圖1

1. 打開G5程式,將縮小的貓兒圖框素材叫進來

一次剪裁出右上邊圖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>


動畫框線圖製作教學下篇~

左彎下框邊圖跟左下彎角圖及左右側直邊圖製作~

及套用語法應用~

  

現在就繼續來裁剪左彎下框邊圖跟左下彎角圖及左右側直邊圖囉~

剩下這四個圖,就簡單多了,因為左彎下框邊圖跟左下彎角圖的裁剪方法,跟上篇步驟三,四五,的作法都是一樣的

若是上篇的框圖裁剪成功,那麼這裡的框圖剪裁就不是問題了。所以這裡我就簡單的說明,開始動手囉~

 


步驟六 剪出下方圖,再剪裁出右下彎角圖並儲存

※ 按開啟舊檔,將原圖框叫進來,圖框會出現在工作台面板上。要先把下方框圖選取裁剪出來。

※ 圖片若太小了,可以按編輯面版工具列下面有放大鏡十跟一,圖片太小不好裁,按放大鏡,圖片就會放大了。

剪裁下方框圖作法:

1. 要對圖片(物件)做任何動作時,一定要在選取物件的情形下才能工作。

    黑色虛框有出現就是表示這個物件已經被選取的意思。

  按挑選工具後,到工作台的圖片上點一下,黑色虛框就會出現,表示已經選好要工作的物件了。


2. 按選取工具-矩形按鍵,把下方圖選出來.

 點擊編輯面板的選取工具-矩形按鍵,把下方框圖選出來。

※為何要選第20畫格呢?因 為草莓籃的愛心飄到最高點是在第20畫格

而我們剪裁下方框圖時,就是要選最高點的位置選取,

這樣圖片裁出來,才不會像是被截掉一樣,顯示不完整。

選出下方框圖後,再按編輯→剪裁底框,裁出下方框圖。

之後再按選取工具選出右下彎角圖範圍,將之剪裁

點入最佳化面板→按儲存→進入另存新檔視窗→填上名稱→按儲存。

如此,右下彎角圖就完成了。


步驟七 剪裁左彎下邊框圖並儲存

這個作法就跟上篇的(步驟五 製作左彎上邊框圖)一樣

所以這裡就精簡的說明作法喔~

先回到編輯工作台面

右下彎角圖儲存好了之後,請點擊最佳化左邊的編輯按鍵,回到編輯工作台面板。

先按圖示工具列的復原按鍵一下,就能把剩下的右下彎角圖復原到剛才的下方框圖。

按編輯進入→點剪裁底框後→就剩下左彎下框邊圖了

刪除重覆畫格,調整秒數

儲存左彎下框邊圖→點入最佳化面板→按儲存→進入另存新檔視窗→填上名稱→按儲存。


步驟八 開新檔案,設定底框寬為1100,製作左彎下邊框圖並儲存

因為這個作法跟上篇的(步驟五 製作左彎上邊框圖)一樣

所以這裡也精簡的說明作法喔~

1.先看看左彎下邊框圖的尺寸大小是多少。因為它有個草莓籃,所以高度會不一樣。

編輯→底框大小→就可以看到左彎下邊框圖的寬高了。

2.按開新檔案,設定底框大小為1100*67

3.要按新增圖像→ 叫出左彎下框邊圖喔

4.填滿左彎下框邊圖的加寬圖後,就可以儲存了。

點最佳化鍵進入→按右下角的儲存→另存新檔→填寫名稱→按儲存

完成了.....左彎下框邊圖,也終於完成了。

現在就剩左右側直邊圖了。

請再繼續加油吧~


步驟九 剪裁左側直邊圖

1.開啟舊檔→叫出原圖框素材

2.選取左側直邊圖範圍

按選取工具→把滑鼠移到工作圖上選取直邊圖的某部份→準備剪裁

在這裡要注意的是,因為左右直邊圖加入語法後,會自動連結長度到上下框的彎角

所以不用選取所有的長度,只要截取一段來接圖就可以了。

選取時,要注意圖與圖接合時能夠剛好不會連在一起。

3.剪裁左側直邊圖

按編輯進入清單→選點剪裁底框

6.儲存左側直邊圖

按工作台上邊的最佳按鍵→按儲存

呵呵~終於做到了第五張框圖了,現在就剩下最後一張了。加油~


步驟十 剪裁右側直邊圖

1.回到編輯工作面板

在最佳化時,按編輯回到工作台→點一下復原鍵

2.按復原鍵→回到剛才的完整素材圖框

3.選取右側直邊圖範圍

按選取工具後→把滑鼠移到右直邊圖上選某部份圍起來→進入編輯清單→點剪裁底框

4.剪裁右側直邊圖後儲存

按最佳化進入→儲存右側直邊圖

哇...辛苦了,哈~總算都完成了,不知大家是不是也成功了。

以上就是框線圖的裁剪製作,希望大家都能看得懂。

若還是有不清楚的地方,歡迎再來發問。

即時叩應也行,不過我不常開即時的,就踫踫看囉!

也可以先跟我說或約時間,我有空就會上來的。

我的即時帳號:zz14723

※還有就是,若您完成了框線圖,但是套上語法後怪怪的。

若想問我,請記得要把您套上的語法貼給我,我才能找出問題原因喔。

~謝謝大家~


步驟十一 把做好的框圖套進加框語法應用

把自己做好的框線圖上傳到網路空間(教學),取得個個網址後,一一把它套進語法位置。

部落格加框線圖語法↓ (※ 框線圖案都貼好後,把整個語法複製直接貼在css底下就可以了。)

1. 框線圖位置語法解說:

/*Shared rounded corner for all modules框線圖案*/

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(
左彎上邊框圖網址

) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(
右上彎角圖網址) right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(
左彎下框邊
圖網址) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(
右下彎角圖網址) right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5px;background:url(
側直邊框圖網址) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url(
側直邊框圖網址) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

2.框線圖位址放置排列:

/*shared rounded corner for all modules加框語法*/


.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(1.gif) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(2.gif) right top no-repeat;height:1.gif
px;font-size:0;position:relative;right:-5px;}

.ycntmod .rcbtm {zoom:1;background:url(3.gif) left bottom no-repeat;margin-right:5px;}

.ycntmod .rcbtm div {background:url(4.gif) right bottom no-repeat;height:3.gifpx;font-size:0;position:relative;right:-5px;}

.ycntmod .rcl {padding-left:5.gifpx;background:url(5.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:6.gif
px;background:url(6.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

3. 成功剪裁出來的六個框線圖~

框線圖名稱

尺寸

圖示

1 左彎上邊框圖

1100*21

http://www.fileden.com/files/2006/11/24/414105/1111/e01.gif

2 右上彎角圖

22*21

http://www.fileden.com/files/2006/11/24/414105/1111/e02.gif

3 左彎下邊框圖

1100*67

http://www.fileden.com/files/2006/11/24/414105/1111/e03.gif

4 右下彎角圖

70*67

http://www.fileden.com/files/2006/11/24/414105/1111/e04.gif

5 左側直邊圖

16*47

http://www.fileden.com/files/2006/11/24/414105/1111/e05.gif

6 右側直邊圖

15*49

http://www.fileden.com/files/2006/11/24/414105/1111/e06.gif

4. 語法範例:↓

框線圖示

語法示範

95.12.23新增

/*Shared rounded corner for all modules 草莓動畫框圖*/

.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(http://www.fileden.com/files/2006/11/24/414105/1111/e01.gif) left top no-repeat;margin-right:10px;}
.ycntmod .rctop div {background:url(http://www.fileden.com/files/2006/11/24/414105/1111/e02.gif ) right top no-repeat;height:21px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcbtm {zoom:1;background:url(http://www.fileden.com/files/2006/11/24/414105/1111/e03.gif) left bottom no-repeat;margin-right:10px;}
.ycntmod .rcbtm div {background:url(http://www.fileden.com/files/2006/11/24/414105/1111/e04.gif) right bottom no-repeat;height:67px;font-size:0;position:relative;right:-10px;}
.ycntmod .rcl {padding-left:16px;background:url(http://www.fileden.com/files/2006/11/24/414105/1111/e05.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:15px;background:url(http://www.fileden.com/files/2006/11/24/414105/1111/e06.gif) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}


呵...完了喔...動畫框圖講解到此結束了..

希望能對大家有所幫助

敬祝 聖誕快樂 佳節如意 天天開心

玄音合十

本文為網頁嵌入發表,若想收藏,只要複製下列語法,貼到文章發表語法區就可以囉!

<embed src="http://a33a.myweb.hinet.net/TT/table/table03.htm" width="700" height="15300"></embed>