Fireworks

Create a Stone Effect for Text Free!
Reader Level: Reader Level

Creating text that looks like it was carved out of stone is easy and takes only minutes with Fireworks!

The TwentyEleven Wordpress Series: Part 3
Reader Level: Reader Level

Welcome back to the Twenty Eleven Wordpress series! In this tutorial you will continue developing the graphics for the Safari African Adventures Wordpress site. Using the new CSS Properties panel you will also extract rules to put together a style guide that you will later use as the basis of the Wordpress CSS document. Finally, you will export a PDF for the client, as well as the graphics you will need for the production site.

The TwentyEleven Wordpress Series:
The TwentyEleven Wordpress Series: Part 1 - Introduction
The TwentyEleven Wordpress Series: Part 2
The TwentyEleven Wordpress Series: Part 3
The TwentyEleven Wordpress Series: Part 4
The TwentyEleven Wordpress Series: Part 5

Neon Text Effects Free!
Reader Level: Reader Level

Neon text effects make effective logos and are lots of fun to create!

The TwentyEleven Wordpress Series: Part 2
Reader Level: Reader Level

Welcome back to the Twenty Eleven Wordpress series! Before you dig into Wordpress itself, you're going to do a bit of preparation work in Fireworks. Though this is not a completely exhaustive Fireworks tutorial, even those who have little experience with the program should become quite comfortable with using it for developing a layout by the time they work through parts two and three of this series.

This tutorial guides you through installing the new CSS3 Mobile Pack for Fireworks and building the basic Safari African Adventures layout. There is a support_files folder that includes all assets as well as examples of the work in progress.

The TwentyEleven Wordpress Series:
The TwentyEleven Wordpress Series: Part 1 - Introduction
The TwentyEleven Wordpress Series: Part 2
The TwentyEleven Wordpress Series: Part 3
The TwentyEleven Wordpress Series: Part 4
The TwentyEleven Wordpress Series: Part 5

Inked Stone Free!
Reader Level: Reader Level

Sometimes it's the simplest of techniques that produce the best effects. In this tutorial I'm going to show you and quick and easy way to create an inked header like those you might see in a cartoon strip using Fireworks.

Creating a Hot Metal Effect in Fireworks Free!
Reader Level: Reader Level

This effect is easy to recreate and results in a sophisticated looking graphic. It works best with slim, square sans serif fonts, like Ray Larabie's Neuropol, against a medium to dark background color.

Fireworks Mobile Design Tip: Batch Processing App Icons in Fireworks
Reader Level: Reader Level

In this tutorial, we'll look at how to batch process those flattened images into three different sizes, and how to automate that process for future work. This mobile project requires three sets of icons at different sizes for an Android application. Well, Fireworks excels at this type of workflow and produces very small files to boot.

Read long to learn more.

Fireworks Mobile Design Tip: Exporting Layers to Files
Reader Level: Reader Level

Aside from using Fireworks pages to mock up wireframes and prototypes, FW also has many other built-in features that can really help with any kind of prototyping, especially mobile.

A couple of these features are:
  • Exporting layers to files
  • Batch processing for mobile

In this tutorial we'll look at exporting layers to files, specifically referencing icon graphics that might be used in a mobile application.



Creating a Hanging Indent in Fireworks Free!
Reader Level: Reader Level

I was reading a post in the Adobe Fireworks user forum a day or so ago. Someone was concerned that Fireworks text controls were so limited that one could not create a hanging indent. Well, if you know anything about me, as soon as I hear a complaint or concern about my favorite Adobe app, I begin a fact-checking mission.

Tag along, faithful reader, to learn more about hanging indents in Adobe Fireworks.

Update Your Twitter Home Page Using Fireworks Free!
Reader Level: Reader Level

A couple years ago I created my first Twitter home page background image using Fireworks as my design tool. The goal was to use the background image as a branding tool by supplying a mini-bio on the Twitter page, in what looked like a little content pod. The background of the background image was one of my photos from up north, faded into the web page background color. And it was fine at the time.

Some time ago, Twitter revamped its site, leaving less of the background image visible on the average monitor. In fact, on my 15 inch Macbook Pro, the actual Twitter content was overlapping my old mini bio. Not good visually, or for branding.

So, knowing I had to do something, I decided to create an entirely new background page using more of my photos – a collage effect – that would be more interesting, and would still be appealing on larger/higher resolution monitors.

And of course, I planned to do the majority of the work in Fireworks. :-)

Follow along in this tutorial as I show you, step by step, how I built my new Twitter background page, using not one - but three - Creative Suite applications.

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 8: Solving the Puzzle
Reader Level: Reader Level

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

Today we're going add the code that will detect when the puzzle is completed and reward the user by playing a sound. We'll also add in some timing so that we can let them know how long it took to finish.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 8: Solving the Puzzle

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II
Reader Level: Reader Level

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

Today we're going to finish implementing our "group dragging" in order to make the puzzle as intuitive and user-friendly as possible.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II

Fireworks Symbols and Why They Are So @$#$!! Cool - Part 3
Reader Level: Reader Level

In this tutorial we'll tackle one of the other cool symbols - the button symbol.

A button symbol can hold up to four different states to represent typical button interactivity: Up, Over, Down and Over While Down. These states are all contained within the symbol itself, so you don't normally see the extra states in the main page design.

Button symbols can be used for linking as well as visual interactivity and can be a real time-saver when creating a prototype.

In this tutorial you'll learn about the benefits of button symbols, how to create and edit one from scratch, as well as gain skills in a variety of other areas such as:
  • Extending the canvas
  • Altering layout
  • Adjusting gradients
  • Linking sub pages to the master page
  • Customizing the rounded rectangle
  • Path editing
  • Creating button symbols
  • Aligning objects
  • Organizing layers
  • Moving content between layers

Approximate download size: 32MB

The Fireworks Symbols Series:
Fireworks Symbols and Why They Are So @$#$!! Cool - Part 1
Fireworks Symbols and Why They Are So @$#$!! Cool - Part 2
Fireworks Symbols and Why They Are So @$#$!! Cool - Part 3



Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces
Reader Level: Reader Level

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

Today we're going to add one of the most important enhancements yet: the ability to drag "snapped together pieces" around as groups. This will help make the puzzle more intuitive to use and more fun and friendly to solve.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5 - Randomization and HTML5 Audio
Reader Level: Reader Level

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to spend a bit of time on the subtle but important details: randomizing the order of the pieces on load, and adding some sound-effects.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II

Fireworks Symbols and Why They Are So @$#$!! Cool - Part 2
Reader Level: Reader Level

In the first segment of this series, I talked about what Fireworks symbols are and how they can speed up your workflow.

In this segment, we'll build on the slideshow mock up to add a second page (detail page) and create interactivity for move between the two pages. While building the second page, we'll also create two more symbols, one of which we will nest into the third symbol. Sound completely @$#$!! cool? I thought so, too! Let's get started.

The Fireworks Symbols Series:
Fireworks Symbols and Why They Are So @$#$!! Cool - Part 1
Fireworks Symbols and Why They Are So @$#$!! Cool - Part 2
Fireworks Symbols and Why They Are So @$#$!! Cool - Part 3

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Reader Level: Reader Level

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to refine our puzzle by adding "snapping" to each piece so the user gets a visual clue each time they put a one the right place. Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to spend a bit of time on the subtle but important details: randomizing the order of the pieces on load, and adding some sound-effects.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II

Fireworks CS5 Classroom in a Book Excerpts - Part 6: Working with Flash Catalyst Free!
Reader Level: Reader Level

I've released a series of excerpts from the book, which began with Button Symbols and now concludes in Part 6 with this segment on Fireworks and Flash Catalyst. This excerpt is from Chapter 13, Going Further.

The Fireworks CS5 Classroom in a Book Series:
Fireworks CS5 Classroom in a Book Excerpts - Part 1: Button Symbols
Fireworks CS5 Classroom in a Book Excerpts - Part 2: The Compound Shape Tool
Fireworks CS5 Classroom in a Book Excerpts - Part 3: Prototyping
Fireworks CS5 Classroom in a Book Excerpts - Part 4: Fireworks and CSS Export
Fireworks CS5 Classroom in a Book Excerpts - Part 5: Working with Device Central
Fireworks CS5 Classroom in a Book Excerpts - Part 6: Working with Flash Catalyst

Fireworks CS5 Classroom in a Book Excerpts - Part 5: Working with Device Central Free!
Reader Level: Reader Level

I'm releasing a series of excerpts from the book, which began with Button Symbols and now continues in Part 5 with a segment on Fireworks and Device Central integration. This excerpt is from Chapter 13, Going Further.

This excerpt, also part of Chapter 13, is one of the lengthier ones (about 45 pages), and covers the integration between Fireworks and Device Central:

  • Launching Device Central from Fireworks
  • Browsing for a device profile
  • Generating a Fireworks document from a device profile
  • Previewing designs in Device Central

The Fireworks CS5 Classroom in a Book Series:
Fireworks CS5 Classroom in a Book Excerpts - Part 1: Button Symbols
Fireworks CS5 Classroom in a Book Excerpts - Part 2: The Compound Shape Tool
Fireworks CS5 Classroom in a Book Excerpts - Part 3: Prototyping
Fireworks CS5 Classroom in a Book Excerpts - Part 4: Fireworks and CSS Export
Fireworks CS5 Classroom in a Book Excerpts - Part 5: Working with Device Central
Fireworks CS5 Classroom in a Book Excerpts - Part 6: Working with Flash Catalyst



Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Reader Level: Reader Level

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to make our puzzle more challenging by changing the orientation of the pieces and letting a user rotate them manually to where they should be. Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to spend a bit of time on the subtle but important details: randomizing the order of the pieces on load, and adding some sound-effects.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II

Fireworks CS5 Classroom in a Book Excerpts - Part 4 - Fireworks and CSS Export Free!
Reader Level: Reader Level

I'm releasing a series of excerpts from the book, which began with Button Symbols and now continues in Part 4 with a segment on Fireworks and CSS and discusses the things to keep in mind if you are planning - or hoping - to export your completed Fireworks design as a CSS-based layout. This excerpt is from Chapter 8, Optimizing for the Web.

The Fireworks CS5 Classroom in a Book Series:
Fireworks CS5 Classroom in a Book Excerpts - Part 1: Button Symbols
Fireworks CS5 Classroom in a Book Excerpts - Part 2: The Compound Shape Tool
Fireworks CS5 Classroom in a Book Excerpts - Part 3: Prototyping
Fireworks CS5 Classroom in a Book Excerpts - Part 4: Fireworks and CSS Export
Fireworks CS5 Classroom in a Book Excerpts - Part 5: Working with Device Central
Fireworks CS5 Classroom in a Book Excerpts - Part 6: Working with Flash Catalyst

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Reader Level: Reader Level

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and light-weight puzzle from scratch.

In today's article we'll take the pieces we created in Part 1 and through a bit of jQuery and CSS turn them into a basic interactive jigsaw puzzle. Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to spend a bit of time on the subtle but important details: randomizing the order of the pieces on load, and adding some sound-effects.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II

Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1 Free!
Reader Level: Reader Level

Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and light-weight puzzle from scratch.

