現在就繼續來裁剪左彎下框邊圖跟左下彎角圖及左右側直邊圖囉~
剩下這四個圖,就簡單多了,因為左彎下框邊圖跟左下彎角圖的裁剪方法,跟上篇步驟三,四五,的作法都是一樣的。
若是上篇的框圖裁剪成功,那麼這裡的框圖剪裁就不是問題了。所以這裡我就簡單的說明,開始動手囉~
框線圖相關文章 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;} ) left top no-repeat;margin-right:5px;}
.ycntmod .rctop {zoom:1;background:url(左彎上邊框圖網址
.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 .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.gif高px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:5.gif寬px;background:url(5.gif) repeat-y;} |
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;} |
呵...完了喔...動畫框圖講解到此結束了..
希望能對大家有所幫助
敬祝 聖誕快樂 佳節如意 天天開心
玄音合十