Thursday, September 08, 2011

Tutorial: Nav Button - Designing Buttons in Adobe Fireworks. FREE Source.

Designing navigation buttons in Adobe Fireworks using gradients and two squares with  little bit rounded corners. I recently used this button on my latest project www.april-laundry.com

"Right-Click - Open In New Tab" to view larger image.
To bring the effect of the semi-transparent cut in the middle of button, I have given the 2nd rectangle's 1st grandient color and opacity of 18% and the 2nd is 0% because it's already out of button dimensions and gives the upper color a light effect. The engraved arrow has an inner shadow, you can view the shadow color and values in the source file.

Download the source Fireworks PNG from the following link to get more insight.

Download Link: https://rapidshare.com/files/4143501687/btn_home.png
File Type: Adobe Fireworks Source PNG
Software Requirements: Min Fireworks 8.

3 comments:

  1. I enjoyed reading this a lot... I really hope to read more of your posts in the future, so I've bookmarked ,Thanks for commenting.,I am so excited,
    looked everywhere for a tutorial on adding this slider! Can't wait to see the others!
    dedicated hosting reviews

    ReplyDelete
  2. @bloghostingreview thanks for your appreciation. I'll post more stuff very soon.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete

Please post your thoughts :)