In today's article we're going to start building our puzzle by taking an image and cutting it up into individual jigsaw pieces using some handy Fireworks features and extensions. Every now and again a client will come to you asking for a seemingly simple thing that turns out to be far more difficult and complex than you'd ever imagined. Today we're going to start looking at one classic example: how to make an interactive jigsaw puzzle. While there are many examples on the web of puzzles based in Flash or on "straight sided pieces" (which really isn't a jigsaw puzzle is it?) there are few examples around of how to make a more realistic and lightweight puzzle from scratch.

In today's article we're going to spend a bit of time on the subtle but important details: randomizing the order of the pieces on load, and adding some sound-effects.

The Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery Series:
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 1
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 2
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 3
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 4
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 5: Randomization and HTML5 Audio
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 6: Grouping Pieces I
Creating an Interactive Jigsaw Puzzle with Fireworks and jQuery - Part 7: Grouping Pieces II

Fireworks CS5 Classroom in a Book Excerpts - Part 2: The Compound Shape tool Free!
Reader Level: Reader Level

I'm very happy to say that my Adobe Fireworks CS5 Classroom in a Book (CiaB) has been getting very positive reviews from teachers and Fireworks users alike. I'm even happier to share some excerpts from the book with all of you, thanks to Peachpit Press.

I'm releasing a series of excerpts from the book, which began with Button Symbols and now continues with with my segment on the Compound Shape tool.

The Compound Shape tool is a very cool feature in Fireworks CS5, giving you the ability to create complex vector illustrations and designs using simple vector objects. Rather than drawing complicated vector shapes, you can use the Compound Shape tool to temporarily group multiple vector objects together. The objects retain their individual editability, but can be moved around as a single grouped object.

The Fireworks CS5 Classroom in a Book Series:
Fireworks CS5 Classroom in a Book Excerpts - Part 1: Button Symbols
Fireworks CS5 Classroom in a Book Excerpts - Part 2: The Compound Shape Tool
Fireworks CS5 Classroom in a Book Excerpts - Part 3: Prototyping
Fireworks CS5 Classroom in a Book Excerpts - Part 4: Fireworks and CSS Export
Fireworks CS5 Classroom in a Book Excerpts - Part 5: Working with Device Central
Fireworks CS5 Classroom in a Book Excerpts - Part 6: Working with Flash Catalyst

Fireworks CS5 Classroom in a Book Excerpts - Part 1: Button Symbols Free!
Reader Level: Reader Level

I'm very happy to say that my Adobe Fireworks CS5 Classroom in a Book (CiaB) has been getting very positive reviews from teachers and Fireworks users alike. I'm even happier to share some exceprts from the book with all of you, thanks to Peachpit Press.

I'll be releasing a series of excerpts from the book, starting with my segment on the Button Symbols.

Future excerpts will include:

  • Button Symbols
  • Using the Compound Shape tool
  • Prototyping workflow
  • Delivering the wireframe to the client
  • Fireworks and CSS export
  • Previewing in Device Central
  • Exporting to Flash Catalyst

This excerpt covers how to create, edit and use a button symbol. You'll also learn a bit about using Styles, optimizing, and how to preview the effect.

The Fireworks CS5 Classroom in a Book Series:
Fireworks CS5 Classroom in a Book Excerpts - Part 1: Button Symbols
Fireworks CS5 Classroom in a Book Excerpts - Part 2: The Compound Shape Tool
Fireworks CS5 Classroom in a Book Excerpts - Part 3: Prototyping
Fireworks CS5 Classroom in a Book Excerpts - Part 4: Fireworks and CSS Export
Fireworks CS5 Classroom in a Book Excerpts - Part 5: Working with Device Central
Fireworks CS5 Classroom in a Book Excerpts - Part 6: Working with Flash Catalyst



Fireworks Symbols and Why They Are So @$#$!! Cool - Part 1 Free!
Reader Level: Reader Level

Re-usable graphic elements in Fireworks are referred to as symbols. Fireworks has three types of symbols: graphic, animation, and button. When you edit the original symbol object, the copied instances automatically change to reflect the edited symbol (unless you break the link between the two).

Symbols are also helpful for creating buttons and animating objects across multiple states. They're a huge feature in Fireworks and can save you a lot of time when you designing a web site, an application interface or even just being creative.

In this tutorial, we'll look at how creating one simple symbol can ease the production of a slide show application or web gallery. We'll even make use of stock Fireworks effects and commands to get the job done.



The Fireworks Symbols Series:
Fireworks Symbols and Why They Are So @$#$!! Cool - Part 1
Fireworks Symbols and Why They Are So @$#$!! Cool - Part 2
Fireworks Symbols and Why They Are So @$#$!! Cool - Part 3

CMX Jumpstart: Lucknow
Reader Level: Reader Level

Lucknow is, of course, renowned for its blue lights, and the colour theme is based around this.

Lucknow provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system, to the built-in accordion and flexible column choice, Lucknow has it all.

(Not so) Scary Ghosts 'n Goblins - Part 8
Reader Level: Reader Level

In this long-running series, I've shown you how to create all sorts of spooky artwork for Halloween, just using Fireworks. Well, be prepared to be frightened beyond belief in this episode, as we leave the warm embrace of Fireworks and enter the dark, foreboding realm of Photoshop . . .

Follow along in this tutorial as we distort the very fabric of the spirit world itself, warping it for our own devious machinations by using the monstrous Puppet Warp tool! Bwa ha ha ha ha!

Ok, admit it, that sounds pretty scary, right? A little, maybe? Well seriously, I do like Photoshop as well as Fireworks and I found a pretty neat way to add a little more life to the undead using the Puppet Warp tool. So tag along and see what we can do by working with both Fireworks and Photoshop.

Final distorted ghost.

Add Some Noise in Fireworks!
Reader Level: Reader Level

This is a little technique to add some subtle detail to your next project. Adding a little noise to the graphics provides some texture to the layout and gives it a depth that wouldn't be there in a plain or solid background.

It's 5 O'Clock Somewhere - a Fireworks CS5 Vector Project
Reader Level: Reader Level

I'm really enjoying the new Compound Shape tool in Fireworks CS5, and I've got a quick tutorial here to help you get more comfortable with using it.

Aside from my Hawaiian shirts, I'm known to enjoy the odd martini here and there. Recently I was staring at a (sadly) empty martini glass, and thought hey, the shape of this glass in profile is pretty simple. I bet I could slap together a martini icon pretty quickly in Fireworks.

And so I did.

screen grab of final martini glass



Follow along in this tutorial as we quickly put together a symbol of a delectable beverage, using the Compound Shape tool.

Creating a Vertical Scroller Component in Fireworks
Reader Level: Reader Level

In this video tutorial, we'll look at how to move assets from Fireworks over to Flash Catalyst, and turn those assets into an interactive scroll panel.

Resolving the "_s1" Suffix Problem in Fireworks CS5
Reader Level: Reader Level

Fireworks CS5 has brought some cool new features to the table, but one of those new features is causing a bit of a ruckus within the Fireworks user community. State naming.

Prior to CS5, if you had multiple states in your document, Fireworks would automatically append a suffix to any state after state one. You could control what that suffix would be in the HTML Setup dialog box by picking from a list.

But as of CS5, when exporting HTML, you now have the added option to enter custom state names in the HTML Setup dialog box–useful when exporting for jQuery-based state naming, or other custom naming. While this is cool, something else changed in the suffix naming. Now, by default, if your design has more than one state, every state gets a suffix, including the main state.

From a button perspective, this isn't a big deal, but the new suffix gets added to all the graphics in that state, essentially renaming non-interactive elements that don't require the suffix. This is a real headache for designers.

Thankfully, there is a way around this issue. Darrell Heath, an avid Fireworks user and web professional, shared a solution on the Fireworks user forum. I thought I'd put it to images as well as text.

New Fireworks Support for Illustrator via FXG 2.0
Reader Level: Reader Level

If you've ever saved your Fireworks design in AI format from within Fireworks, you've probably been pretty disappointed.

Thanks to FXG 2.0, and the ability of Illustrator CS5 to both read this format and edit it, we've now got a better option.

In this article you will see a comparison of the original Fireworks vector file, the resulting Illustrator file and the FXG version of the same graphic. The results of going from Fireworks PNG to FXG are quite impressive, as you'll see.

FXG 2.0 Support in Fireworks CS5 - What to expect Free!
Reader Level: Reader Level

Fireworks CS5 supports the FXG 2.0 format, giving us a lot more flexibility if we're planning to port our designs over to Flash Catalyst. This article details what is supported and - more importantly - what isn't. It will tell you what you can use with impunity and what Fireworks features to watch out for if you're planning to export your designs or artwork in the FXG format.

CMX JumpStart: Brasilia
Reader Level: Reader Level

The Brasilia JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page directly from your CSS file. You simply need to add a class to the body tag and the CSS takes care of everything else for you! Brasilia also has a slight variation on the popular sliding doors CSS navigation system. While the concept is exactly the same as we have used in the past, on this occasion the navigation hangs from the top of the page rather than sitting at the bottom of its containing element.

The main construction of Brasilia consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The layout will collapse gracefully on smaller viewports while the images in the strap are self centering to ensure the layout always displays at it's best. The content, as always, is created with valid code and accessibility in mind.

Introducing CMX JumpStart Brasilia Free!
Reader Level: Reader Level

CMX JumpStart Brasilia is fluid, both in its outer and inner DIVs. The outer DIVs are completely fluid and conform to the width of the viewport. The inner DIVs are fluid, but with max width to keep reading lines comfortable, and min width to keep the layout from collapsing in narrow windows. There are styles for two or three column options that can be controlled from a single CSS file. The first tier tabbed navigation uses the popular Sliding Door technique, and the second tier navigation uses an unordered list for greater accessibility. Both navigation schemes provide for a current page marker. There is a "fat" header that allows your company to showcase important content and/or branding. The PNG allows for the editing of the images in the monitor screens if you wish to stick to the computer theme. In lieu of images, you could also put text in either the right or left floated areas of the header for a real "above the fold" showcasing of your message. The JumpStart includes a main style sheet, a version six and below Internet Explorer style sheet, a version seven and above Internet Explorer style sheet, and a Design Time Style Sheet (in case your version of Dreamweaver makes the layout difficult to edit in Design View). Of course Brasilia meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

Creating Clouds with the Compound Shape Tool in Fireworks CS5
Reader Level: Reader Level

The new Compound Shape tool makes it easier than ever to create complicated vector shapes. We'll learn how to use this tool to create clouds for an illustration.

Fireworks CS5 New Features - Part 2 Free!
Reader Level: Reader Level

Yes indeed, Adobe Creative Suite CS5 is coming. In this second of several videos, I'll take you through some of the new enhancements to type handling. We'll also take a quick (heh heh, get it? Quick?) look at speed and reliability. I know I'm impressed and I hope after watching these videos, you will be too.

Approximate download size: 35MB

The Fireworks CS5 New Features Series:
Fireworks CS5 New Features: Overview
Fireworks CS5 New Features: Part 2

Fireworks CS5 New Features - Overview Free!
Reader Level: Reader Level

Adobe CS5 is coming. In this first of several videos,I'll give you an overview of many of the new features in Fireworks CS5. This software is better than ever. The engineers searched high and low to find ways to make Fireworks faster, more stable and easier to use. I know I'm impressed and I hope after watching these videos, you will be too.

Homework and Exams: Creating a Fireworks Prototype - Part 3
Reader Level: Reader Level

We're nearing the end of the Fireworks prototype Homework and Exams project. In this last part of the project, you're going to generate slices on a dedicated page in your FW site file. You'll then export them as "Images Only" for a CSS based layout in Dreamweaver. .)

This tutorial includes support files.

The Homework and Exams Series:
Homework and Exams: Creating a Fireworks Prototype - Part 1
Homework and Exams: Creating a Fireworks Prototype - Part 2
Homework and Exams: Creating a Fireworks Prototype - Part 3

Homework and Exams: Creating a Fireworks Prototype - Part 2
Reader Level: Reader Level

We're nearing the end of the Fireworks prototype Homework and Exams project. In this last part of the project, you're going to generate slices on a dedicated page in the FW site file. You'll then export them as "Images Only" for a CSS based layout in Dreamweaver.

This tutorial includes support files.

The Homework and Exams Series:
Homework and Exams: Creating a Fireworks Prototype - Part 1
Homework and Exams: Creating a Fireworks Prototype - Part 2
Homework and Exams: Creating a Fireworks Prototype - Part 3

Auto Shapes for Productivity
Reader Level: Reader Level

Auto shapes can be quite helpful in the design process, but there are also a few of them that are more workflow oriented. In this article, we'll take a look each of them.

Sharing Layers to Pages in Fireworks
Reader Level: Reader Level

With its pages, bitmap, vector and web tools, Fireworks is ideally suited as a graphical, rapid-prototyping tool. Layout features (smart guides and tooltips) and the ability to switch seamlessly from vector to bitmap graphic editing make Fireworks an ideal application for building prototypes to test user interaction and identify interface or page-design issues.

In prototyping and wireframing, there may be times where you have the same objects on some pages, but not all. In a case like this, you can't use a Master page. Rather than copy and paste those objects onto every page, you can share the content of any number of layers with specific pages in your design.

Follow along in this tutorial to learn how to share object layers and web layers to other pages in a multi-page design.

CMX JumpStart: Beijing
Reader Level: Reader Level

Welcome to the Beijing JumpStart!

The Beijing JumpStart provides the easiest of solutions for changing the amount of columns on a page. You simply add a class to the body tag and the CSS takes care of everything else for you! Beijing also has a slight variation on the popular sliding doors CSS navigation system. While the concept is exactly the same as we have used in the past, on this occasion it hangs from the top of the page rather than sitting at the bottom of it's containing element.

The main construction of Beijing consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width while maintaining a good line reading length. The content as always is created with valid code and accessibility in mind.

Put Your Heart Into It - A Fireworks Tutorial for Valentine's Day Free!
Reader Level: Reader Level

Valentine's day is close at hand. And if you're scrabbling about, trying to come up with the perfect gift, look no further!

Boot up Adobe Fireworks and in less time than it takes to pick out overpriced flowers, you will hve a custom made Valentine card for your sweetie. This video tutorial is about 20 minutes long and walks you all the steps to design a card using only stock features of Fireworks.

CMX JumpStart: Agra
Reader Level: Reader Level

Welcome to The Agra JumpStart!

The Agra JumpStart is based around an Indian theme and follows the diversity of that country by providing multiple layout structures that can be controlled from a single CSS file. While the top half of Agra remains constant the lower three column section can be easily modified from its default three column layout to either a one or two column layout. Like India, Agra provides a solution for just about every requirement you may have!

Approximate download size: 4MB

The 3-Slice Technique with Alpha Transparency
Reader Level: Reader Level

I'm seeing more and more people wrestling their way through the Fireworks CSS and Images export feature, these days. One of the struggles has been how to use PNG 32 graphics for div containers.

We're going to talk about one example in this article which can export fairly easily under certain situations: the 3-slice technique. The idea behind this technique is that you have a rectangle with rounded corners, acting as a container for content.



Alpha Transparency in Fireworks Series:
The 3-Slice Technique with Alpha Transparency
Creating Semi-Transparent PNG Files in Fireworks

CMX JumpStart: Lapland Free!
Reader Level: Reader Level

Welcome to the Lapland JumpStart!

The Lapland JumpStart is a free offering to you from Community MX. We hope you enjoy and are able to make good use of the layout!

The main construction of Lapland consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.

Make Your Own Planet
Reader Level: Reader Level

Just because a planet doesn't have your name doesn't mean you can't make one. Mix together Fireworks, After Effects and Flash and you are able to build your own solar system.

Batch Processing Photoshop or TIFF Images Using Fireworks
Reader Level: Reader Level

There are a lot of things you can do with the Batch Process wizard in Fireworks. With a bit of planning, you can take larger JPEG files or non-web files - like TIFF or PSD or Fireworks PNG files - and create a custom batch process to to resize, sharpen, rename and export these files for use in a web site. Perhaps you are creating an image gallery from some original photos or artwork. Or you might want to take a series of original JPEG files that were shot with your camera, and convert them to a non-lossy format like TIFF, so they can be edited and saved without concern of losing any image data.

This tutorial walks you through the steps of converting some PSD images to images more useful in a web site. The same concept could be applied for graphics destined for a mobile or Flex or AIR application.

Editing JumpStart PNG Files
Reader Level: Reader Level

Community MX JumpStarts provide you with an instant layout and design, they also include tutorials on how you can apply the techniques used to create them into your own work. At their heart, JumpStarts serve two main purposes: they are an ideal tool for learning how to lay out standards compliant CSS driven designs and allow you to experiment with the code and CSS. For the more experienced designer they will allow you to quickly redesign and adapt the visual look and feel of the core design to a look that is unique to your client with minimum effort and often without any core code changes at all. At the heart of this rapid development is the JumpStarts PNG file. The PNG file contains the core design images and it is here that this tutorial will be focused

We will be looking at how you can make changes to the Stelvio Pass - Gallery JumpStart PNG file and export those changes to alter the look and feel of the original JumpStart.

(Not so) Scary Ghosts and Goblins - Part 7
Reader Level: Reader Level

Well it has been a loooong time since I've done a holiday themed tutorial, and I thought to myself, "Self, Halloween is coming. Surely you can come up with some sinister plan to yet again use Fireworks for scary and creepy purposes."

With the gauntlet thus thrown, I took up the challenge. In this tutorial you'll take a regular photo and a scary photo, combine them with some Fireworks effects to create a scary Gif animation or SWF file. The end result will look like this:

blood ghost animated gif

Read on Dear Reader . . . if you dare . . .

The (Not So) Scary Ghosts 'n Goblins Series:
(Not So) Scary Ghosts 'n Goblins - Part 1
(Not So) Scary Ghosts 'n Goblins - Part 2
(Not So) Scary Ghosts 'n Goblins - Part 3
(Not So) Scary Ghosts 'n Goblins - Part 4
(Not So) Scary Ghosts 'n Goblins - Part 5
(Not so) Scary Ghosts 'n Goblins - Part 6
(Not so) Scary Ghosts 'n Goblins - Part 7

Pick Videos at the Drive-In
Reader Level: Reader Level

How do you get three 1950's commercials to play on your web site? Did I mention they need to be posted within the next 30 minutes? Fireworks CS4 and Flash CS4 to the rescue.

Approximate download size: 31MB

Deconstructing and Reconstructing a Button in Fireworks
Reader Level: Reader Level

Recently my good buddy here at Community MX, Laurie Casolino, reached out and asked if I could take a stab at recreating a button graphic that she'd been given by a client. Since I owe Laurie about 6 years worth of favors, and since I also had about 15 minutes of free time, I took on the job of recreating a button graphic in Fireworks. And of course, being an author constantly in search of new ideas to write about, the process I went through to make a button that matches the one Laurie had to work with became the subject of another tutorial.

I don't know exactly where Laurie got this button, but my guess is that as in most design jobs her client presented her with the image but did not have the original file that was used to create it. It would be great to have the original Fireworks PNG or PhotoShop PSD to work with, but in the real world this is an all too common occurrence.

In this quick look at how Fireworks can be used to take on this sort of work we'll see how an image can be deconstructed to determine how to remake the image you've been given to make a duplicate that you can edit and rework into a new design.

Introducing CMX JumpStart Berlin Free!
Reader Level: Reader Level

CMX JumpStart Berlin is a centered, two-column or three-column, liquid/fixed layout. The two tier navigation uses the popular Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The header features a third menu, a PhatFusion Image Menu, that lets you add your own categories and images. This feature is especially handy for photographers who would like to feature their work.

The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7. There is also a Design Time Style Sheet in case your version of Dreamweaver makes the layout difficult to edit in Design View. Of course Berlin meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

Fading Images in Multiple Directions with Fireworks
Reader Level: Reader Level

One of the hallmarks of the Fireworks workflow has always been its non-destructive nature. In the standard Fireworks working environment designers work with filters and effects that remain editable even after they've been applied. And even though new Photoshop filters that do convert vectors to bitmaps have been introduced in versions of Fireworks released after the merger with Adobe, for an old-time Fireworks user like myself, we're still used to using editable effects, masks, and other tricks of the Fireworks world that we learned a long time ago.

That's generally the case—at least until you need to do something like fade an image in more than one direction. In that case even we seasoned Fireworks users have been known to take a composition and flatten it like a pancake. In this tutorial you'll learn the why and how of fading images in more than one direction and how a very simple—yet destructive—process makes this possible.

Creating a Simple - But Custom - Gallery Frame Effect
Reader Level: Reader Level

The Add Picture Frame Command is a very simple way to add a frame around dimensions of any open image file. You pick from any of the pattern graphics available in the patterns folder. These graphics are designed to tile seamless and often get used to add a more organic feel the a vector graphic. While the patterns are kinda neat, they're a little - ummm - out there for photo frames.

You can add other seamless tiles to this folder - ones you find on the web or ones you create yourself. In this tutorial, you'll create an incredibly simple image to use as a gallery-style photo frame.

In previous tutorials, I've shown you how to create completely custom frame and matte combinations, but if you're pinched for time, this method might just do the trick.



Changing Keyboard Shortcuts in Fireworks CS4
Reader Level: Reader Level

Not happy with the existing keyboard shortcuts for Fireworks? Or perhaps you're more used to Photoshop or Illustrator shortcuts? Or maybe you just want to forge out on your own and create your own custom set? Well, the good news is you can do all of these things in Fireworks CS4. Let's have a look.

Create a Group as Mask Keyboard Shortcut for Fireworks
Reader Level: Reader Level

One of the minor gripes I've often heard about Fireworks is the lack of a keyboard shortcut that invokes the "Group as Mask" command. "As frequently as that option is used in Fireworks," goes the common complaint, "why is it that I have to always go to Modify > Mask > Group as Mask to mask two objects?"

Luckily, you don't have to go to all of that effort. In fact, in a few minutes you can create your own custom keyboard shortcuts in Fireworks and be happily using your new power to avoid those repeated mouse trips to the Menu Bar. While there are lots of ways that you can customize and extend the Fireworks workspace, in this article you'll focus on a real time-saver—the ability to mask two objects with the press of a couple of keys.

CMX JumpStart: Stelvio Pass - Gallery
Reader Level: Reader Level

The Stelvio Pass - Gallery JumpStart presents a nicely integrated image gallery and flexibility of layout width and advanced CSS column control.

The Stelvio Pass - Gallery also includes inverted sliding door navigation and an accessible sub navigation in the left hand column, both of which can be expanded with ease to suit any given situation.

Creating a Black and White Infrared Look with Adobe Camera RAW
Reader Level: Reader Level

For the last three years, I've had the great pleasure of a week's camping in Obatanga Provincial Park with Tom Green and our sons. It's a great opportunity to connect with one another, wind down, recharge batteries for the coming semester and just enjoy being in the outdoors.

It should come as no surprise that my camera makes the trip as well, and during our various side trips, hikes and paddles, I try my best to capture the essence of my experience in the Near North, and the wonder of the natural world around me. As much as possible, I make all my images using the RAW format of my Nikon D200.

While shooting, I made many images that I planned to convert to grayscale. I spent more time studying contrast and texture rather than being concerned with rich coloration in the scene. And this is where the idea for this tutorial sprang from.





If you're interested in learning how to make non-destructive edits to your photographs using Bridge and Adobe Camera Raw, you're probably already feeling compelled to read on . . .

Approximate download size:16MB

Creating a Photo Collage Banner in Fireworks
Reader Level: Reader Level

Masking one object with another truly opens up a lot of creative potential for a variety of design goals, be it a page layout for an advertisement or a web site banner. It doesn't have to be mind-numbingly difficult either. In this tutorial, you will work with several high resolution images and through a combination of scaling and masking you will build a web page banner for a fictitious butterfly conservatory.

Scaled version of the final banner

You can work with your own files if you like, but I have included the high resolution images in the support files, and I'll base the tutorial on these files.

Approximate download size: 16.7MB

Creating a Grid Mask Design
Reader Level: Reader Level

I was wandering the web recently, looking for tutorial inspiration, and happened upon Veerle Pieters' blog. Veerle was asked how to create a grid mask design and she went on to show an excellent original design of her own using Photoshop and Illustrator.

Well, you know me, if I find a cool Photoshop tutorial, the first thing I wonder is if the job can be done using Fireworks. And the answer in this case is yes indeed. And - even cooler - you can do it all without leaving Fireworks.

Here's my finished artwork:

final grid mask design

Get ready to dig into Fireworks and create your own grid mask design.

Approximate download size: 4.5MB

Fireworks CS4 Classroom in a Book Excerpts - Part 2: Text and Image Optimization Free!
Reader Level: Reader Level

Adobe Fireworks CS4 has quite a few cool features, but if you're completely new to the program - or new to web design, you might be wondering where to start in Fireworks. In the Fireworks CS4 Classroom in a Book , my goal was to introduce the complete novice to Fireworks and by the end of the book, leave them with a wide range of skills and a solid grasp of what Fireworks could - and could not - do.

cover shot of Fireworks Classroom in a Book

In this four part series, you will find PDF excerpts from the book, complete with some of the working files to help you along.

This is the second installment and the series and covers the following topics:

  • Text Basics
  • Optimization and working with previews
  • Creating a simple rollover

Approximate download size: 6.5MB

Fireworks CS4 Classroom in a Book Excerpts Series
Fireworks CS4 Classroom in a Book Excerpts - Part 1: Bitmap and Vector Tools
Fireworks CS4 Classroom in a Book Excerpts - Part 2: Text and Image Optimization
Fireworks CS4 Classroom in a Book Excerpts - Part 3: Workflow
Fireworks CS4 Classroom in a Book Excerpts - Part 4: Advanced Prototyping



Fireworks CS4 Classroom in a Book Excerpts - Part 1: Bitmap and Vector Tools Free!
Reader Level: Reader Level

Adobe Fireworks CS4 has quite a few cool features, but if you're completely new to the program - or new to web design, you might be wondering where to start in Fireworks. In the Fireworks CS4 Classroom in a Book, my goal was to introduce the complete novice to Fireworks and by the end of the book, leave them with a wide range of skills and a solid grasp of what Fireworks could - and could not - do.

In this four part series, you will find PDF excerpts from the book, complete with some of the working files to help you along.

Approximate download size: 3.9MB

Fireworks CS4 Classroom in a Book Excerpts Series
Fireworks CS4 Classroom in a Book Excerpts - Part 1: Bitmap and Vector Tools
Fireworks CS4 Classroom in a Book Excerpts - Part 2: Text and Image Optimization
Fireworks CS4 Classroom in a Book Excerpts - Part 3: Workflow
Fireworks CS4 Classroom in a Book Excerpts - Part 4: Advanced Prototyping

From Jumpstart to Composition Demo in Fireworks CS4 Free!
Reader Level: Reader Level

One of the great new tools that comes with Fireworks CS4 is one that is easy to overlook—the ability you now have to take a composition and publish all of the visible elements to a Flash-based demonstration of your design. Using this new feature along with the Master Pages that are part of Fireworks you can quickly create a design composition and publish it to your server for client review.

In this tutorial you’ll be provided with the source Fireworks PNG file that was developed using Sheri German's original design for the Baltimore Jumpstart series as its base.

This source file has been broken up into multiple pages to demonstrate how a comp might be prepared that shows multiple layouts, color schemes, and page elements. From there you’ll learn how to use the incredibly easy Demo Current Document command to publish all of the pages into one tidy package that you can upload and provide to a client by way of a link.

CMX JumpStart: Siberia
Reader Level: Reader Level

Siberia is, of course, renowned for its freezing temperatures, and the colour theme is based around the coldness of the region. Siberia is a design that sits easy with me - it is understated in appearance yet provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system to the built in accordion and flexible column choice, Siberia has it all.

The main construction of Siberia consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Siberia comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.



Customizing a WordPress Blog - Part 7: Editing Themes with Fireworks CS4
Reader Level: Reader Level

The goal of this series of articles is to show you how to take what is already an awesome package—including an almost limitless supply of free design themes—and customize the look and feel of a WordPress site to meet your goals. Through this series you'll be learning how to use some of the design tools from Adobe, such as Fireworks and Dreamweaver, as well as free open source browser plugins to modify the design of a WordPress installation.

In this, the seventh article in the series, you'll learn how to use Dreamweaver and Fireworks together to capture the essential information needed for customizing a WordPress theme then take that information into Fireworks to completely customize the look of your blog. This article will show you how to capture a theme that you've opened in Dreamweaver and how to setup your Fireworks document to make the customization quick and easy.

The Customizing a WordPress Blog Series:
Customizing a WordPress Blog - Part 1: Editing Header Images
Customizing a WordPress Blog - Part 2: Examining WordPress Themes with the Firebug Extension for FF
Customizing a WordPress Blog - Part 3: Examining WordPress Themes with the Web Developer's Extension
Customizing a WordPress Blog - Part 4: Creating a Testing Environment Using MAMP and Dreamweaver
Customizing a WordPress Blog - Part 5: Editing WordPress Themes in Dreamweaver CS4
Customizing a WordPress Blog - Part 6: Using the Snapshot Technique for Editing WordPress Themes
Customizing a WordPress Blog - Part 7: Editing the Themes with Fireworks CS4

Textual Musings – Fireworks Text Techniques: Part 2 Free!
Reader Level: Reader Level

There is so much you can do when is comes to dealing with text in Fireworks. You can bend, twist, expand, fade, colour, add gradients, and turn in to bitmaps or vectors, to name but a few. You may think you have seen everything possible (and probably have), but there's always more to discover, test and try out.

In the first tutorial we created rounded and spooky text from our standard font type using masking and the levels filter. Now we can use that as a basis to create some devilish text and also use many more techniques utilizing both vector and bitmap tools.

Note: This tutorial requires Fireworks 8 or newer

Alex Dunn is a freelance web enthusiast from Bristol, England. He has a BSc(Hons) Degree in Information Technology and a Diploma in Computing and Multimedia Studies. He loves being creative and being involved with all aspects of web design since he became 'hooked' back in the late nineties.

The Textual Musings Series:
Textual Musings – Fireworks Text Techniques: Part 1
Textual Musings – Fireworks Text Techniques: Part 2

Fun With: Outlined Text with Strokes and Shadows
Reader Level: Reader Level

Sometimes you get in a design rut and you find yourself doing things the same old way, over and over again. Sure, you can zip around the design application interface and make things sing, but are you being creative? Are you taking chances and giving yourself time to explore and find new ways to get things done, or are you sticking with the same old tried-and-true methods?

When things are getting a little stale, it's time for some creative play, and when you have a suite of imaging and animation applications to play around with you have lots of chances to stretch your wings a little and do something entirely new. That's what the Fun With: series is all about—having fun and trying out new things. The focus in the Fun With: articles is to demonstrate techniques that you might not have thought about trying and give you the opportunity to play on your own. Because while it's satisfying to do your job well and efficiently, sometimes you need to allow your inner artist to come out and play.

In this installment you'll be working with text in Fireworks once again, exploring the ways that text strokes and solid shadows can be combined to create new visual effects. This article and the sample download file that is included will demonstrate a few ways that stroke effects and the Solid Shadow can be combined and modified to get text that goes beyond the boring and can be used for page graphics, logos, and more.

The Fun With: Series
Fun With: Bitmap Selections in Fireworks
Fun With: Outline Text with Glows and Shadows
Fun With: Outlined Text and Strokes and Shadows

Textual Musings – Fireworks Text Techniques: Part 1 Free!
Reader Level: Reader Level

There is so much you can do when is comes to dealing with text in Fireworks. You can bend, twist, expand, fade, colour, add gradients, and turn in to bitmaps or vectors, to name but a few. You may think you have seen everything possible (and probably have), but there's always more to discover, test and try out.

In this Part 1 we experiment with transforming a plain font, such as Verdana, into our own unique font in just a few steps. We will then see how we can make this font re-usable using masks and live filters.

Then in Part 2, we will expand on our work to produce a unique logo using both the vector and bitmap toolset.

The most important thing is experimenting with the tools available, trying out new ideas and of course- having some fun!

Alex Dunn is a freelance web enthusiast from Bristol, England. He has a BSc(Hons) Degree in Information Technology and a Diploma in Computing and Multimedia Studies. He loves being creative and being involved with all aspects of web design since he became 'hooked' back in the late nineties.

The Textual Musings Series:
Textual Musings – Fireworks Text Techniques: Part 1
Textual Musings – Fireworks Text Techniques: Part 2

Introducing CMX JumpStart: Nairobi Flexible Free!
Reader Level: Reader Level

It wasn't that long ago - November 26, 2008 to be exact - that we released CMX JumpStart Nairobi. At the time, I introduced the JumpStart based on the capital of Kenya with this sentence:

We think that the latest CMX JumpStart, CMX JumpStart Nairobi, will become one of your most important JumpStarts. Why? Because Nairobi is all about features and flexibility.

Read that last word again, because that is exactly what we're offering in this reworking of Nairobi - CMX JumpStart Nairobi Flexible. My original meaning in the word "flexibility" was meant to underline all the ways you could use the JumpStart. In response to subscriber interest in using Nairobi as a flexible layout, however, Adrian Senior has not only provided a modification of his own Nairobi design, but has provided a comprehensive tutorial on how he accomplished thet transformation.



CMX JumpStart: Nairobi-Flexible
Reader Level: Reader Level

In this tutorial we will take the Nairobi JumpStart and change it from its fixed width default layout into a flexible layout that works between two preset points, based on the user's browser width.

We will also discuss the merits and pitfalls of the changes we will make as we progress through the tutorial. We will discuss screen resolution and desktop setup through to problem areas of flexible layouts.

CMX JumpStart: Isle of Skye
Reader Level: Reader Level

A short while ago, the beginning of March to be more precise, I wrote an article on selling your business. It looked at how easy it was to lose visitors when they printed a page from your web site and what we could do to remedy that problem. You can read the article on CMX; it is called Selling Your Business.

This JumpStart, Isle of Skye, takes the principles of that article and puts them to use in a way that means minimal work for yourself. You just need to add the relevant details into the web site and the CSS files will do the rest for you. Further to this automated functionality, Dreamweaver allows you to easily make any edits you need by making good use of the Style Rendering toolbar. The Style Rendering toolbar allows you to move quickly from one media type to another making it easy to stay on top of the different views available within your web site. All this control is provided with just a simple click of an icon.

Creating a Triangle with Rounded Corners
Reader Level: Reader Level

Creating rounded rectangles in Fireworks is a breeze. You can set rounded corners on a standard rectangle using the Property inspector, or even the arrow keys (when in drawing mode). You've also got the rounded rectangle auto shape.

But what about other shapes like triangles? Well, you're about to see how easy this process is, using the Polygon or Smart Polygon tool and the Path panel.

An example of using the hollow pentagons as links in a chain.

Making Short Work of Navigation Bars with the Fireworks History Panel
Reader Level: Reader Level

One of the most common tasks facing a web designer is the creation of navigation bars. Whether you are designing a series of tabs in a horizontal arrangement, or creating navigation bars that are vertical and set on the side of the page, the need to create a visual representation of a series of links is fundamental to almost all web design projects.

Luckily, every version of Fireworks, going right back to the earliest versions of the program, contains a panel that tracks the changes you make on the canvas and allows you to replay those steps. Using this tool you can quickly and quite easily create navigation bars without the need to repeatedly copy and paste elements into your design.

In this tutorial you'll learn how to create a simple navigation object then copy, paste, and move a duplicate of the original as many times as you need. This allows you to create navigation bars to your heart's content, and let's you rapidly accomplish one of the most common design tasks that you'll face.

CMX JumpStart: Landeck
Reader Level: Reader Level

Welcome to the Landeck JumpStart!

The Landeck JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three-column to a two-column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!

The main construction of Landeck consists of liquid horizontal outer divs with a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.

The Landeck JumpStart

Using the Kuler Panel in Fireworks CS4
Reader Level: Reader Level

Fireworks CS4 comes with a built-in Kuler panel to help you select, edit and create color schemes for a web site or application UI. In this video, we take a look at how to access color themes from the Kuler web site, create a custom swatch palette and then use those colors in the creation of a web page design.

Screen grab of finished design

You can view the video offline by downloading the support files at the bottom of the page.

Preparing a Fireworks CS4 Document for Production
Reader Level: Reader Level

With the arrival of Fireworks CS4 Adobe introduced both a new set of tools for serious design prototyping and a new way of approaching the task of creating design compositions. The new and improved toolset found in Master Pages and States panels, combined with the more familiar Layers panel, gives designers the ability to exercise control over the designs in a much more efficient manner and save themselves considerable time in preparing design comps for approval by clients.

These new tools do require a little forethought and a little more planning as you set up a document for production. In this article you'll learn the questions you need to ask yourself before you place the first pixel on the canvas and see how the answers to those questions relate to how you create a document in Fireworks CS4. In particular, this article will teach you:

  • How to determine which elements of your design should be assigned to Master Pages
  • How to prepare multiple layouts from Pages that incorporate your Master Page designs
  • How to use layers to their full advantage in a design with Master Pages and Pages
  • How to use States to create interactive elements in your composition


Masking in Fireworks CS4
Reader Level: Reader Level

Masking is a very powerful design tool in Fireworks. In this video, we will look at three different ways to mask bitmap images to complete a banner ad for a fictitious movie called Double Identity.

Double Identity banner ad

This is a video demonstration but you can follow along by downloading the original images from the download button at the bottom of the page.

Even though this video uses Fireworks CS4, the masking techniques described can also be achieved in earlier versions of Fireworks.

This video is approximately 25 minutes long.

Approximate download size: 90MB

The CSS Starter Page Series Part 5: Shadows and Rounded Corner Background Images
Reader Level: Reader Level

Welcome back to the CSS Starter Page series! We're going to continue with our exploration of adding background images to the starter pages. My students always ask about rounded corner layouts that have shadows and textures, and so that is what we'll cover today.

The CSS Starter Page Series:
The CSS Starter Page Series - Part 1: Faux-Column Images
The CSS Starter Page Series - Part 2: More Background Images
The CSS Starter Page Series - Part 3: Three-Column Fluid Background Images
The CSS Starter Page Series - Part 4: Rounded Corner Background Images
The CSS Starter Page Series - Part 5: Shadows and Rounded Corner Background Images
The CSS Starter Page Series - Part 6A: Adding Navigation Schemes
The CSS Starter Page Series - Part 6B: Adding Navigation Schemes Part Two
The CSS Starter Page Series - Part 6C: Adding Navigation Schemes Part Three
The CSS Starter Page Series - Part 7: Adding a Spry Menu Bar
The CSS Starter Page Series - Part 8: Managing Content with Spry
The CSS Starter Page Series - Part 9: Working with the Conditional Comment
The CSS Starter Page Series - Part 10: Adding a Print Style Sheet
The CSS Starter Page Series - Part 11: Adding a Handheld Style Sheet
The CSS Starter Page Series - Part 12: Adding a jQuery Slideshow
The CSS Starter Page Series - Part 13: Designing with a Grid
The CSS Starter Page Series - Part 14: Designing with a CSS Table Grid
The CSS Starter Page Series - Part 15: Adding a Drop Cap with :first-letter

CMX JumpStart: Lima
Reader Level: Reader Level

Welcome to the Lima JumpStart.

Lima is, of course, the capital of Peru and is our second JumpStart from that country, the first being Machu Picchu. Lima uses the Mercury design element that was designed by Gordon Mackay. The Mercury design element is a simple, yet effective, design to which I have made some subtle changes. Lima is an exercise in taking a design element and modifying it suit your needs. I have kept the main design structure intact and have introduced a change to the main header that originally held the navigation and moved the navigation into the side bar. Design elements are easy and quick to work with, I highly recommend them.

JumpStart Lima

Creating and Slicing Graphics for Rounded Corner Containers
Reader Level: Reader Level

Rounded corner containers for web pages are pretty popular. In her upcoming tutorial in the CSS Starter Page series, Sheri German explains how to use background images and CSS to create rounded rectangle containers for just such a purpose. But before you can go there, you must create those graphics. That's where I jump in!

We will look at three techniques you can use in Fireworks to generate container graphics for fixed and fluid layouts.

Four Cool Things You Can Do with Fireworks CS4
Reader Level: Reader Level

Fireworks is pretty much my favorite application to work with. I thought I would share with you four features that I find very helpful.

Creating Custom Patterns and Textures From Photographs
Reader Level: Reader Level

Fireworks has quite a few patterns and textures right out of the box, but sometimes you just want something different from everything else. Well, if you have some photos with some strong visual elements in them, you can create your own patterns or textures. In this tutorial I'll show you how I did this in just a few minutes.

Be My Fireworks Valentine
Reader Level: Reader Level

Ahhh, Valentine's Day! While this tutorial is a little early for the occasion, my goal is to get you prepared in time for the special day. Using only Fireworks vectors and effects, you will create this Valentine Wish for your favorite geek. The techniques described here should work all the way back to Fireworks 8. Before that version, some of the effects may not be available, but you can still do most of the vector work.

We will be working with:

  • Auto Shapes
  • Live Filters
  • Creative commands
  • History panel
  • Text on a path

If you have not had a lot of practice with vectors in Fireworks, you might find this tutorial helpful from that perspective as well.



CMX JumpStart: The New Forest
Reader Level: Reader Level

Welcome to The New Forest JumpStart!

The New Forest JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three column to a two column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!

The main construction of The New Forest JumpStart consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.



Approximate download size: 4.4MB

Creating Screenshots in Fireworks CS4 Free!
Reader Level: Reader Level

There have been some pretty cool features added to Fireworks CS4, but here's one for the Windows version of Fireworks you may not know about: the Take Screenshot command. Follow along in this quick tutorial on how to use the Screenshot command.

CMX JumpStart: Nairobi
Reader Level: Reader Level

Welcome to the Nairobi JumpStart!

Nairobi allows you to quickly change the layout of the page from a three-column to a two-column layout by using descendant selectors to change the pages appearance. It also features an "upside down" version of the popular sliding doors navigation method, which is complemented by an accessible sub navigation set.

The main construction of Nairobi consists of liquid outer divs while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind.

Nairobi comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.

Nairobi is a JumpStart not to be missed!

Working With Fireworks CS4 Symbols Free!
Reader Level: Reader Level

In my book Adobe Fireworks CS4 How-To's, my goal was to explain the software in easy to digest techniques. This PDF excerpt from my book - Chapter 9 - covers 8 techniques on working with Symbols, one of Fireworks very powerful features.

Best Practices Work Flow in Fireworks CS3 - Part 3
Reader Level: Reader Level

In this series of videos, we are going to look at a workflow paradigm which takes advantage of some of the new tools in Fireworks CS3. Primarily focusing on Pages, Master Pages, Hierarchical layers and Shared layers, we'll see how a design can go from concept to working prototype for client approval.

The first in our series dealt with pages, shared layers and hierarchical layers and my logic for using this method. This is a method I might use in the early comping stages; a point where we've gotten past rough sketches on paper and want/need to engage the client further.

The second part of the series added a Master Page Feature, Shared Web Layers and hot spots for interactivity, Rich Symbols and 9-slice enabled graphic symbols. Certain design decisions were made and we had received approval for most of the common elements that would appear on each page (header, footer, navigation). We ended part two by creating a working prototype that the client can test live on a staging server.

In this third and final segment, the prototype has been approved and we're now going to slice up the design so that a true, functional HTML page can be laid out and created using Dreamweaver and CSS.

Approximate download size: 64.4MB

The Best Practices Work Flow in Fireworks CS3 Series:
Best Practices Work Flow in Fireworks CS3 - Part 1
Best Practices Work Flow in Fireworks CS3 - Part 2
Best Practices Work Flow in Fireworks CS3 - Part 3

CMX JumpStart: Tokyo
Reader Level: Reader Level

The Tokyo JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file.

The Tokyo JumpStart provides the easiest of solutions for changing the amount of columns on a page - you simply need to add a class to the body tag and the CSS takes care of everything else for you!

The Tokyo JumpStart includes the following tutorials:

There are some great tutorials for you to work through in that list, as well as a great extension for creating the conditions for using conditionally commented style sheets that feed styles to the various versions of Internet Explorer.





Five Steps to an Animated GIF with Fireworks
Reader Level: Reader Level

In my day-to-day job I frequently turn to Fireworks to perform all sorts of graphical editing tasks. When it comes to screen graphics of any kind Fireworks is my tool of choice. So even though I find myself frequently needing images for use in PowerPoint presentations, Flash animations, mockups and wiring diagrams, for use inside content management systems and even titles for video presentations, my tool of choice is always Fireworks.

Such was the case recently when I happened to need an animated GIF for a presentation I was preparing. I wanted something simple but glaringly annoying to be on screen during the duration of my talk to that particular slide, so I needed something that would jump out at the viewers. And while I could have created a custom animation in PowerPoint, why not just crank out a quick animated GIF, especially, as it turns out, you can do it in only 5 steps! Really! I counted.

In this article you'll learn how to take any object that you draw on the screen and create a custom animated GIF. Think you can't do it? Follow along and we'll see.

Using the Pen Tool to Create a Custom Text Box
Reader Level: Reader Level

In my reviews of Fireworks CS4, I've written about a cool new feature called Attach in Path. This command lets you take a block of text, and run it within any existing ungrouped vector shape. The examples I've show have used a variety of vector shapes to punch out a custom path. Well, you can also use the Pen tool to create these custom shapes for your text areas, and this video shows you just how to do it.

Fading from Color to Black and White
Reader Level: Reader Level

There are a few ways to turn a color image into a grayscale image in Fireworks. This technique is unique in that you can constantly update the grayscale appearance, and the effect is not a permanent part of the entire image. This technique is pretty quick and can be completed in Fireworks 8, CS3 or the current Fireworks Public Beta.

Animation Fun with Twist and Fade Free!
Reader Level: Reader Level

The Fireworks public beta has had many updates, but one very fun update is the revised Twist and Fade command.

This command will take any selected object and - based on your input - create multiple faded, rotated iterations which seem to follow a path. And while that is kinda cool. What I love about the command is its ability to create an animation quickly and easily.

Creating Elongated Text With the 9-Slice Scaling Tool
Reader Level: Reader Level

Living in South Florida as I do I frequently see examples of art deco design. This style, born in the 1920's and 1930's features clean, streamlined design that is evocative of the period where industrial design met art, producing a clean, less-ornamented style that ultimately had a big impact on the architecture of Miami Beach. Ultimately art deco design and buildings, furnishings, and art made it's way up the coast to where I live, leaving a lasting impact on the cultural identity of my little part of the world.

Seeing designs like this all the time tends to be inspiring, and one of my favorite types of typographic effects are those that maintain the clean style that is true to art deco while relaying information. In the example below you see a design created in Fireworks for a fictional company. Notice how the elongated lower case 'd' adds to the design while keeping things clean and uncluttered.

Deco Dan sample logo

In this tutorial you'll learn how to use the 9-Slice Scaling tool found in the newest version of Fireworks, now available at Adobe Labs as a free beta, and coming to you soon when the next version of Fireworks is commercially released. One of the nice new improvements found in this version of the venerable Fireworks program is the upgrade to the 9-slice Scaling Tool that allows you to do fun little tricks like this where the upper part of a letter is stretched in ways not intended by the font designer.

Introducing CMX JumpStart Phoenix Free!
Reader Level: Reader Level

It's another JumpStart, and this one is named after a city I visited and loved, Phoenix, Arizona.

CMX JumpStart Phoenix is a centered, two-column, 760 pixel fixed-width layout that has many appealing design features. There is a strikingly contrasted color scheme, vertical navigation in the right column, and "swap image" rollovers that use a caching technique that corrects flaws in Internet Explorer.

The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7.

Of course Phoenix meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: Phoenix
Reader Level: Reader Level

Welcome to the Phoenix JumpStart!

Phoenix, as with all CMX JumpStarts, comes complete with all source files - from the XHTML document to the PNG files to, of course, the heart of the JumpStart, the CSS files.

It is a two-column centred design and can easily be modified to suit your own requirements. Phoenix makes good use of Conditionally Commented style sheets and comes complete with a design time style sheet to ensure everything looks just as you would expect in Dreamweaver's design view.



CMX JumpStart: Prague
Reader Level: Reader Level

The Prague JumpStart looks at how we can lay out over-lapping elements within our designs and investigates the use of multiple wrappers to ensure that our layout maintains its structure on resize.

In previous JumpStarts we have looked at how we can filter our CSS rules to one browser or another; with Prague we will be filtering our CSS in a slightly different way by providing a style sheet to take care of specific navigation problems that can be found in IE 5.01.



Editing Vectors with the Reshape Area and Freeform Tools
Reader Level: Reader Level

Vectors are great because you can scale them up or down, and still retain image quality. But what if you aren't much of an artist when it comes to vector shapes? How can you take a simple, blocky drawing and make it look more real, more organic?

Fireworks has a couple tools which can help take a simple flat drawing and give it some life: the Reshape Area and Freeform tools. We'll take a look at these tools and some Live Filters as we transform a drab simple t-shirt into an art statement!

Fireworks Hidden Gem - Paste Attributes Free!
Reader Level: Reader Level

There are a lot of features in Fireworks to improve your workflow, but one you might not know about has actually been around for a long time. It's called Paste Attributes and it's a very versatile command, as you will see in this quick tutorial.


Fireworks CS4 Public Beta - Demo Current Document
Reader Level: Reader Level

If you have been experimenting with the new Fireworks beta (and if you haven't, tsk, tsk) you might be noticing a theme by now. There is a huge variety of options for exporting out your designs!

The one we're going to look at today is Demo Current Document (DCD). DCD was available as a separate and free extension for Fireworks CS3, but now it's part of the Fireworks beta package and it too has had an update to its command panel.

CMX JumpStart: The Lake District
Reader Level: Reader Level

The Lake District JumpStart wanders away slightly from our usual city theme. The Lake District is an area in the North West of England that has a beautiful collection of (guess this if you can...) lakes and some absolutely stunning scenery. You should really visit The Lake District if you ever get the slightest opportunity to do so.

The nature of the images in this type of website demands that the eye be drawn to the subject matter rather than the design. With this in mind The Lake District allows the content images to take centre stage by utilising a design that consists of black, greys and white to ensure the design does not subtract from the content.

Adding Interactivity to a Flattened Image with Fireworks
Reader Level: Reader Level

It's rare that a web designer gets the opportunity to work on a design project entirely alone. Sometimes your client, or the boss, might tell you to just "go for it" and design something entirely new and fresh and beautiful and only wants to see your design when it's all done. This gives you the opportunity to create all the source files, all the layouts, and make everything nice and tidy as you work through the design process.

But in my line of work those seem to be pretty rare. Your client may have some strong ideas about the look and feel of their site, they might have already done some initial mockups, or they might have another designer that is doing work for them in for print advertising and marketing and want to incorporate some of those designs into a web presence. In those cases you might get designs in all sorts of formats, created in all sorts of programs.

In a collaborative process like this it's likely that you'll receive flattened bitmap images from another designer. In some cases those will be just fine, and you can use the JPGs, GIFs, or (non-Fireworks) PNGs that you are given as elements of a design. Perhaps the page header can be drawn from the company logo that already exists, or a color scheme can be determined based on work that another designer has done.

But what about those cases where another designer only has a flattened bitmap to provide, but interactivity is on the client's For You To Do list? Perhaps they'd like the buttons in the composition to change color when the viewer of the page mouses over them, or wants elements on a page to swap out when a button is rolled over. Or what about those times when you take over an project from a previous designer that only left behind bits and pieces of a web site? In those cases it's time to allow Fireworks to come to the rescue.

In this tutorial, you'll learn how to take a page composition that is in the JPG format and convert it into an interactive Fireworks PNG file with button rollovers. In the course of this short article you'll also learn:

  • Tips for using the Marquee Tool
  • How to create new bitmap objects from a selection
  • How to use Frames to add basic interactivity in Fireworks
  • How slices are used to assist in exporting images from Fireworks


Fireworks CS4 Public Beta - Part 3: Wrapping Text Inside a Path Free!
Reader Level: Reader Level

OK, how long have we been waiting for this? The ability to flow text within a vector shape is now part of Fireworks CS4! Woo Hoo!

And we can do more than just wrap the text inside the shape. When you're mocking up a web page design, you can also emulate how text will flow around a floated image.

Follow along in this article to see the creative options available for you with just one of the new features in Fireworks CS4.

The Fireworks CS4 Public Beta Series:
Fireworks CS4 Public Beta - Part 1: Fireworks Gets a Facelift!
Fireworks CS4 Public Beta - Part 2: Productivity Features
Fireworks CS4 Public Beta - Part 3: Wrapping Text Inside a Path
Fireworks CS4 Public Beta - Part 4: Panels

CMX JumpStart: Bordeaux
Reader Level: Reader Level

Welcome to the Bordeaux JumpStart.

Bordeaux features a split-level navigation system, both of which are accessible. The main navigation incorporates the sliding door method as described by Douglas Bowman. The sub-navigation is an unordered list based navigation system and both navigation systems provide clear "you are here" page markers. The design is a two-column layout, fixed at 740px wide, and utilises gradients in the background while using the full width of the user's browser to provide a full and expansive appearance to the overall design. Bordeaux can be integrated into the New File dialog window of Dreamweaver by using the extension that is provided within the download

Creating a Slice Template with Fireworks
Reader Level: Reader Level

When you think of web workflow for images, it usually follows these steps:
  • Open an image or create a design
  • Slice the image or design
  • Optimize the slices
  • Export the slices

Well depending on your images or design, there could be another method.

Let's say you have a series of same size images which all require the same slicing/optimizing. You can use Fireworks to create a slicing template which can be repurposed over and over, creating identically sized slices.

Depending on your software version, this technique can be achieved in a couple different ways. We will look at both.



A Fireworks Quickie - Vacuuming Pixels Free!
Reader Level: Reader Level

If there is one constant in working with clients in the web and graphics design world it is this: Your clients rarely provide you with artwork that you can use right away.

Need a logo from your client? "Oh sure, our company has a logo. One of the secretaries made one a few years back that we love. But we only have it in .BMP format and I'd like to remove some of the extra stuff that's in there and sharpen it up. You can do that right?"

Photos? "Oh yeah, my nephew took some pictures of our office a few years ago. I'll send those to you. And can you remove Craig on the far right from the picture? He doesn't work for us since that unfortunate incident with the weed whacker and the vending machine."

Well, you get the picture, which is just the point. Sometimes you get pictures that need major work, including the removal of large parts of the original. Luckily Fireworks provides some great tools for vacuuming pixels away. Needing to do that myself recently I came across a great tip to make things even easier.

In this article you'll see how you can use the seemingly humble Marquee tool in Fireworks to perform corrective surgery on a bitmap image and quickly remove large parts of the picture.

Fun With: Outlined Text with Glows and Shadows
Reader Level: Reader Level

Sometimes you get in a design rut and you find yourself doing things the same old way, over and over again. Sure, you can zip around the design application interface and make things sing, but are you being creative? Are you taking chances and giving yourself time to explore and find new ways to get things done, or are you sticking with the same old tried-and-true methods?

When things are getting a little stale, it's time for some creative play, and when you have a suite of imaging and animation applications to play around with you have lots of chances to stretch your wings a little and do something entirely new. That's what the Fun With: series is all about—having fun and trying out new things. The focus on all of these articles will be to demonstrate techniques that you might not have thought about trying and give you the opportunity to play on your own. Because while it's satisfying to do your job well and efficiently, sometimes you need to allow your inner artist to come out and play.

In this article we'll play around with the Glow and Drop Shadow Live Filters effects available in Fireworks, and see how those tools allow you to do some fun creative things with your text.

Approximate download size: 993k

The Fun With: Series
Fun With: Bitmap Selections in Fireworks
Fun With: Outline Text with Glows and Shadows
Fun With: Outlined Text and Strokes and Shadows

Image Maps: Creating a Client-side Image Map with Fireworks and Dreamweaver
Reader Level: Reader Level

In this third tutorial in the series we will show the process of creating an image map in Fireworks using both manual and automatic hotspot creation tools. Fireworks makes it easy to create the interactive areas, which can then be exported out for use in your favorite web editor. Dreamweaver/Fireworks integration makes it easy to insert the Fireworks generated image map into an existing web page.

Be sure to check out the two other parts in this series, written by Steven Seiller: Creating a Client-side Image Map with Illustrator and Creating a Client-side Image Map with Dreamweaver.

The Creating Image Map Series:
Image Maps: Creating a Client-side Image Map with Illustrator
Image Maps: Creating a Client-side Image Map with Dreamweaver
Image Maps: Creating a Client-side Image Map with Fireworks and Dreamweaver

Fun With: Bitmap Selections in Fireworks
Reader Level: Reader Level

Sometimes you get in a design rut and you find yourself doing things the same old way, over and over again. Sure, you can zip around the design application interface and make things sing, but are you being creative? Are you taking chances and giving yourself time to explore and find new ways to get things done, or are you sticking with the same old tried-and-true methods?

The Fun With: Series
Fun With: Bitmap Selections in Fireworks
Fun With: Outline Text with Glows and Shadows
Fun With: Outlined Text and Strokes and Shadows

CMX JumpStart: Malé
Reader Level: Reader Level

The Malé JumpStart is a fixed-width, two and three-column layout. It has a right column that can be shown, or hidden, on a page-by-page basis, without the need to delve into the code. The centre column is our main info area while the left column features a CSS based flyout menu. This is a menu design that owes some thanks to Peter Nederlof for his work on the csshover.htc script that allows the menu to function in versions of Internet Explorer that don't support the hover on non-anchor elements. Coupled with this JumpStart is an excellent introductory tutorial written by John Gallant and Holly Bergevin that explains the set up of the menu. Read and enjoy.



Baltimore: Developing a CSS Starter Page - Part Two
Reader Level: Reader Level

In the first part of the Baltimore CSS Starter Page series, you developed a Fireworks composite to use with the two-column, fixed-width, left sidebar CSS starter page. In this second tutorial, you will slice the composite and export the slices to the Baltimore site you created in Dreamweaver.

I will also take you "behind the scenes" in the methods I used to enhance the image of the US Constellation that is in the header of the document.

Approximate download size: 1.8MB

The Developing a CSS Starter Page: Baltimore Series
Baltimore: Developing a CSS Starter Page - Part One
Baltimore: Developing a CSS Starter Page - Part Two
Baltimore: Developing a CSS Starter Page - Part Three
Baltimore: Developing a CSS Starter Page - Part Four
Baltimore: Developing a CSS Starter Page - Part Five

Baltimore: Developing a CSS Starter Page - Part One
Reader Level: Reader Level

I am pleased to introduce Baltimore, the third city to form the basis of a CSS Starter Page series. I am particularly fond of Baltimore as my family and I live between this largest city in Maryland and Washington, DC. We go into Baltimore every week for our son's musical activities at the Peabody Preparatory Department, which is a division of John Hopkins University.

If you followed along with Honolulu or Chicago, you'll remember that the CSS Starter Pages, while extremely useful, do lack navigation schemes and other bells and whistles, such as gradient background images. So, you need a little knowledge in order to turn them into viable layouts.

You may remember that Honolulu guided you through adding faux column technique and vertical buttons created with an unordered list. Chicago added a horizontal navigation bar and sidebar pods to your growing skill set. This time around you'll add "modules" to the two-column, fixed-width, left-sidebar CSS Starter Page to turn it into a horizontal band layout. You'll use a Fireworks graphical representation of the layout to develop the graphics for the design we're calling Baltimore. You'll export the slices and develop the XHTML and CSS to create a working template that you can use for a personal or client project.

In the first part of this tutorial series, you will select a CSS Starter Page, define the Baltimore Dreamweaver site, and develop the graphics in Fireworks.

The Developing a CSS Starter Page: Baltimore Series
Baltimore: Developing a CSS Starter Page - Part One
Baltimore: Developing a CSS Starter Page - Part Two
Baltimore: Developing a CSS Starter Page - Part Three
Baltimore: Developing a CSS Starter Page - Part Four
Baltimore: Developing a CSS Starter Page - Part Five

HDR-Like Images Using Fireworks
Reader Level: Reader Level

CMX partner Knut Kubenz has written a couple of articles about creating HDR images using Photoshop. HDR— It's Everywhere You Look, demonstrated how to produce a High Dynamic Range image through the use of some of the automated features in Photoshop. And just recently, looked at how to achieve similar results in Photoshop with just one average exposed image and a lot less effort. Using some very basic tools, such as Gaussian Blur, the Overlay Layer Blending Mode, Invert from the Image Adjustments Menu and Desaturate, he produced some pretty respectable results.

Now this got me to thinking (yes it happens sometimes), while Fireworks does not have any true HDR capability, it certainly has all the necessary components to create an HDR-like image, as described in Knut's article. Hence another tutorial was born. For those of you who don't have Photoshop, or prefer to work in Fireworks for your web graphics, follow along and see how to expand the dynamic range of images, quickly, easily and - most importantly - non destructively!

Recreate the PBS NOW Logo - Part 2: Creating Reflective and Lighting Effects
Reader Level: Reader Level

You never really can tell when the design-inspiration bug might bite you. My eye catches all sorts of things as I go through the daily routine, and I'm frequently motivated by something I see on television. Perhaps it's an eye-catching effect that is found in a movie trailer, a regular commercial with some snappy graphics, or a logo for a television show.

A quick cruise around the dial a few weeks ago led me to admire the logo that is produced for the Public Broadcasting System here in the United States for their investigative series known simply as NOW. A quick visit to the NOW web site will reveal a site design with rich colors and some outstanding uses of CSS techniques for displaying the section headers on the page. It's a beautifully designed site with an eye-catching logo that clearly brands the site as well as the show itself.

In these two tutorials you'll learn how to create your own version of the NOW logo using some basic (and a few more advanced) techniques in Fireworks, with the methods demonstrated applicable to all version of Fireworks from MX 2004 to CS3. Part 1 of this two-part series covered the following:
  • Examine a sample image and break it into its different components
  • Prepare a Fireworks document using sound work-flow techniques and layer organization
  • Use standard Fireworks tools for creating the primary elements of the design
  • Create custom gradient fills

And now in Part 2 you'll learn how to use some of the more creative possibilities in Fireworks. Specifically, this tutorial will cover how to:

  • Transform an object to create a mirrored version of an original graphic
  • Use opacity settings to control the appearance of objects
  • Use blurs and blends to create a reflective surface
  • Employ lighting techniques to highlight different portions of a composition

The Recreating the PBS NOW Logo Series:
Recreate the PBS NOW Logo - Part 1: Working with Complex Fireworks Compositions
Recreate the PBS NOW Logo: Part 2--Creating Reflective and Lighting Effects



Recreate the PBS NOW Logo - Part 1: Working with Complex Fireworks Compositions Free!
Reader Level: Reader Level

You never really can tell when the design-inspiration bug might bite you. My eye catches all sorts of things as I go through the daily routine, and I'm frequently motivated by something I see on television. Perhaps it's an eye-catching effect that is found in a movie trailer, a regular commercial with some snappy graphics, or a logo for a television show.

A quick cruise around the dial a few weeks ago led me to admire the logo that is produced for the Public Broadcasting System here in the United States for their investigative series known simply as NOW. A quick visit to the NOW web site will reveal a site design with rich colors and some outstanding uses of CSS techniques for displaying the section headers on the page. It's a beautifully designed site with an eye-catching logo that clearly brands the site as well as the show itself.

In these two tutorials you'll learn how to create your own version of the NOW logo using some basic (and a few more advanced) techniques in Fireworks, with the methods demonstrated applicable to all version of Fireworks from MX 2004 to CS3. Specifically, you'll learn how to do the following in Part 1 of this two-part series:
  • Examine a sample image and break it into its different components
  • Prepare a Fireworks document using sound work-flow techniques and layer organization
  • Use standard Fireworks tools for creating the primary elements of the design
  • Create custom gradient fills

In Part 2 you'll learn how to use some of the more creative possibilities in Fireworks. Specifically, that tutorial will cover how to:

  • Transform an object to create a mirrored version of an original graphic
  • Use opacity settings to control the appearance of objects
  • Use blurs and blends to create a reflective surface
  • Employ lighting techniques to highlight different portions of a composition

In addition to the techniques shown here you'll also find sample Fireworks files in the download for both tutorials.

The Recreating the PBS NOW Logo Series:
Recreate the PBS NOW Logo - Part 1: Working with Complex Fireworks Compositions
Recreate the PBS NOW Logo: Part 2--Creating Reflective and Lighting Effects



Chicago: Developing a CSS Starter Page - Part Five
Reader Level: Reader Level

If you've been following along with the Chicago CSS Starter Page series, you're almost to the finish line. There are just two tasks left to accomplish: add the horizontal navigation bar, and check the layout for cross browser issues, particularly those that relate to Internet Explorer.

At the end of this tutorial, you'll have a completed layout that you can modify with your own branding to use in a client or personal project.

This tutorial includes starter files as well as a folder with the completed layout.

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5

From Chicago Style to Picture Perfect - Customizing the Chicago JumpStart
Reader Level: Reader Level

I was recently approached by a friend to update her site. I had done the initial design a few years ago and while she still received positive feedback on the site, she wanted a more contemporary, corporate feel to attract business customers.

As luck would have it, Sheri German was just wrapping up her series on the Chicago JumpStart. This new JumpStart design is based on one of the Dreamweaver CS3 CSS templates. If you followed Sheri's series, you saw her take the skeleton template and turn it into a fully fledged design, including the PNG artwork.

This article will focus primarily on customizing the PNG, and try to retain as much of the original CSS as possible. For my design, I did customize the slicing in a couple areas in the PNG, so we will also talk about how to make those changes in the CSS.

Approximate download size: 1.3MB

CMX JumpStart: Sydney
Reader Level: Reader Level

Welcome to the Sydney JumpStart. Sydney is comprised of two columns, one of which is an absolutely positioned div that contains the nested list navigation elements.

Sydney utilises three style sheets, one that is read by all browsers and a second that is read only by versions of Internet Explorer that are greater than version 5. The final style sheet is used only at design time and provides a workaround for Dreamweaver's lack of support for the min-height value and property.

The Sydney JumpStart comes complete with a comprehensive set of tutorials and it also includes all source files, from the design png file right through to the xhtml and CSS files. Also included within the Sydney download file is the CMX design time style sheet extension which builds on and enhances the native functionality.



Chicago: Developing a CSS Starter Page - Part Four
Reader Level: Reader Level

In the last article in the Chicago: Developing a CSS Starter Page series, you established "the big picture" for the layout by styling the main divs, such as the header, columns, and footer. Now it is time to start painting in some of the finer details. You'll tweak the text, add an image with a border to the content area, and use definition lists to provide the hooks for the sidebar pod styles.

For this tutorial, you can use the work you completed in the last installment of this series, or you can use the starter site that is in the download folder that is included with this article. There is also a completed site that you can use to compare your work against should you develop any problems.

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5

Best Practices Work Flow in Fireworks CS3 - Part 2
Reader Level: Reader Level

In this series of videos, we are going to look at a workflow paradigm which takes advantage of some of the new tools in Fireworks CS3. Primarily focusing on Pages, Master Pages, Hierarchical layers and shared layers, we'll see how a design can go from concept to working prototype for client approval.

The first in our series dealt with pages, shared layers and hierarchical layers and my logic for using this method. This is a method I might use in the early comping stages; a point where we've gotten past rough sketches on paper and want/need to engage the client further.

In this second part of the series will add the Master Page Feature, Shared Web Layers and hot spots for interactivity, and Rich Symbols and 9-slice enabled graphic symbols.

Approximate download size: 42MB

The Best Practices Work Flow in Fireworks CS3 Series:
Best Practices Work Flow in Fireworks CS3 - Part 1
Best Practices Work Flow in Fireworks CS3 - Part 2

Chicago: Developing a CSS Starter Page Part Three
Reader Level: Reader Level

In the first two parts of the Chicago CSS Starter Page series, you created a comp for the design we are naming after the city of Chicago. You analyzed the graphics in relation to the fixed-width, two-column, centered layout with header and footer CSS Starter Page, and developed a slicing strategy. Finally, you exported the graphics to the defined Chicago site. You should now have the following documents in the site folder:
  • mockup.html, the XHML page
  • main.css, the external style sheet
  • an images folder with the exported graphics for the site

In this third part of the series, you will apply the exported graphics to the appropriate page areas, using the CSS Starter Page as your launching pad. The beauty of using a CSS Starter Page is that all of the basic structure is coded for you. The floated column, the clearing element, the centering of the layout, and other generic features are in place. All you have to do is tweak the design to suit your taste.

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5



Sailing the Wine Dark Sea - Updated for Fireworks CS3
Reader Level: Reader Level

Back in 2004, I wrote a fairly popular masking tutorial using Fireworks MX 2004. With all the changes in Fireworks since then, I thought it time to upgrade this tutorial, using some of the new features in Fireworks CS3.

Combining images is part of the fun with programs like Fireworks. Making those images look like they belong together - to trick the eye, as they say - is challenging and fun. Take this unlikely pair of images for example: a studio beauty shot of a wine bottle with a glass and a sailboat. Wouldn't it be neat to make the sailboat seem as if it were floating inside the wine glass?

If you answered "yes," continue on. If you answered "no," re-read the second paragraph and answer "yes" this time.

Approximate download size: 1.1MB

Chicago: Developing a CSS Starter Page Part Two
Reader Level: Reader Level

In Part One of the Chicago CSS Starter Page series, you defined a Dreamweaver site and created a Fireworks composite of the layout from a template PNG that corresponded with the fixed-width, two-column, left sidebar with header and footer CSS Starter Page.

In this second tutorial in the series, you will analyze the composite document to determine slicing strategies, set the optimization format for each slice, and export the resulting images to your defined Chicago site.

Approximate download size: 2.3MB

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5

Chicago: Developing a CSS Starter Page - Part One
Reader Level: Reader Level

The CSS Starter Pages are an invaluable addition to the CSS toolset in Dreamweaver CS3. With well over thirty different layout types from which to choose, you're able to rapidly develop page designs, free from the onerous task of having to build the underlying structure from scratch.

You need some knowledge to modify them, however. They do not include navigation schemes, nor do they include any bells and whistles, such as sidebar pods.

In this series you'll modify the two-column, fixed-width, left-sidebar, header and footer CSS Starter Page by adding a horizontal button navigation scheme as well as definition list-based pods. You'll use a Fireworks graphical representation of the layout to develop the graphics for a design we'll call Chicago.

In the first part of this tutorial series, you will select a CSS Starter Page, define the Chicago Dreamweaver site, and develop the graphics in Fireworks.

CSS Starter Page Chicago

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5

A Different Kind of Style
Reader Level: Reader Level

When you think of the Fireworks Styles panel, you probably think of how those combinations of effects can give you groovy (yes, I said groovy) buttons, or header backgrounds. You may even be adventurous enough to apply styles to text.

However, there is another way to work with styles which you might not normally think of—applying them to bitmap images. In many ways this can be just as creative as applying styles to vectors. Maybe even more!

This article will also show you how to create your own "reset style" setting, so you can quickly revert back to your original image.

CMX JumpStart: Stirling
Reader Level: Reader Level

The Stirling JumpStart is based around the popular Playa Blanca JumpStart, with one or two subtle enhancements that will allow you to easily flip the design from a two-column layout to a three-column layout on a page-by-page basis.

Better Family Photos with Fireworks
Reader Level: Reader Level

Ah yes, the family snapshot. From the time that Mr. Eastman of Eastman-Kodak first introduced the venerable Brownie camera, and made it easy and affordable for anyone to snap a few pictures at the family gathering or on vacation, we've all been snapping away, taking what must be by now trillions of really bad photos.

In this tutorial, we are going to take a look at a few common techniquest that you can use in Fireworks to quickly improve the look of your family snapshots.

Create a Slideshow in Fireworks CS3
Reader Level: Reader Level

Why do we make our lives complicated? Why do we strip our computer down to its electrons before we check to see if it is plugged into the wall? Why do we over think web-based slideshows?

Add Depth to a Photo with a Vignette Border
Reader Level: Reader Level

In previous tutorials, I've shown you how to digitally matte and frame a photo, how to add special effects and how to fix images that suffered from poor exposure. In this tutorial we'll look at another method of adding depth and substance to a photo using a vignette mask.

The goal here is to subtlety darken the outer edge of a photo. This effect was traditionally done in the darkroom and helped to add a bit of depth to the image and draw more attention to the inner area of the photo. We'll look at a couple different ways to achieve this effect in Fireworks. One is quick and easy but not as customizable. The other takes a bit more work but gives you full control over the vignette. If you're using high resolution images for print, you can can very similar results using Photoshop.

Photographing Snow Scenes - Sometimes Gray IS Okay
Reader Level: Reader Level

My last two tutorials dealt with preserving the brightness of a snow scene photographed with a digital camera. In this article, we'll look at the reasons why you might not want to preserve all the bright white snow and how the end result can be very dramatic.

The example I used previously was a snowy scene on an overcast day. Following the camera meter in situations like this tends to result in low contrast, dull gray images. However, when the sun is out, and the snow is sparkling, this underexposure can produce some very powerful results.

Read on to learn more.

The Photographing Snow Series:
Snow Grey: Not OK - Snow White: Just Right
Snow Grey: Not OK - Snow White: Just Right - Part 2
Photographing Snow Scenes - Sometimes Gray IS Okay

Bitmaps and Flash
Reader Level: Reader Level

Why is it that working with bitmaps in Flash is often regarded as a "Black Art". Not quite. In this one I show you how editing of a bitmap can be done in both Flash CS3 and Fireworks CS3.

Approximate download size: 12MB

Creating a Web 2.0 Button In Fireworks Free!
Reader Level: Reader Level

Web 2.0 is a term coined by O'Reilly describing the new trends in design and development appearing across a flood of innovative websites. This tutorial will show you how to create some of the most popular "Web 2.0" design effects using Adobe Fireworks.

Thierry Lorey has been a Fireworks enthusiast since version 3 and is now Fireworks Zone’s webmaster, Fireworks beta tester and author for Community MX. He is the first European Fireworks enthusiast to write an article for Fireworks Developer Center. After some translation and training jobs, he is now the full-time Fireworks Zone's webmaster. His job includes writing news, tutorials, creating graphics, and maintaining and developing the website to keep the content new and fresh.

Snow Grey: Not OK - Snow White: Just Right - Part 2
Reader Level: Reader Level

There are different ways to handle a snow scene photo; you can correct the exposure at the time you shoot, or you can adjust the exposure in software such as Fireworks or Photoshop. In this, the second in a 2-part series, we'll look at software solutions.

Ideally, you make exposure adjustments at the time of shooting to improve the overall brightness of the scene. But if you're unable to, or perhaps you received the file from someone, you need to turn to the Digital Darkroom for a solution.

Pretty much all imaging software, free or commercial, is capable of improving the image seen above. Some methods are better than others, though, so we will look at a few different ways to achieve the end result. This tutorial will focus mostly on Fireworks, but we'll also look at a couple proprietary tools in Photoshop which can help.

The Photographing Snow Series:
Snow Grey: Not OK - Snow White: Just Right
Snow Grey: Not OK - Snow White: Just Right - Part 2
Photographing Snow Scenes - Sometimes Gray IS Okay

Snow Grey: Not OK - Snow White: Just Right
Reader Level: Reader Level

It's that time of year in many parts of the world, where many things get covered in a blanket of snow. Snow scenes can be stunning, but the average camera (film or digital) is not designed to capture snow at its true and original brightness. There are different ways to handle a snow scene photo; you can correct the exposure at the time you shoot, or you can adjust the exposure in software such as Fireworks or Photoshop. In this 2-part series, we'll look at both, beginning with the photographic solutions here in Part 1.

The Photographing Snow Series:
Snow Grey: Not OK - Snow White: Just Right
Snow Grey: Not OK - Snow White: Just Right - Part 2
Photographing Snow Scenes - Sometimes Gray IS Okay

Flowing Text Around an Object in Fireworks Using Illustrator
Reader Level: Reader Level

Creating realistic web site mock ups in Fireworks has gotten much easier with CS3, but one thing still missing from Fireworks tool set is the ability to wrap text around an image to emulate a css floated image. Kim Dudley and I have created tutorials on the subject for InDesign and for Freehand. Freehand's future is uncertain and if you purchased the Web Suite from Adobe, you don't get InDesign as part of the bundle, so in this tutorial we'll create text wrapped around an image using Illustrator.

Fireworks CS3 Symbols to Flash CS3
Reader Level: Reader Level

Why don't the Flash guys get that Fireworks CS3 symbols can easily move into Flash as symbols? While we are at it, why is it the Fireworks guys aren't doing this as often as they should as well?

Approximate download size: 7.6MB

CMX JumpStart: Playa Blanca
Reader Level: Reader Level

Playa Blanca is a two column fixed width design that uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for.

The colours in Playa Blanca have been used to reflect the sunshine and the many wonderful volcanic shades that can be found on the island. I hope you like Playa Blanca and it serves you well for future work.

Approximate download size: 1.8MB

Let It Rain, Let It Rain
Reader Level: Reader Level

Have a photo and want it to be raining in the picture? Working with a large landscape photo, but can't get nature to cooperate? Use this technique in Fireworks to bring on the rain!

Approximate download size: 723k

Honolulu - Developing a CSS Starter Page: Part Two
Reader Level: Reader Level

In the first part of the CSS Starter Page series, you developed a Fireworks composite to use with the two-column, fixed-width, right sidebar with header and footer CSS starter page. In this tutorial, you will slice the composite, export the slices, and apply the graphics to either the CSS or XHTML document, depending on whether its purpose is presentation or content.

In this tutorial you will learn the following skills:
  • Use different slicing methods
  • Analyze a composite for creating slices that are most effective in a CSS based layout
  • Set export options for a CSS based layout
  • Apply background images to the various starter page divs
  • Determine which graphics should be in the CSS and which graphics should go into the XHTML page

Approximate download size: 1.8MB

The Honolulu - Developing a CSS Starter Page Series:
Honolulu - Developing a CSS Starter Page: Part 1
Honolulu - Developing a CSS Starter Page: Part 2
Honolulu - Developing a CSS Starter Page: Part 3 Coming Soon



Copy and Paste Between Fireworks and Dreamweaver CS3
Reader Level: Reader Level

Fireworks is also reaping the benefits of the new integration between Photoshop and Dreamweaver CS3. We can now copy and paste objects and layers (vector or bitmap or both) between Fireworks and Dreamweaver. As obvious as it sounds, this feature was not available prior to CS3.

This short video will walk you through the process of copying and pasting between Fireworks and Dreamweaver, which, you will find, is remarkably similar to the Photoshop to Dreamweaver work flow.

From Fireworks to a Flash Animation in a Flash
Reader Level: Reader Level

So you have a layer in Fireworks that would make for a cool Flash animation. This issue is: How? Read on..

Honolulu - Developing a CSS Starter Page: Part One
Reader Level: Reader Level

The CSS Starter Pages are an invaluable addition to the CSS toolset in Dreamweaver CS3. With well over thirty different layout types from which to choose, you'll be able to rapidly develop page designs, free from the onerous task of having to build the underlying structure from scratch.

In this two-part tutorial you'll learn to take advantage of this feature as you modify the two-column, fixed-width, right-sidebar, header and footer layout. You'll use a Fireworks graphical representation of the layout to develop the graphics for a design we'll call Honolulu.

Approximate download size: 1.5MB

The Honolulu - Developing a CSS Starter Page Series:
Honolulu - Developing a CSS Starter Page: Part 1
Honolulu - Developing a CSS Starter Page: Part 2
Honolulu - Developing a CSS Starter Page: Part 3 Coming Soon

CMX JumpStart Madrid
Reader Level: Reader Level

The latest CMX JumpStart follows the same city theme, but this time you are magically transported across the continents to Europe and the beautiful city of Madrid, Spain.

The Madrid JumpsStart is an elastic three-column layout that incorporates the use of header and footer divs. Elastic layouts are a little different than liquid layouts and are perhaps a little more awkward to work with. Not to worry: we'll be exploring the intricacies of working with an elastic layout and you'll soon be in a position to start modifying Madrid for your own ends.

The Madrid JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Madrid meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.

Approximate download size: 2MB

Digital Workflow - Adding Images from a PDF to your Web Site
Reader Level: Reader Level

As designers we receive our image assets in many formats and various media. A lot of times I will get rough layouts, including images and text, in the form of an MS Word document. Recently, though, a new client of mine has started sending me PDF files that she lays out and creates in MS Publisher. These layouts are for their static web catalog and each page represents one product section of the site.

I have found this very useful as it clarifies the sequence of the products within the page table and reduces the number of emails that are needed to ensure the line up is correct.

However, getting these images from the PDF to the web page was at one time somewhat tedious. At worst, screen grabs might have been made. At best, the PDF could be opened in Photoshop where the images would all have to be saved individually and then inserted into the DW page.

Now, though, with the improved integration between Dreamweaver and Photoshop, the process is even easier.

Follow along in this video as we see four Adobe Products in the CS3 Suite work together to simplify and speed up web page work flow. For those of you new to Photoshop or the integration between Photoshop and Dreamweaver, I think you will find this video enlightening.

Approximate download size: 4.5MB

Create a Postage Stamp and a Rubber Stamp Effect
Reader Level: Reader Level

If you want to start producing some unique stamps, read this tutorial. It will demonstrate how to create a Postage Stamp with a Postmark. This tutorial is valid for Fireworks CS3 and lower versions

In the first part we will see how to create a postage stamp with the perforated edges. This will be the opportunity to look at the punching techniques and John's Dunning Smart Punch command, which enables to punch in one step.

The second part, will be dedicated to the creation of the postmark. In this tutorial you learn how to:
  • Punch vectors
  • Create a custom stroke
  • Save a custom stroke as a Style
  • Attach text to a path

In the third section we will look at adding "waves" to our postmark

To give you an idea of how things will look by the end of this tutorial, here is the completed image:

Thierry Lorey has been a Fireworks enthusiast since version 3 and is now Fireworks Zone’s webmaster, Fireworks beta tester and author for Community MX. He is the first European Fireworks enthusiast to write an article for Fireworks Developer Center. After some translation and training jobs, he is now the full-time Fireworks Zone's webmaster. His job includes writing news, tutorials, creating graphics, and maintaining and developing the website to keep the content new and fresh.



CMX JumpStart: Palm Springs
Reader Level: Reader Level

Palm Springs is a three-column fixed-width layout that incorporates a dual navigation system consisting of a horizontal tab section at the top of the design and a left column vertical sub navigation set. The design includes a pre-prepared log in form, layout elements and a subscribe form layout in the right hand column. As always the JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Palm Springs meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.

Approximate download size: 2.3MB

CMX JumpStart: Washington, D.C.
Reader Level: Reader Level

The Washington, D.C. JumpsStart is a two-column fixed-width design. It uses the sliding doors method for presenting the navigation as a nice horizontal tabbed menu, which acts as a main navigation for the page-level vertical sub-navigation set.

Washington, D.C. makes good use of background images and, as always, meets the standards for CSS, XHTML and Accessibility, thus ensuring you have a good solid layout in which to begin your conversion to a client site.



Approximate download size: 2.6MB

Water Drops on Surfaces
Reader Level: Reader Level

A while ago Jim Babbage wrote an excellent tutorial about creating photo-realistic water drops that could be placed on images. In this tutorial I'd like to do a similar thing, slightly scaled-down and more suited to general graphics rather than photographic effects.

This is a very simple tutorial that demonstrates how to created a reasonable realistic looking water drop on a surface using Fireworks and only a small handful of tools.

It's really easy... so come on in and have a go.

A Fireworks CS3 Hidden Gem
Reader Level: Reader Level

Don't just love discovering something hidden in an application. Fireworks CS3 has what I think is a doozy.

Approximate download size: 5.3MB

CMX JumpStart: Tahoe
Reader Level: Reader Level

CMX JumpStart Vegas, created in the summer of 2005 by Stephanie Sullivan and Linda Rathgeber, has proven to be a very popular JumpStart. And with good reason: it's a clean, two column design that adapts well to a variety of subject matter, content types, and graphic identities. However, some CMX subscribers were interested in using it as a liquid or fluid design, meaning the layout's overall width would be determined by the width of the user's browser window, instead of a rigid pixel-based width assigned in the style sheet by the designer.

Out of this idea the CMX JumpStart Tahoe was born. Tahoe, the place, shares many similarities with Vegas, the place: both located in Nevada, they are centers of entertainment known for their casinos, nightlife, and incredibly cheap buffets. But Tahoe has something Vegas doesn't: a whole bunch of water in the form of the beautiful Lake Tahoe. Thus, the tagline for the Tahoe JumpStart: "Like Vegas, only fluid."



As do all our JumpStarts, Tahoe uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Both pages from Vegas, a home page and contact page, are included in Tahoe as well. They feature a two column, centered, fluid layout that is constrained to your desired range of widths by using a minimum and maximum width. The layout is constructed of floats and utilizes a faux column technique. We provide an extensively commented style sheet so you know what each rule does and how to change it to suit your design, as well as an uncommented version for deployment on your site with smaller file size.

This JumpStart has been designed to teach you about the logistics of designing a fluid layout, as well as how to convert an existing fixed-width design into a fluid design. All of the files for Tahoe — the Fireworks PNG, XHTML pages, and style sheets — are simply modifications of those used in Vegas as an exercise to demonstrate how an entire site design can be radically transformed with very little modification to its XHTML structure. However, you need not be familiar with Vegas to use Tahoe. As with all our JumpStarts, each technique or component of Tahoe is fully explained in either this article or one of the 14 tutorials we've included in your download.

Approximate download size: 10MB

Best Practices Work Flow in Fireworks CS3 - Part 1
Reader Level: Reader Level

Many of the new features in the CS3 Suite relate to workflow. The buzz-phrase in Fireworks CS3 seems to be Rapid Prototyping (ok, even I'm getting tired of that term), which in my opinion means:
  • Multiple pages
  • Multiple web layers
  • Master page
  • Rich Symbols for use in Rich Internet Applications such as Flex
  • Better Integration with Photoshop, Illustrator and Flash
  • New Common Library

In this series of videos, we are going to look at a workflow paradigm which takes advantage of some of the new tools in Fireworks CS3. Primarily focussing on Pages, Master Pages, Hierarchical layers and shared layers, we'll see how a design can go from concept to w

The first video tutorial in our series (20 minutes) deals with pages, shared layers and hierarchical layers and my logic for using this method. This is a method I might use in the early comping stages; a point where we've gotten past rough sketches on paper and want/need to engage the client further.

The Best Practices Work Flow in Fireworks CS3 Series:
Best Practices Work Flow in Fireworks CS3 - Part 1
Best Practices Work Flow in Fireworks CS3 - Part 2



From Illustrator CS3 to Fireworks CS3
Reader Level: Reader Level

Every now and then, life gets easier for us. The latest iteration of Fireworks CS3 reduces the import of multi-layered Illustrator CS3 documents into Fireworks CS3 to nothing more than a couple of mouse clicks.

Approximate download size: 4.6MB

Animation: The Fireworks CS3 to Flash CS3 Connection
Reader Level: Reader Level

Who says you can't create Flash CS3 animations using Fireworks CS3?

Using Fireworks Blend Modes - Part 2: Altering Exposure
Reader Level: Reader Level

As I was experimenting with some of the new blend modes in Fireworks, I quickly learned some of these modes can be very helpful in correcting exposure and contrast in a photograph. And the best part is, using Blend Modes for this type of thing is incredibly easy.

In previous tutorials, I've shown how to fix an over exposed image using the Multiply blend mode. But we can take this process further with other blends, allowing us to adjust:
  • high contrast images
  • low contrast images
  • under exposed images

In part one of this two part series, we looked at ways to alter contrast and color saturation. In Part 2, we will look at adjusting exposure using blend modes.

The Using Fireworks Blend Modes Series:
Using Fireworks Blend Modes - Part 1: Altering Contrast and Color Saturation
Using Fireworks Blend Modes - Part 2: Altering Exposure



Using Fireworks Blend Modes - Part 1: Altering Contrast and Color Saturation
Reader Level: Reader Level

As I was experimenting with some of the new blend modes in Fireworks, I quickly realized some of these modes help to correct exposure, contrast and color saturation in a photograph. And the best part is, using Blend Modes for this type of thing is incredibly easy.

In previous tutorials, I've shown how to fix an over exposed image using the Multiply blend mode. But we can take this process further with other blends, allowing us to adjust:
  • high contrast images
  • low contrast images
  • under exposed images

In Part One of this two-part series, we will use blend modes to alter contrast and color saturation. We will cover a large number of blend modes as many modes are designed to alter contrast.

In Part Two of this series, we will look at using Blend Modes to alter the exposure of images which are too light or too dark.

The Using Fireworks Blend Modes Series:
Using Fireworks Blend Modes - Part 1: Altering Contrast and Color Saturation
Using Fireworks Blend Modes - Part 2: Altering Exposure Coming Soon



CMX Jumpstart: Detroit
Reader Level: Reader Level

Detroit is a two column design that uses background shadows created in the Fireworks to present the content as if it was sitting on a raised and tapering canvas.

As always there are a host of bundled tutorials that discuss each of the techniques used in great depth. I hope you enjoy Detroit and that it will become a useful addition to your design armory.

Flowing Text Around an Object in Fireworks by Using Freehand and Fireworks
Reader Level: Reader Level

If there is one weak area in Fireworks, it's in the text handling. I've seen many posts on the user groups asking how to flow text around an object in Fireworks. Attaching text on a path won't do the trick. The only way to do this in FW is through a tedious manual process of either creating multiple text objects, or using the space bar to customize the indenting of each line. The functionality is just not in Fireworks at this time. But it is in Freehand. Freehand allows you to flow text inside a path, or around a path or a bitmap object.

You can't do this easily in Fireworks:



But Freehand makes this type of thing simple to do.

This article will how you how to create the wrapped text in Freehand and then how to bring the result over to Fireworks. We'll also look at the limitations of this technique.

All You Should Know About Textures Free!
Reader Level: Reader Level

Thierry Lorey has been a Fireworks enthusiast since version 3 and is now Fireworks Zone’s webmaster, Fireworks beta tester and author for Community MX. He is the first European Fireworks enthusiast to write an article for Fireworks Developer Center. After some translation and training jobs, he is now the full-time Fireworks Zone's webmaster. His job includes writing news, tutorials, creating graphics, and maintaining and developing the website to keep the content new and fresh.

In Fireworks, a texture, also called a seamless texture, is designed to be repeated and applied to an a vector object on a percentage basis from 0 to 100%. Fireworks includes a collection of about 50 standard textures you will find on your hard disk at: Program Files > Macromedia (or Adobe) > Configuration > Textures . They usually come in bitmap formats: PNG, GIF TIFF, BMP, or JPEG and are therefore not editable.

In this article we will see how Fireworks' built-in textures can be used and customized, be it bitmap or vector textures by:
  1. Modifying the intensity of texture applied
  2. Enabling the transparency property
  3. Combining textures and patterns
  4. Selecting colors
  5. The application to strokes
  6. The inversion of textures
  7. The textures being turned into patterns
  8. Creation of a style from a texture


Drawing a Sunrise Using Fireworks
Reader Level: Reader Level

Creating a simple drawing of a sunrise with a sunburst effect is a very simple task in Fireworks using the vector polygon tool. In this tutorial we will have a look at using Fireworks' polygon tool to create a simple, but beautiful sunrise, where the sun will appear to be bursting vibrantly from the horizon.

Creating a Printable Photo Poster - A Fireworks Project
Reader Level: Reader Level

A friend of mine was checking out my flickr site recently, and she found a few photos that she felt would be perfect for her office. Three images, set in a single frame. Well to save a little money (and to exercise my FW skills again) I thought it would be cool to make a collage of those three images, set to the largest size that my local online photo lab can reproduce.



The largest image the lab can handle is 12" by 18" so you would think that my starting point would be to create a new document that would be those dimensions at a suitable resolution for reproduction.

If I was in Photoshop, that would be my first step. And indeed, this entire process could be done in Photoshop as well (hmmm sounds like a hook for part 2!). Fireworks, however, gets a bit sluggish with large files, and I first needed to come up with my design. So I created a file that was 12" x 18" at 72ppi as a mock-up. This would allow me to quickly play around with my design until I was happy, but within the correct proportions.

Come follow along as I show you how to work with high res images and make high quality prints using Fireworks as your creation tool.

Get the Red Out
Reader Level: Reader Level

I was looking at a photo of me from last year's TODCON and I was again reminded how red my face can go, even when I'm not embarrassed! I have a mild case of rosacea, you see, and when you combine that with lots of sun, and the odd alcoholic drink, my face goes quite red. I liked the photo overall, but felt there had to be some way to reduce my redness in Fireworks and indeed there is!

This article will show you a quick and easy way to reduce facial redness. We'll also cover a couple other basic imaging techniques for improving digital photo quality.

Using my face as an example, we'll cover several different techniques in this tutorial, many of which can come in handy if you have to edit images for say, an online company employee directory. The following tools and features will be used to get me looking better than usual.

Live Filters:

  • Levels
  • Gaussian Blur
  • Unsharp Mask

Bitmap Tools:

  • Dodge Tool
  • Replace Color Tool
  • Rubber Stamp Tool
  • Crop Tool
  • Pencil tool


Creating a Sidewalk Mural Using Fireworks
Reader Level: Reader Level

A while back myself and a couple friends went on a photo excursion in the Distillery District within downtown Toronto. It was a great day for photography (which you can see on my flickr site) but after I had reviewed the images, I wanted to see what else I could come up with. I've seen several chalk artists create full color murals on city sidewalks and I thought I would try my hand at this. Using two images from the Distillery District shoot and some stock Fireworks effects and tools, I was able to make a fairly convincing sidewalk mural.



Take a walk with me in this tutorial and see how I created this composite image, using masks, blend modes and various distort features of Fireworks.

Approximate download size: 8.8MB

Making a Flag Icon in Fireworks
Reader Level: Reader Level

Create a flag icon with the built-in features of Fireworks. Add a professional touch to the plain flat flags commonly seen across the web.

Convert Your Photo Into Line Art with Fireworks Free!
Reader Level: Reader Level

Convert your photographs into line art with the built in commands in Fireworks and the steps in this tutorial!

CMX JumpStart: Metropolis
Reader Level: Reader Level

CMX JumpStart Metropolis is a two-column, hybrid layout that has a fluid left column and a fixed-width right column. It includes rounded corners on its right side, and employs faux column technique to achieve equal height columns. It has a footer as well as a fixed header that remains in view even as the visitor scrolls the page - a property that is now supported by Internet Explorer 7. It features styled unordered lists for the navigation, styled skip links, min and max width, and has a placeholder for a photo gallery. Finally, there are several style sheets involved: a main style sheet, a style sheet for print, and a style sheet for all of the special Internet Explorer rules. And of course, as always, Metropolis validates for XHTML 1.0 Transitional, CSS 2.1, and 508 and WAI accessibility.

Approximate download size: 7.1MB

Turning Two-Frame Rollover Navigation into Button Symbols
Reader Level: Reader Level

Creating rollover navigation effects or buttons can be done easily in Fireworks, using different workflow styles. One very common method is to design your page on Frame 1, then make Frame 2 and set your rollover effects for your navigation on that page. You can then create your slices for each graphic element (including the buttons) and do your optimizing for each slice. While this method works and is pretty easy to understand, it has a certain pitfall which reveals itself upon Export.

When you have two or more frames and multiple slices, Fireworks will export an image for each slice, in each frame. This means that in order to get your rollover button states from frame two you will also get a bunch of slices from that frame you do not need or want. An easier to manage method is to use Button Symbols.

Ideally, you build your button symbols during the design stage. But what if you were supplied the design and wish to create button symbols from the existing navigation graphics? In this article, we're going to create them from an existing design that uses the 2-frame rollover method. We'll also review the functions of the Button Editor and talk about how if can help your workflow.

Creating a Digital Framed Print in Fireworks
Reader Level: Reader Level

In my last tutorial, we learned how to create a realistic digital photo matte using Fireworks. Inspired by Scott Kelby's tutorial on creating a photo frame in Photoshop (Photoshop CS2 for Digital photographers - a great book, btw), I thought I would put a Fireworks spin on this process.

On the Macrodobe forums I often see questions where new or potential users of Fireworks ask for a comparison between Fireworks and Photoshop. Now I am not going to get up on a soapbox and expound the virtues of either program right now, other than to say that Fireworks and Photoshop are very different programs at their cores. A different mind set is required to work effectively in one program or the other.

This tutorial - and others where I have taken Photoshop techniques and translated them into Fireworks processes - is a good example. My workflow makes use of primarily vectors to achieve my end result, rather than a bitmap approach. Here's the finished result:



I have built on the digital matte tutorial; I now have a subtly textured matte, and the image appears in what looks like a gallery frame. Whether digital or physical, I prefer simple frames for my photographs, so that the viewer's attention is focused on the image, rather than the decoration. This shot was taken on the same weekend as the photo in the matte tutorial, on the morning I left. A light dusting of snow came down during the night and I wanted to capture that "first snow" feeling.

Creating a Digital Photo Matte in Fireworks
Reader Level: Reader Level

So you've got that cool digital camera and you've been making some pretty awesome photos with it. Wouldn't it be nice to dress them up a bit with a nice matte, to frame the image? Then off you go to add them to flickr or put them on your own website to show the world.

In this tutorial, we'll use Fireworks 8 to create a textured digital matte to frame a photo. We'll be making use of both bitmap and vector tools, and we'll also save the matte settings as a style so they are easy to reuse for other images.

Below is one example of the finished image.



One thing I'd like to do is make this process as automated as possible. This way, we can combine a series of steps into a custom command that could be applied to multiple images.

A Fireworks Quickie - Text Mask Effect # 2
Reader Level: Reader Level

I was reading through Kim Dudley's recent Illustrator article and—like several times in the past—I thought it would be good to see how a similar effect is handled in Fireworks. In an ealier article of mine, we saw how to use text as a mask in Fireworks, but I'd like to take that basic concept and add the polished look of both Kim's and Knut Kubenz's tutorials.

Together, we'll produce samples similar to the images below:

Similar to Kim's image:


Similar to Knut's image:

Text masking works best with a large and/or bold font, so that you can see the image within the text. Figure one resembles one of Kim's results in her Illustrator article. Figure 2 is similar to Knut's. There are many permutations you can come up with during this process, so feel free to spread your own creative wings once you have the basics.

From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
Reader Level: Reader Level

In Part Four of this series you completed the optimising and exporting of your images from Fireworks, together with creating a good solid site structure.

In Part Five you will assess how your layout needs to be constructed for the screen media type by taking into consideration the content that will be required in each section. You will evaluate the areas where images need to be set to the background of your layout elements and we will discuss each rule as we build it so it becomes absolutely clear as to why we are implementing this rule or that and the reasons why we are implementing them.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
Reader Level: Reader Level

In Part 4 of this series you will learn how to build a good solid site structure and optimise and export your Fireworks images; This section completes our work in Fireworks.

In Part 5 of this series the real fun begins as we start to lay out our site for the screen media type and look at the problems that various browsers present to us and how we can work around these problems.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

Recreate the Law & Order Logo in Fireworks
Reader Level: Reader Level

I admit it. I'm a sucker for Law & Order, the long-running television show about police and prosecutors in New York City. Whenever I'm ready to plop on the couch and take it easy for a while I can always be sure to find an episode of Law & Order on somewhere on some station or the other. The episodes are almost always interesting and engaging, and you can even pop in halfway through almost any episode and quickly figure out what's going on.

I think it's safe to say that I've seen the logo for Law & Order hundreds, if not thousands, of times. Every time I do I always note the interesting interplay of colored shadows that make the logo stand out. As it happens, this logo is also a great way to learn a little about how shadows are used in Fireworks 8 for dramatic effect, as you can see in this example.

Law and Order example

Cool Pie Charts
Reader Level: Reader Level

While Fireworks has a tool for creating pie charts I find that the resulting two-dimensional chart is more often than not quite dull and boring.

In this tutorial I will show you how to spruce up your pie charts and transform them into attractive graphics that will look good on any page. It's really very simple, so let's do it already. :)

Create an Old Style Postcard with Fireworks
Reader Level: Reader Level

Let's take a little trip back down memory lane, back before there were computers, back before there was even color film for your camera. A simpler time, rendered in shades of gray or brown. A time when a handwritten letter or postcard was the rule, not the exception. A time when -

OK OK, you get the idea, right?

We're going to do a little time traveling in this tutorial, taking a photo I shot this past winter and making it look like it was shot in the 1920's. The original image is seen below.



And our goal is to end up with something similar to this:



The original image is pretty monochromatic to begin with, but it's not the hue we want. You might also notice some overhead wires in the original. The main subject of the photo is also a bit on the dark side which we will fix with some of the bitmap tools.

While we will be covering some of these retouching techniques, if you are unfamiliar with the Fireworks interface, I would recommend reading some of the introductory articles on the toolbar and masking. You'll find a list of these at the end of the article.

Create Revolving Text in Fireworks
Reader Level: Reader Level

If you're as old as I am you may remember the reruns of the Superman TV show. You know the one, with George Reeves as Superman and the "Great Ceaser's Ghost" exclamations from Perry White. Something I also remember was the huge globe that sat atop the Daily Planet building with the name of the newspaper rotating around the sphere.

While this tutorial won't revisit the Superman television show, you can recreate the look of the revolving text as it travels around a globe. Using a few of the specialized tools in Fireworks it's easy to make your own animated GIF or even Flash movie that has your text revolving around a elliptical path, perfect for doing your own Daily Planet clone as you see in the image below.

Revolving text example

From Concept to Cross-Media Compatibility: Part Three - Building the Footer and Slicing the Drawing
Reader Level: Reader Level

In Part three of this series you will complete the design work in Fireworks, slice your PNG file and prepare the slices for exporting.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

CMX JumpStarts: Greenville
Reader Level: Reader Level

Our summertime JumpStart takes us to Greenville, North Carolina. Chances are that if you were born in the United States your state has a town named Greenville. And with a name like that, it's got to have great gardening opportunities, right? Our Greenville JumpStart features a beautiful tapestry of transparent backgrounds that afford the designer all sorts of artistic opportunities. Plus, Greenville, like all our JumpStarts, uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines. Taken altogether, Greenville provides you with a solid foundation for any design.

Greenville is a two column, fixed width layout with header and footer. It features styled unordered lists for the navigation, a styled form, and styled skip links. Several style sheets are included: commented and uncommented style sheets for print and screen media and three Win IE - only sheets that take care of browser anomalies in WinIE5, WinIE5.5 and WinIE6. The JumpStart features Zoe Gillenwater's Teaser Thumbnail List to display the images and text in lefthand column. Last but not least, the JumpStart includes the PNG file used to create the layout.

The download for this JumpStart is fairly large at 18MB, due in large part to an included tutorial that weighs in at 12.5MB. If you are purchasing CMX JumpStart Greenville and would like to download the package without that tutorial, or download it in smaller chunks, please send an email to info@communitymx.com and we will make arrangements for you to do so. If you are a CMX subscriber, you will find links at the end of the article, but prior to the list of supported browsers, to download the JumpStart various different ways.

Turning a Tile Image into a Fireworks Pattern Free!
Reader Level: Reader Level

There are lots of tile images available on the web for free, or you may be keen on creating your own. But once you've got the image, how do you set it up so that it displays in the Property Inspector's patterns menu to use for filling vector shapes?

You could do a lot of copying and pasting to manually repeat the image, but that is way too much work. And there is a much easier way; Fireworks Patterns. You can apply patterns to fill any vector shape, thus giving the shape a more textured, organic or photo-realistic appearance.

This brief tutorial will show you how to take a seamless tile image and add it to the Fireworks Patterns menu.

Polarized Sky Effect using Fireworks
Reader Level: Reader Level

Our Photoshop Guru, Knut Kubenz, recently wrote a tutorial on creating a polarized sky effect without using expensive camera filters. He described the process using Photoshop. Now if you know me, you'll also know I am always looking for ways to produce the same or similar Photoshop effects within Fireworks. Seeing as Knut an I were on one of our photo jaunts the day he took the photo of the marina, I thought this would be a perfect example for producing the effect in Fireworks. You'll also see that photographers rarely see exactly the same thing, even when they're standing in almost the same spot.

CMX Design Elements - Iodine
Reader Level: Reader Level

Welcome to the latest in the CMX Design Elements series. This new, and vibrantly colored design has been named Iodine.



While other Design Elements have focused on layouts that would most likely be translated by the coder into a fixed width layout, Iodine is designed in such a way that it could be applied to either a fluid or fixed width design.

Please read on to discover how to use and find your way around CMX Design Element - Iodine.

What's Included?

In the CMX Design Element - Iodine package you will find the following:

  • The Iodine design PNG.
  • A suggested color scheme to help you maintain the design's color consistency.
  • Example form controls to add to your customized Iodine page.
  • An .STL file that allows you to easy reapply all the styles used in the Iodine design via a few clicks in Fireworks.
  • Six bundled tutorials that will guide you in the use of included design techniques such as importing an .STL, slicing and exporting, using gradients, and applying styles and using layers

Approximate download size: 2.3MB

The CMX Design Elements
CMX Design Elements - Krypton
CMX Design Elements - Carbon
CMX Design Elements - Gold
CMX Design Elements - Mercury
CMX Design Elements - Iodine
CMX Design Elements - Xenon



Reflections on a Theme in Fireworks
Reader Level: Reader Level

It's a little hard to say who started the design trend that features objects that appear to be sitting on top of a mirror, but it's safe to say that Apple has made the most of this particular look. If you make a visit to the Apple site you'll see that almost all of their products are displayed as if they are sitting atop a mirror with the screen captures, text, boxes of software, and hardware reflected below. It's a design element that lots of others have emulated, and whether or not Apple started the trend, they've certainly be responsible for making it popular.

And Lord knows, it is popular. Not to say that popular isn't good, as you can get some striking effects for your products or even simple text by duplicating, flipping, and fading an object as you see in the example below.

Reflected text


CMX JumpStarts: Orlando
Reader Level: Reader Level

Mention Orlando, and most people immediately think of theme parks, laughing kids, warm sunshine and palm trees. Our Orlando JumpStart captures this spirit of Orlando perfectly, from its imagery to fun masthead font to bright colors.

As do all our JumpStarts, Orlando uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Orlando is a two column elastic layout, which means it expands in width based on the user's font size. This allows the overall proportions of the page to stay intact no matter what window or font size the page's visitors are using, as well as making the design very accessible. The design also features a subhead area, a styled list as a navigation menus, and floated images.

The graphic and code techniques used to create Orlando are explained fully in the 11 tutorials that we've included in your download, as well as this article. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for the layout, the two source Fireworks PNGs, and a Dreamweaver extension that allows you to create new pages based on Orlando easily.

If you'd like a more detailed look at the Orlando Jumpstart, as well as seeing a modified Orlando design, check out Sheri German's CMX JumpStart Orlando: An Introduction. Otherwise, click the link below to dive right into this JumpStart!

Create a Polaroid Photograph in Fireworks
Reader Level: Reader Level

Do you have a drawer full of Polaroid photos somewhere? Perhaps they're old vacation photos or shots from a family reunion. Wherever you might have taken them, the trusty Polaroid camera was for a time the best way to get instant photographic gratitude. A push of the button, and whir of the motor, and the camera would discharge a hunk of plastic that would magically show your picture in just a minute or so. And if you're really old like I am, you might even remember an earlier time when you had to peel a protective paper away from the picture and fan it in the air until the image dried.

In many ways that was a simpler time and images that simulate the look of a Polaroid snapshot still evoke a certain sense of nostalgia. While the Polaroid camera has gone the way of the 8 track tape player, the look and feel of Polaroid pictures can still be used for great effect, particularly when you want to capture the feel of an earlier era. In this tutorial you'll learn how to turn your own images into Polaroid snapshots and capture that earlier time.

Approximate download size: 3.4MB

From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
Reader Level: Reader Level

In Part 2 of this series we will continue with the design in Fireworks. We will begin work on the content area, lay the ground work for displaying equal-length columns in your CSS layout and create a dividing rectangle using textures between the Banner area and the content area.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

Creating Web Icons: Part 3
Reader Level: Reader Level

Once again we don our magnifying glass and set about creating another three commonly used web icons using Fireworks.

In previous tutorials of this series we created mail icons, shopping cart icons and a few other nice little additions to a good web design. This time we will make a tiny site map icon, an alarm clock icon and an image icon.

So let's open Fireworks and get pushin' some pixels!

The Creating Web Icons Series:
Creating Web Icons: Part 1
Creating Web Icons: Part 2
Creating Web Icons: Part 3

Build Seamless Background Image Tiles out of Shapes in Fireworks
Reader Level: Reader Level

Tiled background images where a small shape repeats across the web page have come back into style. There are web sites devoted to providing free patterns for you to download and apply to your sites, but what if you want to create your own pattern? You can create any shape you like, using your favorite graphics program, and then set it as a tiling background image using CSS. However, creating a pattern out of your shape that tiles well—without any seams or gutters—takes some work.

In this tutorial, you'll learn how to create seamless background patterns using Fireworks (but the principles can just as easily be used in Photoshop or any other graphics program).

Note: This tutorial doesn't cover how to draw a shape or apply it to your page as a background. Rather, it shows how to take a shape that you want to turn into a seamless pattern and use Fireworks to do just that.

Blends and Masks - A Fireworks Project: Part 2
Reader Level: Reader Level

In Part One of this two-part series, we worked with several of Fireworks's tools (new and old) to produce a corporate style cover page in a vertical format.

In Part Two we'll look at how we can take a design and re-purpose it for another use. Most print work is created in a portrait—or vertical—orientation. Most work destined for the screen is designed to fit a landscape—or horizontal—orientation. We will take the image we created in Part 1 and create a horizontal image, which could be used in a kiosk, on a homepage or a PowerPoint Presentation.

The Blends and Masks Series:
Blends and Masks - A Fireworks Project: Part 1
Blends and Masks - A Fireworks Project: Part 2

Approximate download size: 6.3MB

CMX JumpStart San Francisco for Students (and Anyone)
Reader Level: Reader Level

We are pleased to introduce CMX JumpStart San Francisco, a great first CSS layout for students and experienced developers alike. Structured to be as hack free and straightforward as possible, this may be just the JumpStart for you if you have been holding back on CSS layouts so far. Like all JumpStarts, it uses valid XHTML and CSS as its foundation and is 508 and WAI compliant. This two-column, fixed-width layout, described rule by rule in the documentation article, makes a great learning tool.

Approximate download size: 4MB

CMX Design Elements - Mercury
Reader Level: Reader Level

Hello, and welcome to the fourth CMX Design Element. This Design Element's code name is Mercury due to its gentle lines and pale metallic palette.

While our previous Design Elements have been loose designs with no particular theme, Mercury is a design that is focused towards (but not in any way limited to) photography sites. It looks like this:

Mercury

What's Included?

  • The Mercury PNG file.
  • Custom web icons drawn in Fireworks that will compliment the Mercury design perfectly.
  • A STL file that will allow you to re-apply all the Fireworks Styles used in Mercury's design via the Styles Panel.
  • Extra bullets and buttons specially designed to be used with Mercury.
  • Full support via our forums.

You also receive 6 bundled articles that explore the concepts and techniques used in the development of CMX Design Element - Mercury in detail:

We aim to make CMX Design Elements educational as well as productivity enhancing.

Approximate download size: 5.3MB

The CMX Design Elements
CMX Design Elements - Krypton
CMX Design Elements - Carbon
CMX Design Elements - Gold
CMX Design Elements - Mercury
CMX Design Elements - Iodine
CMX Design Elements - Xenon



Blends and Masks - A Fireworks Project: Part 1
Reader Level: Reader Level

I've been playing more with blending modes and masks lately in an effort to come up with some unique collages that still have a business/corporate feel to them. With all the new Blend Modes in Fireworks 8, it's amazing to see what you can come up with—not to mention, fun!

A great deal of my personal photography is landscape and nature. Incorporating these types of images into a business presentation or homepage can at times be challenging—unless you're the Sierra Club. What I have done—and you will do—in Part 1 of this tutorial is create a cover page with an annual report feel. You'll be working with:
  • Blend modes
  • Masks
  • Live filters
  • Importing images into Fireworks
  • Guides
  • Symbols and Instances

Approximate download size: 1.4MB

The Blends and Masks Series:
Blends and Masks - A Fireworks Project: Part 1
Blends and Masks - A Fireworks Project: Part 2



Correcting an Overexposed Image Using Masks and Blend Modes
Reader Level: Reader Level

When you are shooting fast moving objects, sometimes you just have to react and hope your exposure is acceptable in the final image. Sometimes though, while you may get the shot you want, the exposure isn't good as it should be. In a past tutorial, I demonstrated how to quickly fix an over exposed image by creating a duplicate object and using the Multiply Blend mode. In this tutorial, we will build on the multiply technique by adding a custom bitmap mask and experimenting with different shades of grey when applying the mask. To help with a washed out sky, we'll make use of the Replace Color tool and the Burn tool to add density to the waves created by the windsurf board.

Fireworks on Mother's Day
Reader Level: Reader Level

Mother's Day is fast approaching and I thought it would be fitting to make a new card for my Mom. Because I'll be emailing it and because of some of its very useful features, I'll be using Fireworks 8 to create my "Ode to Mom."

This tutorial will cover the use of:
  • Converting a Mask to a selection
  • Saving and restoring bitmap selections
  • Modifying bitmap selections
  • Combining two images using blends and masks
  • Text on a path
  • Dodging and burning
  • Using blend modes and opacity with the Rubber Stamp
  • Applying the Radial Motion Blur filter

Approximate download size: 11.2MB



From Concept to Cross-Media Compatibility: Part One - Building the Header Free!
Reader Level: Reader Level

This series is for the designer that is new to CSS layouts, it will require no pre-requisite knowledge.

Once completed you will have gained the necessary knowledge of how to build a website with CSS and how to carry that design through from an initial concept in Fireworks and present the completed work to a variety of media types.

The series will discuss the techniques involved from the image creation in Fireworks through optimisation and exporting your slices.

Once the design is complete I will talk you through the reasons why the CSS structure is as it will be and discuss how the elements of the design work in relationship with each other.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

Creating Web Icons: Part 2
Reader Level: Reader Level

When it comes to good design, everyone knows that God is in the details. Some of the best designed web sites all have one thing in common: a huge attention to detail.

A good design contains many graphic elements that extend beyond the common presence of attractive logos, creative background images and the various other images that serve to create a web page. Small web icons are one of those small details that make the difference between a good design and a great design.

In the first tutorial of the series we looked at creating a home page icon, a printer icon and an email icon. In this second tutorial we will create an add to cart icon that will be represented by a small image of a shopping cart, a download file icon, and a delete icon that will be represented by a small image of a trash can.

The Creating Web Icons Series:
Creating Web Icons: Part 1
Creating Web Icons: Part 2
Creating Web Icons: Part 3

Creating Web Icons: Part 1
Reader Level: Reader Level

When it comes to good design, everyone knows that God is in the details. Some of the best designed web sites all have one thing in common: a huge attention to detail.

A good design contains many graphic elements that extend beyond the common presence of attractive logos, creative background images and the various other images that serve to create a web page. Small web icons are one of those small details that make the difference between a good design and a great design.

In this tutorial we will have a look at drawing three of the most commonly used web icons: a house, used for a home link; an envelope, used for an email link; and a printer, used for a printable version link.

The Creating Web Icons Series:
Creating Web Icons: Part 1
Creating Web Icons: Part 2
Creating Web Icons: Part 3

CMX Design Elements - Krypton
Reader Level: Reader Level

Welcome to the second in our series of CMX Design Elements. We have moved along the periodic table from Carbon to Krypton (no, not the green crystals that make Superman tougher than the average mortal :o) )

The element Krypton (Kr) is used commonly in photographic flashes for speed photography, but our own CMX version of Krypton is generally intended to make awesome web sites :)

