動畫框線圖製作教學下篇

 　

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

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

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

 

---

　

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

　

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

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

　

剪裁下方框圖作法：

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

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

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

---

　

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

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

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

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

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

↓

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

↓

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

↓

↓

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

　

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

　

---

　

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

　

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

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

　

先回到編輯工作台面

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

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

↓

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

↓

刪除重覆畫格,調整秒數

↓

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

　

---

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

　

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

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

　

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

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

↓

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

↓

↓

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

　

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

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

　

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

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

請再繼續加油吧～

　

---

　

步驟九　剪裁左側直邊圖

　

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

↓

2.選取左側直邊圖範圍

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

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

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

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

↓

3.剪裁左側直邊圖

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

↓

↓

6.儲存左側直邊圖

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

　

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

---

　

步驟十　剪裁右側直邊圖

　

１.回到編輯工作面板

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

↓

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

↓

3.選取右側直邊圖範圍

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

↓

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

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

　

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

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

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

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

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

我的即時帳號：zz14723

　

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

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

～謝謝大家～

　

---

　

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

　

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

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

　

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

　

 

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