用 Fireworks 做雅虎菜單

來源:互聯網
上載者:User
菜單|雅虎

最近,這種菜單好象很流行,不少網站都有了,這個菜單可以節約有限的空間,很有價值,經常設計中要用到,今天有Fireworks 的初學者,來問怎麼做這種菜單,所以順手做了一下,其實這樣的菜單不複雜,無非是漸層的填充,用 fireworks 強大的互動式填充工具來製作,那簡直是手到擒來。另外向量化修改,也很方便,所以 fireworks 非常適合 web 設計創作。

第一步,做底條,注意邊框顏色和漸層設定

第二步、做菜單條。其實就是複製一下底條,調整長寬和填充。

第三步、做菜單條的突出效果。複製菜單條,去掉邊框色,調整一下漸層。考慮到還有缺口顯示,所以要做長一些,把深顏色加強。

第四步、做菜單條的投影。複製剛做的填充,轉180度,調整長寬和漸層。

第五步,做下面的檔條,缺口可以用筆工具來加節點調整,也可以畫一個正方形,轉45度後沖制,反正方法是多樣的。這個的漸層填充比較難一點,大家看一下示意圖,並且多調整一下漸層填充的兩個節點看效果。

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

第六步、就剩下加文字和加分隔條了。

哈哈。效果還不錯。

源檔案下載



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。