Here's what it looks like:

Krypton
Image 1: Design Element - Krypton.

Approximate download size: 5MB

The CMX Design Elements
CMX Design Elements - Krypton
CMX Design Elements - Carbon
CMX Design Elements - Gold
CMX Design Elements - Mercury
CMX Design Elements - Iodine
CMX Design Elements - Xenon

Creating Metallic Effects with Curves
Reader Level: Reader Level

Creating metallic effects in Fireworks can easily be accomplished throught the use of Curves. What's that you say? You thought Curves were only used for color correction in digital photographs?

Well, yes, that is the primary use for Curves, but as you'll see in this tutorial, you can use these handy little devices for other creative purposes as well. In this case, you'll see how basic text and other objects in Fireworks can be given a chrome, gold, or bronze metallic look simply by distorting the color output through the use of Curves.

CMX Design Elements - Carbon
Reader Level: Reader Level

Community MX is pleased to announce a very exciting new series of design goodies that we have tagged CMX Design Elements.

How often have you sat down and stared at a blank Fireworks Canvas, trying to summon some inspiration for that really demanding client that you know is going to be very hard to please? Well, if that's you then we're pleased you found us…

Approximate download size: 5 MB

The CMX Design Elements
CMX Design Elements - Krypton
CMX Design Elements - Carbon
CMX Design Elements - Gold
CMX Design Elements - Mercury
CMX Design Elements - Iodine
CMX Design Elements - Xenon

