How to Create a Glossy Pro Button

In this easy, step-by-step tutorial I’m going to show you how to design a simple, professional & glossy “Download” button. I’m just using download as an example here, it’s really a multi-purpose button. These kind of buttons are also being used a lot on “Web 2.0″ sites lately, so get with the times!


Note: This tutorial has been created with Fireworks CS3 and is valid for lower versions

Free - Rounded Corners in Fireworks CS3

In this tutorial you'll learn how put a rounded corner frame around an image in Fireworks CS3.

This tutorial is brought to you by Joyce J Evans and

Watch the movie read more

Free - The New Pages Feature Part 2

This tutorial picks up after the Exporting from Fireworks tutorial. You'll see what the client comp looks like in the browser and how Fireworks CS3 can used as a comping tool.

This tutorial is brought to you by Joyce J Evans and

Watch the movie read more

Free - The New Pages Feature

You can now do an entire site mock up including pages. No more having to use frames with over lapping slice issues! Each page has it's own web layer.

Watch the movie read more

Free - From Photoshop to Fireworks

In this tutorial you'll learn how to use your CS2 or CS3 Photoshop web layouts right in Fireworks! Preserve layers, effects, masks and even slicing guides.

Watch the movie read more

Free, Fading an image to the Background with Fireworks 8

One of the questions I most frequently get asked is "How do I fade an image into the background?" In this tutorial you'll learn how to fade an image into the background using Fireworks 8. Two different images and several techniques are taught.

The movie is 20 megabytes so it will take a couple of minutes to load.

Watch the movie read more

Free! - Text on Path using Fireworks 8

Have you wondered how to get text to wrap around a curve? How about editing the curve and the text without removing the path? You can do some pretty cool stuff using Fireworks 8. In this movie you'll see how to do all these things plus put text on the top of an ellipse and the bottom!

View the movie>> 

Free! - Extracting a shape from a background in Fireworks using the pen tool

This video tutorial  shows you how to extract a shape from a background in Fireworks using the pen tool. Please be patient as the video might take a while to load.

An excerpt from "Web Page in a Day!" (

Where you learn how to build an entire web site from start to finish. The design is extremely flexible and you also learn how to edit it quickly using your own images. The design is done using CSS and NO tables.


Masking in Fireworks

Introduction to Masks

Masks are one of the most useful tools in Fireworks. They make it easy to cut out or hide away parts of your work, without having to destroy the original image. This saves you on those Undo commands and means that it's easier to tweak at a later date, when your boss inevitably asks for an alteration...

This tutorial is a beginners introduction to the use of Masks in Macromedia Fireworks MX (and later). It assumes no prior knowledge of Masks (though maybe a little familiarity with Fireworks) and take you through from first principles.

Throughout this tutorial we'll be using the photo of the Meerkat to demonstrate a few of the ways you can use Masking techniques:

I've included him here un-altered, so that you can follow along with the examples more easily.

Constructing a website banner - a case study

Anyone who designs websites for a living, or who has built their own website, has faced the need to design and build a banner for the homepage (and for the rest of the site, usually). Banners can play a vital role in the success of the website.

There are two stages to the process, the design and the construction.  This article is about using Fireworks MX (or later) to accomplish the task.  It focuses more on the technical aspects than the aesthetic.  It uses a real-world client project as the basis for the design.

To mask, or not to mask. That is the question!

One of the big milestones in your Fireworks graphics expertise is the technique of using masks to isolate a portion of an image. It’s almost a right-of-passage, and it isn’t always easy to use. Fireworks has many useful methods for building image masks but this article isn’t about those—instead, it’s a method you can use that simulates a mask without the drawbacks associated with masks. And while I am not saying you shouldn’t use masks (where, oh, where would we be without them!) what I am saying is that sometimes a mask is more of a pain to use—even in Fireworks—than it needs to be.

Fireworks for Basic Photo Correction

As a web developer or designer, you'll have no doubt come across this situation. The company has a press release and to go with it there's a photo. They didn't have time for a professional photographer, so one of “the guys” took a picture with a handy digital camera. It looked OK on the tiny screen at the back of the camera, turns out it came through a bit wrong. Unfortunately they really want it on the web site...

This tutorial is a guide to cleaning up just such a photo for the web with Firework's various image filters and effects. I'll introduce the different kinds of filters, then show you some typical problems and how you might want to fix them. It's aimed firmly at somebody who's new to Macromedia Fireworks, old hands will know this already. This tutorial was written with Fireworks MX 2004, but is equally appropriate to older or later versions as the principles remain the same.

Older articles