DesignTips > > How to Create Buttons in Fireworks

How to Create Buttons in Fireworks

How to Create Buttons in Fireworks

In this section we will introduce you how to create simple and modern wen buttons.

They are very simple but the natural gradations and shadows make them look professional. This is the technique you will be using often. Try mastering it.

Step01 Create Rectangle with Fireworks Rectangle Tool

Start Fireworks and draw a rectangle with Rectangle Tool.

This will be the size of the web button. Set any size you like.

Step02 Apply Black and White Gradation

Apply black and white gradation on the created rectangle.

Change the [Paint Bucket] on the right of canvas color to [Gradient > Line Form] and apply gradation like the example above.

Step03 Photoshop Live Effect

Select the rectangle and click [Property > Filter (Click +) > Photoshop Live Effect].

[Photoshop Live Effect] dialog box opens. Select [Drop Shadow]. Set the settings like above, click OK.

Step04 Drop Shadow Applied on Button!

[Drop Shadow] is applied on the web button!

Now the web button base is completed.

Step05 Pick Button Color

Next, pick a color for web button.

Select the web button and click [Property > Filter > (Click +) > Adjust Color > Saturation/Hue].

[Saturation/Hue] dialog box opens. Set the setting like above. By sliding the saturation, hue, and brightness sliders, the button color changes. Pick any color you like.

Step06 Insert Text on Button

Lastly, insert text in the web button and the task is completed. Use white text color (#FFFFFF).

Done!

Now we have simple yet beautiful web buttons.

The slight gradation and shadow are beautiful.

You can use these web buttons at once for a professional purpose. Please try.

この投稿文は次の言語で読めます: Chinese (Simplified), Japanese

How to Create Halloween Jack O’ Lantern Illustration (Illustrator)
How to Create Halloween Ghost Illustration (Illustrator)
How to convert a photo into black and white (monochrome) 3 (Photoshop CS5)
How to convert a photo into black and white (monochrome) in 30 seconds 2
How to convert a photo into black and white (monochrome) 3 (Photoshop CS5)
How to Create Retro Photo in Photoshop
How to convert a photo into black and white (monochrome) in 30 seconds 2
How to convert a photo into black and white in Photoshop 1
How to Create Retro Picture in Photoshop