Creating Wet Paint Effects in Fireworks
Reader Level: Reader Level

It's easy to get in the habit of going back to the same tools over and over once you become reasonably comfortable with an application. The problem with this all-too-human behavior is that we often overlook tools that can be used for special purposes or to create something new and unique. Fireworks has a number of little-used tools that allow you to achieve some great effects if you just know where to look.

One such tool is the Reshape Area tool. With this fun little device you can push and pull vector objects around your canvas for either minor edits, or to do something a little more drastic and creative. As I rediscoverd the last time I sat down just to play around with Fireworks, you can use this tool to get some pretty interesting effects that simulate the look of wet paint. And while you may not need to create a Wet Paint sign for a web site anytime soon, working through the steps in the tutorial may help you to come to a better understanding of what the Reshape Area tool can do and perhaps open your eyes to other creative uses of this little-used tool.

In this tutorial, which includes four Captivate video demonstrations, you'll learn how to put the Reshape Area tool to good use and get some more practice in working with vector objects in Fireworks.

Approximate download size: 2.2MB

Teaming up Fireworks and Flash 8 to Create a Custom Video Player
Reader Level: Reader Level

When the Flash Video components or pre-rolled buttons don't fit the the project spec, what's a developer to do? How about using Fireworks 8 and Flash 8 to create a custom video player?

