How to design 2D shapes with Macromedia Fireworks

There is a thing know as over kill in design but from time to time it is nice to have a little eye candy. Now with that said Macromedia Fireworks is the best and easiest way to create great looking 2D graphics. Open Fireworks and create a new blank page, make the page size 400 X 400 Pixels at a default of 72dpi for web use. Set the background to white and then click the OK button.

What were going to do is make a 2D button with a drop down function called a Pop up Menu.

  1. Step one select the drawing tool on the left side toolbar called the rounded rectangle and drag and draw a rectangle
  2. Then set the size to 200 X 25 pixel in the properties panel group located at the bottom of your screen
  3. Set the color to a light blue color value #0099ff and set the border to transparent.
  4. Go back to the properties panel and set filters bevel emboss Inner Bevel to a smooth setting with a 17%, 8% softness and with an angle of 135°.
  5. Then drag the corner radius point to full radius
  6. On the new image place the text My Button just like the example below. notice I put a drop shadow on the button copy this helps with the read ability.

2D graphics Button

  1. Now it time to put the drop down feature on the object just click the Edit - Insert - Hotspot or Ctrl-Shift-U.
  2. When you select the hotspot you will notice a small white circle if you click it a list of options appears, select Add pop up menu.
  3. Click inside the Text fields and type Link One since this is just a test button type any link you want such as http://www.msn.com in the target field select _ blank.
  4. Do the same process until you have Link two and Link Three
  5. If you want a sub directory just select the first field of the one you want and click the Indent menu tool.
  6. Click Next and adjust the appearance any way you want but try o keep the same color values as the original colors we used. If you select the image radio button at the top of the window you will have many more options for design.
  7. Click Next in the Advanced Tab you will set the height, padding, and borders Set the shadow to a light blue and the border to 1px and a medium gray.
  8. Now lets set the position for the drop down section of our button. Click Next and select Bottom of Slice and for submenu select bottom right.
  9. Click Done; You will notice a highlighted section below your button if you want to see how it will look in the browser here is the process. First save the file and name it My Button then click File - Preview in Browser - and Select iexplorer.exe

Finished Button Example Below