Explore the Premium Content

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

Read More

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.

Read More

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.

Read More

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.

Read More

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.

Read More

Creating Panoramas in Fireworks

Panoramic photographs are not new - they've been around since the earliest days of photography.  Recently they've come back into vogue, with computer photo manipulation and digital photography.  There are an increasing number of applications for viewing and displaying panoramas, including a forthcoming viewer from the DMX Zone.  (See references at end). 

The websites about panoramas show examples of dazzling vistas of mountains or exotic beaches.  Really impressive.  But making one of your own can be a frustrating business.  This article is about how to create your own panorama, using Macromedia Fireworks (MX2004).  It applies also to Photoshop, but Photoshop(CS) has additional tools not available in Fireworks, so we'll take the "manual" approach here, and you'll learn more about the nuts and bolts of panorama making.

The exercise doesn't require high level expertise in FW, just the basics of selecting areas, doing a bit of Curves correction work, cropping, and a little bit of gradient masking.  It does, however, require care and attention to detail if you want to create a first class panorama.

Read More

A Journey with Fireworks 8

The End

We’ll start our journey with Fireworks by covering the new features and highlights of the recent Fireworks 8 release. Equipped with this knowledge we will delve into more specific topics and techniques.

I have been a Fireworks user since its very first release and I have contributed articles and chapters in various Fireworks publications. You may also have used some of the extensions I’ve written for Fireworks either explicitly by downloading them from my site at www.projectfireworks.com or implicitly since some of them ship with Fireworks. Also, I was the technical editor of the last of the “Fireworks Bible” series by Joe Lowery, but this is the first time that I sit down to share the knowledge and experience I’ve gained through the users of use of this fine application.

By the end of this series, I hope I will be able to transfer my knowledge to you so you can feel as confident as I am that you will be able to tackle just about any graphics-related tasks with Fireworks successfully.

Read More

Making friends with Bezier curves

If you've come to Fireworks from a bitmap graphics application, you may at first glance find vector graphics counter-intuitive.  One of the more confusing aspects of vector objects are Bézier curves. These allow you to create curved vector objects and are an essential tool in all vector work.  This article is about how to control Bézier curves in Fireworks, how to create the controlling handles for the curves, and how to switch between the different types of handle.  When you master these, you'll have complete control over creating vector shapes in Fireworks.

If you're familiar with Freehand or Illustrator, vector objects will be old friends, though you may wish to follow through this article as a guide to Fireworks-specific controls.

Read More

Fireworks MX & MX2004: Fun with Productivity Part 2

Web graphics need to be sliced, diced, optimized, and put back together. In the first article we talked about before the design phase - abusing our Properties panel, and preparing designs using safe sizes. This article covers productivity tips for during and after our design phase, with awesome time-saving shortcuts that work in both Fireworks MX & MX2004, and most likely Fireworks 8. Speaking of Fireworks 8, you may not need that new Image Editing panel after I show how to do all those shortcuts. Cutting down production time may make production a bit more fun, just don't tell your clients!

Read More

Text Removal from Images

There will come a time in your design career where you will be presented with an image and asked if you can alter it to remove the text. It's happened many times in mine, and not always from a business point of view, sometimes it's a friend who wants a poster making, but the image he's found has loads of text on it etc.. DVD covers, CD's and so on all fall into this category.

So it's handy to know how to take this image and transform it into something resembling its original state.

The image I will be working on in this article is from the soundtrack cover of 'The Merchant of Venice' starring Al Pacino. It's a nice image, with lots of colour blends, so we have our work cut out for us. But with a little patience and using a lot of CTRL+Z (to go back in history when you make a mistake), you should get this edited and looking great in around 30 minutes or so.

Read More

Fireworks MX & MX2004: Fun with Productivity - Part 1

It's no secret, when designing a site, your graphics need to be sliced, diced, optimized, and even put back together in our (X)HTML pages. In a previous article, Things you should know about FW (part 1), I covered basics of features like Symbols and Styles, perfect for during the production process. Now, I'm going to show how we can chop down more grunt work areas before and after we draw any of our cool ideas; we'll be more productive thanks to Fireworks. This article shows productivity tips that work in both Fireworks MX & MX2004.

  • Learn where and what shortcuts (not keystrokes) provide you less mouse strain.
  • Learn “safe sizes” for designing web-pages, making sure they fit in each popular browser nicely.
  • Take “safe sizes” to another level of productivity, utilizing a free FW extension.
  • Learn to batch process like a pro.
Read More

Things you should know about Fireworks MX & MX2004 - Part 2

This article is the second in a series for Macromedia Fireworks MX/MX2004 showing how the other half of your Studio MX/MX2004  works! Features of both MX/MX2004 versions of Fireworks (FW) are covered, ranging from beginner to intermediate tools. This series can also be considered a “what's new” in FW MX2004.

This article assumes you have little knowledge of Fireworks, and that you are at least familiar with general web graphics. The first article covered the first-half of most tools in FW, this article covers more bitmap and vector tools and features in MX (Find & Replace, Textures & Patterns, Layers & Vector Masks, Automation), and new features in MX2004 (Custom hand-code & Server-Side code support, FTP & Check-In/Check-Out, and more).

Read More
Older articles