In this article I will show you how the drawing tools in both Flash 8 and Fireworks can be used to create a custom video player. We've also included some sweet little buttons created by CMX Partner Gordon Mackay.

In the next article, we will wire the whole thing up using ActionScript.

Approximate download size: 563k

Share Your Style
Reader Level: Reader Level

One of the greatest features of Fireworks is its extensibility. This extensibility allows developers to improve their workflow dramatically. Styles are one of those extensible features that people should be aware of and take advantage of as much as possible.

In this tutorial we will learn about creating and sharing Fireworks styles with other Fireworks users. You may ask "Why would I want to share my Fireworks styles?" Let's look at a simple but realistic scenario: You are the lead designer on a project that encompasses a team of designers all working on the same composition. In order for numerous people to work on the same design, certain elements of that design must be kept consistent, this is where the ability to create, store and share Fireworks styles may become important.

One other scenario may be that you're an incredibly generous mamber of the Fireworks community who likes to share their creativity with other users :)

Either way this tutorial will be helpful, and will include some rather cool fireworks styles for you to use in your own projects.

Batch Processing Images to a Custom File Size Free!
Reader Level: Reader Level

Fireworks Batch processing features can really save you time when you have to do the same thing to a bunch of images. A recent question in the Macromedia Fireworks forum made me stop to think of another batch processing routine that may come in handy for people; batch processing images to a specific file size.

Let's say you have a large number of photos that are different file sizes. Perhaps due to disc space restrictions or file size limitations for a web gallery or e-commerce site, you have to ensure that ALL the images not exceed a specific file size.

This tutorial will show you how to create a batch process for exporting a folder full of files to a specific file size, how to create your own custom Optimization Presets, and how to to save multiple Batch Options as a single script file that can be accessed in the Batch Process window.

CMX JumpStarts: Minneapolis
Reader Level: Reader Level

When it comes to shopping, Minneapolis is tough to beat. Travel + Leisure magazine called Minneapolis the 4th best shopping destination in the country, behind only New York, San Francisco and Chicago. And when it comes to jumpstarting your web designs, Community MX is the best. Our newest JumpStart boasts a pretty neat eCommerce design. So naturally we named it Minneapolis, after the city with the largest shopping mall in the United States.

The future of shopping is online, right? The Minneapolis JumpStart, with its valid XHTML 1.0 and CSS 2.1 markup, adherence to WAI and Section 508 accessibility guidelines, provides you with a solid foundation for any kind of eCommerce site.

Note: The download for this JumpStart is very large, 73MB, due in large part to the Drawing on Nature tutorial listed above. This tutorial contains four video lessons, hence the large file size. If you would like to download this JumpStart with all the bundled tutorials except this one, there is a link at the end of the article that will allow you to do so.

If you are not a member of CMX and are buying this JumpStart and can not download a 73MB zipfile, please send an email to info@communitymx.com after your purchase and we will make arrangements for you to download it in 2 parts.

Creating Realistic Water Droplets on a Photograph
Reader Level: Reader Level

There are many tutorials available on how to create water droplets. In fact my hat is off to a couple that are truly ingenius and simple. So why do another? Many of the resutls I have seen tend to look a bit unrealistic when used on a photographic image, or when compared to a real water drop in a photo. My goal was to go for realism. So, using a photo that has real drops in it, I went about trying to create my own, custom, articial, but realistic droplets. I think my expereimentation paid off; I came up with a process that can be used to create a droplet on a variety of images, with varying lighting conditions. In each case, the modfications to the droplet were minor.

To achieve this result, we'll be working with a variety of tools in Fireworks:
  • Vector Shapes
  • Bitmap selections
  • Transform tools
  • Converting Paths to bitmaps (FW 8 only)
  • Live Filters
  • Gradient fills


Creating Edge/Border Effects in Fireworks
Reader Level: Reader Level

You never stop learning. Something I have always been interested in is a way to produce a similar result or effect in different software packages. Take Photoshop and Fireworks, for example. Photoshop gives you the ability to create some pretty cool edge and border effects without having to go out and buy third-party software, as you'll see in Knut Kubenz' recent tutorial.

Reading that tutorial, I got to wondering how I could do the same kind of thing in Fireworks. One inherent difference between the two programs is that PhotoShop's roots are firmly planted in the raster graphic half of digital imaging. Fireworks has its roots in the vector graphics half. So, needless to say, there are some different ways to achieve the same kind of result. One thing I do like about this method is that it is non-destructive; no pixel data will be harmed or deleted during the making of this edge effect.

My focus will be on using vector shapes and the built-in Live Filters of Fireworks to create my edge effects. You have a great deal of control with vector shapes. Combine that with the power of Live Filters and your own sense of imagination and you've got a lot of creative potential ready to be unleashed.

We'll be looking at three methods in detail using:
  • vector shapes
  • custom paths
  • Live Filters
  • strokes

I'll also touch on using bitmap masks to create edge effects.



Under the Hood with Fireworks
Reader Level: Reader Level

An odd title from someone who even takes his car into the shop to get an oil change, but there you have it. A question was posed to me recently by one of the CMX partners; he was wondering if there was some extension or automatic way to have an image sliced and exported out as multiple pieces. While Fireworks doesn't quite have this innate ability, you can create a fairly automatic process do this.

In this article, we will look at creating a custom command for generating automatic slice guides at predetermined distances. We'll also go under the hood and look at the JavaScript code used to generate this command and see how easily it can be customized.

I — and others — have written previous articles about creating custom commands (see the list at the end of this article) They're so darned easy to make that if you think you're going to be repeating an identical process more than a couple times, custom commands can really save you time. And time, as they say, is money.

A Fireworks Quickie - Optimizing Text
Reader Level: Reader Level

Getting good quality text in a JPEG file has long been a concern for many designers. Fortunately for us, Fireworks MX and higher versions have a very useful feature to help with this called the Selective Quality. In Fireworks MX 2004 and higher, we also have the ability to adjust and customize the aliasing of text. In this short tutorial find out how to utilize these features to keep your text crisp and snappy when exporting a file as a JPEG image.

Approximate download size: 2.5MB

Text on a Path in Fireworks 8
Reader Level: Reader Level

The release of Fireworks 8 brought with it many enhancements from both creative and production perspectives. This article focuses on one of the old FW features that was revamped for Fireworks 8 — editing text on a path. Adding text to a path breaks you out of the rigid formality of text blocks and gives you the freedom to make the text fit into your design in an almost organic fashion.

In the old days, changing the shape of a path that was attached to text was a multiple step process, and not a very intuitive one. In order to edit the path, you had to detach the text, change the path and then re-attach the text. Very much a trial and error process. In FW 8, it's just as easy to edit the path shape as it is to add text to a path. This makes it easier — and more fun — to create what you want. Control like this has been asked for many times in Fireworks, I'm happy to say it's finally arrived.

Add Some Sparkle to Your Text with Fireworks Symbols
Reader Level: Reader Level

You've probably seen this little effect on television or in web graphic here and there. A little starburst effect is added at the edge of text or on top of some other object. Even though it's just a a little bit of eye candy, the results are quite effective when you want to make something shine just a bit and draw the viewer's eye to the graphic.

You can use Fireworks animated symbols to create this effect in a flash. Since symbols are reusable objects all you really need to do is create one animated sparkle and the symbol can be used over and over in your composition. This allows you to take much of the work out of creating this little effect while adding something that makes your text shine.

In this tutorial you will learn how to create an animated symbol, how to draw the starburst sparkle, how to animate the starburst, and how to incorporate the animated symbols into your composition.

Flash Video Cue Points: Part 2 - Embedded Navigation Cue Points with Flash Pro 8
Reader Level: Reader Level

