網站首頁 教育 學前教育 精緻生活 飲食養生 命理 科普教育 金融 歷史 影視 數碼 熱門資訊
當前位置:生活百科站 > 數碼 > 

fireworks怎麼製作一個圓角矩形的網頁導航條

欄目: 數碼 / 釋出於: / 人氣:2.43W

fireworks怎麼製作一個圓角矩形的網頁導航條?今天我們就來看看詳細的設計方法,主要是繪製矩形,新增漸變色等方面的知識。

fireworks怎麼製作一個圓角矩形的網頁導航條

1、首先開啟fireworks,新建一塊畫布,畫布顏色我選擇白色

fireworks怎麼製作一個圓角矩形的網頁導航條 第2張

2、然後在左側工具欄選擇“矩形工具”---->“圓角矩形”

fireworks怎麼製作一個圓角矩形的網頁導航條 第3張

3、然後在畫布上按住滑鼠左鍵拖曳畫出該矩形

fireworks怎麼製作一個圓角矩形的網頁導航條 第4張

4、然後我們有滑鼠點選選中該矩形,接著在下面的屬性面板,設定其填充型別為線性漸變

fireworks怎麼製作一個圓角矩形的網頁導航條 第5張

5、接著咱們點選顏料桶選擇漸變的顏色

fireworks怎麼製作一個圓角矩形的網頁導航條 第6張

6、然後咱們通過增加一個顏色控制器,把漸變顏色變成中間深,兩邊淺

fireworks怎麼製作一個圓角矩形的網頁導航條 第7張

7、這時候我們還不滿足,還要給它加一個陰影,點選選中該矩形,然後“編輯”---->“克隆”

fireworks怎麼製作一個圓角矩形的網頁導航條 第8張

8、這樣就會原地複製貼上一個矩形,你不信看圖層面板就可以了

fireworks怎麼製作一個圓角矩形的網頁導航條 第9張

9、這時我們把其中一個矩形用“選擇”工具拖曳下來

fireworks怎麼製作一個圓角矩形的網頁導航條 第10張

10、然後把下面那個矩形下面部分的不透明度改為0

fireworks怎麼製作一個圓角矩形的網頁導航條 第11張

11、接著改變另一邊的不透明度,使獲得一個好的陰影

fireworks怎麼製作一個圓角矩形的網頁導航條 第12張

12、得到這樣的效果

fireworks怎麼製作一個圓角矩形的網頁導航條 第13張

13、然後選中這兩個物件,右鍵選單中選擇“組合”

fireworks怎麼製作一個圓角矩形的網頁導航條 第14張

導航條是網頁必不可少的一部分,上面就是我們設計的一個高質量的、美觀的導航條。