Aqua
Tabs
         by Mike DiPietro (mdipi)  |  5 July 2004

If you're like me and a huge fan of the whole Aqua look that Apple brought about with OS X but cant seem to get the tabs just quite right, then you have come to the right place to learn how to do them. In just two layers in Fireworks you can have some sweet Aqua tabs for what ever you want to use them for.

These are the tabs we are going to learn how to create:

[ the final aqua tab]

Here is How
Ok open up Fireworks and create a new document:

  1. Ok select the Rounded Rectangle tool and draw out the size of your tab.

  2. After you draw out the size of your tab open up the effects panel and choose "Linear" from the fill options drop down box.

  3. The first color of your gradient should be #CCCCCC and the last color should be White. After you select your colors, using the arrow tool (V) adjust the gradient to look like this:

[ set your gradient in this direction and make sure its just the length of your tab! ]

  1. Believe it or not - we are almost done. Next we are going to apply some styles to our shape. Go to the effects (in the Properties panel) and click the "+" sign, navigate to "Shadow and Glow" and choose "Inner Shadow," then match the setting with those below:

  2. Next navigate to the "Drop Shadow" effect and use the settings below:

     

  3. We aren't done yet, next create a new Rounded Rectangle that is around 80% the width and anywhere from 50-30% of the height of the original.
  4. Set the gradient to "White, Black" and fill it the same way we did earlier (having the gradient only extend the length of the shape).
  1. Set the layer style to "Screen" and you should be all set!

  2. You can add text to your button by putting it between the two layers and using the drop shadow settings below:

That's really all there is to it. 3 layers and you have a sweet Aqua tab button! Easy and fast huh? Play around with using other colors in the gradients and really make the effect yours!

If you need any help, post on the forums!

Have a good one!

Mike DiPietro (aka mdipi.com)
mdipi.com
 



 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.