In the last tutorial of this series, you learned how cue points can be used to enhance video in Flash. In this installment, you learn how to add navigation cue points to a video source clip that will be compressed as a Flash Video file (flv).

The Flash Video Cue Points Series:
Flash Video Cue Points: Part 1 - Overview of Cue Points
Flash Video Cue Points: Part 2 - Embedded Navigation Cue Points with Flash Pro 8
Flash Video Cue Points: Part 3 - Building a List of Embedded Cue Points
Flash Video Cue Points: Part 4 - Adding Cue Points with Sorenson Squeeze 4.3 Coming Soon

A Fireworks Quickie - Creating a Custom Command for Auto Shapes Free!
Reader Level: Reader Level

I was reading an interesting thread on the Fireworks Newsgroup recently, about Auto Shapes. More specifically, the user wanted to know if there was any way he could get Fireworks to remember the specific settings for the Pie Auto Shape, in terms of size, segments and position on the canvas.

Without editing the actual JavaScript code for the Auto Shape, I don't think there is a way to get FW to lock in those changes permanently, but I discovered that — using Fireworks 8 — there is a way to create a custom command that does basically the same thing.

I'm a big fan of finding ways to reduce repetition; it saves you time, increases productivity and — let's face it — if I have to add a shape to 200 images for use as a mask object or some such thing, I really don't want to be building the shape from scratch every single time. BORING!!!

A custom command is created by saving a series of steps in the History panel as a single command. Once saved, the command will appear in the Command menu, and is useable on any open file.

I say Fireworks 8 because I found it necessary to use the new Auto Shapes panel to achieve the end result. Typically — and in earlier versions of FW — the only way to put an Auto Shape from the tool bar onto the canvas was to select the shape, then click and drag to draw the shape to your desired size. To edit the properties of the Auto Shape, you would normally drag the shape control handles. The problem with both these steps is that they cannot be recorded by the History panel, because they both rely on mouse movement. In FW 8, we have the new Auto Shape Properties panel, though. We can control every aspect of the shape from this panel, including the ability to insert new, additional shapes without going to the toolbar. This method worked on every auto shape I tested; it is not limited to the pie shape.

So follow along in this quick tutorial to see just how easy this process is. Who knows — it might even save YOU some time.

CMX JumpStarts: Inverness
Reader Level: Reader Level

Welcome to the latest CMX JumpStart— Inverness.

Inverness is the latest city in Scotland to attain city status. It is also the capital of the Highlands, and now it's a blog design too :)

The Inverness JumpStart is a centered, two column, fixed-width layout that emulates the styling's of a typical weblog. We chose to demonstrate this style of layout due to its current popularity as a way of representing frequently updated content on web pages.

There is nothing terribly complicated about the majority of blog designs. They all share a few common components as part of their index pages:
  • A summary of latest posts.
  • A selection of latest posts with snippets of the post content.
  • A link that takes the user to the detail page for the post.
  • A link that takes the user directly to a form that allows them to comment on the post.
  • A list of links to other blogs that the site's owner thinks his users will find interesting.

In addition to those features they also contain things common to all web pages… intuitive navigation and a unique form of branding that gives the owner's weblog a look all of its own.

This CMX JumpStart includes reference to all of these.



Making Antique-Style Glass Ornaments in Fireworks
Reader Level: Reader Level

If you celebrated Christmas as a child, you might remember those old-fashioned, hand-blown glass ornaments that Mom and Dad would carefully unpack, and then hang high on the tree, out of reach from curious young hands. Well over the past couple years, these ornaments seemed to have made a come-back in retail stores. I got to thinking that it would sure be nice to have some kind of ornament — other than the standard ball ornament — that we see in a lot of designs and clip art. So, with the help of some Smart Shapes, a bit of masking and path manipulation, I was able to do just that. And you will too, after trying out this holiday tutorial.

Circle the Date with Fireworks and Flash
Reader Level: Reader Level

Have you ever had a calendar date that you wanted to fix in the mind of the viewers of your site? Perhaps it's an important upcoming event that you want to make sure they make note of. A good way to do that is to provide the viewer with a visual representation of a date on a calendar being circled. Even, better, if you make the circle animated you'll add more impact to the reminder and help your viewers really get the message.

Using Fireworks and Flash together you can create an image like this in short order. In this tutorial you'll see how to use the Pie Autoshape in Fireworks to create a segmented circle that is then distributed to frames and readied for transfer over to Flash. Once you're in Flash the animated circle from Fireworks becomes a movie clip that is applied as a mask to small circle. The end result is a circle that appears to be drawn around the date you want to highlight as the mask is revealed. While that might sound complicated, in fact it's quite easy.

CMX JumpStarts: Cairo
Reader Level: Reader Level

Welcome to the CMX JumpStart — Cairo. Cairo is a fixed-width two-column layout that has been developed as a learning tool to show how you can use background images and work with gradients and glows to produce designs that are a little different from the run of the mill designs we see so many of on the Internet.

The Many Uses of Fireworks - Part 2 - PowerPoint Backgrounds Free!
Reader Level: Reader Level

As we learned in Part 1, Fireworks is not just for web graphics. I think of FW as a screen graphics app. It lends itself well to almost any production flow that needs screen quality images, such as Captivate, PowerPoint, Flash, Director and even the desktop.

In Part 1, we looked at how to make promotional wallpaper for your site's visitors, including ways to batch process your files at various pixel dimensions. In Part 2, we will explore Fireworks' capability as a graphics editor/creator for PowerPoint and Captivate.

For good or ill, PowerPoint has become the de facto standard for many types of corporate presentations. Product launches, sales meetings, conferences, and the list goes on. It's easy enough to build a presentation using only the design templates that come with PowerPoint, but your presentation might look very much like someone else's. Also, the stock designs may not utilize a given company's corporate colors. And in many cases, the person creating the presentation may not have the skills, software or time to put together a custom look.

This is where you and Fireworks come in to save the day. Creating custom backgrounds and navigation art — even if it's just optimizing the images that exist in a current presentation — can mean another revenue source for you. And if you're like me — an independent contractor — having your fingers in several pies helps smooth out the highs and lows of project work.

Creating a Location Rollover Map with Fireworks
Reader Level: Reader Level

Many times the best way to learn a technique is to tackle a common design task. In this case, let's imagine that you have clients who have asked for a rollover map for their site showing the locations of their stores in California. There are any number of ways to get this done, but in this case we'll look at one of the easiest methods of all—using Fireworks to create all of the images and interactions in a single composition.

This series of three video tutorials will take you through the process of setting up your Fireworks file, inserting frames to hold the rollover objects, then using slices and hotspots to generate the final Fireworks HTML that can be inserted into your Dreamweaver page. Along the way you'll pick up some valuable tips and techniques for working with interactive images in Fireworks as well as best practices for making short work of a complicated design task.

(Not So) Scary Ghosts 'n Goblins - Part 6
Reader Level: Reader Level

Following in the footsteps of Kim Dudley's petrifying tutorial for making a tombstone in Freehand, here is my offering from the Fireworks side. There are some neat things you can do in Freehand, but my head — err, hat — is off to Fireworks 8 for the way it can quickly add a three-dimensional element to a flat shape. Using textures to make vector shapes more realistic is also a strength of Fireworks, as those textures always remain editable. Add in gradient fills, and we've got a crypt full of scarifying tools.

The (Not So) Scary Ghosts 'n Goblins Series:
(Not So) Scary Ghosts 'n Goblins - Part 1
(Not So) Scary Ghosts 'n Goblins - Part 2
(Not So) Scary Ghosts 'n Goblins - Part 3
(Not So) Scary Ghosts 'n Goblins - Part 4
(Not So) Scary Ghosts 'n Goblins - Part 5
(Not so) Scary Ghosts 'n Goblins - Part 6
(Not so) Scary Ghosts 'n Goblins - Part 7

CMX JumpStarts: Traverse City
Reader Level: Reader Level

You can rest easy using this JumpStart inspired by the tranquil and beautiful Traverse City, Michigan. As do all our JumpStarts, Traverse City uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Traverse City includes both a three-column home page layout and a two-column inner page layout, both fixed-width, which we've set up in a way that allows you to switch between the two in your own site with ease. Both layouts feature styled lists as navigation menus, and the inner page layout includes a styled data table.

The graphic and code techniques used to create Traverse City are explained fully in the nine tutorials that we've included in your download. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for both the layouts, the source Fireworks PNG, and a Dreamweaver extension that allows you to create new pages based on Traverse City easily.

If you'd like a more detailed look at the Traverse City Jumpstart, as well as seeing a modified Traverse City design, check out Sheri German's CMX JumpStart Traverse City: An Introduction. Otherwise, click the link below to dive right into this JumpStart!

(Not So) Scary Ghosts 'n Goblins - Part 5
Reader Level: Reader Level

Well if Part 4 didn't send you screaming form the room in fear (of the Pen tool), my latest addition in the series is guaranteed (ok, well, not really) to make your heart beat faster and envelop you in a cold sweat.

In Ghosts 'n Goblins 5, we turn our attention to that winged demon of the night, the vampire bat!

This stylized bat will test your control of the Pen tool (not to mention, expletives), but if you made it through the spider's web, then I think you're up for the challenge.

Includes: Source PNG file, PDF, bat anti-venom, hair net

The (Not So) Scary Ghosts 'n Goblins Series:
(Not So) Scary Ghosts 'n Goblins - Part 1
(Not So) Scary Ghosts 'n Goblins - Part 2
(Not So) Scary Ghosts 'n Goblins - Part 3
(Not So) Scary Ghosts 'n Goblins - Part 4
(Not So) Scary Ghosts 'n Goblins - Part 5
(Not so) Scary Ghosts 'n Goblins - Part 6
(Not so) Scary Ghosts 'n Goblins - Part 7

A Fireworks Quickie - Using Hue/Saturation Live Filters to Colorize an Image Free!
Reader Level: Reader Level

I'm always looking for cool new things to do with photos. Sometimes I even stumble across techniques by accident. It's even cooler when that technique is easy to do, as in this tutorial about colorizing an image using the Hue/Saturation Live Filter (Live Effect in MX 04 and earlier).

Making Complex Selections Using Bitmap Masks
Reader Level: Reader Level

When making an irregular bitmap selection, you generally only have two tools: the Magic Wand or Lasso tool. The Magic Wand may not be accurate enough if your image contains many similar colors. The Lasso can take a lot of time and patience.

There is another alternative though, it's my version of Photoshop's Quick Mask feature. This tutorial will work with almost any version of Fireworks. With Fireworks 8 new Convert Path to Selection or Convert Selction to Path, you can have even more editing control over your final selection.

If the area you want to mask is even in tone/color and contrasts well with your main subject, my tutorial, Simple Bitmap Masking with Fireworks may be just the trick you need.

Designing with Gradients and Glows
Reader Level: Reader Level

In this tutorial we will look at how we can use gradients and drop shadows to create a nice back drop to our designs. The technique is a simple one, but it is also one that is very easy to get wrong.

To create this type of design it is very important that you get the planning stages correct, right down to setting the margin values in Fireworks. When using a gradient for a background image and incorporating a drop shadow on your wrapper div it is very important that the structure is defined exactly as you envisage your finished design, once your design leaves Fireworks you will have very little room for error; if any at all.

Exploring Lighting Blends in Fireworks 8
Reader Level: Reader Level

The release of Fireworks 8 includes a huge set of new specialized tools for performing subtle lighting and filtering tasks. While Fireworks has had a limited number of blend modes available in the past, with the new features such as Soft and Fuzzy Light, Dodges and Burns, and a wealth of others, you can now make much more subtle adjustments to photographs and images than you could in previous versions of Fireworks. The new blend modes may be one of those features that you pass over as you evaluate Fireworks 8, but they are certainly worth a look not only for photo editing but also for some of the lighting effects you can achieve with your drawings and vector objects as well.

This series of 5 Captivate video tutorials, with over 25 minutes of instruction, provides you a look at some advanced techniques for drawing in Fireworks, as well as an exploration of the new lighting blends found in Fireworks 8. Beginning with 4 simple vector shapes you'll see how to combine the vector drawing tools in Fireworks to transform those simple objects into a 3 dimensional drawing of a pencil, with a simulated light source shining on the canvas.



CMX Jumpstart: Machu Picchu
Reader Level: Reader Level

Welcome to our latest CMX JumpStart offering; Machu Picchu.

Machu Picchu has been developed to be accessible to screen, print and handheld devices. Handheld devices are still very much a gray area in our content delivery for web pages. PDAs and more modern phones can do a very good job of rendering web pages and with a little tweaking can provide us with access to very usable and good looking web sites.

Similarly a print style sheet, when correctly set, can give our users access to printed content that can be digested at their leisure. Web pages that don't print correctly can be very annoying and detract from the site's value. It is these two media types that we will be focusing on along with screen media in Machu Picchu. The aim is to provide content of a high quality to screen, handheld and print medias.

Easy Text Effects: Part 4 - Punch Your Text up With a Highlight
Reader Level: Reader Level

There are times when the highlight you get from applying a bevel or other kind of filter just doesn’t create a dramatic enough effect. In this tutorial, you’ll learn an easy way to create a clearly defined highlight, separate from the text body, you can recolor and manipulate in any way you like.

The Easy Text Effects Series:
Easy Text Effects: Part 1
Easy Text Effects: Part 2 - Grunge Text Decollage
Easy Text Effects: Part 3 - 3D Innies and Outies
Easy Text Effects: Part 4 - Punch Your Text up With a Highlight

Bitmap Versus Vector: Part II
Reader Level: Reader Level

As the line between vector and bitmap applications become more blurred it is very important to understand the difference between vector and bitmap artwork. Part I of this two-part series dealt with the pros and cons of bitmap and vector artwork.

This article will discuss when it is best to use each and look at how some Macromedia applications work with bitmap and vector artwork. In addition we will check out the applications that contain both vector and bitmap tools and discuss what to watch out for when using them.

Create Great Attention Grabbers in Fireworks
Reader Level: Reader Level

Recently I needed to send out one of those e-mail messages that contains specific instructions on what the recipient should do on their computer. You know the ones. "First, CLICK HERE, then read the instructions posted on the next page." Of course the challenge with these kinds of messages is that you never know if the person reading the instructions will really be paying attention, or will even understand what it is you want them to do. In an attempt to make it perfectly clear what they should do I decided to highlight the items with big bold graphics that catch the eye. In short, I needed an attention grabber, and for that I turned to Fireworks In these two Captivate video tutorials you'll see how I created the two objects I used--a red circle that appears to be brushed onto the image, and a bold curved arrow.

Photographic Effects with Fireworks: Part 3 - Soft Focus Technique
Reader Level: Reader Level

This is the third installment in this series. In prior articles I demonstrated how to emulate the Orton Effect and Multiple Exposures. In this tutorial, we'll look at creating soft focus filter effect.

This techniques is a fairly simple one, but the results can be very effective. As with the other effects, you only require one image file, which we will duplicate. You can use the supplied source file (name of file) or use your own image just as easily. This technique would be useful for to soften portraits or to add a sense of romance or dreamyness to landscapes or cityscapes.

The Photographic Effects with Fireworks Series:
Photographic Effects with Fireworks: Part 1 - Mimicking the Orton Effect
Photographic Effects with Fireworks: Part 2 - Multiple Exposures
Photographic Effects with Fireworks: Part 3 - Soft Focus Technique

Text Effects: Part 3 - 3D Innies and Outies
Reader Level: Reader Level

3D text effects come in two flavors: those that make the text look like it has been engraved or pressed into something, and those that make the text look like it is zooming out of your screen. You'll learn ways to create both innie and outie 3D text effects in Fireworks in this tutorial.

The Easy Text Effects Series:
Easy Text Effects: Part 1
Easy Text Effects: Part 2 - Grunge Text Decollage
Easy Text Effects: Part 3 - 3D Innies and Outies
Easy Text Effects: Part 4 - Punch Your Text up With a Highlight

Highlight Areas in a Photo Using Fireworks
Reader Level: Reader Level

Photos are a very important part to almost any layout. With today's applications you can do almost anything to a photo, such as removing the background or adding a stylized paint effect. These effects can be used to draw extra attention to a photo and can also help them integrate into a layout.

In this tutorial we will use Fireworks to add an effect which can be used to highlight certain areas of a photo. This technique works great for webpage banners or just to draw attention to specific parts of a photo.

Creating a Curvy Interface in Fireworks
Reader Level: Reader Level

Creating a curvy web interface is a simple enough task to perform in Fireworks, if you know the right steps to take to get the job done. By combining simple shapes and a few basic techniques you too can make one of those nicely rounded designs that provide an attractive viewport for framing your web content—whether it be a web page, a Flash video, or Flash media player.

In total this series of Captivate video tutorials will provide you with nearly 20 minutes of video instruction on the use of Fireworks for creating your own design and will show you common techniques used for the creation of vector objects, how shapes are modified and combined to create a design, and demonstrate some ways that you can position, modify, and apply styles to an object to complete a design task.


The Many Uses of Fireworks - Part 1: Roll Your Own Promotional Wallpaper
Reader Level: Reader Level

Fireworks is not just for web graphics. Repeat that mantra over and over, and you will be in the right frame of mind for this (and the next) tutorial. I think of FW as a screen graphics app. It lends itself well to almost any production flow that needs screen-quality images, such as Captivate, PowerPoint, Flash, Director and even, as we will soon see, your desktop.

Rollovers: Fireworks vs. Dreamweaver
Reader Level: Reader Level

Q."Should I do image rollovers in Fireworks or Dreamweaver? I've heard it's better to do them in Dreamweaver."

I've read many posts in the Dreamweaver forum warning people away from using Fireworks image rollovers, "because Fireworks produces bloated code" compared with Dreamweaver's. No doubt I'll stir up a hornets' nest with this tutorial, but let's do image rollovers in both Fireworks and Dreamweaver so you can see the difference and decide for yourself.

Quick Vignettes
Reader Level: Reader Level

Feathering the edges of a photo not only helps to blend it into a composite or HTML page, it can have a significant effect on the viewer’s response to the image. In Fireworks, feathering can be done with the selection tools or with vector masks. Which method is better?

Reconstructing Vienna: The Cascading Style Sheet
Reader Level: Reader Level

If you've already followed along with my CMX JumpStart Vienna: Reconstructing the Markup article, then you're ready to take the structure and give it some cosmetic beauty. We have all our components, but now we need to create a style sheet that will lay them out in an organized design that enhances comprehension and usability. Let's get started on reconstructing the CSS of CMX JumpStart Vienna.

About Background Images
Reader Level: Reader Level

When they are well thought out, background images can add a lot of pizzazz to your web site at a very low cost in bandwidth. They are a simple and effective way to maintain visual consistency throughout the site, plus introduce color, pattern, and texture.

Drawing on Nature: Converting a Photo to a Vector Design
Reader Level: Reader Level

I'll be the first to admit that my drawing skills are not the most advanced. Oh, I can draw a little bit, but for really complicated drawings or those that I want to make available for paying clients, I need some help. That's where a simple photograph and the tools in Fireworks can come into play.

In this series of 4 video lessons, you'll see the techniques I used to create a logo featuring a drawing of a banana tree leaf. The banana leaf was drawn using the Pen tool by working directly on top of a photo I took of a banana tree in my front yard. By following the shape of something from nature, I was able to get just the look I wanted for this particular logo. Something not too photo realistic, but which evokes the tropical feel of a big leaf on a banana tree. This video tutorial series will show you how it was done.

Locking and Changing Colors in the GIF Color Table
Reader Level: Reader Level

Slicing your designs in Fireworks can really help with the weight of your page and with getting the best format/compression for a particular area of a design. However, slicing can sometimes produce unexpected color shifts when you export GIF slices. This is due to the fact that each slice has it's very own color palette, and — especially when you are using the Web Adaptive or Adaptive palettes — colors may shift based on the color range in the slice. While not always visually noticeable in Fireworks the resulting problem can be seen quite well when two sliced graphics with the "same" background color are next to each other on a web page.

This tutorial looks at ways deal with color export/color matching issues, both from the Dreamweaver perspective and the Fireworks perspective. The video tutorial shows in detail how to change and lock colors in the Optimize Panel's GIF color table

Create an iPod Shuffle Rollover Button
Reader Level: Reader Level

For my wife's recent birthday I indoctrinated her into the Holy Order of the iPod by getting her an iPod Shuffle. Yes, the Shuffle is a gateway device, but since my daughter and I are both hooked it seemed only fair that my wife should join the other Pod People in the house.

As I unwrapped the package and admired the usual design genius found in Apple products I thought that a small little rollover button like the switch on the back of the Shuffle would make for a nice effect, and a good lesson in using the Swap Image behavior. In this series of Captivate video tutorials you'll learn how to make a rollover button with not one but two animated GIFs, how to compose it all in Fireworks, and how to complete the button in Dreamweaver.

Importing PNG Files with Masks and Transparency Info into Flash
Reader Level: Reader Level

Masking images in Flash can sometimes be a frustrating task. I find you cannot mask an image in Flash as well as you can mask an image in Photoshop or Fireworks. Masks in Flash do work well for creating certain effects, but for masking images that need a transparent background around detailed shapes, especially images that require feathering around their edges, Flash just doesn't cut it.

What's the solution then? Well Photoshop and Fireworks have much more powerful tools and masking capabilities. Plus, they can both export files in PNG (Portable Network Graphics) format. PNG files are capabele of retaining the mask and transparency information of an image.

CMX JumpStart: Vegas
Reader Level: Reader Level

Las Vegas, entertainment capital of the world, inspired this exciting JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.

Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design using a faux column technique. The home page includes a customizable Flash Slideshow component that includes a demonstration of images loaded using an XML file. This JumpStart features the cutting edge and accessible sIFR technique. sIFR allows you to use any font currently on your computer to create your headings. The contact page features a styled form using fieldset and legend. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design. Vegas also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work and give your users the best experience possible.

We've included the PNG file used to create the layout so you can adapt it with your own look and colors. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. It includes the CMX Flash Slideshow component and the graphic and code techniques used to create Vegas are explained fully in the 13 tutorials that we've included in your download. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool giving you insite into the web design process as well.

If you'd like a more detailed look at the Vegas Jumpstart, as well as seeing a modified Vegas design, check out Sheri German's CMX JumpStart Vegas: An Introduction.

Creating a Custom Look for the CMX Slideshow Extension Using Fireworks
Reader Level: Reader Level

I'm an Ultra-Noob when it comes to Flash. Frankly, the application overwhelms me, most likely because I over think the process. So one thing that CMX has helped me with is to learn a bit about this program, by working with some of the cool extensions and tutorials created by our Flash Experts.

Case in point: In the past few weeks, I have had TWO requests from clients for an automated slide show for their web sites. In the past I have built these as semi-interactive photo galleries, making use of other extensions and then hammering them into submission until the gallery fit in the page the way I wanted. After reading Paul Newman's article on his CMX Slide show Flash Extension I was not only intrigued, but completely hooked. I could DO this.

And I did, in less than an afternoon, including image selection and batch processing. Let me tell you, I was tickled pink that this worked. Not only did I do something in Flash, I also had an answer for two clients - which means more work and happy customers!

After my initial elation wore off, the designer part of me kicked in. I started wondering how I could jazz up the slide show. I glanced nervously at the drawing tools in Flash, but my hand knew better. Fireworks was launching before I even thought about it.

Paul's excellent tutorial gives you all the info you need to make his extension work. This tutorial will look at how easy it can be to design-ify a Flash interface, by working seamlessly with Flash and Fireworks. What we will be doing is creating a custom frame that surrounds the slide show. area. We will customize the frame so that it looks a bit more organic, and then bring the design into Flash.

Easy Text Effects: Part 2 - Grunge Text Decollage
Reader Level: Reader Level

Smeared, faded, and abraded text and images are staples of commercial art houses, and often appear on the portfolio sites of voguish designers. There are as many methods of producing the effects as there are artists, though I’ll bet none are as easy to reproduce as the methods you’ll be learning in this tutorial.

The Easy Text Effects Series:
Easy Text Effects: Part 1
Easy Text Effects: Part 2 - Grunge Text Decollage
Easy Text Effects: Part 3 - 3D Innies and Outies
Easy Text Effects: Part 4 - Punch Your Text up With a Highlight

Create a Window Pane Effect in Fireworks
Reader Level: Reader Level

A visual effect that I've seen both on-line and on television lately is one where an image is divided into several rectangular boxes as if the picture is being viewed through a window. While I'm not exactly sure what this effect is called, it can be quite striking and provides a way to incorporate a visual with a company logo or some other element in your design.

A Fireworks Quickie - Using Text as a Mask Free!
Reader Level: Reader Level

In this introductory masking tutorial we will take a photograph and mask it with a string of text. This technique is requested often in various user groups. While not difficult to do, it certainly expands the creative options for text.

Simple Bitmap Masking with Fireworks
Reader Level: Reader Level

If you've read many of my articles, you've probably heard me rant and rave about the power and flexibility of using masks while working in Fireworks. In this tutorial, I want to show you how to create and edit a bitmap mask, and drop in in new background behind the masked object.

Bitmap masks can be created using either another bitmap image or a bitmap selection. In this particular example, we'll be using a bitmap selection to mask the background of an image. I'll show you how easy it can be to create a bitmap mask, and adjust it to suit your needs.

This type of masking has many uses. It comes in very handy if - for example - you are working on a catalogue site and need to have all the products on an identical background. Another situation might be a scenic photo that was shot on a drab, overcast day. wouldn't it be great if you could replace that nondescript grey sky with a bright blue one with fluffy clouds? Well, you can with masking, and keep everything editable in case you change your mind later (or find a better sky).

Creating XP-like Icons in Fireworks
Reader Level: Reader Level

A recent request from one of our CMX subscribers was the inspiration for this tutorial. He wanted to know how to make Windows XP-like icon graphics using Fireworks. I did find a few examples on the web which used Adobe Illustrator - and, by extension, Freehand - (and LOADS of special icon-creation software), but nothing that used Fireworks.

Well, I felt I was up for a challenge and decided to give this a go in my favorite image editor. The following is a step by step tutorial on creating an XP-style icon graphic.

Our test project will be to create a folder icon with an envelope being inserted into it. Think of it as an Email Archive icon. We will be working a lot with vector shapes, the Pen tool and gradients in this project

CMX JumpStarts: New Orleans
Reader Level: Reader Level

The New Orleans JumpStart has been designed with the Umoja String Quartet and their jazzy feel at the center. Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design with a scrollable content area. The home page includes a customizable MP3 player built in Flash that includes music from from two Umoja String Quartet CDs: "Songs of Our Fathers" and "Things Ain't What They Used To Be."

The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design, as well as another version of the style sheet with the comments stripped out so you don't have to cut out all those extra kilobytes by hand when you're ready to go live! New Orleans also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work.

Beyond just the pages, we've also included all the source files used to create both of the layouts, both PNG and Flash. All layers in the PNG file are organized and labeled so that it's easy to make any modifications you need.

The graphic and code techniques used to create New Orleans are explained fully in the 14 tutorials that we've included in your download. Those techniques that are not covered in the bundled tutorials are explained in this article.

If you'd like a more detailed look at the New Orleans Jumpstart, as well as seeing a modified New Orleans design, check out Sheri German's CMX JumpStart New Orleans: An Introduction.

Create a Glowing Background Using Fireworks
Reader Level: Reader Level

Adding a background to a design or layout can really jazz up a piece. The right background is an easy way to tie a layout together, add some interest and create a better flow. But actually finding a background that works with your layout and adds just the right feel can be almost impossible.

