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.

Quick Tip: Using Transparent PNGs For a Number of Effects

Hi.
Recently I am working on my new project for a client and the design required using a semi-transparent background for the drop down menus, from which you can see through the objects behind it. :) Since CSS prior to CSS3 doesn't offer a background color with opacity and there might be solutions which can get complex. A simple solution is to use a semi-transparent PNG (Portable Network Graphics) image as a background and set background properties like repeat and position as you need and you have a great looking drop-down menu background which is semi-transparent or with the opacity you have set.

you can either use Adobe Fireworks or Photoshop to create a PNG with opacity. I'll be postign tutorials but not sure of the timeline right now as projects have caught me up. The link to the semi-transparent drop down menu is  http://samnelson.biz/inland/

Take a look and let me know your comments.