For this tutorial, this is our target result. The settings used in this tutorial will be based and aimed at getting this result, but you are free to change any part of the tutorial depending on your preference.

I’m sure you’ve seen plenty of these types of graphics around the web, mostly on some web designer’s advanced personal portfolio. I learned this from a multitude of sites around the net so.. I wanna make that clear first, ok?

——————————————–

- run Fireworks, and create a document with 500×200 (wxh).

- create a rounded rectangle by using the Rectangle Tool (see image). If the rectangle tool is not selected, long press on it and wait till the context menu appears, then choose Rounded Rectangle Tool.

- drag the cursor on the canvas to make your rounded rectangle, and then change the backcolor and the line color. Don’t forget to change the thickness of the line to 2. See this:

- by using the Text tool, type ‘Login’ or anything that you want then put it in the center of the rounded rectangle. It should now look like this:

- create another rounded rectangle. It should be the same width as the button, but half of it’s height. The backcolor and line color should be set to white. Place the new rounded rectangle on top of the button, like this:

- to be able to achieve our desired effect, you have to change the opacity. To change it, on the Properties tab, change the opacity to 30 from 100 (see pic)

after that, it should look like this:

- As you can see, we can leave it as it is already. But for it to be able to resemble those web buttons with reflections, we should proceed to the next steps.

- Group the symbols by selecting all (Ctrl A), right click and then click Group in the pop up menu.

- Once grouped together, create a duplicate by copying and pasting it. Place the duplicate directly below the original, with only a couple of spaces in between.

- Right click on the duplicate (the one below) and then click Transform > Flip Vertical from the context menu. It should now look something like this:

- next, we need to flatten the layers of the duplicate so that we can cut it in half. Now, there probably is a better way to achieve this effect (cutting in half) but as I’m not aware of it, I’ll stick with how I do it. To flatten the layers, click on the duplicate and choose Flatten Selection.

- with the eraser tool, erase the bottom half of the duplicate. It doesn’t have to be too accurate. After erasing, it should now look like this:

- Now, click on the duplicate again, and repeat the steps before and change the opacity from 100 to 35 or 40.

And that’s it! Yey! Hooray to glassy buttons with reflections. Of course, you can try this over again with different colors and text and button shapes. It’s all up to you now.

For questions, please feel free to leave a comment.