Why not create your own background image? Creating your own image allows you to create a customized piece with graphics and colors that will work with your design. Not to mention it will be unique. This tutorial will take a look at the creation of a glowing background. The background was created in Fireworks and is competely editable due to the use of Firework's vector drawing tools. Several stroke attributes and effects were used to create this one of a kind, jazzy background. Use them as I did to create a similar image or use this technique to create a whole new look, customized for your design.

A Bright Idea - Creating a Lightbulb in Fireworks MX 2004
Reader Level: Reader Level

Did you know that the modern light bulb has not changed much in its composition since it was invented over 100 years ago? Keep that one handy for your next game of Trivial Pursuit ™.

Speaking of bright ideas <groan>; here's a project that will shed some light <double-groan> on some of the vector tools in Fireworks MX and MX 2004. Using vector shapes and a variety of fill options we'll build a frosted light bulb from scratch.

To create the light bulb, we'll be joining two basic shapes together - an ellipse and a rectangle. For the threaded base, we'll need the ribbon auto shape - available for free here at CMX. We will also use the Pen tool to create a custom shape.

Make sure you have downloaded and installed the ribbon auto shape before you begin this project.

CSS Negative Margins - Part Three: Improving the Two-Column Layout
Reader Level: Reader Level

In the last CSS Negative Margins article, you learned how to use negative margins to create a basic two column layout that resizes with the browser window, has proper source order and is resistant to Internet Explorer's tendency to drop large content next to floated columns. This tutorial returns to that layout to improve its visual look, making it a great starting point for your own two column designs. We'll add padding to the columns, fix the gaps in Internet Explorer, and make both columns appear to be equal height.

Note: This layout doesn't work as intended in Internet Explorer for the Mac. When you resize your window to the point where the photo fills the whole div, the sidebar will drop down below the main column. If you still need to fully support Mac IE at multiple screen resolutions, this technique is probably not for you!

The CSS Negative Margins Series
CSS Negative Margins - Part One
CSS Negative Margins - Part Two: Two-Column Liquid Layouts
CSS Negative Margins - Part Three: Improving the Two-Column Layout
CSS Negative Margins - Part Four: Three-Column Liquid Layouts

Photographic Effects with Fireworks: Part 2 - Multiple Exposures
Reader Level: Reader Level

While Fireworks may not have all the doo-dads and what-cha-ma-call-its that Photoshop has, I think you can still do some pretty neat things with photographs, if you take some time and think about what you want to accomplish.

In this, the second article in our series, we're going to create multiple exposure effects. The traditional technique requires you to make several exposures on the same frame of film. The initial exposure reading is made, and then that exposure is divided between the number of multiple exposures you plan to make. Dividing the exposure reduces the risk of gross overexposure. Every time you make a new exposure, you move the camera, or zoom the lens, or alter the focus. The end result is an expressionist-style image.

In the digital equivalent, we need only one image, but we will treat Fireworks much like a camera, creating our mulitple exposures and altering the composition of each frame through movement, brightness, blur and blending modes. We'll also look at how far you can take this effect, after it's done.

The Photographic Effects with Fireworks Series:
Photographic Effects with Fireworks: Part 1 - Mimicking the Orton Effect
Photographic Effects with Fireworks: Part 2 - Multiple Exposures
Photographic Effects with Fireworks: Part 3 - Soft Focus Technique

Easy Text Effects: Part 1 Free!
Reader Level: Reader Level

Text as art form is still possible for Web pages, but to use it with any flair, the Web designer must still fall back on graphic text. With a powerful imaging tool like Fireworks, it is possible to create graphic text—for headings and titles, and as design elements in their own right—that rival the best of the printed media.

The Easy Text Effects Series:
Easy Text Effects: Part 1
Easy Text Effects: Part 2 - Grunge Text Decollage
Easy Text Effects: Part 3 - 3D Innies and Outies
Easy Text Effects: Part 4 - Punch Your Text up With a Highlight

A Photo Correction Case Study
Reader Level: Reader Level

You thought you'd taken the perfect picture with your digital camera, only to find that when it was examined on your computer that there were some serious flaws. In this Captivate video case study you'll follow along with me as I fix a family photo that was taken recently. How can Fireworks be used to remove those flaws using the Rubber Stamp tool? What settings work best in certain situations, and what other tools can you use to help speed things along? This 3-part video tutorial with 15 minutes of instruction answers those questions and more as you follow along with the steps I took to fix my photograph.

Creating a Realistic Cast Shadow
Reader Level: Reader Level

In the early days of CMX, I wrote an article on Creating Perspective Shadows in Fireworks MX. Those concepts still hold true, but I thought I would share another technique. Consider this an enhancement which produces an even more realistic - and controllable - cast shadow.

This technique makes use of a vector mask, a marquee selection and two copies of the bitmap selection, each filled with black.

Fun With Tweened Text Effects
Reader Level: Reader Level

Recently I had a chance to do something that's becoming all too rare for me—just sit and play around with Fireworks. A technique that I'd been meaning to explore in more detail for some time is the use of symbols and tweening in Fireworks. I first learned about tweening Fireworks symbols for creating 3D text effects from the incomparable Linda Rathgeber at her Playing with Fire site, and had even installed the great 3D Objects extension from Matthew Brown that allows the process to be automated. But, I'd always wanted to take that technique to the next step and explore the different effects I could get from tweened text symbols.

This tutorial will delve into the process of tweening symbols and demonstrate some of the ways that this technique can be used for creative purposes when Fireworks Live Effects are added to the mix.

How to Punch a Vector Shape Through a Bitmap
Reader Level: Reader Level

I'll bet you've been told that it's impossible to punch a vector shape through a bitmap in Fireworks. This tutorial will prove that you can, and that it may be a better method than selecting with a marquee tool or masking.

Photographic Effects with Fireworks: Part 1- Mimicking The Orton Effect
Reader Level: Reader Level

As I was browsing through the latest issue of my favorite photo magazine I came upon a very inspiring article, detailing how to digitally reproduce (or create) some different traditional film camera techniques. As is the norm, these techniques were described using Photoshop. Well, I thought I would share my own take on these creative ideas, using my favorite web imaging software, Fireworks.

In this first in a series, we're going to look at mimicking the Orton Effect. The original technique was developed by Vancouver Island photographer Michael Orton and is acheived by sandwiching two slides together - a sharp image and a duplicate that is deliberately blurred. The overall result is a dreamy, ethereal image, water-color like in nature.

The steps I describe will vary depending on your images, but that is at least half the fun and makes this a really creative project for you. You decide what you like - how far to take things. I can see all sort of uses for this type of effect; page design, header graphics and the like.

The Photographic Effects with Fireworks Series:
Photographic Effects with Fireworks: Part 1 - Mimicking the Orton Effect
Photographic Effects with Fireworks: Part 2 - Multiple Exposures
Photographic Effects with Fireworks: Part 3 - Soft Focus Technique

Slicing Fireworks Navigation Bars With Frames
Reader Level: Reader Level

A question that often comes up when discussing slicing Fireworks navigation compositions is "Should I use layers or frames for composing my image?" The short answer is, "Yes", which is really no answer at all of course. The slightly longer answer is "It depends."

In a previous Captivate video tutorial I showed you how to slice with layers. In this tutorial, also done with Captivate, you'll see how frames can be used for more complex navigation schemes, and see an example of the kind of image that might be more suitable for this slicing technique. You'll also see how this method differs from the layer method so you can make an informed decision about the best way to tackle that complex exporting job.

Slicing and Exporting Multiple Buttons in Fireworks
Reader Level: Reader Level

Slicing images in Fireworks is one of those fundamental skills that every user of the software has to get a handle on at one time or the other. Sure, you can use Fireworks only for creating images, but that isn't really what it was made to do. Fireworks is a web production tool and understanding different methods for doing production work is part and parcel of learning how to work with this fabulous tool. In this set of four Captivate video tutorials you'll have the opportunity to see one method for creating a simple rollover navigation bar like the one below.

Fireworks Hotspot Rollovers
Reader Level: Reader Level

Everyone knows that web images are rectangular. If you want a navigation system made of image rollovers, you have to make them out of stacks of rectangles, or horizontal arrays of rectangles. Rectangles to the left. Rectangles to the right. Rectangles over and under. Gets boring, eh?

Creating a Neon Sign with Fireworks and CMX Black Line Masters
Reader Level: Reader Level

As you may - or may not - be aware, Kim Cavanaugh has been providing CMX with some very cool, royalty-free, vector-based clip art, called the CMX Black Line Masters Series. If you're in a creative slump, or need that special something for an illustration or a logo, these clip art packs can be a great inspiration. I've written a couple tutorials that use the Black Line masters series as their foundation. This simple tutorial is another example of what can be done with them. The goal is to create a neon sign suitable for hanging in any cyber bar of your preference.

We'll be working primarily with the path Stroke color, and a single Live Effect.

Be Mine, Valentine
Reader Level: Reader Level

Whether you consider Valentine's Day to be a special occasion for love, or an event manufactured by the greeting card industry, one thing can be certain; you better have a little gift from the heart with you when you see your special someone that day.

The best gifts are not the most expensive -- they're the ones that show care and thought. This tutorial -- or rather the end result of this tutorial -- was inspired by that special person in my life.

From a less mushy perspective, I also wanted to show you how techniques from other tutorials can be altered to suit your own design needs. Learning how to do specific things is great, don't get me wrong, but there's a certain sense of accomplishment when you can take what you've learned, and make it your own.

Several techniques have been used here. I have modifed Brian Edgin's tutorial, The Ultimate Aqua Button , to create the glass heart effect. This tutorial will also make use of:
  • Bitmap masks
  • Live Effects
  • Vector Shapes
  • Vector Path tool
  • Replace Color tool
  • Transform Tool
  • Magic Wand

You will also work a lot with modifying bitmap masks, vector paths and shapes

This tutorial is video-based, with narration and captioning. Due to the size of the videos, it has been broken into 6 parts. The completed, editible PNG file as well as off line versions of the videos are available in the support documents. There is close to an hour of video instruction, divided between the 6 parts.



Conversion Selections in Fireworks
Reader Level: Reader Level

In this exercise you’ll learn how to use Fireworks to change the background color of a simple logo to transparent, and do it without leaving ugly anti-aliasing artifacts around the edges.

Turn a Photograph Into an iPod Ad
Reader Level: Reader Level

Recently I saw several postings in the popular Apple blogs about a new service being offered. iPodMyPhoto.com will take any photograph that you send them, and for a not-so-small fee ($19.95) they'll turn that photo into a realistic looking iPod advertisement. You know the ones. A silhouette of a person on a brightly colored background with the ubiquitous white earbud cords hanging down from the person's ears. They do a great job, as you can see in their samples, but at that price your favorite iPodaholic might rather have a nice case or some other cool accessory to go with their favorite toy. Why not make it yourself and invest the cash in something else, especially when creating the effect is pretty easy with Fireworks? This tutorial will show you how.

CD Labels with iTunes, Fireworks, and Freehand
Reader Level: Reader Level

For Christmas this year I decided to give my wife something a little special. No, it wasn't one of those Lexus with the giant bow on top, but something a little more in keeping with our budget--music. Using iTunes I created 6 custom music mixes for her with some of her favorite songs. It was lots of fun to make the mixes, but when it came time to make the labels I was a little stumped. I wanted to do a collage of the album artwork for the songs on each CD, but none of the regular labeling software gave me the flexibillity I wanted. With a combination of some great, and free, Applescripts, Freehand and Fireworks I was able to create just the kind of labels I wanted. This tutorial shows you how it was done. Sure, it's not web design work, but why not use your software for fun stuff every now and then?

A JumpStarts Case Study: Replacing Page Design Elements
Reader Level: Reader Level

One of the things that I really love about the JumpStart designs from Community MX is the fact that I don't need to worry about the little tweaks and hacks that are so common when attempting fully validated CSS-P designs that are compatible across multiple browsers and platforms. Frankly, I just don't have the time to remember all the little things that need to be done to make a CSS-P design work, and having the CSS wizards at Community MX doing that part of the work allows me to concentrate on the things that do matter to me, like getting a design completed to meet my client's requirements. OK, they're only imaginary clients at this point, but imagine the all-too-real instance of a client saying that they like the overall design that you've worked out, but that things are just a "little too purple". This part of the series shows you how to locate all those other elements of your JumpStart design, how to change them to create a unique design, and how to use Fireworks to help in the process.

Note to non-subscribers purchasing this tutorial: The download file for this tutorial is approximately 39MB. If a download of this size is too large for you, please send an email to info@communitymx.com after your purchase and a link will be sent to you where you may download each video contained in the article separately. Please include the email address that is associated with the PayPal account used to make the purchase. For subscribers, there will be links at the end of the tutorial itself giving you the same options.

Creating a Curled Photo Free!
Reader Level: Reader Level

This tutorial is a direct response to a question I found in the MM Newsgroup. Someone was asking how to create a curled or bent photo effect. This process is quite easy in PhotoShop, using a combination of the Shear Filter and the Transform Perspective feature. You can do something quite similar in Fireworks, even though it doesn't have a Live Effect or filter that is equivalent to PhotoShop's Shear Filter. In the following video tutorials, we'll make use of vector masks, the Skew tool and custom gradients to get a pretty striking (and fully editable) result.

A JumpStarts Case Study: Replacing Banner Graphics
Reader Level: Reader Level

If you haven't noticed all of the hoopla over the Community MX JumpStart packages that have been released lately, and which will continue to come, well, you just haven't been paying attention.

In these videos—the first in a two-part series—you'll start out in Dreamweaver to examine the properties of a Paris themed page design, and then move on over to Fireworks to see how a page composition can be modified and transformed from the layout that is included in a JumpStart design. Using the powerful methods that Fireworks gives you for managing a document using layers, selecting parts of the page to export using slices, and then replacing page elements in Dreamweaver, you'll have the inside skinny on how to quickly replace the banner graphics in a JumpStart page.

Nearly 25 minutes of instruction are delivered in the six lessons in this package.

CMX JumpStarts: North Pole Free!
Reader Level: Reader Level

The North Pole JumpStart is a two column, fixed width design that uses clever deployment of background images in both the navigational elements and the content areas of the design. The graphics used in North Pole are both simple and complex. They range from the beautifully created snowman made in Freehand and converted to Fireworks to some Christmas black line art that was coloured in to make simple yet effective images that enhanced the Christmas theme with only a few minutes work. Come and have a look!

Convert a Photo to a Painting with Freehand and Fireworks
Reader Level: Reader Level

Recently I set myself to a design task that I hadn't tried using Macromedia products before — the conversion of a photograph to a painting. Yes, I know that there are other image editors that will do this kind of thing for you, and perhaps do it more easily. But if you're at all like me, the idea of first buying one of those programs, and then learning how to use it can be a deterrent. If I can get the effect I want using software I already own, and that I'm familiar with, then all the better.

Let it Snow, Man! - Part 2
Reader Level: Reader Level

Well there's a chill in the air. The leaves have fallen, the wind is brisker and sometimes, even in early November, there's that "scent of snow" in the air. In the lead-up to the holiday season, I have created a two-part series that uses both Fireworks and Dreamweaver. The end result will be a fun little "build your own snowman" web page.

In Part 1, we used Fireworks to create all the essential ingredients for our frozen friend. We then exported the pieces using Export as CSS Layers. This gave us a starting html page (generated by Fireworks) and all our graphics, in absolutely positioned DW layers (divs).

In our second and final chapter we will work in Dreamweaver, using the Drag Layer behavior to create a web page where you can move all the snowman pieces together and build your own snowman online. The Drag Layer behavior makes use of Dynamic HTML (DHTML), to make your page interactive. In our case, we're letting the user move all the snowman pieces around to build their very own snowman, using a Drag-n-Drop method.

This concept could have many different uses: visual quizzing, jigsaw puzzles, or other holidays, just to name a few.

Note: The Safari browser does not support the Dreamweaver Drag Layer Behavior at this time.

Fun with Fireworks Brushes and Masks
Reader Level: Reader Level

Recently I've seen a visual effect in many different places—TV, print, and online—that has captured my attention. It's the faded look that you get when you've run a t-shirt with a printed logo or text through the washing machine a few too many times. Maybe it's just me, or maybe it's an indication that I really need to get a life, but often when I see new effects like this I want to try and duplicate them in Fireworks.

As I worked out the steps to create that faded look, I discovered that there are all sorts of fun things you can do by combining vector objects with bitmap masks. In this tutorial you'll learn the basic techniques for creating a bitmap mask with brushes and other bitmap tools in Fireworks, and have a look at some other fun things you can do as well.

Let it Snow, Man! - Part 1
Reader Level: Reader Level

Well there's a chill in the air. The leaves have fallen, the wind is brisker and sometimes, even in early November, there's that "scent of snow" in the air. In the lead-up to the holiday season, I have created a two-part series that uses both Fireworks and Dreamweaver. The end result will be a fun little "build your own" snowman web page. In Fireworks, we will create all the essential ingredients for our frozen friend. Then in Dreamweaver, we'll use the Drag Layer behavior to create a web page where we can move all the snowman pieces together and build our own snowman online. This is a great opportunity for our friends to the south who don't even get snow to have a little winter fun.

We will also make use of a different export option in FW: Export as CSS Layers. This is a little known—or little-used—feature in FW, and comes in quite handy for jump-starting our web page.

This concept could have many different uses: visual quizzing, jigsaw puzzles, or other holidays, just to name a few.

Freehand, It's Not Just For Print Anymore
Reader Level: Reader Level

Freehand is a bit of an oddball amongst its Macromedia Studio siblings. Fireworks, Dreamweaver and Flash are built for web development; Freehand is built for print. Other than the Macromedia name, what do they have in common? The creation of web pages and artwork for print require two completely different sets of skills. Moving a project from print to web can be tedious. Freehand has recognized this and offers tools to simplify the conversion. By providing seamless integration with Flash and Fireworks, Freehand is making itself a useful tool in this web development family

Color (Part of) My World
Reader Level: Reader Level

I like color. I respond strongly to certain colors. I think that is one of the reasons I like autumn so much - lots of color, but a different kind of color from the spring. Sometimes isolating a particular color in a color photo can really make a image *pop*. In an earlier tutorial, I demonstrated different ways to hand color a photograph. Each process relied on turning a color image into a grayscale image first, then applying color with various painting tools. In this tutorial, we're going to "add" color by "subtracting" it from the image. It's easy and fun, and at no time will the Pen tool be used (Just to keep Laurie C happy!) Intrigued? Let's go!

CMX JumpStarts: Paris
Reader Level: Reader Level

Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.

This article covers the following:
  • A list of what is included in the CMX JumpStarts: Paris download
  • A list of the bundled tutorials that teach the theory behind the layout
  • Directions for creating the effects in the Fireworks PNGs
  • Demos of live pages
  • A page of screen shots that show the Paris layout in a variety of browsers on multiple platforms


Aqua Style Text in Fireworks: Part 1
Reader Level: Reader Level

This is not your typical step 1, step 2, step 3 tutorial. Instead, I will walk you through the experimentation and discovery process involved in figuring out how to create any effect. When we are done, we will have created that aqua text effect made famous by Apple™.

(Not so) Scary Ghosts 'n Goblins - Part 4
Reader Level: Reader Level

Well folks, it's that time of year again! I'm happy to say I'm back to deliver another ohhhh-so-scary Halloween Fireworks tutorial. Last year, you got to see how to make ghosts, jack-o-lanterns and eerie monster eyes. This time around we'll start off with another traditional frightening favourite - a spider web and nasty spider!

To create our horrifying masterpiece, we'll be making use of the following techniques and tools in Fireworks:

Vector Shapes
Pen Tool
Stroke and Fill textures
Gradients
Automating steps using the History Panel and Symbols

Tutorial includes: PDF, final PNG files of Spider, web and the two combined, short video clip on using the pen tool to make curves.

The (Not So) Scary Ghosts 'n Goblins Series:
(Not So) Scary Ghosts 'n Goblins - Part 1
(Not So) Scary Ghosts 'n Goblins - Part 2
(Not So) Scary Ghosts 'n Goblins - Part 3
(Not So) Scary Ghosts 'n Goblins - Part 4
(Not So) Scary Ghosts 'n Goblins - Part 5
(Not so) Scary Ghosts 'n Goblins - Part 6
(Not so) Scary Ghosts 'n Goblins - Part 7

Deconstructing JibJab: Creating Talking Heads Free!
Reader Level: Reader Level

The campaign for the American President in 2004 has seen an interesting phenomenon develop--the use of Flash for the creation of "home-made" campaign commercials. By far the funniest, and the most-widely viewed, are the two Flash movies created by the two brothers at JibJab.com. This tutorial includes 5 movies where you'll see how one part of that video might have been done using Fireworks and Flash. You'll take a look at the creation of a talking head in this tutorial and see how masks are used for editing bitmap images, how the use of layers in Fireworks allows you to create a single master file, and how the different pieces are brought together in Flash to create an animated talking head.

WebQuests for Teachers - Part 3 - Creating an Original WebQuest Free!
Reader Level: Reader Level

In the first part of this series, we introduced the WebQuest and a bit of its history. We learned that this lesson in a Web page allows students to make safe use of Internet resources and discussed the six sections that make up a traditional WebQuest. In the second part of the series, we reconstructed the "Time Machine MTV" WebQuest from scratch. Now, in the third and final part of the series, we'll look at strategies for developing your WebQuest content, where to find images on the web, how to evaluate the web pages where information is found, common student errors to be aware of and finally, how to share your Web Quest on the information super highway.

The WebQuest Series:

Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest

Welcome to Florida: The Plywood State
Reader Level: Reader Level

After Hurricane Frances became the third storm to hit Florida this year there were all sorts of cartoons and re-worked images floating into my Inbox at work. One of my favorites was a map of Florida covered with pieces of plywood and with the caption "Welcome to the Plywood State". I thought it would be a good exercise to recreate that faux postcard, and this tutorial shows you how to use Fireworks to do just that.

This tutorial contains five video demos.

Creating an Animated Progress Meter in Fireworks
Reader Level: Reader Level

I've seen a few requests out there, in various forums, on how to make an animated progress meter and thought it would be a nifty little tutorial for beginners in Fireworks. A progress bar can be used while a large image is downloading, indicating to the user that something is indeed happening and hopefully encouraging the user to wait for the download to be completed.

This type of animation is not tied to the real download process; it's just an animated GIF image. Using Layers in Dreamweaver, we can make that image visible until the real image downloads to the user's system. Then it will disappear. We're going to create a three different progress meters: one very simple example, and two using some of FW's handy animation effects. In one animation, we will tween the opacity of a glow. In the other we will create a motion animation.

Includes: Source files, two Camtasia/Flash videos, PDF version of article

Correcting Under Exposed Images in Fireworks
Reader Level: Reader Level

On a bright sunny day, it's quite common to take a picture that is - overall - well exposed, but still has certain areas that are in shadow and display too dark. Now there is nothing wrong with shadows. They can add depth, contrast and visual interest to a photograph. But in some cases, the shadows are so strong, that they obscure detail, and make relatively large parts of the image hard to see.

In Fireworks, we're going to apply Curves to a custom bitmap selection. We'll use the Polygon Lasso tool to select just the areas we want to correct, save that selection for future use, and then apply the Curves Filter to brighten up the shadows. While I'll describe in detail the techniques for using these tools for this specific application, we have several other in-depth articles on using the Bitmap Tools and the Curves dialog box. You can see a listing at the end of this article. The article, Using Curves to Improve Tonal Range of an Image, is based on a similar premise, but uses copying and pasting a bitmap selection.

Ideally, you should have a basic idea of Fireworks or Bitmap editing in order to complete this project. If you have not used Fireworks before, I'd recommend reading some of our "Piece by Piece" articles first.

Includes: A sample source file is included for you to work on, and a list of related articles.

WebQuests for Teachers - Part 1 Free!
Reader Level: Reader Level

The World Wide Web has been an important part of our lives for a decade or more. Many things about the Internet have changed dramatically during this time, but one thing hasn't. Parents and teachers want children to participate in all the Web has to offer, but they don't want to expose them to danger in the process. Back in 1995, Bernie Dodge and Tom March of San Diego State University thought of a way to accomplish the seemingly contradictory goals of safety and access. They created the WebQuest.

The WebQuest Series:

Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing

Part 3: WebQuests for Teachers - Creating an Original WebQuest

Correcting an Overexposed Image Using Blending Modes
Reader Level: Reader Level

Anyone who takes photographs regularly (film or digital) can relate to this scenario: at some point in time, due to camera or human error, you will end up with an over exposed photo. Over exposed images appear very light in tone; the color saturation is very low, and the contrast also tends to be low. Highlight areas seem washed - or bleached - out, with very little detail visible. Shadow areas are not very shadowy; blacks appear middle to light grey, instead of the expected deep rich black. It happens to all of us. Sometimes we're just in a hurry to get the photo before the scene changes, and we pay little or no attention to exposure. Sometimes the camera's light meter gets fooled because the scene in front of it is very low key (lots of dark tones, few middle tones and almost no light tones). In any event, I am here to tell you that sometimes, your image isn't a total write-off. Fireworks can help save your over exposed image and make it suitable for show.

Fireworks How To: The Ultimate Aqua Button Free!
Reader Level: Reader Level

Vectors and Live Effects make Fireworks the perfect application to create the ultimate Aqua Button. This tutorial will show you how to take full advantage of Fireworks MX and MX 2004 to create a no design compromise Aqua Button using only 5 vector objects (6 if you include the text on the button).

Vodafone For the Rest Of Us: How Did They Do It? - Part 2 Free!
Reader Level: Reader Level

Just because you don't have the resources to pick up a copy of Flash Professional is no reason to be shut out of the web video game. Here's how to create the Vodafone Video Bracelet using Flash MX 2004.

Silk Screen / Rubber Stamp Effect with Fireworks
Reader Level: Reader Level

You see this effect in t-shirt designs right now from Old Navy and American Eagle Outfitters. Having your t-shirt look like it was your fathers rugby shirt when he was in highschool is popular with the "young-uns". Why not re-purpose this type of old, faded design into other design concepts. Faded murals, passport stamps or distressed, grunge design effects.

Vodafone: How Did They Do That? Free!
Reader Level: Reader Level

Going from concept- let's show the future of wireless communication- to upload in less than 30 minutes using the tools in the Studio, I show how to put a video on a a wrist watch and how to create an effect used in the Vodafone site.

Creating Different Types of Corners and Borders with Fireworks MX 2004
Reader Level: Reader Level

There's been a lot of talk in CMX town lately - talk about corners. Not cutting corners, mind you; making corners. Specifically, making corners and the necessary borders to create flexible boxes in your web page. That flexible box might be in a table layout, or as we have seen recently, a CSS layout. Corners do not have to be rounded. And that, ladies and gents, is what this article is all about.

We're going to look at some of the cool features in Fireworks MX 04 that can help us make some far-out corners, and use other more traditional FW techniques to create the borders needed for flexible boxes.

We're going to use some of the Auto Shapes found in the Tool Bar and work with punching vector shapes. We'll also play around with some Live Effects to get some different results. When we're done, you will be able to use the resulting graphics in either a table-based or CSS-based layout.

So walk with me, faithful reader, as we check out some new angles on corners.

Creating a Spiral Binding with the Ribbon Auto Shape Free!
Reader Level: Reader Level

Last week we introduced the Ribbon Auto Shape. This week we "Kick it up a notch!" and use it to create a great looking spiral binding graphic. This tutorial shows you how to use the Ribbon Auto Shape to create a realistic looking spiral notebook and also demonstrates some tricks for adjusting Auto Shape colors and working with ungrouped Auto Shapes.

