close

動畫框線圖製作教學~




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


及套用語法應用~



  


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


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


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


 





 


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


 


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


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


 


剪裁下方框圖作法:


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


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


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






 


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


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


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


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


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




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




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






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



 


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


 





 


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


 


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


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


 


先回到編輯工作台面


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


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




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




刪除重覆畫格,調整秒數




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



 





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


 


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


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


 


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


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




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






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



 


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


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


 


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


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


請再繼續加油吧~


 





 


步驟九 剪裁左側直邊圖


 


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




2.選取左側直邊圖範圍


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


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


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


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




3.剪裁左側直邊圖


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






6.儲存左側直邊圖


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



 


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





 


步驟十 剪裁右側直邊圖


 


1.回到編輯工作面板


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




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




3.選取右側直邊圖範圍


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




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


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



 


 





 


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


 


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


部落格加框線圖語法↓ (※ 框線圖案都貼好後,把整個語法複製直接貼在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. 語法範例:↓













框線圖示



語法示範




 



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



 





 


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


希望能對大家有所幫助


 


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


玄音合十


 


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


註: 此篇文章取自~~http://tw.myblog.yahoo.com/happy-ok


arrow
arrow
    全站熱搜

    星羽 發表在 痞客邦 留言(0) 人氣()