最近,這種菜單好象很流行,不少網(wǎng)站都有了,這個(gè)菜單可以節(jié)約有限的空間,很有價(jià)值,經(jīng)常設(shè)計(jì)中要用到,今天有Fireworks 的初學(xué)者,來問怎么做這種菜單,所以順手做了一下,其實(shí)這樣的菜單不復(fù)雜,無非是漸變的填充,用 fireworks 強(qiáng)大的交互式填充工具來制

最近,這種菜單好象很流行,不少網(wǎng)站都有了,這個(gè)菜單可以節(jié)約有限的空間,很有價(jià)值,經(jīng)常設(shè)計(jì)中要用到,今天有Fireworks 的初學(xué)者,來問怎么做這種菜單,所以順手做了一下,其實(shí)這樣的菜單不復(fù)雜,無非是漸變的填充,用 fireworks 強(qiáng)大的交互式填充工具來制作,那簡直是手到擒來。另外矢量化修改,也很方便,所以 fireworks 非常適合 web 設(shè)計(jì)創(chuàng)作。
第一步,做底條,注意邊框顏色和漸變?cè)O(shè)置


第三步、做菜單條的突出效果。復(fù)制菜單條,去掉邊框色,調(diào)整一下漸變。考慮到還有缺口顯示,所以要做長一些,把深顏色加強(qiáng)。


第五步,做下面的檔條,缺口可以用筆工具來加節(jié)點(diǎn)調(diào)整,也可以畫一個(gè)正方形,轉(zhuǎn)45度后沖制,反正方法是多樣的。這個(gè)的漸變填充比較難一點(diǎn),大家看一下示意圖,并且多調(diào)整一下漸變填充的兩個(gè)節(jié)點(diǎn)看效果。


另外,為了加強(qiáng)缺角效果,需要再加一條深色的路徑。


哈哈。效果還不錯(cuò)。