Masking Flash Video
Reader Level: Reader Level

When Macromedia suggests sticking Flash video in the Sony JumboTron on Times Square in New York, the normal response might be "Huh?" This article goes them one better and shows how, through the use of Masking in Flash, to create a "Blade Runner" effect (using video and a web cam), just a little up the Square from the JumboTron.

Fireworks Slicing Technique #3--Creating Seamless Backgrounds
Reader Level: Reader Level

In this third set of tutorials on slicing in Fireworks, you'll take a look at different methods for working with repeating graphics. If you need to create a header, footer, or sidebar in your design and wish to set a background image to tile across the containing element, understanding how to create slices that tile seamlessly is an essential skill. This series looks at four different scenarios and describes how to create the slice, export the slice, check to see that the image is sliced correctly, and incorporate the sliced images in the CSS of a web page.

Rotoscoped Buttons in Flash
Reader Level: Reader Level

We sometimes tend to forget how we got here. Back in the early days of Flash, when video was a dream, we discovered how to use video without using video. Rotoscoping lets you create some rather interesting video effects.

Creating Great Curves in Fireworks
Reader Level: Reader Level

One of the common chores facing a graphic designer is the transformation of a basic primitive shape into something more complex. In these video tutorials you'll learn how to begin with basic shapes such as lines and rectangles, add new anchor points with the pen tool, and transform the shape into curvy little masterpieces by adjusting anchor point properties.

Building Simple Buttons: Part 2
Reader Level: Reader Level

Have you ever wondered how to build a really cool button? In this tutorial, I show you how to build a button using the features of Freehand, Fireworks and Flash. I also show you a couple of "integration" techniques guaranteed to speed up your workflow.

Create a Web Photo Album With Dreamweaver and Fireworks
Reader Level: Reader Level

Use Dreamweaver and Fireworks to create a web photo album. Great for sites showcasing a lot of products. Dreamweaver creates a thumbnail page and links each thumbnail to a larger image on a separate page. This behavior is very easy to use, and a great time saver since Dreamweaver and Fireworks do all the work.

Fireworks Slicing Technique #2--Slicing Page Compositions
Reader Level: Reader Level

In this second set of video tutorials on slicing in Fireworks, you'll take a look at a method for working with complex page compositions. Fireworks is a great program for creating design concepts, and with the appropriate and efficient use of slices you can take that design idea and turn it into a full-blown page in Dreamweaver while maintaining small file weights.

Creating A Simple Button in Fireworks MX 2004
Reader Level: Reader Level

When Apple unveiled the Macintosh OS X a couple of years back, there was a lot of chatter around how the buttons used in the interface were just "oh,so cool". Here is how to create a similar button using Fireworks.

Fireworks Slicing Technique #1--Inserting Rollovers
Reader Level: Reader Level

In the first of a series of Camtasia video tutorials, we'll look at a simple method for inserting slices over an existing navigation bar, creating a rollover effect, and some best practices for working with Fireworks slices. Along the way you'll learn about arranging and organizing your slices, naming slices, and some tips on exporting sliced graphics for use in Dreamweaver.

Mother's Day with Fireworks Free!
Reader Level: Reader Level

Mother's Day is fast approaching. Now, I don't know about you, but my Mom got bitten by the Internet bug a couple years ago. She's always online, chatting with friends or one of my siblings. So what better way to say, "Thanks, Mom!" than to send her a Mother's Day card made by l'il old me. This tutorial uses native Fireworks effects to create a warm and fuzzy Mother's Day card, that you could email or post on the web for the world to see. As it happens, my Mom is going to be out west on Mother's Day, visiting my brother and his family. So I think this card will be a perfect little way to say that I love her.

Creating Button Sets In Fireworks
Reader Level: Reader Level

In this tutorial, we will look at how we can speed up repetitive tasks in Fireworks using copy and paste while building a navigation menu. We will also look at organising our png files into folders and look at the best methods for exporting our images for use within Dreamweaver.

Adding Depth to Text in Fireworks
Reader Level: Reader Level

When web designers want to use a custom font on a web page, they will very often turn to Fireworks in order to create a gif version of that text. Makes sense. We're going to go one step further and make that text stand out more by using some simple effects found in Fireworks MX.

Instant Replay Part 1--Fireworks
Reader Level: Reader Level

No striped shirts or trips to the replay booth are required when you use the Replay button in Fireworks. Instead, you can make short work of repetitive tasks, and even use the power of this nifty little feature for some fascinating creative effects--all with the click of a button. This 3-part video tutorial demonstrates the creative uses of the History panel and the Replay button and shows how you can use them to achieve some creative results.

Create a Logo in the Mission Style
Reader Level: Reader Level

In this tutorial, you'll learn a lot about how basic primitive shapes can be combined to create complex images. By using the Union, Punch, and Intersect commands found in Fireworks, simple objects can become much more, as you'll learn by re-creating a national hotel chain's company logo. You'll also get lots of good practice in using the Align panel and in working with custom gradients and shadow effects.

Creating a Banner Graphic
Reader Level: Reader Level

Requested by one of our subscribers, this tutorial demonstrates - with video - how to create a banner or header graphic using only vectors and native Fireworks effects. We'll also discuss how to slice this image for creating a "stretchy" graphic for flexible web pages.

Sailing the Wine Dark Sea - A Fireworks Masking Project
Reader Level: Reader Level

Sailing, sailing over the bounding sea . . . Or in our case, inside a wine glass! Many of us have seen the "ship in a bottle" knick-knack. Well, I'm here to show you how to set a sailboat afloat in a wine glass, using Fireworks MX or MX 2004, vector AND bitmap masks. Heave ho, matey, and don't forget to buckle your swash!

Gifs - Get Rid of That Jagged Edge
Reader Level: Reader Level

In this tutorial, we'll learn how to keep those jagged outlines from appearing on your transparent gif files. While transparent gifs can be difficult to get just right sometimes, the payoff is great; The extremely small file size and the clean integration with your web page can make quite a difference in how your page loads and how it looks. Let's learn how to use transparent gifs in a way that will give you good-looking gifs every time.

Creating a Copper Medallion in Fireworks
Reader Level: Reader Level

The more I experiment with Fireworks, the more neat things I figure out. This tutorial is an example. It started with a post in a newsgroup where someone was looking for input on creating a metallic shield. I gave my two cents in a post and then thought, "Hey, this would make a cool tutorial." And so another creative project is born.

Understanding the Pen Tool
Reader Level: Reader Level

Ah, the Pen tool. This incredibly versatile drawing tool is also one of the most difficult tools to learn. Why don't things look the way I expect? How do I create anchor points that act the way I want? And what the heck is a Bezier curve anyway? All these questions and more are answered in the five video tutorials that you'll find here.

Creating a 3-D Pie Chart in Fireworks MX 2004
Reader Level: Reader Level

One of the great new additions to Fireworks MX 2004 are the Smart Shape tools and objects that ship with the program. With these nifty little objects you can create and edit complex shapes on the fly. In this set of three video tutorials you'll see how to use and edit the Pie Smart Shape and then apply additional effects to create a 3-D chart.

Color Correction: Part 4
Reader Level: Reader Level

In the last installment of this series, I review the power of the use of Histograms, Levels, and the setting of the White and Black points in an image.

Color Correction: Part 3
Reader Level: Reader Level

This is the third installment in this series. It reviews adjusting brightness and Contrast and applying Unsharp masking to an image. The article ends with an in depth explanation of the more important concepts reviewed in this series.

Creating a Christmas Tree with Fireworks Free!
Reader Level: Reader Level

"On the first day of Christmas . . ." Well, I don't know about you, but before the first day of Christmas, I want my tree up! In case you're short on space in your home, I've come up with a quick and easy Christmas tree that you can build and set up right inside Fireworks. No need to water it, and it comes down in a snap!

Bring Out the Best in Your Photos
Reader Level: Reader Level

Have you ever had a client say "I want this picture to POP"? The first time I heard that, I wanted to pop the client's head open so that I could see what he was thinking. Luckily, I was able to restrain myself. There are many ways to make parts of a picture stand out, but if it's not done well, it can distract the viewer from the message the picture is supposed to present. Sometimes, to make a picture "pop", you can make subtle changes to it in order to achieve what the client is after.

Pixelating Images in Fireworks
Reader Level: Reader Level

Fireworks is one of the great do-it-yourself image editors on the market today. By that, I mean that unlike some other programs that contain a slew of filters and plug-ins for creating special effects, in Fireworks you have to know how to do things on your own. Such is the case when you want to pixelate an image. Fireworks can certainly do it, but you do need to know a few tricks to get the job done.

Converting a Photograph to a Cartoon Drawing
Reader Level: Reader Level

I have great fun messing around with graphics applications and one of the things I've been experimenting with a lot lately is turning a photograph into a cartoon drawing. After much trial and error I've hit upon a series of steps that will allow me to do just that in Fireworks and Freehand.

Quick and Easy Photo Galleries in Fireworks and Flash Free!
Reader Level: Reader Level

One of those common "gotta have it" features on many sites is an click-through photo gallery. You've seen them out there, and perhaps you've even built your own with JavaScript or purchased one of the off the shelf methods for making them. What you may not know is that you can easily build your own by taking advantage of the ability that Flash has to import images in sequence. Add in a my favorite kind of ActionScript—the simple kind—and you can have your own click through photo gallery in just a few minutes.

Making Snowflakes in Fireworks Free!
Reader Level: Reader Level

Ever made snowflakes using a piece of paper and a pair of scissors? It's amazing what one can do simply by folding a sheet of paper and cutting some shapes into it. It's even more amazing that you can do the same kind of thing in Fireworks! Just in time for the holidays, here's your chance to create your own custom snowflakes, without the worry of getting a papercut or running with scissors!

Color Correction- Part 2
Reader Level: Reader Level

In this article we take the next step in the color correction process and adjust an image's midtones, and identify and remove a colour cast.

Create an Animated Snowglobe in Fireworks and Flash
Reader Level: Reader Level

It's Christmas time here at Community MX, and time to get a little holiday cheer under way. And of course, what better way to celebrate the holidays than with some fun animated graphics? In this tutorial you'll learn how to use the tools in Fireworks to create a realistic looking snowglobe and then animate the globe in Flash. Along the way you'll learn some great lighting effect techniques and a little more about the tools that Fireworks contains for generating the kinds of cool images that will set your designs apart.

Color Correction in Fireworks MX - Part 1
Reader Level: Reader Level

Everything you never thought you needed to know about colour correction in Fireworks MX 2004. Part One shows you how to identify the key type and use Levels, Curves and White and Black Points to set the tonal range for an image.

How to Make Photo Corners using CMX Black Line Masters
Reader Level: Reader Level

In this tutorial, we're going to create some classic "photo corners". You might remember these from old family photo albums, where the photos were affixed to the pages by using small adhesive "corners".

Correcting Perspective in a Photograph
Reader Level: Reader Level

Correcting perspective in a photograph is a snap using Fireworks. This tutorial shows you two ways to *straighten things out" by using different Transformation tools and Guides.

(Not so) Scary Ghosts 'n Goblins - Part 3
Reader Level: Reader Level

Well, boys and ghouls, if you've been following along, we have created a spooky ghost and eerie jack-o-lantern in our past two tutorials. This one focuses on some scary eyes, to frighten the be-jeebers out of you and your friends.

The (Not So) Scary Ghosts 'n Goblins Series:
(Not So) Scary Ghosts 'n Goblins - Part 1
(Not So) Scary Ghosts 'n Goblins - Part 2
(Not So) Scary Ghosts 'n Goblins - Part 3
(Not So) Scary Ghosts 'n Goblins - Part 4
(Not So) Scary Ghosts 'n Goblins - Part 5
(Not so) Scary Ghosts 'n Goblins - Part 6
(Not so) Scary Ghosts 'n Goblins - Part 7

(Not so) Scary Ghosts 'n Goblins - Part 2
Reader Level: Reader Level

The second of five in our haunting series, this tutorial shows you how to create your own Jack-O-Lantern in Fireworks, without getting a single pumpkin seed on your kitchen floor.

The (Not So) Scary Ghosts 'n Goblins Series:
(Not So) Scary Ghosts 'n Goblins - Part 1
(Not So) Scary Ghosts 'n Goblins - Part 2
(Not So) Scary Ghosts 'n Goblins - Part 3
(Not So) Scary Ghosts 'n Goblins - Part 4
(Not So) Scary Ghosts 'n Goblins - Part 5
(Not so) Scary Ghosts 'n Goblins - Part 6
(Not so) Scary Ghosts 'n Goblins - Part 7


Attaching Text to a Circular Path Free!
Reader Level: Reader Level

One of the more common logo designs going is the simple arrangement of text on a circular path. Easy enough to create in many graphics programs, creating the same effect in Fireworks requires a little extra work and some basic knowledge of how vector paths are created and how they can be manipulated to do what you want. While it's easy enough to attach text to a path in Fireworks, the challenging part is getting the text in the lower part of the circle to wrap in the correct direction. In this tutorial you'll see the simple techniques that are required to get your text to behave the way you want.

Creating a Realistic Wax Seal using Fireworks and CMX Black Line Art
Reader Level: Reader Level

Combine a variety of Fireworks techniques and CMX's new Black Line Masters, to create a very realistic looking envelope and wax seal from the olden days.

Using Curves to Improve Tonal Range of an Image
Reader Level: Reader Level

Sometimes part of an image is just too dark (or too light). You don't want to apply any global changes, as that will impact the entire image. This tutorial shows you how to correct a selected part of an image, and still maintain editability through the use of Live Effects.

Up in the Clouds With Fireworks MX
Reader Level: Reader Level

Creating clouds in Photoshop is a piece of cake using their Clouds Filter. Unfortunately FW does not have a filter for this. In this tutorial we will show you how you can create clouds in FW as easily as in PS.

Seamless Blending of Two Images in Fireworks
Reader Level: Reader Level

Take two images of the same scene, one exposed for the light areas and one exposed for the dark areas, and merge them together using a mask, to create a perfectly "exposed" image. This is a great technique on "fixing" an image. Along the way, you'll also work with the Smudge, Rubber Stamp and Eraser tools.

CMX Black Line Master Graphics 1
Reader Level: Reader Level

The CMX Black Line Master Series provides you with editable vector artwork in a Fireworks PNG format. Unlike traditional clip art, only the vector outlines exist in these scanned copyright-free images that have been traced in Freehand. In this first series, Fleur di Lis, you'll find classic designs in the French tradition that can be grouped, scaled, filled and stroked to your hearts content and are suitable for use in Fireworks, Freehand, or Flash.

The CMX Black Line Master Graphics Series:
CMX Black Line Master Graphics 1
CMX Black Line Master Graphics 2
CMX Black Line Master Graphics 3
CMX Black Line Master Graphics 4
CMX Black Line Master Graphics 5


Creating an Effective Motion Blur in Fireworks MX 2004
Reader Level: Reader Level

The new Motion Blur effect can be very handy to enhance the sense of movement, but there are some tricks to using it well.

Controlling a Gradient Page Background with CSS
Reader Level: Reader Level

Page backgrounds make a big difference in the way your web page is perceived when someone first arrives. In this tutorial we'll look at a simple but elegant way to give your page a smooth, non-tiling gradient background using Fireworks. Then we'll apply the image with CSS using Dreamweaver.

Using the Replace Color Tool In Fireworks MX 2004
Reader Level: Reader Level

One of the more persistent complaints about Fireworks MX in the past was an inability to precisely control color changes using a brush. This complaint has been seriously resolved. In this tutorial we will go over 2 ways of using the Color Replace tool in Fireworks MX 2004; changing an existing color, and colorizing a portion of a grayscale image.

Using the Tabs Auto Shape in Fireworks MX 2004
Reader Level: Reader Level

The purpose of this particular Auto Shape is to allow the quick creation of a tabbed navigation bar, complete with color, shading, highlighting and depth. This tutorial will show you:

  • How to quickly create a Tab Auto Shape.
  • How to customize the color, shape, size and number of tabs.
  • How to create Rollover effects.
  • How to use the Tab Auto Shape as a button symbol.


Multipage Site Modeling Using Freehand MX and Fireworks MX
Reader Level: Reader Level

Creating the comprehensive designs for a site can be a tedious process. Each page has to be "comped" in Fireworks MX, sliced and then moved over to Dreamweaver MX and posted to the Client's Site for approval. For large sites this could involve creating the designs for the major pages and the sub section pages. If a dozen pages or so are involved, there is also the management issue of ensuring the pages don't get lost. There is a way to dramatically reduce the amount of time devoted to this process. The idea is to allow the software do the work. In this case the software is FreeHand MX and Fireworks MX.

Creating Motion Blurs in Fireworks
Reader Level: Reader Level

As fine a program as Fireworks is there are still some things that you simply can't do. A Motion Blur is one of those. While Photoshop contains a handy filter for getting the job done, in Fireworks you'll have to do a little more work on your own. But, by using tweened symbols you can approximate the effect in Fireworks easily enough.

Skinning QuickTime
Reader Level: Reader Level

QuickTime movies are more than just video. The QuickTime movie player can also be changed to enhance the message being delivered through the movie. In this article you will learn how to "skin" the QuickTime player.

Removing Red Eye from Photos
Reader Level: Reader Level

Some of the more wizard-driven imaging programs actually have automatic processes for removing red eye. Sadly, FW is not one of them. The goal of this tutorial is to show you one way to remove red eye from a photo, and even add a couple custom commands to speed you on your way.

UPDATE: At the time this tutorial was written, there was no red-eye removal tool available within Fireworks. With the release of Fireworks MX 2004, users now have a red-eye tool at their disposal. Watch for an upcoming tutorial at CMX on using this new feature.

Rollover Buttons with Animated GIFs
Reader Level: Reader Level

Ever want to add just a little bit extra to a page design—something that will set it apart from the mundane? Animated GIFs can be a great way to add some interesting effects to navigation objects, making it possible to really draw attention to the buttons. All it takes is a little planning and creating this kind of effect can be fun and easy.

Creating a Batch Process for Adjusting the Brightness of an Image
Reader Level: Reader Level

Add even more power to your digital imaging arsenal of skills. Knowing how to do things such as a batch process can save you a lot of time if you have many images that need similar manipulation. This tutorial will take you step by step through the creation of a custom command to brighten dark images, and through the Batch Process feature of Fireworks MX.

Creating Seamless Background Images
Reader Level: Reader Level

Graphics that tile within a table, layer, or across the top or side of a page can be a great way to add a little pizzazz to your page design. Whether you want a simple image that repeats down the side of a page, or one that occupies the top of a page or table, the trick is in getting the images to stitch together properly so they are seamless. Knowing a few little tricks in Fireworks allows you to get the look you want and check the image to be sure the results are right for your design.

Cut it out! The background, that is...
Reader Level: Reader Level

In this tutorial, we will cover how to delete the background from an image and put in another background of our choice. Although this sounds simple, the results can be disastrous if not done properly. With a few Fireworks tricks, we'll take three guys from the city and place them in the country. Better still, they'll look like they belong there.

Create A Spinning Graphic With Text
Reader Level: Reader Level

In part two, we look at how to add some text to this spinning graphic, and the tricks used to maintain the illusion of 3-D rotation.

Creating a spinning graphic Free!
Reader Level: Reader Level

Rotating animations are pretty simple to create in Fireworks, but what if you want you animation to spin, in a 3-D manner? In Part One of this tutorial I will show you how to create the "appearance" of a 3-D spin of an image, by using Symbols and Instances, and some manual tweaking of the Frames Panel.

Repeating Graphics in Fireworks
Reader Level: Reader Level

There are some questions that seem to come up over and over again at the Fireworks newsgroup, and one of the most common is "How do I draw a grid?" Actually, the task is quite easy with the tools built into Fireworks, and once you understand how it's accomplished you can use the same technique any time you need a row of repeating graphics. Whether they're simple lines, a row of dots, or even repeating complex graphics, using the Replay button in the History panel makes it a snap.

Using the Export Wizard in Fireworks Free!
Reader Level: Reader Level

Some of you are exporting your files in Fireworks by just going to File -->Export, right? As long as you use the Optimize panel wisely, that should work alright. But using the Export Wizard gives you a lot of power over the quality of your final picture, and all in one handy-dandy area.

Create an Illustration Effect Using a Photograph
Reader Level: Reader Level

If you have problems drawing your way out of a paper bag (like this author), this tutorial may be just what you need! Follow along as we take an original photograph, and turn it into a fairytale wonderland - all thanks to Fireworks' vector tools.

Creating Composite Masks in Fireworks Free!
Reader Level: Reader Level

A composite mask is loosely defined as a combination of a masked object with another image within a document. That's a pretty dry definition for a technique that can allow you to create some fabulous effects with your photos. By understanding a few basic principles, and using the power of Fireworks Live effects, you can generate beautiful photographic effects in a fraction of the time that it might take you to use complicated filters in other programs.

Creating Isometric Illustrations with Super Guides 1.0 and Fireworks MX Free!
Reader Level: Reader Level

This tutorial outlines how, with the help of Super Guides 1.0, to create compelling, isometric illustrations within Fireworks MX.

Creating a flowchart diagram in Fireworks MX
Reader Level: Reader Level

There are lots of software packages out there that will build flowcharts, but hey - if you have Fireworks, YOU don't need to buy ANY of them. This tutorial shows you how to build a flowchart from scratch in Fireworks, and offers some time-saving tips in the process. A completed PNG flowchart is also included in the source files.

Custom Picture Frames in Fireworks MX
Reader Level: Reader Level

Fireworks MX ships with a number of new extensions that allow you to apply creative effects in a snap. One of these, the Add Picture Frame extension, can be used for much more than you might think. With a few simple extra steps you can take that single command and create everything from a 1-pixel wide simple border, to a complex border with multiple effects. In this quick tutorial you'll learn how to apply the create Picture Frame command, unlock the resulting graphic and customize the picture frame graphic

Reconnecting StudioMX Help Files for Macintosh Users Free!
Reader Level: Reader Level

For a reason beyond me, in many Macintosh OSX installations of the StudioMX line, the help files appear to be missing. They're really there. In this short tutorial, I'll show you where they are and how to access them through your computers Help system.

Image Protection with Auto-Watermarking
Reader Level: Reader Level

There's not much you can do to keep someone from stealing content from your Web site, especially those beautiful graphics you worked so hard on. You can, however, at least deter would-be thieves with a copyright notice - one that is automatically imprinted on all of your valuable images without touching the originals.

Creating GIF Animations in Fireworks
Reader Level: Reader Level

Flash is a great animation tool, but you can do some pretty cool stuff in Fireworks, and export out as a GIF animation. This tutorial introduces you to making GIF animations in Fireworks MX, then takes you through the steps of creating a not-so-basic animation.

Create Transparent Editable Text, with a Funky Edge
Reader Level: Reader Level

You've probably seen a few tutorials that tell you how to make the central part of your text see- through, but it usually involves converting your text to a Bitmap. Well, this is Fireworks Baby, and I want my editability all the time! Follow along and see what a ball you can have when you stroke text the right way.

Custom Gradients in Fireworks MX
Reader Level: Reader Level

Fireworks MX introduced a great new feature that isn't often explored thoroughly—the ability to create semi-transparent gradient fills. In this tutorial you'll take a look at how the settings for gradients are accessed, how to modify gradients fills for transparencies, and how to save your custom gradients as a Style all your own.

Fireworks: Rollovers Made Easy Free!
Reader Level: Reader Level

Have you been creating duplicate images in Fireworks just to create rollover effects? Using the Frames Panel within Fireworks can speed up this task!

Disjointed Rollovers Free!
Reader Level: Reader Level

It happens to all of us at some point; You've gotten bored with plain old rollovers on your nifty menu... You want to add a little something, like maybe rolling over one of your buttons and having it trigger another image swap elsewhere on your page. In this tutorial, we'll go over how to do that, and even how make a picture appear where there wasn't one before. All using the Swap Image behavior.

Using Masks in Fireworks MX
Reader Level: Reader Level

Don't crop it! Mask it! Masking is a non-destructive way to hide or show parts of an image. With Fireworks, you have some pretty powerful masking tools at your disposal, and this tutorial will show you how to use them.

Fireworks MX - The Basics - Part 2
Reader Level: Reader Level

Dig deeper into the Fireworks interface, and explore some more advanced techniques such as masking and slicing.

The Physics of Vector Graphics--Part II
Reader Level: Reader Level

The three primary drawing tools from Macromedia all depend on vector graphics to work their magic. Whether you are animating in Flash, drawing in Fireworks, or illustrating in Freehand, the common thread between all three is their use of vectors. In the second part of this series you'll examine the relationship between anchor points and the line segments that are created when points are connected, and see how line segments are modified in Freehand, Fireworks, and Flash.

Fireworks MX - Understanding the Basics
Reader Level: Reader Level

Fireworks MX is a great tool for creating and optimizing images for web and other on-screen uses like Flash MX or even PowerPoint! Learn the ropes with this introductory tutorial.

The Fireworks MX Button Editor
Reader Level: Reader Level

The Button Editor has come of age! Earlier versions of Fireworks were just as likely to turn you off using this nifty feature, but MM got it right in FWMX. The Button Editor is a great productivity tool, and has some new features to it that make it even more flexible to use.

Creating Rounded Cornered Boxes
Reader Level: Reader Level

Don't be square! Whether you want to use rounded corners for a fixed size box or round a stretchy rectangle that can adjust to any size, we'll show you two simple methods of rounding the corners of your tables.

Creating a clickable wireframe navigation for site testing
Reader Level: Reader Level

Proving your navigational structure before you dig deep into the graphical design of your site is very important. Creating a clickable wireframe can help point out problem areas in navigation, or may prompt you - or the client - about a missing hyperlink. A little up front work can save you tons of time at the production stage.

The Elements of Vector Graphics
Reader Level: Reader Level

Vector graphics are at the heart of the three primary drawing tools in the MX suite. Freehand, Flash, and Fireworks all depend on vectors for drawings that range from the simple to the astoundingly complex. No matter how they are created though, all vector drawings share a common structure that is explored in this multi-part series.

Retouching Images in Fireworks MX
Reader Level: Reader Level

Fireworks has some pretty impressive bitmap edting tools They come in very handy when you have to fix up a tired, nasty digital image received from the client. This tutorial will show you how to use only Fireworks MX to do the repair work.

Hand Coloring and Tinting a Photo in Fireworks MX
Reader Level: Reader Level

Harken back to the days of olde when a photographer used FILM and made enlargements in a DARKROOM. This tutorial will show you step by step, how to recreate some of the coloring and tinting techniques that have been used for years on traditional black and white photographs.

Creating Custom Command in FireworksMX Free!
Reader Level: Reader Level

Learn to use Fireworks MX to create a custom command to produce thumbnail images. Combine the command with the batch processing power of Fireworks MX to take your productivity to the next level!

Round Trip Editing in Fireworks and Dreamweaver
Reader Level: Reader Level

Work smarter, not harder! Tight integration between Dreamweaver and Fireworks can make you work go even faster and improve your productivity! Check out this tutorial and start taking advantage of Roundtrip Editing.

Creating perspective shadows in Fireworks MX
Reader Level: Reader Level

There was a time, in ancient imaging history (ummm 6 years ago or so), when creating a simple Drop Shadow was a multi-step process of selections, layers, fills and Gaussian blurring. Now, it's as easy as clicking a button! In a lot of cases though, what you really need is a shadow that more closely mimics the shape of the object itself. One that seems to have been created by the sun or some other key light source. In photography, shadows add depth, texture and dimension to an image.