DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> 用Fireworks MX制作圓角矩形六法
用Fireworks MX制作圓角矩形六法
編輯:Fireworks基礎     
如果您有疑問或建議,請進入技術討論區交流 >>>

網頁制作中經常用到圓角矩形——兩角圓弧形、兩角直角形(如圖1),筆者總結了六種簡便、實用的制作方法,現介紹如下:

????一、菜單命令

????1、選取工具箱的圓角矩形繪制工具,繪制一個圓角矩形;

????


圖1

????2、繪制一個直角矩形,放置到圓角矩形需要產生直角的那一端,位置擺放如圖2所示;

????


圖2

????3、同時選定兩個對象,執行菜單命令“Modify→Combine Paths→Punch”,效果已經出現了,請看圖3。

????


圖3

????二、修改圓角矩形角度

????1、繪制一個圓角矩形;

????2、選定該圓角矩形,按下快捷鍵“Ctrl+Shift+D”,原地克隆一個相同的圓角矩形,將克隆對象向下拖動一段距離(如圖4);

????


圖4

????3、選定克隆對象,在下方的PropertIEs(屬性)面板中,將Rectangle Roundness的數值調整至“0”把該圓角矩形的角轉變為直角,這樣,圓角矩形就變成了直角矩形;

????4、按下快捷鍵“Crtl+A”同時選定編輯區的兩個對象,執行菜單命令“Modify→Group”,將兩個矩形組合在一起,這樣圓角矩形就制作成功了。

????換一種思考方式,如果首先繪制的是一個直角矩形,采用相同的操作步驟,調整角的度數由直角變為圓角,同樣實現圓角矩形的制作。

????三、使用工具箱的Knife

????1、繪制一個圓角矩形;

????2、選定圓角矩形對象,然後選取工具箱的Knife工具,沿著水平方向對圓角矩形進行切割(如圖5);

????


圖5

????3、切割完畢,可以清楚地看到,圓角矩形已被分成兩大部分了,從路徑節點的顯示情況就可以說明這一點了;

????4、使用“選取工具”將兩個部分分別拖開,需要的部分留下,不需要的部分當然喀嚓掉了——刪除!

????四、利用Mask(遮罩)工具

????1、繪制一個圓角矩形;

????2、選取矩形工具再繪制一個直角矩形,以能夠覆蓋住圓角矩形的一半大小為佳,如圖6所示;

????


圖6

????3、選定直角矩形,按下快捷鍵“Ctrl+X”剪切它,再選定圓角矩形,然後執行菜單命令“Edit→Paste as Mask”,這樣我們需要的效果就已經出現了。

????五、利用圓角矩形與直角矩形的組合

????1、繪制一個圓角矩形和一個直角矩形,兩個矩形的寬度一樣;

????2、調整兩個矩形的位置,使兩個矩形交錯重疊,圓角矩形在上部,直角矩形在下部(如圖7);

????


圖7

????3、按下快捷鍵“Ctrl+A”同時選定兩個矩形,再按下快捷健“Crtl+G”將兩個矩形組合在一起,這樣圓角矩形就制作成功了。

????前面介紹的五種方法,簡便、實用性強,比較而言,下面介紹的第六種方法更具代表性,是最簡單的一種。

????六、利用工具箱的Crop工具

????1、繪制一個圓角矩形;

????2、選擇工具欄中的“Crop工具”,將圖像的上半部分選中,調整好大小(如圖8):

????


圖8

????3、雙擊選中部分進行剪切,大功告成。

????上述六法,各具特點,或簡單,或復雜,分別應用了不同的命令,達到了相同的目的,實屬殊途同歸,啟發我們遇到問題多加思考,一定能夠找到解決的辦法。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved