動畫邊框製作(下)

2006122316:29

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

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

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

 


 框線圖相關文章  1. 框線圖語法應用 2. 態框線圖教學 3. 動畫框線圖教學上篇

4. 聖誕框圖寵物框圖分享 5. 新增框線圖分享


 

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

 

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

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

 

剪裁下方框圖作法:

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;}

 


 

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

希望能對大家有所幫助

 

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

玄音合十