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.

Maintaining Transparency and Anti-Aliasing Between Fireworks and Photoshop Free!
Reader Level: Reader Level

In the wonderful world of web design, there are two main graphic camps - Fireworks users and Photoshop users. This article isn't so much about the different camps - there are tons of articles out there on that topic - but more so on the reality that sometimes - maybe even often - a designer either has to work with both applications, or at least has to prep artwork to go from Fireworks to Photoshop.

Yes, this is the part of the true, heart-wrenching and inspiring tale of Fireworks conversion. It's happening, but slowly, one designer at a time . . .

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

Understanding 9-Slice Scaling Guides
Reader Level: Reader Level

9-Slice Scaling Guides are a feature found in both Illustrator and Fireworks. But from many postings I've seen in user forums, there seems to be some confusion as to how they work. In this article we'll look at the 9-slice guides feature used in Fireworks and how to use it.

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

Fireworks CS5 Classroom in a Book Excerpts - Part 3: Prototyping 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 3 with segments on the prototyping workflow and exporting a Fireworks wireframe as an interactive PDF. Both excerpts from Chapter 10, Prototyping Basics.

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

Introducing CMX JumpStart Merry Christmas Free!
Reader Level: Reader Level

It's that most wonderful time of the year - not only is it the holiday season, but we're also gearing up for Community MX's annual open house. The entire web community is invited to browse our offerings for free, as well as accept our gift of a free CMX Dreamweaver template, CMX JumpStart Merry Christmas.

In this article I will discuss the features of the new JumpStart, and show you a modification that should get you started in thinking about ways you can use it in your own projects.

CMX JumpStart: Merry Christmas Free!
Reader Level: Reader Level

Merry Christmas from Community MX!

To celebrate Christmas we are releasing our annual Christmas JumpStart. We would also like take the opportunity to wish you a great holiday and hope that everything you wish for is granted in the New Year. The Christmas JumpStart consists of four columns, one being occupied by the Spry Accordion widget, and the other three are floated columns. The layout presents the opportunity to display a great deal of information and lends itself nicely to a home page for a portal web site.

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

Introducing CMX JumpStart Lucknow Free!
Reader Level: Reader Level

With President Obama in India this week, it is a good time to offer a JumpStart based on an Indian city. Lucknow is the capital city of Uttar Pradesh in India, and is also now the latest CMX JumpStart, CMX JumpStart Lucknow.

The main construction of CMX JumpStart Lucknow consists of liquid outer DIVs, but fixed inner content widths. This ensures that the design fills out the user's browser width while still maintaining a good line reading length. 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. The optional third column includes a styled Spry Accordion widget. A version of the Lucknow logo is included as a multi-layered PNG that is fully editable.

(And if this is all still not enough for you, later in this article I will give you a bonus CSS3 style sheet. You'll be able to add gradients, rounded corners, box shadows, and RGBA color to enhance the design without the weight of extra images.)

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.

Hidden Symbols in Fireworks CS5
Reader Level: Reader Level

If you have Fireworks CS5, chances are you've looked at - and maybe even used - the new Document Template feature. This addition to Fireworks can speed up the design process by getting you started quickly with a 960 pixel grid layout, wireframe design or even just by generating a document at a specific dimension.

This article lists the template custom symbols I've found to be useful, and tells you how to add those symbols to the Common Library so you can use them in any design.

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.

Improved Export Workflows in Fireworks CS5 Free!
Reader Level: Reader Level

Fireworks CS5 has improved some of the existing export work flows, compared to prior versions. While these may seem small items, you may find this information quite helpful when you plan to export your graphics.

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.

Introducing CMX JumpStart Beijing Free!
Reader Level: Reader Level

The Vancouver Olympics are over, and we are left with only nostalgia. Let's add the 2008 Beijing Olympics to our memories as we contemplate the latest CMX JumpStart, CMX JumpStart Beijing.

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.

Creating Semi-transparent PNG Files in Fireworks
Reader Level: Reader Level

In my last article, I talked about using 32-bit PNG files to create an expandable container. This short follow up article details the process of creating the alpha transparent PNG files within Fireworks.

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

Introducing CMX JumpStart Agra Free!
Reader Level: Reader Level

Maybe you haven't heard of Agra, India, but you most definitely have heard of its most famous building, the Taj Mahal. Agra is a popular tourist destination, and now it will be a particularly popular CMX JumpStart, CMX JumpStart Agra. Why? Because one page includes multiple layout possibilities.

CMX JumpStart Agra is a 900 pixel wide, fixed-width layout providing multiple column options that can be controlled from a single CSS file. While the top half of Agra remains constant, the lower three-column section can easily be modified from its default three columns to either a one or two column layout. The tabbed navigation uses the popular Sliding Door technique.

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 Agra meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

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.

Decorating Lapland for the Holidays Free!
Reader Level: Reader Level

Can it be mid December already? The holiday season is in full force, and many of us are decorating, putting up trees, shopping online and in stores, and planning the holiday meal. We're decorating here at Community MX as well. In fact, this busy little CMX elf is decorating the latest JumpStart, CMX JumpStart Lapland. We are extremely pleased to offer this JumpStart as a free holiday gift to the entire online community. Put on the holiday music, and join me in this tutorial that guides you through modifying Lapland and decorating it for the holidays with a custom font from Font Squirrel.

Going Mobile with Fireworks CS4: Design Meeting and Feedback Free!
Reader Level: Reader Level

Kim Cavanaugh has given us the general style of our little iPhone application. Our next step in the process was to discuss the design and also get some client feedback. In this article we'll address some questions from our "client" and also finalize a key point of our app - how will our articles be displayed?

The Going Mobile with Fireworks CS4 Series:
Going Mobile with Fireworks CS4: The iPhone Project
Going Mobile with Fireworks CS4: On Design and Branding for iPhone Apps
Going Mobile with Fireworks CS4: The iPhone Project Comes into Focus
Going Mobile with Fireworks CS4: Creating an iPhone Application Wireframe
Going Mobile with Fireworks CS4: Creating a Branded Application
Going Mobile with Fireworks CS4: Design Meeting and Feedback

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.

Create Your Own Custom CMX Fireworks Course - Updated Free!
Reader Level: Reader Level

Since March of 2009, we've added more than 40 Fireworks or Fireworks-related articles to the Community MX content list. Now, as of November 2009, there are over 400! I figured it was about time to yet again update what we have available for my favorite imaging application. This learning guide will group articles into categories, guide you in determining their levels, and help you design your own custom Fireworks course. This article will break down the various FW articles into several areas, from the basics of the Fireworks interface, to creative design and production techniques.

The CMX JumpStart Catalog Update 2009 Free!
Reader Level: Reader Level

Our last JumpStart Catalog was published in 2008, and of course we've released quite a few new JumpStarts since then. It's almost 2010(!), so it's definitely time to update and put all our JumpStarts more conveniently at your fingertips.

Hard as it is to believe, it is five years - almost to the day - since we published our first JumpStart, CMX JumpStart Paris, on Oct. 28, 2004. Long live the CMX JumpStart!

This catalog will start out by breaking down the JumpStarts into categories such as fixed-width, fluid, horizontal band, and number of columns. It will then list the special features that can be found in various JumpStarts, such as galleries, widgets, typography enhancements such as sIFR, Flash MP3 players, forms, and many more. Finally, we'll get to the actual catalog of every JumpStart we've published over the last five years. There will be a picture, a list of features, and links to the JumpStart itself, as well as the free article that describes it.

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.

Going Mobile with Fireworks CS4 - Creating a Branded Application Free!
Reader Level: Reader Level

As we’ve wound our way through the brave new world of mobile device design using Adobe Fireworks, my partners Tom Green, Jim Babbage and I have all learned some valuable lessons. From the technical to the practical, this project has opened all our eyes to a number of things that are a bit different from our more customary world of web design. Different screen sizes, different resolutions, and conflicting advice have all been a part of the landscape of working in this arena.

The one very fortunate constant, however, has been Adobe Fireworks CS4. It seems like I've used just about every tool that comes with the application over the last few weeks as I've taken on the important task of creating a uniquely branded application for the iPhone. It's also taken a fair bit of time to get my head into how I want the application to look and I've held things up a bit as a result. Boy, doesn't that sound like the real world?

In this next article in the series I'll share with you a little bit regarding the techniques, tools, and philosophy I used when getting our little design into its current state. Even though we're not finished, and even though I know there are things that I've missed and corrections that need to be made, pausing at this point in the design process to get feedback from my collaborators on this project actually makes sense.

The Going Mobile with Fireworks CS4 Series:
Going Mobile with Fireworks CS4: The iPhone Project
Going Mobile with Fireworks CS4: On Design and Branding for iPhone Apps
Going Mobile with Fireworks CS4: The iPhone Project Comes into Focus
Going Mobile with Fireworks CS4: Creating an iPhone Application Wireframe
Going Mobile with Fireworks CS4: Creating a Branded 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.

Going Mobile with Fireworks - Creating an iPhone Application Wireframe Free!
Reader Level: Reader Level

In the last three articles in this series, Tom Green and Kim Cavanaugh shed a great deal of light on the conceptual process for creating our iPhone app. We're now at the stage where a wireframe of our concept would be a really good idea, and that's where I come in.

In this article I'll talk about the considerations made for building the wireframe and share some tips and Fireworks features that can help ease the process.

The Going Mobile with Fireworks CS4 Series:
Going Mobile with Fireworks CS4: The iPhone Project
Going Mobile with Fireworks CS4: On Design and Branding for iPhone Apps
Going Mobile with Fireworks CS4: The iPhone Project Comes into Focus
Going Mobile with Fireworks CS4: Creating an iPhone Application Wireframe
Going Mobile with Fireworks CS4: Creating a Branded Application


Going Mobile with Fireworks CS4: On Design and Branding for iPhone Apps Free!
Reader Level: Reader Level

I'm taking the plunge along with Tom Green and Jim Babbage for an in-depth look at the world of mobile design, and as luck would have it, we've decided to take on what is likely the most challenging of all mobile devices by starting with the iPhone.

The Going Mobile with Fireworks CS4 Series:
Going Mobile with Fireworks CS4: The iPhone Project
Going Mobile with Fireworks CS4: On Design and Branding for iPhone Apps
Going Mobile with Fireworks CS4: The iPhone Project Comes into Focus
Going Mobile with Fireworks CS4: Creating an iPhone Application Wireframe
Going Mobile with Fireworks CS4: Creating a Branded Application

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.

Going Mobile with Fireworks CS4: The iPhone Project Free!
Reader Level: Reader Level

The question is not if you will start designing for mobile devices. It is when you will start. Join Jim Babbage, Kim Cavanaugh and I as we enter the wild, wacky and weird world of designing for mobile devises using Fireworks CS4.

The Going Mobile with Fireworks CS4 Series:
Going Mobile with Fireworks CS4: The iPhone Project
Going Mobile with Fireworks CS4: On Design and Branding for iPhone Apps
Going Mobile with Fireworks CS4: The iPhone Project Comes into Focus
Going Mobile with Fireworks CS4: Creating an iPhone Application Wireframe
Going Mobile with Fireworks CS4: Creating a Branded Application

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.

CMX Design Element - Sulphur
Reader Level: Reader Level

Hello, and welcome to a new CMX Design Element. It has been a while since we last released one of these, so we hope that this one comes as a pleasant surprise.

This Design Element's code name is Sulphur.

While our previous Design Elements have been loose designs with no particular theme, Sulphur is a design that is focused towards (but not in any way limited to) blog themed sites.

It's designed along the same lines as many modern websites that contain much of the extended page content in an oversized footer section.

Approximate download size: 29MB

Introducing CMX Design Element Sulphur Free!
Reader Level: Reader Level

It's been a while, but we hope the wait is worth it - today we have a new Design Element to offer you - CMX Design Element Sulphur, a layout that is intended for, though not really limited to, blogging sites.

If you're a subscriber, be sure to download CMX Design Element Sulphur from Gordon MacKay's article, also published today. If you're not a subscriber, continue with this article to learn about the Design Element concept and to get a peak at what the Sulphur design looks like.

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.

Introducing CMX JumpStart: Stelvio Pass - Gallery Free!
Reader Level: Reader Level

Let's take a car ride along the highest paved mountain pass in the Eastern Alps, the Stelvio Pass of Italy. Then let's take some great shots along the route and when we get home, place them on a web page in a stunning gallery format, courtesy of the free Adobe Lightbox, to share with our friends and family. Guess what? That's exactly what Adrian Senior did for the the latest JumpStart, CMX JumpStart Stelvio Pass - Gallery.

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 4: Advanced Prototyping 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. Below is a break down of the series.

The excerpts in in this final installment are taken from Lesson 11 in the book. While there are only two excerpts in this final part, they are both very detailed, covering some time saving steps to working with multiple rollovers on the same page and combining basic and more complex rollover effects to imitate a master detail Spry data table.

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 3: Workflow 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.In this, the third part of the series, you will learn how to create an animation symbol, share a web layer and share a layer to multiple pages.

Approximate download size: 4.2MB

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 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.



The Fireworks Master Page - In Detail
Reader Level: Reader Level

Ah, the Fireworks Master Page. Misunderstand, perhaps maligned and arguably somewhat limited, but I'm here to change all that. Well the misunderstood part, anyway. We're going to examine the Master Page in detail in this article, so by the time we're done, you will just what you can - and can't - do with it.

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.

Replace Your PowerPoint Presentations with Cool Iris and Fireworks CS4
Reader Level: Reader Level

One of the coolest web applications I've come across in a long time is the terrific CoolIris program "…the plugin that transforms your browser into a lightning fast, cinematic way to enjoy photos and videos from the Web or your desktop." That's a pretty dry definition of what this ground-breaking program does, introducing a 3-dimensional interface that allows you to view photos, videos, and much more in any modern browser.

While the program is touted as a browser plugin the fact is that you can do much more with Cool Iris than simply browse the web for interesting content. The most recent version of the plugin added a new feature that takes things to an entirely different level—the ability to browse your computer and view your images in the 3-D interface that Cool Iris provides. Having seen this I immediately thought that the Cool Iris interface would be a terrific alternative to PowerPoint.

The trick to getting a presentation to view in Cool Iris is simple—you merely need to create images that are named or numbered sequentially so that browsing your "slides" becomes easier. And there's no better way to quickly generate sequential images that I know of than Fireworks.

In fact, by using the Master Pages feature built-in to Fireworks CS4 (and CS3) you can easily create a slide master as you would in PowerPoint, add pages for each slide in your presentation, then export your files using the pages to files feature that Fireworks provides. Using this method you can generate slides nearly as quickly as you can in PowerPoint, use all of the great image and graphics editing tools that come with Fireworks, and then display your presentation in the way cool and completely fresh Cool Iris interface. No more boring PowerPoints!

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.

Introducing CMX JumpStart Isle of Skye Free!
Reader Level: Reader Level

National Geographic rated it the fourth best island in the world. It is the second largest island in Scotland, with a coastline strewn with peninsulas and bays. And now, it's a first class design for the latest CMX JumpStart, CMX JumpStart Isle of Skye.

CMX JumpStart Isle of Skye is a centered, fixed-width layout with features that work well for a business site. There is a highlighted style for a promotional paragraph above the two-column main content region. There is an extended area for displaying images that express your business model. A print style sheet includes your business contact information so that it is not lost when a visitor prints out any page of the site. Your logo appears next to the popular accessible Sliding Door tabbed navigation. And best of all, this is one of the easiest JumpStarts to modify! Once you edit the PNG file and export the slices to the defined Dreamweaver site, the changes you'll need to make to the CSS file are minimal.

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.

Introducing CMX JumpStart Landeck Free!
Reader Level: Reader Level

CMX JumpStart Landeck is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, some eye catching images. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to blend its image into the background color.

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

Introducing CMX JumpStart Lima Free!
Reader Level: Reader Level

Peru's archaeological heritage and great natural beauty make it a popular travel destination for thousands of visitors each year. Most of them visit Lima, Peru's cultural and business center. The latest CMX JumpStart, CMX JumpStart Lima, will also become an artistic center - for designers. With its neutral color scheme, modern design, and elegant simplicity, it will be a JumpStart you can use again and again to almost instantly create a new site.

CMX JumpStart Lima is a centered, two-column, fixed-width layout that makes extensive use of background images to produce its space age design. The left column navigation is constructed from an unordered list. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a subtle blend whose visual appeal makes a great substitute for the navigation buttons in Gordon's original Mercury Design Element.

That's right - if this design looks familiar, it should. Adrian Senior coded it from Gordon Mackay's Design Element Mercury.

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

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

Create Your Own Custom CMX Fireworks Course - Updated Free!
Reader Level: Reader Level

When I first wrote this article back in 2007, there were more than 315 Fireworks or Fireworks-related articles available on Community MX. Now, as of March 2009, there are over 400!

Well, we've seen two new versions of Fireworks arrive since January 2007, and I figured it was about time to update what we have available for my favorite imaging application.

This learning guide will group articles into categories, guide you in determining their levels, and help you design your own custom Fireworks course.

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.



Introducing CMX JumpStart: The New Forest Free!
Reader Level: Reader Level

Where can you stay in a five-star hotel or bed-and-breakfast, experience all kinds of wildlife, visit gardens and museums, go biking, and even get married? How about England's newest National Park The New Forest, where there is, it seems, something for everyone? There is also something for everyone in the latest CMX JumpStart, CMX JumpStart: The New Forest.

CMX JumpStart The New Forest is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses the infamous Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, an eye catching image. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a blend of images that has great visual appeal.

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

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!

Introducing CMX JumpStart Nairobi Free!
Reader Level: Reader Level

Nairobi is the capital and largest city in Kenya. The latest U.S. election put focus on Kenya as the President-Elect, Barack Obama, had a Kenyan father. Nairobi is now one of the most important cities in Africa, and we think that the latest CMX JumpStart, CMX JumpStart Nairobi, will become one of your most important JumpStarts as well. Why? Because Nairobi is all about features and flexibility.

Designing Interfaces in Fireworks CS4 Free!
Reader Level: Reader Level

If you've been reading any of the Fireworks CS4 articles here at CMX, you can see that the application has had some pretty cool new features added to it. That said, however, CS4 is not just about new features. If you're new to the software, learning the basics is equally, if not more, important. 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 12 - covers 10 techniques for designing interfaces using Fireworks, including two new features: Exporting an AIR Prototype and Exporting a CSS-based layout.

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

Introducing CMX JumpStart Tokyo Free!
Reader Level: Reader Level

Want a JumpStart where you need to modify only two graphics AND you can choose a two or three column version that you turn on with the flick of one class? Then welcome to CMX JumpStart Tokyo!

Tokyo is a centered, two-column or three-column, 770 pixel fixed-width layout that has many appealing design features. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The right column of the three-column version has a series of pods that can be used for "teaser text" with thumbnail images.

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.

Calculating Embed Dimensions with Fireworks
Reader Level: Reader Level

These days it's quite common to use one of the free and freely available web services that exist to create content for a web site, blog, or just about any other online publishing format you can dream of. And, in many cases, those way cool new methods for sharing ideas, videos, images, audio and photos comes in the form of a block of embeddable code that allows you to share what you've created as a Flash movie by simply copying and pasting into document. These new services make it incredibly easy to do some amazing things—from capturing your screen and adding voice annotations using the Jing Project, to brainstorming using Bubbl.us, to exporting PowerPoint slides with the ability for viewers to insert their own voice comments using VoiceThread—all of these services and many, many more ultimately rely on the Flash Player for displaying content in the browser. These are the services that are putting the "Oh, cool!" into Web 2.0.

In most cases these services are dead simple to use, and even easier to embed into a web page. But, as with most things, there can be a little catch when it comes time to embed your code into a page. In all cases the width and height of the Flash movie is determined by the service, and while you can certainly change those parameters there is one issue that needs to be resolved—maintaining the correct proportions to what you embed. This is where Fireworks can perform an invaluable service when you want to get things just right. By using a simple trick you can be sure that the modifications you make to the embed code always comes out with the correct aspect ratio so your new creation fits your page layout and still gives you the best display possible when seen by your viewers.

Read on to learn how to do this simply and easily without having to pull the old calculator out of the drawer.

What's new in Fireworks CS4 Free!
Reader Level: Reader Level

Well it's official; Fireworks CS4 is coming! And with it, some noticeable changes to Fireworks, from the interface on up.

Adobe has been carving out a niche for Fireworks as a rapid prototyping tool. I'd venture to say this extends to a more general description of a rapid design tool for screen graphics.

Let's take a look at some of the most interesting and innovative features in this new release.

Font Rendering in the New Fireworks
Reader Level: Reader Level

There are so many improvements that can be seen in the pre-release beta of Fireworks that it might be easy to miss one of the most requested—and long overdue—improvements that will be seen when the next version of Fireworks is officially released. No, I'm not talking about the very cool and useful new features such as CSS exporting, rapid prototype previews, or even the awesome new additions to the Library. Nope, in this case the change is something much simpler and yet more profound, and in fact may be the one single reason you consider upgrading your version of Fireworks when it becomes commercially available.

That's right, we're talking about the program's ability to produce text in such a way that the colors are rich and vibrant, and change that has been sorely needed in Fireworks for a long time, and something that we old hands with the program say "Hallelujah!" to in a big way.

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.



Introducing CMX JumpStart Prague Free!
Reader Level: Reader Level

It's that time again! CMX is proud to introduce our latest JumpStart design, CMX JumpStart Prague. CMX JumpStart: Prague is a two-column, centered, 770 pixel fixed-width layout that features rounded corners. Multiple wrappers, used in conjunction with faux column technique, maintain the integrity of the structure even upon text resize. Additionally, the JumpStart provides an attractive example of overlapping areas within a design. This JumpStart filters styles for various versions of Internet Explorer, and includes a separate style sheet to address navigation issues found in IE 5.01. Of course Prague meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

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.

Introducing CMX JumpStart: The Lake District Free!
Reader Level: Reader Level

The Lake District in rural North West England is famous for its gorgeous scenery — and, of course, lakes. It is also associated with the poetry of William Wordsworth and the Lake Poets. It is to that region that we travel for our latest JumpStart design, CMX JumpStart The Lake District.

CMX JumpStart: The Lake District features an accessible split level navigation system. The main navigation is a series of tabs that uses the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and has rounded corners, as well as a decorative background image on the bottom that is reminiscent of CMX JumpStart North Pole. Both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 750px wide and utilizes subtle gradients on various page areas.

The color scheme of this layout was selected to make sure that the eye goes to the subject matter rather than the design. Thus, The Lake District is composed of black, gray, and white to help the images pop.

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 4: Panels Free!
Reader Level: Reader Level

In this Fireworks Public Beta article we will look at at updates to the Pages panel, the new Styles panel and its improved workflow. We will also take a look at some very cool ways to get your designs in front of other eyes: PDF, CSS and AIR exports.

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

Exploring the New Paths Panel in Fireworks CS4 Public Beta Free!
Reader Level: Reader Level

Fireworks has always been a unique tool in the pantheon of image editors. With its ability to work with both vector and bitmap images Fireworks stood alone as the one image editing software product that could combine pixel-level editing and effects with the ability to manipulate shapes by changing the basic properties of the vector paths that defined those shapes.

At least that has always been the promise, but in reality the vector tools that Fireworks has always included were fairly basic, and had never received an overhaul throughout the many revisions and new versions of Fireworks that were released over the years. If you learned how to modify paths in Fireworks 4 you had a pretty good handle on how it was done in Fireworks MX and MX2004, in Fireworks 8, and finally in Fireworks CS3. Basic, simple path operations were available in all of those versions and little changed over the years.

With the impending release the Fireworks public beta all that is about to change as Adobe has added a terrific new bundle of path operation tools into a new panel, cleverly called the Path panel. Finally! No more trips over to Illustrator or even Freehand when you need to perform more complex and creative path operations. As you'll see in this sneak peak from the Fireworks public beta, the changes are quite profound.

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

Fireworks CS4 Public Beta - Part 2: Productivity Features Free!
Reader Level: Reader Level

The line is blurring (for me anyway) between workspace improvements and productivity improvements. Enhancements in these areas mean a more streamlined workflow. I know that the term Rapid Prototyping is starting to grate on people's nerves, but I must admit, Adobe is doing a great job of giving Fireworks a unique tool set within the Adobe family. Not only can this application work with bitmaps and vectors easily and quickly (as it always has), but we now have even more tools to help us design a layout or create a piece of art.

This article will give you an overview of many of the new features in public beta release of Fireworks CS4. For a review of the new interface, please read Fireworks CS4 Gets a Facelift.

If you currently own Fireworks, you can download a trial which will run until the official release of the software. If you are not a current owner of Fireworks, 1) you have got to try this puppy out and 2) the beta will only run on your system for 30 days.

One other really important note: The public beta software will be available for download for the duration of the beta program and will run for 2 days as a demo before requiring unlocking. Unlocking the public beta for the remainder of the beta period (until CS4 ships) requires an active CS3 serial number.

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

Fireworks CS4 Public Beta- Part 1: Fireworks Gets a Facelift! Free!
Reader Level: Reader Level

Well Fireworks fans, it's here! Adobe has announced a public beta of the new Fireworks CS4 and it's very impressive, even for a beta.

If you currently own Fireworks, you can download a trial which will run until the official release of the software. If you are not a current owner of Fireworks, 1) you have got to try this puppy out and 2) the beta will only run on your system for 30 days.

One other really important note: The public beta software will be available for download for the duration of the beta program and will run for 2 days as a demo before requiring unlocking. Unlocking the public beta for the remainder of the beta period (until CS4 ships) requires an active CS3 serial number.

This article will give you an overview on the new User Interface. This is just one of a few upcoming articles on new Fireworks CS4 public beta, so stay tuned for more.

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

Introducing CMX JumpStart Bordeaux Free!
Reader Level: Reader Level

It's May, and for many of us that means lots of end-of-year events. School concerts, graduations, award ceremonies, last meetings till the fall...we celebrate these endings and look forward to the easy lifestyle of summer. Many of our celebrations are accompanied by parties - delicious food, and sometimes a special wine. What more preeminent center of great wine is there than Bordeaux, France? And to that region we dedicate our latest JumpStart design, CMX JumpStart Bordeaux.

CMX JumpStart Bordeaux features an accessible split level navigation system. The main navigation is a series of tabs that use the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 740px wide and utilizes gradients on various page areas. Of course Bordeaux meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

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.



Introducing CMX JumpStart Malé Free!
Reader Level: Reader Level

I grew up at the New Jersey shore, and spent my childhood playing in the surf and sand. I felt, and still feel, a bliss and peace there that I feel no where else in the world. So, when I first viewed Adrian Senior's latest JumpStart design, CMX JumpStart Malé, I was immediately smitten.

CMX JumpStart Malé, one of our most flexible JumpStarts to date, is a fixed-width two and three-column layout. You can show or hide the third column on a page-by-page basis, without having to delve into the code. The left column features a CSS based flyout menu that you can customize with as many levels as you need.

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

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

Creating 8-bit Alpha Transparent PNG Files Free!
Reader Level: Reader Level

Alpha Transparency is not limited to 32-bit PNG files.

If you're using Fireworks, that is. And if you export an 8-bit PNG file.

Read on to learn how to make use of this feature in Fireworks.

Introducing CMX JumpStart Sydney Free!
Reader Level: Reader Level

It has to be one of the most beautiful opera houses in the world: the Sydney Opera House in Sydney, Australia. Opulence, elegance, and grandeur all come to mind when viewing pictures of the architecture and the city. And now those very same qualities come to you in the latest JumpStart, CMX JumpStart Sydney. Indeed, the header includes an image of the Sydney Opera House under a night sky as the centerpiece of a tasteful and elegant page layout.

CMX JumpStart Sydney is a centered, fixed-width layout that features an absolutely positioned left column with menu system that drapes over the header and content regions. With its quiet color scheme and simplicity of layout, JumpStart Sydney wreaks of class.

Read on to find out what the Sydney package includes and to view a Sydney example modification.

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

Take Control of Your Workspace Free!
Reader Level: Reader Level

There are several ways to increase your productivity within your software applications:
  • Memorize keyboard commands
  • Learn the application inside out
  • Configure the application layout to suit you

This third point is what we'll talk about in this article, using Fireworks as an example. Most Adobe applications offer ways to customize the the workspace. Sometimes these features are obvious, sometimes not.

Read on and learn how to make the workspace work for you.



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.

Introducing CMX JumpStart Stirling Free!
Reader Level: Reader Level

CMX JumpStart Stirling, a centered, fixed-width layout with a header, is based upon the popular Playa Blanca JumpStart. However, it has some intriguing enhancements, the most notable of which is the use of descendant selectors to flip the design from a two-column layout to a three-column layout on a page-by-page basis. Stirling also positions the main structure in a different way than Playa Blanca in that all of the columns are floated to achieve the design layout. The navigation in the left hand column, on the other hand, is switched to an AP div for older versions of IE in order to enable the bleed into the main content area from the page marker. Of course Stirling meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements.

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

Fireworks Kuler Panel Free!
Reader Level: Reader Level

Making color choices for a web site can at times be a daunting task, especially for those of us not schooled in color harmonics. Help in making those choices has recently gotten much easier with the introduction of the Flash kuler Panel for Fireworks. Ben Pritchard from Pixel Fumes first built a kuler panel for Flash, then Alan Musselman asked him if he would consider creating one for Fireworks. In early August of 2007, Ben had one for all us faithful FW users.

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

Fitting Fireworks CS3 into the Design Work Flow Free!
Reader Level: Reader Level

In my last article, I talked about the decision process between when to use Photoshop or Fireworks in your projects.

Really, what I'm talking about here is freedom of choice. Knowing your options and where different applications fit together can help you work faster and smarter in your day to day production work flow. And - happily, Fireworks can fit in quite nicely in the digital workflow of many professionals, even if they don't know it yet!

This article, based on my talk at Adobe Max 2007, gives an overview of the integration between Fireworks and the other core Adobe products such as Photoshop, Illustrator, Flash, Dreamweaver and Bridge. I thought it would be good have an overview of the features in a single location. Where relevant, I have included links to other CMX articles that dig deeper into the topics.

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

Introducing CMX JumpStart: Playa Blanca Free!
Reader Level: Reader Level

I admit it: this JumpStart city necessitated that I do a little geography lesson. Adrian Senior, creator of the latest CMX JumpStart Playa Blanca gave me clues to googling for Playa Blanca information in the introduction to his article:

While not exactly a city, Playa Blanca is a beautiful town that can be found on the southern tip of Lanzarote. Lanzarote is one of a group of small volcanic islands that despite sitting off the African coast come under Spanish sovereignty.

All right! A beautiful beach resort that brought me back to my summer trip in Hawaii. Now on to the latest JumpStart....Playa Blanca is a centered, two-column, fixed-width layout with header and footer, but it is a more complex variation of that common layout type. It uses a series of nested divs that create the illusion of the secondary navigation effect that bleeds the appropriate button into the related content region. Of course Playa Blanca meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements.



Fireworks or Photoshop? Free!
Reader Level: Reader Level

A common question that comes up from new users is, "How do I decide whether to use Fireworks or Photoshop for a project?"

It's a good question. In fact, the answer may not be completely black and white (or RGB).

By answering the 5 questions in this article, you will be better prepared to decide not only what software application is best suited to the job at hand, where Fireworks can reside in your creative or production workflow.

Some of these questions you can answer yourself, while some may need to be posed to the client, or even other production partners.

Are you ready? Sharpen your pencil and let's go!

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

Introducing CMX JumpStart Madrid Free!
Reader Level: Reader Level

Madrid, Spain, capital of Spain and one of Europe's major political and financial centers, is home to some of the most captivating museums and cultural events in the world. Like the atmosphere that pervades the city, we are pleased to introduce the equally warm and vibrant CMX JumpStart Madrid!

Madrid is a three-column, elastic layout that includes a background image in the content region that uses the background attachment property set to a value of fixed, an expandable header region, and a dual navigation system. The main navigation consists of an inline unordered list at the top of the design, and vertical sub navigation buttons in the left column. As with all the CMX JumpStarts, Madrid meets the W3C standards for CSS and XHTML, as well as for WAI and 508 accessibility.

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

Fireworks Automation Features in Bridge CS3
Reader Level: Reader Level

As you are learning in my Bridge CS3 video series, this application does many things and is a great jumping off point for pretty much any users of Adobe products. In this video, we will take a look at the Fireworks Automation features which are available from within Bridge, how to use them and the benefits of accessing those tools via Bridge.

Approximate download size: 12.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.



Introducing CMX JumpStart Palm Springs Free!
Reader Level: Reader Level

Palm Springs, California, a desert city that is about 110 miles east of Los Angeles, is home to some of the most famous golf courses in the country. With that in mind, we have a new JumpStart that should especially appeal to all the golf fans among us. Welcome to CMX JumpStart Palm Springs!

Palm Springs is a three-column, fixed-width layout that includes a dual navigation system. The main navigation consists of horizontal tabs at the top of the design, and vertical sub navigation buttons in the left column. The design also features pre-prepared login and subscribe form layout elements. As with all the CMX JumpStarts, Palm Springs meets the W3C standards for CSS and XHTML, as well as for WAI and 508 accessibility.



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

Slicing Options in Fireworks CS3
Reader Level: Reader Level

Many issues can occur when the final Fireworks design and layout is treated as the final step before slicing. That is, the PNG looks JUST like how you want the web page to look. This methodology is very helpful in the creative process and for gaining client approvals with prototypes or mock ups. In many cases, however, the PNG file best suited for slicing and export may not look at all like a page layout. It may more resemble a bunch of small disconnected objects that will be exported and reassembled using CSS and DIV's (or table/cell background images).

I also want to take a closer (read exhaustive) look at how slices and web layers work in the new Fireworks CS3 workflow. We'll look at things to watch out for when using slices, frames, pages, symbols and multiple web layers. With the additoion of the Pages feature and the ability to now share web layers and object layers across those pages, we've gained a lot of flexibility, but slicing can get quite complex and the results confusing in designs. While the scenarios I share hear may not be bugs per say, neither are the issues are documented in the help files. Lots of food for thought.

Throughout the article, I'll make use of a simple PNG layout and you will find in the source files several different PNG's representing the slicing issues I experienced.

Must-Have Extensions for Fireworks CS3 Free!
Reader Level: Reader Level

A new software release is always kind of exciting, but with the release of products like Fireworks and Dreamweaver, it's even better. Not only can you expect new goodies in the application itself, but you can expect extension developers to create other cool commands and tools for the applications.

Fireworks CS3 has only been out for a short time, and already there is already an impressive list of new extensions we can make use of. This article will outline some of those extensions and point you to where you can find them.

And did I mention that all these extensions and commands are FREE?

Introducing CMX JumpStart Washington, D.C. Free!
Reader Level: Reader Level

Washington, D.C. is, of course, significant for being the capital of the United States, but it has also been my "hometown" since I was seventeen years old. I have lived in the city or one of its suburbs for all of my adult life. It is with the greatest pleasure, therefore, that I introduce the newest JumpStart, designed and coded by Adrian Senior, CMX JumpStart Washington, D.C.

Washington, D.C. is a two-column, fixed-width design that employs a horizontal band method for the header and footer areas. It has a main navigation level that uses the popular tabbed sliding doors technique. CSS based buttons on the left form the secondary navigation. Washington, D.C. meets the standards for CSS, XHTML and Accessibility, thus ensuring that you have a good solid layout on which to base a client site.

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.

CMX Design Element - Xenon
Reader Level: Reader Level

Hello, and welcome to the sixth CMX Design Element. It has been a while since we last released one of these, so we hope that this one comes as a bit of a treat.

This Design Element's code name is Xenon (that's the Xenon with a Zzee).

While our previous Design Elements have been loose designs with no particular theme, Xenon is a design that is focused towards (but not in any way limited to) financial themed sites.

It's designed along the same lines as many modern websites that contain much of the extended page content in an oversized footer section.

It looks like this:

Xenon
Image 1: CMX Design Element - Xenon.

What's Included?

  • The Xenon PNG file
  • Custom web icons drawn in Fireworks that will compliment the Xenon design perfectly
  • A STL file that will allow you to re-apply all the Fireworks Styles used in Xenon's design via the Styles Panel
  • Bullets and buttons specially designed to be used with Xenon
  • 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 - Xenon in detail:

  • Cool Pie Charts by Gordon Mackay
  • Best Practices Work Flow in Fireworks CS3 by Jim Babbage
  • Fireworks Layers - Best Practices by Jim Babbage
  • Designing with Gradients and Glows by Adrian Senior
  • Reflections on a Theme in Fireworks by Kim Cavanaugh
  • Creating Web Icons: Part 1 by Gordon Mackay

Our aim with the CMX Design Elements series is to provide you with an educational, as well as productivity enhancing, tool to reuse as often as you need.

Approximate download size: 28MB

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



Best Practices for Multi-page and Hierarchical Layer Designs in FW CS3
Reader Level: Reader Level

With the release of Fireworks CS3, some may be wondering how to best approach the design process using the new feature set. This article will cover my experiences and recommendations for working with the Pages and Master Page features, as well as the new Hierarchical Layers feature; things to do, things to avoid and ways to help structure your designs.

I've written and talked on these subjects through various articles and videos, but this article will nail down some key points, much like my much earlier Fireworks Layers- Best Practices did in 2005.

While much of that older article still stands true, now we have the ability to control and organize the design process even further. First I will go into detail about each feature, then at the end of each section, I'll summarize with bullet points.

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



Introducing CMX JumpStart Detroit Free!
Reader Level: Reader Level

We are pleased to introduce our latest CMX JumpStart: Detroit. Created by Adrian "JoJo" Senior, it has all the trademarks of his designs: clean with no-fuss CSS, easy to modify, and always professional looking. This two-column, centered, fixed-width layout includes a shadowed, tapering background image on the main column that gives the effect of a raised platform for the content. Like all JumpStarts, Detroit uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines.

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.

Rapid Prototyping in Fireworks CS3
Reader Level: Reader Level

When it comes to Fireworks CS3 Adobe is linking the application to the phrase: "Rapid Protoytyping". Here is what they are talking about.

Approximate download size: 5.7MB

A Look at The Integration Between Fireworks and Photoshop CS3
Reader Level: Reader Level

Communication – that’s what this industry is all about. For years, Fireworks and Photoshop have been like those two brothers who never really talked to each other and wouldn’t share their knowledge either. With the release of CS3, these two applications have finally buried the proverbial hatchet and are clasping hands – if somewhat tentatively at times.

Many graphics professionals use more than a single application to create their work. Personally, I’m always moving from FW to PS, depending on my client’s needs and the goals of the project. This shuffling back and forth has become much easier with CS3. A great deal of effort was put into making Fireworks and Photoshop more compatible in this release. Here’s the list in brief:
  • Improvements to the Photoshop Import and Export functions within Fireworks
  • Hierarchical Layers panel
  • FW support for Photoshop Layer Effects, with the Live Filters menu.
  • Support for commonly used Photoshop blend modes
  • Bridge/XMP Data Integration

Follow along in this Sneak Peek article for more reasons to consider upgrading.



A Fireworks CS3 Sneak Peek - Multiple Pages and Hierarchical Layers Free!
Reader Level: Reader Level

Presented for your consideration; a world where there is no more:
  • Showing and hiding different sized and/or colored overlapping web slices
  • Hiding and showing layers on specific frames to ensure your overlapping slices are exported correctly
  • Juggling web layer hierarchy for the same reason
  • Using frames as a comping tool for multiple designs
  • Creating multiple PNG files for each different web interface design

You haven't entered the Twilight Zone. You've been warped into the Adobe Zone, and specifically (big surprise for those of you who read my articles) Fireworks CS3.

Fireworks CS3 includes many updates. It's probably the biggest feature release in years for Fireworks. And while those features don't include much needed changes to the main bitmap or vector tool set, other very significant tools have been added. Indeed, Adobe has put Fireworks on a path that I believe will keep the app around for a long time.

The addition of hierarchical layers, multiple page and multiple web layers support are only a few of the features that put Fireworks on the path as one of the best graphical rapid prototyping tools out there.



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


From Fireworks to Photoshop - Traverse City PNG to PSD Conversion
Reader Level: Reader Level

Recent enquiries from one of our loyal subscribers was the inspiration for this, the fourth in my series of CMX JumpStart PNG's conversion articles. I supply you with the Traverse City PNG file as a fully editable PSD file. Much like the Venice conversion (Hmm, The Venice Conversion . . sounds like a new John Grisham novel . . .) the Traverse City JumpStart, designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater, has two complete layout designs, each on its own frame. The advantage to doing this is you only have to deal with a single PNG file.

Currently, one can't save a multi-framed Fireworks PNG file as a PSD and expect it to display properly in Photoshop. Each frame must be saved as a separate PSD file, then the user must combine the elements of both files into one, using Layer Comps to emulate the multi-frame design method.

For detailed information and steps on converting flattened vector objects into editable Shape Layers be sure to read Fireworks to Photoshop - Rebuilding the CMX Vienna JumpStart PNG as a PSD file. For details on creating and working with Smart Objects, or working with an exported Adobe Illustrator file see Converting the CMX Orlando JumpStart PNG to a PSD and AI file. An in-depth description of working with Photoshop Layer Comps can be found in Fireworks to Photoshop - Converting the CMX Venice JumpStart PNG to a PSD File. The main purpose of this article is to supply you with a fully editable - and sliced - Photoshop version of the Traverse City PNG. For the actual conversion, I used exactly the same steps as I did with the Venice JumpStart.

Approximate download size: 1MB

Putting the Sting into the CMX San Francisco JumpStart
Reader Level: Reader Level

I was recently contacted by a small, family run business who wished to update their website. They wanted to make some content changes and have the overall look of the site be more contemporary. Being a small business, their budget was limited as well. I took on the project, thinking that a CMX JumpStart would be the perfect solution.

I see many questions on our forums about the CMX JumpStarts and how to make them work for one's own specific needs. As you may be aware, the JumpStarts are designed and tested to work based on specific layout concepts - that's why we have so many and continue to create more.

But I'd like to share with you my own personal experience in customizing one of our recent JumpStarts: San Francisco. San Francisco is based on Gordon Mackay's CMX Design Element: Gold PNG file. My customizations include:

Fireworks PNG
  • Color alterations
  • Changing dimensions of the background image for the innerwrapper div
  • Altering export format of slices

CSS

  • Adjusting rules to change the position of the navigation
  • Adding a custom bullet image
  • Creating a secondary modified style sheet and web page for a pop up window requirement.

So what are you waiting for? Hop on that trolley and follow me from San Francisco to Sooke, British Columbia.



CMX JumpStart: Kansas City Free!
Reader Level: Reader Level

Welcome to the next design in the CMX JumpStarts series, Kansas City, located in the wide, open great plains of the U.S.

The Kansas City JumpStart is a two-column design based on Zoe Gillenwater’s Horizontal Band Layout. The content is centered and fixed-width. The bands of color behind the header, footer, and main navigation bar stretch across the entire browser giving the design a wide, open feeling. Much like driving through the miles and miles of wheat fields in Kansas.

wheat field

As with all of our JumpStarts, Kansas City can be used in any way you wish, commercial or personal, and includes several tutorials, an extension, and source PNG.

Kansas City is structured to be as hack-free and straightforward as possible. So, if you've been looking for a smooth transition into using CSS for positioning as well as aesthetics, this may be just the JumpStart for you.

Kansas City JumpStart pages

Kansas City comes with a starter page and a nicely styled form page. Of course, both use valid XHTML 1.0 Transitional and CSS 2 markup and follow WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.

Using Background Images in a Horizontal Band Design Free!
Reader Level: Reader Level

Zoe's part two of the Horizontal Band Layout series describes ways to set additional background images on various areas of the design. While Heidi Bautista's JumpStart Kansas City focuses on the layout that Zoe described in part one of her series, the design that I created as the companion site for the Graphic Design for the Web class that I am now teaching focuses on the techniques in part two. Taken together, these two free articles that we're offering on the day that Community MX reaches its second grand milestone should give you plenty of ideas about how to capitalize on the horizontal band layout technique.

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.

Design Your Own Custom CMX Fireworks Course Free!
Reader Level: Reader Level

Note: This article has been updated on 3/10/2009. Check out the updated article

The Basics
You gotta walk before you can run, as they say. The articles in this section go over the basics of the Fireworks interface and standard workflow/best practices concepts. These articles should help you get comfortable working with the program if you're new to it, or may remind you of features you'd forgotten about if you are an expereienced user.

Production and Workflow
Batch processing, Symbols and Instances, advanced articles on slicing, optimizing and exporting, Fireworks extensions

Design and Layout
Articles on creating layouts within FW, or graphics for use in web page designs,

Retouching and Photo Manipulation Fireworks has a pretty solid set of bitmap tools. While not as extensive as Photoshop's tool set, these creative and corrective tools can do quite a lot and may be all you need for screen based graphics.

Vectors
Vectors are one of Fireworks key strengths. articles on creating and editing vector paths and shapes will be in this section

Masking
Vector and bitmap masking are two other major strengths of Fireworks. Both types of masking give you the flexibility to show or hide parts of your image or design, without permanently damaging anything.

Projects
Image collages, conceptual pieces and just plain old fun things to do in Fireworks, from creating an e-card deisgn for your Mom, to desigining holiday ornaments and bringing scary monsters to sceen life.

Fireworks Related
Many of our JumpStart articles include some Fireworks related tips and techniques. Flash and Fireworks also integrate well. Photoshop and Fireworks also talk to each other fairly well (although some things are lost in the translation). In this section, look for articles where Fireworks ties in with other software or where Fireworks techniques are covered as part of a larger article.

You can bookmark the page on CMX making it easy to use this article as a Fireworks reference. And by the way: if you're not a CMX subscriber, you can still glean a lot from our free (80 and counting in the Fireworks category) articles. Those are identified so that you'll be able to easily access them.

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!

The Complete JumpStart Catalog Update Free!
Reader Level: Reader Level

We now have 20 JumpStarts and are still counting. For anyone who has ever agonized over which to use for a current project, this article is for you. Updated from an article we released a year ago, the newly expanded and refreshed catalog should help you make the tough decisions about which layout and features will work for your latest client's site.

Working with Overlapping Slices in Fireworks 8
Reader Level: Reader Level

Creating a design or interface in Fireworks can be a pretty free-flow process. Sometimes when it comes to slicing the design for use on the web, though, we find it necessary to overlap certain web slices, in order to get two different images from a similar area on the canvas. This could be due to our use of frames, where we have created a secondary design. Because Fireworks 8 and earlier only supports a single web layer, we find that we are creating slices that for both frames, and some of these may overlap each other. Sometimes we just need a segment of a larger slice area to use as a background image.

Fireworks engineers have tried to solve this issue of overlapping slices by setting a priority in the slice hierarchy. This means that if you have two slices overlapping, the one that is closer to the top in the stacking order controls how the overlapping slices get exported.

Here's a quote from the FW help files: When slices overlap, the topmost slice takes precedence if interactivity is involved.

Now, this sounds like a workable idea, but often it causes a lot of grief; not only does the top slice get sliced accurately, but multiple slices can be generated from the underlapping slice, when it is exported.

Read this article to learn what can happen when overlapping slices are exported, as well as some tips on preventing undesireable results.

The Bitmap Auto-Crop Command for Fireworks
Reader Level: Reader Level

Have you ever labored over a repetitive task and wished that there was a way to speed things up? You can often accomplish a great deal more if you just work out a more efficient way to get the job done. Such was the case recently when I needed to make a number of screen captures then crop the captured images to different sizes and shapes.

Of course, there are excellent screen capture programs out there, but in this case I ultimately found it easier to crop my images in Fireworks so I could do some additional work. After a few renditions of copy, paste, select, cut, delete, paste, and then trim I was definitely ready for something easier.

In the end, I created a custom command that takes most of the work out of the selection and cropping process. With the Bitmap Auto-Crop command that you'll find here you can take any bitmap selection no matter its size or shape and quickly remove all of the image except for the selected area, leaving you with a canvas that is sized based on your selection. And the entire process takes only seconds and one quick trip to the Menu bar. Heck, you can even assign a shortcut key to the command to make it even easier to use.

Introducing CMX JumpStart Metropolis Free!
Reader Level: Reader Level

Metropolis. Home of the Man of Steel. Where looking up in the sky means you could see something other than a bird or a a plane. This symbol of a thriving cosmopolitan American city complete with villains and heroes, is now the feature of our latest JumpStart. Metropolis is based on the Gordon Mackay's CMX Design Element, Krypton (Hmmm, I sense a theme . . .). Sheri German has sliced up the Krypton PNG file and created all the necessary components to make Metropolis a solid, standards-based design that holds up well in even the latest browser, I.E. 7. In fact, it's just super!

Read on to find out what Metropolis includes and get some tips about how you can adapt it in unique ways. We'll even include our own Metropolis adaptation to give you inspiration to build your own design, faster than a speeding bullet. At the end of this article we'll provide the link for you to download Metropolis so you can get started today!

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.

The Complete (Almost) Vectorized Webding Catalog Free!
Reader Level: Reader Level

Way back in December 2003 I wrote a free article here at Community MX called Fun with Webdings and Wingdings which is consistently in the Top Ten of our most viewed tutorials. As of this writing the tutorial has been viewed over 55,000 times. And why not? First of all, the tutorial is free, and secondly, Webdings and Wingdings are lots of fun to play around with. They can also serve some really useful purposes. Depending on the font in that family of "Dings" you can get all sorts of little miniature pictures by just typing in the correct character using the Fireworks Text tool.

Recently I needed some small icons for a design project so I started up Fireworks and created my own reference library for the Webding font family. And while I was at it, I decided to go ahead and convert all of the text objects into vector shapes. What you'll find here is a somewhat later version of the same file that is a tad better organized. You can use this file for your own design purposes or use it as a reference for creating your own library of characters.

What do you get in terms of images? Well, you'll have to open the file up to see all of the little pictures that Webdings create, but here are a few samples.

Sample webding characters

In addition there are two source files included in this download—both a Flash and a Fireworks source file that make use of the webding vector shapes included in the library for your examination.

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

CMX JumpStarts: Santorini Free!
Reader Level: Reader Level

Welcome to the next design in the CMX JumpStarts series, Santorini, a sun-kissed island in legendary Greece.

View of bay of Caldera, island of Santorini, in Greece.

The Santorini JumpStart is a three-column design that leverages the entire width of the browser. The center (main content) column widens and shrinks as the user resizes his window. But the two outer columns are fixed width so your links and extra info is always visible to the user.

As always, the Santorini CMX JumpStart can be used in any way you wish. commercial or personal, and includes several tutorials and an extension.
CMX JumpStart:Santorini.
Santorini is structured to be as hack-free and straightforward as possible. So, if you've been looking for a relatively painfree way of getting started with CSS layouts this may be just the JumpStart for you.

The source PNG included with Santorini is pretty simple too in that it doesn't have any complicated images that you need to slice up and shoehorn into the design. What you get with Santorini is a starter page that uses valid XHTML 1.0 Strict and CSS 3 markup and follows WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.

Approximate download size: 2.9MB

CMX Announces a JumpStart Contest and FREE JumpStart Free!
Reader Level: Reader Level

The Greek island of Santorini is considered by some to be the location of the legendary Atlantis. Atlantis still fascinates and inspires everything from literature and art to movies and music. Now, as the latest Community MX JumpStart, we hope that Santorini will inspire your Web designs, too.

Santorini is our 18th JumpStart, and we think that this is a nice "coming of age" number. To celebrate, we're going to give Santorini away for free AND hold a JumpStart contest. Read on to learn more about our latest JumpStart and to get all the contest rules.

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

Introducing CMX Jumpstart Greenville Free!
Reader Level: Reader Level

The name Greenville evokes the radiant ambiance of gardens, nurseries, and landscapes. And that is just how Heidi Bautista paints it in our latest Community MX JumpStart: Greenville, NC. Let's take a closer look at this bloomingly lovely design to see what new treasure we've added to our JumpStart collection.

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.

Fireworks to Photoshop - Converting the CMX Venice JumpStart PNG to a PSD File
Reader Level: Reader Level

I will do my level best not to bore you with why I like Fireworks in this, the third in my series of CMX JumpStart PNG's conversion articles. But I have to say, for rapid prototyping and flexibility, Fireworks can't be beat. By using Frames, you can create completely separate designs and where there are common elements in each design, you can share specific layers throughout the frames. This is just the case with the Venice JumpStart which has two complete layout designs, each on its own frame.

That said, PhotoShop is no slouch in this area either. While there is no way to directly port over this multi-frame document to Photoshop, by using Layer Comps we can emulate the PNG file quite nicely.

For detailed information and steps on converting flattened vector objects into editable Shape Layers be sure to read Fireworks to Photoshop - Rebuilding the CMX Vienna JumpStart PNG as a PSD file.

For details on creating and working with Smart Objects, or working with an exported Adobe Illustrator file see Converting the CMX Orlando JumpStart PNG to a PSD and AI file.

Because these steps have already been covered, I will not be covering them again in this article in any great detail. The focus in this piece will be exporting the two-frame PNG file as individual PSD files. We will then merge those two files in to one and use Layer Comps to emulate the original two-frame design.

Several other workflow techniques will be discussed as well:
  • PNG layer hierarchy to PSD layer hierarchy
  • Creating Layer Comps
  • Creating new, editable layer masks
  • Creating and working with Work Paths
  • Working with Slices
  • Working with the Gradient Editor

The instructions in this article, along with the two previously mentioned articles, are meant as a guide if you choose to do the conversion on your own. Remember, as with all the articles in this series, a final, editable PSD file is part of the support documents download.

Approximate download size: 1.8MB



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.

The Polaroidizer for Fireworks 8
Reader Level: Reader Level

If you had a chance to read my recent article, Create a Polaroid Photograph in Fireworks, you saw how (relatively) easy it is to do this on your own. You can create two simple rectangles, punch the smaller rectangle through a larger rectangle, apply some simple drop-shadows, and Voila! Fairly easy frames that can be applied over the top of a photograph to give the appearance that the picture was snapped with a Polaroid camera like you see in the collage below.

Polaroid example collage

While the techniques described in the earlier tutorial were fairly easy, wouldn't it be even better if you could automate the process? Since you might not remember all the things that need to be done to achieve the effect how about it you could just run a command and have the frames created for you? You could then scale and place your own images and get the final outcome you see above with a minimum of muss and fuss. Now you can.

When you download the support files for this article you'll find three commands for Fireworks 8 that will create the Polaroid frames for you. Just unzip the files and save into the Commands folder in your copy of Fireworks 8 and instant Polaroid frames are just a few clicks away.

Fireworks to Photoshop - Rebuilding the CMX Orlando JumpStart as a PSD (and AI) File
Reader Level: Reader Level

I love Fireworks. As I progress through these articles on converting FW PNG files to PSD files, I am quickly learning just how versatile and powerful Fireworks is for design, creation and optimization. The Orlando JumpStart is a perfect example. As you will see, depending on the design you need either Photoshop or Illustrator (and sometimes both) to do what Fireworks does easily in one application. That's not to say either of these other Adobe products is weak; they are designed to do specific things and they do them quite well. You can certainly add vectors to Photoshop or Bitmaps to Illustrator. It just seems to me that this workflow is handled best by Fireworks.

In this continuing series, I supply you with an editable PSD version of the main Orlando JumpStart PNG file. For details on most of the conversion process, make sure to read Fireworks to Photoshop - Rebuilding the CMX Vienna JumpStart PNG as a PSD file .

NOTE: These articles are based on using the most current versions of Fireworks, Photoshop and Illustrator. Older versions of the software may behave differently or may not even include some of the features/tools listed here.

As with any of these conversions, there will be some differences to how I approach the process. In the case of Orlando, it's all about vectors. Complex, custom vectors.

In my first conversion (Vienna), I ungrouped all my grouped objects, made sure each object had a name, then saved as a PSD. From there, I tweaked several things in Photoshop, including the re-creation of a few vector shapes. You may recall that saving as a PSD in Fireworks rasterized all vectors except for fonts.

With Orlando it is very easy to do the same thing. And assuming your aren't going to use/edit any of the amusement park vector art, clouds or the paths that make up the words Orlando JumpStart, the conversion is quite simple. The PSD file includes all the artwork as flattened bitmaps by default.

However, for those of you who still want scaleable vector art, a different approach was taken. Not only did I save the file as a PSD, but I also saved it as an AI file. This preserves all the vector paths. Once both files are created, (PSD and AI), I can work in either Photoshop OR Illustrator. We're going to look at both options here and in fact, you will find both a PSD file and an Illustrator file in the support documents. With this particular JumpStart, there are pros and cons to working in either program. A big part of the decision factor is your comfort level with Photoshop or Illustrator. So let's have a look at both scenarios.

Fireworks to Photoshop - Using Fireworks to Rebuild the CMX Vienna JumpStart PNG as a PSD File
Reader Level: Reader Level

I'm sure that most people will agree, JumpStarts can be a great way to get a new site up and running quickly; these template pages are ready to roll, CSS is done and commented to death; just add content and away you go! From the graphics side, you've got a structured and sliced PNG file. All you need to to is change the graphic objects and you're good to go. IF you have Fireworks.

As you may have discovered the hard way, opening a native FW PNG file in Photoshop gives you a flattened bitmap. Not much use when you are trying to customize the design to your own needs.

Fireworks does give you the ability to save as a PSD file, though. So if you have clients or other team members who need or prefer to work in Photoshop, this tutorial may be for you.

In this, the first of several articles in the series, I will convert a native Fireworks PNG file to a useable Photoshop PSD file, ready for slicing.

By following along with this article you will learn how to:
  • Prepare a Fireworks PNG file for save/export as a Photoshop PSD file to maximize its editability
  • Build a layer structure similar to the layer/object model of Fireworks by creating Layer Groups
  • Recreate vector shapes and editable Photoshop Shape Layers
  • Accurately control the size and position of Shape Layers
  • Work with Layer Styles to create gradient fills and strokes for the Shape Layers
  • Create Layer-Based and User slices in Photoshop
  • Use Save for Web to optimize the sliced images and save only the slices we created

You will also learn about some of the limitations of a Fireworks generated PSD.

Included with the article is a Photoshop format version of the Vienna design. For all other articles relating to JumpStart Vienna, make sure to download the Vienna JumpStart.

Approximate download size: 1.1MB



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



Introducing CMX Design Element Iodine Free!
Reader Level: Reader Level

Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. This time we offer you element Iodine in our CMX Design Element Iodine.

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


Batch Processing in Fireworks 8 Free!
Reader Level: Reader Level

I've lately seen a few posts on the Adobe forums and here on CMX about batch processing in Fireworks. Considering the Fireworks 8 Batch Processing utility had some noteworthy revisions, I thought it would be a good idea to go over the wizard in detail.

Streamlined and enhanced file renaming, the ability to check file dimensions when scaling during a batch process and the addition of a status bar and log file are the most notable improvements to Batch Processing.

There are many articles here on CMX that touch on Batch Processing, but they are geared towards specific goals. In this article, we'll examine the utility itself piece by piece.

In a nutshell, you can do the following with Batch Processing:
  • Convert a selection of files to another format.
  • Convert a selection of files to the same format with different optimization settings.
  • Scale exported files.
  • Find and replace text, colors, URLs, fonts, and non-Web216 colors.
  • Rename groups of files by any combination of adding a prefix, adding a suffix, replacing a substring, and replacing blanks.
  • Perform commands on a selection of files.


Introducing CMX Jumpstart Orlando Free!
Reader Level: Reader Level

Orlando, Florida. It's every kid's dream vacation spot. It's warm and sunny, and makes the world of school seem galaxies away. It's got theme parks galore that take them to galaxies far away. When most people think of Orlando, they probably think of Disney, Epcot, MGM Studios, and Sea World. Now there is also CommunityMX JumpStart Orlando to add to the list of Orlando attractions.

Orlando was designed by Chris Flick and coded by Zoe Gillenwater. 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 for which you may wish to use it. Orlando is a two-column elastic layout that also features a subhead area, a styled list as a navigation menu, and floated images.


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

CMX GIF Pre-Loader Pack 2
Reader Level: Reader Level

The CMX GIF Pre-Loader pack provides you with editable GIF animation artwork in a Fireworks PNG format. In this second release of the series, you'll find a collection of ten PNG files and the final export animated GIFs.

Approximate download size: 1.1MB

The CMX GIF Pre-Loader Pack Series:
CMX GIF Pre-Loader Pack 1
CMX GIF Pre-Loader Pack 2

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

Introducing CMX Jumpstart San Francisco Free!
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.

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



Introducing CMX Design Element Mercury Free!
Reader Level: Reader Level

Our CMX design sorcerer, Gordon Mackay, is back with another CMX Design Element in our series of fully developed Fireworks design comps that you can slice and code in any way that fits your page specs. We leave elements Carbon, Krypton, and Gold, and this time offer you element Mercury in our CMX Design Element Mercury.

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.

CMX Design Elements - Gold
Reader Level: Reader Level

Welcome to the latest in our popular series of CMX Design Elements.

We have covered two elements of the periodic table already; Carbon and Krypton, and while those elements inspired us to create some attractive designs, they still remain rather bland in terms of chemistry. So, lets find something that's valuable in terms of design, chemistry and global value.

Think of that one element of the periodic table that stands out above all others in terms of monetary value… yes, you guessed correctly, it's Gold, and as far as Community MX is concerned, it looks like this:

CMX Design Element - Gold

Gold, represented chemically by the symbol Au (from the latin word "Aurum") is probably the most attractive of all elements found in the world, it's also a globally recognized currency that's value never decreases in any significant way.

I bet that you didn't know that there is approximately 1 milligram of gold present in every ton of sea water! Fortunately for you, we have extracted many milligrams of this expensive metal and forged it into a rather precious design. Let's have a closer look at CMX Design Element - Gold.

Approximate download size: 1.9MB

Introducing CMX Design Element Gold Free!
Reader Level: Reader Level

I am sure you remember that the symbol for Gold, Au, comes from the Latin word "Aurum". No? You don't remember that? Well, then maybe you remember this: gold is one of the most valuable commodities in the world of commerce. And a good design is also one of the most valuable commodities on the Web. It catches your visitors' eyes and encourages them to stay and explore - and perhaps even to buy. There is almost no price tag for a great design, and fortunately you don't have to come up with one all by yourself. Gordon has done the creative work for you in our latest CMX Design Element Gold. Read all about it in this article.

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 iPhoto to Flash Video: Creating a Custom Slideshow for the Web
Reader Level: Reader Level

Recently the school district where I work conducted our annual technology conference—a huge event that requires months of planning by the team that I work on, culminating in a single-day event attended by over 1,300 teachers.

To capture the whirlwind of activity that it requires to pull this off I wanted to grab as many photos as possible during the set up and then share them with members of my team and with the other volunteers that help us. And to make it more engaging than simply sharing a bunch of pictures, I decided this year to set the photos to music and produce a slideshow that has the proper musical accompaniment.

In this article I'll discuss how I created our little music video using a number of tools on my Macintosh. Yes, this is a decidedly Mac specific project. The video itself was generated using a combination of iTunes, iPhoto, Quicktime Pro, and finally published as a Flash video so that everyone would be able to see and hear my tribute to all of those who worked so hard to make our event a success.

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

Introducing CMX Design Element Krypton Free!
Reader Level: Reader Level

It's a bird! It's a plane! No, it's super design CMX Design Element Krypton!

Join me as I unveil the latest Gordon MacKay Fireworks design element. We'll look at what the package includes, what articles come bundled with it, and at some possible ways you might implement it as a Dreamweaver CSS-based layout.

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.

Introducing CMX Design Elements Free!
Reader Level: Reader Level

No doubt it's happened to you. You stare at the blank canvas for hours, and not a thing ignites your imagination. Not one thing.

If only a sorcerer would throw a few elemental ingredients into a beaker and whip up something fantastic just for you. A little gold, a little silver, a pinch of oxygen, and poof! It emerges through an expanding mist - a mesmerizing design.

Well, the sorcerer is here at CMX, and his name is Gordon Mackay. Gordon is an artist who taps a nearly bottomless well of design wizardry. He has concocted the first of our CMX Design Elements - a fully developed Fireworks design comp that you can slice and code any way you please. We are proud to present element C, CMX Design Element Carbon, an ultra-modern design with clean lines and 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

Introducing CMX JumpStart Modifications Free!
Reader Level: Reader Level

With our growing repertoire of JumpStarts, there are now layouts to fit a wide range of design requirements. Still, sometimes a particular JumpStart is just what you are looking for - if only you could fix one or two little details. If only the navigation had been on the right instead of left. Or what if that left DIV had been floated rather than set to position absolute? And what if instead of a fixed-width, centered layout, the JumpStart had been fluid?

We often see such sentiments on the forums, and thought it might be helpful to respond with articles that show how to modify some of our existing JumpStarts to give you a wider variety of options without having to go in and code the tweaks yourself. Towards that end, we give you CMX JumpStart Playacar, Mexico.

Changing Continents and Layouts - Modifying the Paris Jumpstart to Make Playacar, Mexico
Reader Level: Reader Level

Community MX is pleased to announce the release of a modified Paris 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: Playacar 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

Approximate download size: 9.3MB



DesignBits Volume 1 - Fireworks Symbols For Your Designs
Reader Level: Reader Level

Welcome to the first in a series of exciting new aids for your design workflow. In this article I will introduce you to using CMX "DesignBits" in your Fireworks compositions.

The DesignBits are a series of editable Fireworks symbols that will cover various graphical elements commonly used in modern web site designs, for example: bullets, form buttons, gallery controls — all the little parts of a design that take up a lot of your time, but at the same time are critical to a detailed and good looking page.

By creating DesignBits for our subscribers we hope that we can save you time and assist you in creating some wonderful client projects. If that appeals to you, please read on…

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.

CMX GIF Pre-Loader Pack
Reader Level: Reader Level

The CMX GIF Pre-Loader pack provides you with editable GIF animation artwork in a Fireworks PNG format. In this first release of the series, you'll find a collection of eleven PNG files and the final export animated GIFs.

Approximate download size: 1MB

The CMX GIF Pre-Loader Pack Series:
CMX GIF Pre-Loader Pack 1
CMX GIF Pre-Loader Pack 2

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.

Introducing CMX Jumpstart Minneapolis Free!
Reader Level: Reader Level

What city has the biggest shopping mall in America? What city has a full-sized theme park inside its mall? What city is one of the most popular destinations for shopping-based vacations in the United States? Why, Minneapolis, Minnesota, of course! Home to the Mall of America, tourists flock there to shop till they drop. But there is one bigger mall in America, and indeed the world, and that is the Mall of the World Wide Web. More and more people do their shopping there, and eCommerce is hotter than ever. When we were planning our next JumpStart, we decided to do something a little different, a little out of the ordinary. We decided to do an eCommerce template and call it CommunityMX JumpStart Minneapolis.

Designed and coded by Gordon Mackay, Minneapolis is a fluid, three-column design with hidden layers. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Minneapolis also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.

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.



Create a Heart-Shaped Frame for Valentine's Day
Reader Level: Reader Level

Valentine's Day is here, and what better way to show someone how much you love them than creating a custom image that combines a favorite photograph with a nice heart shape. In this Captivate video tutorial you'll learn how to create your own heart-shaped photo frame by using some simple techniques in Fireworks. The heart shape is created by using a Webding font to create the heart shape, followed by some simple masking and work with vectors to create the frame. This is a quick and easy method for creating something special, and you should have no trouble in getting a little valentine of your own done for someone you love.

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

Creating Design Concepts from Photographs
Reader Level: Reader Level

One of the questions we see pretty frequently at the Community MX forums is a simple one, but one that is difficult to answer definitively: "Where do you get your design inspirations from?"

If you're blessed with an innate sense of color and style, perhaps you are one of the rare few that can sit down in front of the computer or with a sketch pad and come up with something that is not only pleasing to the eye, but catches and holds the attention of the person viewing your design.

But most of us need some help in this area. We look at designs that we see on the Web, that we see in magazines, and that we encounter all around us. But one of the places that we often fail to look is even more common place in our lives—nature.

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.

Redesigning the Inverness JumpStart
Reader Level: Reader Level

All JumpStarts boast flexibility and the Inverness Blog JumpStart is no exception. In this article you'll see how I reskinned the site with only minor modifications to the CSS and source PNG and NO changes to the original html file at all! A true reskinning operation. Check out how I changed the feel of the site: from cool Scottish Highlands to warm tropics at sunrise.

All my CSS changes are commented (the majority of which are simply color changes). The source PNG continues to use the original slice names (okay, I did add a couple of new slices). And the article takes you step by step through my changes.

Redesigning the Inverness JumpStart
Reader Level: Reader Level

Our JumpStarts are designed to be easy to rebrand with your own unique look. To show you what it takes to create a unique design from a JumpStart, I've redesigned the Inverness JumpStart by modifying the PNG and changing a few lines of CSS.

Introducing CMX Jumpstart Inverness Free!
Reader Level: Reader Level

We are pleased to announce Community MX JumpStart Inverness, a design you can use to create your own Web blog. CMX JumpStart Inverness was designed and coded by new CMX partner Gordon Mackay. It is a centered, two-column, fixed-width design that makes use of background images to achieve its faux column appearance. The page is constructed using valid XHTML 1.0 Strict markup and formatted using valid CSS 2.1 styling. Inverness also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. Read on to find out what the Inverness package includes and how you can make it your own.

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.



The Complete JumpStart Catalog Free!
Reader Level: Reader Level

We now have a healthy portfolio of JumpStarts, and sometimes so much choice can be overwhelming. This article outlines the features of all the JumpStarts, offers guidance in choosing the right JumpStart for your project, and provides a complete catalog of our first thirteen JumpStarts.

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.

Fireworks Symbols - a Non-Destructive Way to Transform Images
Reader Level: Reader Level

Sometimes, I think people forget that Symbols exist in Fireworks or what they can do for you. Symbols are an important part of the Fireworks workflow. This article will address some of the way cool things you can do with Fireworks Graphic Symbols, starting with how to create a symbol, and then how this tool can become an essential part of the creative process.

Graphic Symbols are much like Photoshop's Smart Objects. When you place a Smart Object into your document, you can do many things to it without affecting the original source file. You can even edit the original Smart Object itself, and have those changes propagate across any iteration of the smart object in a document.

Introducing CMX JumpStart Cairo Free!
Reader Level: Reader Level

We are excited to announce CMX JumpStart Cairo, Egypt. It was designed and coded by Adrian Senior, and makes extensive use of lush gradients and glows. It is a centered, two-column, fixed-width design, and, like all CMX Jumpstarts, is constructed using valid XHTML 1.0 markup and CSS 2.1 styling. Cairo also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. This article will introduce you to what Cairo includes in its bundle, as well as show you an example site created from its source PNG and CSS/XHTML files.

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!

Introducing CMX Jumpstart Traverse City Free!
Reader Level: Reader Level

Traverse City, Michigan is one of those hidden gems that tourists sometimes stumble across by lucky chance. With over 180 miles of Lake Michigan shoreline as well as a host of lakes and bays, beach lovers can enjoy lots of sailing and sunbathing.

Traverse City was designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater. It is a centered, fixed-width design with both a two-column and three-column page from which to choose. The two-column layout also includes a styled data table. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Traverse City also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.

(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).

Five Little Things to Love About Fireworks 8
Reader Level: Reader Level

It could be argued that there hasn't been a serious overhaul of Fireworks since the release of Fireworks MX. In that version of Fireworks major changes to the interface were introduced as Macromedia aligned all of the tools in their web production suite. While Fireworks MX 2004 made some minor improvements to the software, nothing profound was really added. Now with the release of Fireworks 8 the same kinds of complaints are being heard.

In my humble opinion there's plenty to like in Fireworks 8. But sometimes it's the little things that matter, and in this release I've found lots of nice little changes that make my work easier and allow me to work more productively. No, they aren't ground-shaking changes, but several have been on my wish list for some time, while others fall into the "Gee, I wish they'd done this sooner" category.

In this series of five short Captivate video demonstrations I'll show you what's different in Fireworks 8 and contrast these changes with the way things used to be done. By the end of these short clips you'll have a better idea of what the little things are that I really like about Fireworks 8.

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.



A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
Reader Level: Reader Level

In the last article of this series, you saw how I constructed my design comp in Fireworks. This article will cover how to slice the comp and export the pieces as web-ready graphics for placement in the CSS and XHTML. Why didn't I just cover this step in the last article? Because slicing a comp actually has more to do with the XHTML page than it does with the design comp construction. If you intend to build your pages using CSS to control the layout, you will need to slice your pages in a very different way than you may be used to from building table-based layouts. You'll see how I sliced my comp with CSS in mind, and I'll contrast this with how I might have sliced it had I intended to use tables instead.

The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2

Teaching Dreamweaver the Web Standards Way Free!
Reader Level: Reader Level

I have been teaching Dreamweaver in various training venues since version 2. Each new upgrade adds more features and makes my job more complex. How does a teacher help beginners make sense of an increasingly overwhelming interface that includes seemingly endless choices? My syllabus has changed a lot over the years, and this is what I have learned: pare the syllabus to the absolute essentials. Subtract, do not add. Aim for elegant simplicity. Focus on Web Standards. This article gives teachers a syllabus they can use to help their beginning students learn Dreamweaver within the framework of Web Standards.

A CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction Free!
Reader Level: Reader Level

So far in the case study of building my personal site, you've seen how I planned my web site and came up with ideas for its design. In this article, you'll see how I turned that sketch into a design comp using Fireworks MX 2004 and a bit of Freehand MX. Because this article is meant to help you understand the design process rather than the specific design techniques I used, it will not go into the technical details of how I completed every task. So, I won't bore you with every click I made in Fireworks, but you will learn how to set up your comps in a web instead of print mentality, so that when it comes time to actually build the pages, you won't tear your hair out trying to create a design that isn't well suited to its medium.

The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2

Introducing CMX Jumpstart Machu Picchu Free!
Reader Level: Reader Level

Machu Picchu, Peru: a rediscovered ruin, a sacred ceremonial city of the Incas, a place of ethereal beauty, and now also a Community MX JumpStart. CMX JumpStart Machu Picchu, designed and coded by Adrian Senior, was built specifically to take advantage of the new Style Rendering Toolbar in Dreamweaver 8. It includes style sheets for the screen, print and handheld media types.

Read on to learn more about this centered, two-columnm, fixed-width, Web Standards compliant CSS layout.



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.

Image Editing Panel - Fireworks 8 Sneak Peek Free!
Reader Level: Reader Level

There are many new goodies awaiting you in Fireworks 8. If you are new to Fireworks, Macromedia has added some features to help you get "up to speed" very quickly. One of these new features is the Image Editing Panel. Its purpose is to quickly expose new users to some (not all) of the most common image editing functions in Fireworks. This brief overview details will give you a basic grasp of what the Image Editing Panel can do

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.

Bitmap Artwork Versus Vector Artwork: Part I
Reader Level: Reader Level

Vector and bitmap are terms that are often used for describing artwork. At one time applications would either create vector artwork or bitmap artwork. These days many applications like Freehand and Fireworks contain both vector and bitmap tools. Although this can be very convenient it could mean trouble if you are preparing artwork for some types of output.

In Part I of this two-part article we will compare raster and bitmap artwork and look at different types and file formats of each. We will also discuss some issues that may arise when working with vector and bitmap artwork.

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.

Fireworks 8: We Have Convert Marquee to Path!
Reader Level: Reader Level

In five years of answering question on the Macromedia Fireworks forum, I can't begin to tell you how many times I've read the questions, "How do I convert a selection to a Path in Fireworks?" and "How do I convert a path to a selection in Fireworks?" The Fireworks engineers have been listening, folks. And I'm going to show and tell how they've responded.

Only the Shadow Knows - New Shadow Features of Fireworks 8 - A Sneak Peek Free!
Reader Level: Reader Level

For a long time, faithful users of Fireworks have been pining for ways to add shadows to objects – other than the drop shadow effect. Fireworks 8 introduces two new shadow features: Add Shadow command and Solid Shadow Live Filter.

In Section 1 of this article, we will look at the new Add Shadow Command. Section 2 will delve into the Solid Shadow Live Filter. We'll then wrap things up with some ideas on using these two new features of Fireworks 8.

Fireworks 8 - A Power Blender for Graphics Free!
Reader Level: Reader Level

Fireworks 8 is packed full of neat things, but in my opinion, one of the coolest is the addition of 26 different Blend Modes. Adding to the Blend Modes opens up a world of creative potential. I admit it; I’m a Fireworks junkie. I do a great deal of my image work in FW, but I also like to play around in it, experiment and create. The new Blend Modes make Fireworks a much bigger playground. Blend Modes can be applied to Layers or Objects in Fireworks. The impact of a blend mode is controlled primarily by the colors in the images being blended, but also by the Opacity of the Layer or Object. So come along with me and explore this truly enhanced feature set of Fireworks 8.

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.

Fun With Fireworks' Contour Gradients
Reader Level: Reader Level

Contour gradients were a great new addition to Fireworks MX 2004 that I suspect many people have not really had the opportunity to experiment with as much as they deserve. Granted, at first blush they don't seem all that phenomenal. Sure you can apply them to irregular shapes and get some nice lighting effects, but as with other gradients the real fun begins when you start customizing the gradients to get your own effects. Such was the case recently when I took some time to experiment with contour gradients in new ways. This article will demonstrate some of the effects I created and hopefully get your creative juices flowing to do some cool things on your own.

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.

Redesigning the Vienna JumpStart
Reader Level: Reader Level

Vienna isn't famous just for composers. It's well known throughout Europe for its coffee houses. This variation on the Vienna Jumpstart attempts to capture the ambiance of Viennese coffee houses. Bonus: an authentic Austrian Strusel recipe. :-)

Redesigning the Vienna JumpStart
Reader Level: Reader Level

One of the great features of the CMX JumpStarts, from a design standpoint, is their flexibility. With Vienna, I thought I would show just how flexible the PNG file can be, without making any major changes to the slices used in the page design and CSS. I took the Vienna and changed it to Canadian Cottage Country. Specifically, I revised the design for a fictitious Bed and Breakfast business in the Muskokas. I spend as much time as I can in that region and its eastern counterpart, the Haliburtan Highlands. So needless to say, I have many photos from the area. In fact, the hardest part for me was narrowing down which photos to use!

Introducing JumpStart Vienna Free!
Reader Level: Reader Level

It wouldn't be much of a stretch to call Vienna the cultural capital of Europe. With its long history as the home to such cultural icons as Franz Schubert and Johann Strauss, as well as the numerous museums and its world-famous opera house, Vienna has long been known as a city where culture and sophistication are the norm. It's no wonder then that for our latest JumpStart design we turned to our own cultural maven—Sheri German—for the creation of a design that is as stylish as the city it is named after.

In addition to the use of valid XHTML 1.0 and CSS 2.1, and validating for 508 and WAI, we have a number of special features in Vienna. The three-column layout has two outer columns with fixed widths, a fluid center column for content, and a very cool fluid header and footer. The two-column layout has a fixed-width left column and fluid right column. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field, and if your server provides PHP and MySQL, you can follow Sheri's bundled article Creating a Search Engine with iSearch to make a working search engine for your site. So far, reasonably cool, right? But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold. As with all our JumpStarts, Vienna was tested extensively in all major browsers. You can view the screenshots here

CMX JumpStart: Vienna
Reader Level: Reader Level

Last summer we took a trip to Germany and Austria with our son's orchestra director. My favorite city was Vienna, Austria. So it is only natural that I should choose Vienna for my city as I "change hats" from JumpStarts marketer to JumpStarts creator. I am particularly pleased and excited to offer our latest CMX JumpStart: Vienna.

In addition to the use of valid XHTML 1.0 and CSS 2.1, and in addition to validating for 508 and WAI, we have a number of special features in Vienna. This three column layout has two outer columns with fixed widths, a fluid center column for content, and fluid header and footer. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field into an area that is at the top of the page outside the main centered layout. So far, reasonably cool, right?

But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold that has an implied minimum and maximum width that works in Internet Explorer without the use of Javascript! Furthermore, this technique allows for fluid margins on the fluid centered layout that depend on the size of the user's window.

The download folder for this article includes a bundle of 11 articles (including two about Jello Mold technique), a starter page, an images folder, four style sheets (including design-time and print), a source png, the Vienna extension, an installation and usage guide, and this article as a PDF.

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.

Introducing Jumpstart Vegas Free!
Reader Level: Reader Level

We proudly introduce CMX JumpStart Vegas, designed by Fireworks expert Linda Rathgeber, and coded by CSS guru Stephanie Sullivan. Vegas includes a Flash slideshow, FlashObjects JavaScript for accessibility, sIFR for using custom fonts on your pages, a form with an often requested complex layout, and a golden design that does justice to the town that never sleeps. It's all there, ready for you to adapt it for your own sites.

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.

Introducing CMX Jumpstart New Orleans Free!
Reader Level: Reader Level

The suspense has been building around the release of our next JumpStart, and now it's here: Jazzy JumpStart New Orleans, a hybrid CSS/Flash layout that should appeal to anyone needing to build a music site. Its inspiration is derived from two sources: the sites of Sony artists such as Vladimir Horowitz, Joshua Bell, Louis Armstrong, and The Isley Brothers where Flash and frames combine, and content scrolls in a fixed-area; and the recent acquisition of our own "CMX artist" the jazzy, bluesy Umoja String Quartet, whose site will be hosted on Community MX in the upcoming weeks.

Read on to find out more about this feature-rich JumpStart that includes an MP3 Player that uses wmode, FlashObject for accessibility, scrolling content, functional forms, and a fully editable source PNG.

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.

Color Correction Part 4: Pixel Clipping
Reader Level: Reader Level

When a pixel gets "clipped" in Fireworks, all sorts of nastiness breaks out. See how judicious use of sliders and values can either improve - or destroy - an image.

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.

Fireworks Layers- Best Practices
Reader Level: Reader Level

Organization. Structure. These are keys to productivity in a business environment, and in a creative environment as well. In a program like Fireworks, the Layers panel can really help you get - and stay - organized. But only if you get - and stay - in the habit of working with it in a logical manner. The goal of this article is to give you some tips on staying organized with Layers.

The design and layout of your creations may require different processes, but I believe that the following tips will help you organize your document, regardless of how you work.

Fireworks is unique in that - unlike Photoshop - multiple objects can be placed in a single layer. Fireworks treats anything in a document - text, vector or bitmap - as an object. The temptation (or possibly old habit) is to think of those objects as layers. The ability to have objects within layers gives us more control over the document, however, than Layers alone.

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?

JumpStart Venice: An Introduction Free!
Reader Level: Reader Level

Valentine's Day is one of my favorite holidays of the year. It's fanciful and lighthearted, and I don't feel the pressure of the big holidays like Christmas or Easter. I can daydream about a romantic rendezvous, such as a gondola journey through the canals of Venice on a moonlit night. Though I can't make that a reality, I can pretend while exploring the latest CMX JumpStart.

CMX is proud to announce its sixth JumpStart, Venice, which includes both two and three column, fixed-width, rounded corner layouts in its home and form pages. Like all CMX JumpStarts, it is based on Web standards with valid CSS2 and XHTML 1.0 Transitional markup, and it passes WAI and 508 accessibility checkpoints. We've created a video to give you an overview of the design and functionality of Venice.


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.

Announcing CMX JumpStart: Liverpool Free!
Reader Level: Reader Level

It was the early sixties, and all the world was in a frenzy over a new group from Liverpool, England called The Beatles. They revolutionized rock 'n' roll music, and the world has never been the same. Maybe the Web Standards movement doesn't stir quite that much excitement, but it is changing the Web world all the same. And because we "love you, yeah, yeah, yeah" we're here to help you join the revolution.

Community MX is pleased to announce the release of its fifth CMX JumpStart: Liverpool. This time we're giving you more than a CSS layout, however. We're also giving you a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviors that will allow you to quickly and easily edit the login.

This article will tell you all about what this fantastic package includes--bundled tutorials, an authentication system, a two-column, fixed width layout (with a little bit of a twist), original PNG files, and more.

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?

Fireworks Piece By Piece - The Assets Panel Group
Reader Level: Reader Level

Welcome to another article in the "Fireworks MX 2004 Piece by Piece" series. We think you will find that this series offers a more comprehensive reference to the details of the Fireworks interface and functionality set, than what is available in any other single place. Even in the most basic of articles, we hope you will find something that makes Fireworks more useful to you.

The purpose of this article is to give you an in-depth look at the Assets Panel Group in Fireworks MX 2004. The panels and panel groups are there to improve your workflow, and help you concentrate more on creation, and less on procedure.

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.

Announcing CMX JumpStart: Aspen Free!
Reader Level: Reader Level

Aspen Mountain, packed powder, light snow falling and you've just ascended by lift to the top. If you're a beginner, forget it. You shouldn't have. How will you make it down alive to sit by that fire to sip a hot toddy?

But wait. CMX, your expert guide, has negotiated all the slick turns and steep curves. We know you have been waiting for a three column liquid layout, and for our CMX holiday celebration, here it is: JumpStart Aspen.

With a three column liquid-width layout, a base page, and a form page, Aspen employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. Aspen has been tested in numerous browsers. Read on to find out what the bundled package includes.

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

Announcing a New CMX JumpStart: Seattle Free!
Reader Level: Reader Level

Put down that coffee, and get your Grunge thing going on. That's right, we're off to the "Emerald City", once called Duwamps, but now known as Seattle!

Community MX is pleased to announce the release of the latest CMX JumpStart: Seattle. Based on Web standards, this versatile layout employs valid CSS2 and XHTML 1.0 Transitional markup and passes 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 with the CMX Seattle JumpStart package and bundled tutorials and extensions
  • An explanation of the benefits of Web standards
  • A demonstration of the ease with which the layout is customized
  • The presentation of pages that were created from the Seattle JumpStart
  • Information about how this exciting design can belong to you for use in as many projects as you please.
  • Screenshots of the page in multiple browsers

Who's ready for a spin on the Space Needle?



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


Announcing CMX JumpStarts Free!
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.

Inspired by famous world cities, each JumpStart will have an individual ambience and offer different table-less layouts and features. We travel first to Paris, a city of romance and style, with a design that features the Iris, the national flower of France. This two-column, fixed-width layout, complete with banner and footer, will serve as an elegant underpinning for almost any design.

This article covers the following:

  • A list of what is included with the CMX Paris JumpStart package and bundled tutorials
  • An explanation of the benefits of Web standards
  • A demonstration of the ease with which the layout is customized
  • The presentation of a page that was created from the Paris JumpStart
  • Information about how this exciting design can belong to you for use in as many projects as you please.
  • Screen shots of the page in multiple browsers


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™.

CMX Black Line Master Graphics 5
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 the fifth release of the series, Fall Season, you'll find a collection of images in Fireworks PNG format featuring images with a Fall theme. Jack-o-lanterns, witches, and lots of baskets of goodies can be found in this package. These images 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


(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

Fireworks Is Better Than Photoshop! Challenge #1 Free!
Reader Level: Reader Level

A few weeks ago Brian Edgin set forth a challenge: Send him any Web design created in Photoshop and he will show you how to do it more efficiently in Fireworks. Craig Hartel was the first to respond to the challenge and provides a good first example for us to look at.

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.

A New Autoshape: Ribbon Free!
Reader Level: Reader Level

Hiroshi Miyazawa of the Fireworks Development team has created two new Autoshapes: Wave and Ribbon. In this article you will find a quick start card and a mini-tutorial for the Ribbon Autoshape.

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.

Immersive Imaging - An Introduction
Reader Level: Reader Level

Immersive Imaging - the Final Frontier. OK maybe not the FINAL frontier, and not all that new in many ways. But it's an interesting subject nonetheless. With the increase in high-speed Internet usage, it has become a more practical option for web sites, and is another potential revenue stream for you. In Part One of this two-part series, we'll look at why I got invovled in this technology, and introduce you to the basics of creating 360 degree panoramic images. I'll give you tips on creating good images for stitching, and give you a whack of other online resources to boot. Did I mention "revenue stream?"

Go With The Flow
Reader Level: Reader Level

Flowcharts are not only a useful tool for planning a software application, but they are also handy for planning web sites and web applications. This article explains what flowcharts are, why they should be used, how to use them, and then provides an example of how a flowchart for a registration component for a web site might look.

A New Autoshape: Wave Free!
Reader Level: Reader Level

Hiroshi Miyazawa, of the Fireworks Development team, has created two new Autoshapes: Wave and Ribbon. In this article you will find a quick start card and a mini-tutorial for the Wave Autoshape. Next week we will cover the Ribbon Autoshape.

Resources for Extending Fireworks--Part 2--Extensions Free!
Reader Level: Reader Level

In this article we'll be looking at some of the ways that you can enhance your experience with Fireworks through the use of extensions. In the other articles in this series we'll look at methods for extending Fireworks with filters and plug-ins, commands and styles. Each of these methods for adding additional capabilities performs in its own way, and each allows you to make Fireworks an even more powerful program than it already is.

To Gif Or Not To Gif - That Is The Question
Reader Level: Reader Level

You've worked hard on your website. You have made sure that all of your tables are perfectly arranged, your CSS is flawless and the colors you chose... well, do I even have to say how beautiful it looks? But what about the images you're using? Too many websites suffer from the "If they'd only concentrated on _______, they'd have a darn nice looking website" syndrome. Today we're going to fill in the blank with the word "images". You can choose fantastic looking images for your web page, but choosing the wrong file format for those images can result in disaster. Exporting an image from Fireworks is not rocket science, but it's an important part of your tool set as a web designer.

Transforming Fireworks Objects With the NN_Transform Extension
Reader Level: Reader Level

Every once in awhile you come across something new that just makes you want to say "Hey! Cool!". Such was the case when I began researching the extensions that are available for Fireworks, and came across the NN_Transform extension from a new extension developer from Japan, known simply as Nansya. His NN_Transform extension is a wonderful new tool for performing complex transformations to objects in Fireworks, and the results can be quite impressive.

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.

Resources for Extending Fireworks--Part 1--Filters Free!
Reader Level: Reader Level

In the first of a four part series on extending Fireworks we'll be looking at filters--small scripts that perform specialized operations within a graphics application. If you're a PhotoShop user you're quite familiar with the concept of filters as these scripts, also known as plug-ins, are a common way to create special effects such as cracked glass, watercolor effects, and even stained glass. So, where are the cool tools that allow you to do those things in Fireworks?

Fireworks Piece By Piece - Web Tools
Reader Level: Reader Level

While the Web Tool area is the smallest section of the toolbar, it is the toolset if you are gearing your images to the web. Combined with the Optimize Panel and the Properties inspector, these are your tools for getting your designs and images web-ready. This article goes into detail about the web tools, and helps to explain the differences - and similarities - between slices and hotspots.

Fireworks Piece By Piece - Vector Tools
Reader Level: Reader Level

Welcome to the fourth article in the "Fireworks MX 2004 Piece by Piece" series. We think you will find that this series offers a more comprehensive reference to the details of the Fireworks interface and functionality set than what is available in any other single place. Even in the most basic of articles, we hope you will find something that makes Fireworks more useful to you. The previous two articles in this series dealt with the Bitmap Tools in the Toolbar. This article will deal with the next section of the Toolbar: the Vector Tools. The Vector Section was revamped in FW MX 2004 to include a whole new series of vector shapes, called auto shapes. There are also several other, older tools that don't get nearly enough exercise.

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 a Comical Music Video in Flash and Fireworks Free!
Reader Level: Reader Level

Learning about software doesn't always have to be a grind. Sometimes, in fact, doing something frivolous and fun can be just as instructive as doing more "serious" work. In this case, my desire to make a silly music video in Flash featuring some of the partners at Community MX led me to learn some valuable new skills in Fireworks and Flash, and also resulted in a fun video to share with the world.

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.

You Say You Want a Resolution? Free!
Reader Level: Reader Level

Despite the fact that Fireworks was built from the ground up to be a WEB graphics application, many web graphic designers are finding themselves in the postion of producing images suitable for print and are relying on Fireworks to do it. This article will explain the different types of resolution that are bandied about in both the print and web worlds, and explain why you should not be using Fireworks as your sole print graphics application.

CMX Black Line Master Graphics 4
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 the fourth release of the series, Cultures, you'll find a collection of images in Fireworks PNG format featuring images from the native American, Japanese, Egyptian, and Celtic cultures. These images 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


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!

Using Smart Shapes in Fireworks MX 2004
Reader Level: Reader Level

If you've been waiting to upgrade to Fireworks MX 2004 you're missing out on one of the really fascinating new capabilities that the program has. With Smart Shapes you can easily create complex objects like arrows, stars, rounded rectangle, and even 3-dimensional objects with click and drag ease. What's really cool is how easy it is to modify these objects once they're on you canvas, as you'll see in this introductory video tutorial.

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.

Hidden Gems - Fireworks Fade Image Command Free!
Reader Level: Reader Level

Ever wanted to quickly fade an image from one side to the other? There's a well-hidden little gem in the Fireworks Command Menu that does just that. Let's take a look.

This command has been remaned to the Auto Vector Mask command in Fireworks CS4.

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.

Fireworks MX 2004 Piece by Piece - Bitmap Tools - Part 2
Reader Level: Reader Level

When we last left the Bitmap Tools in Part 1, the first six tools had been exhaustively explained, up to and including that master Cleaner-Upper, the Eraser Tool. Now in this exciting conclusion, we explore the rest of the bitmap toolset, including the NEW tools, Replace Color and Red Eye Removal.

Web Typography - Part 1
Reader Level: Reader Level

The first principle of Typography is "Typography exists to honor content." When it comes to the web, sometimes it's as though this principle never existed. This series starts with a discussion of how this can actually be achieved simply by "giving words a voice". Read more...

Fireworks MX 2004 Piece by Piece - Bitmap Tools: Part 1
Reader Level: Reader Level

This article, and the one quickly following it, will deal with the next section of the Toolbar: the Bitmap Tools. This is the largest section of the Toolbar, and I felt it best to break things up into two sections. Many of these tools are the same in Fireworks MX and even Fireworks 4, but that doesn't mean they'll escape our scrutiny in this article. The Bitmap Section is also the area that received the greatest "revamp" in FWMX 04, with new tools to help you work better, faster and smarter with bitmap images.

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.

Fun with Wingdings and Webdings Free!
Reader Level: Reader Level

Many people have a difficult time trying to generate icons and other common shapes and spend a great deal of time and energy searching for free clip art that contains the images they need—without ever realizing that they already have access to an entire library of icons right on their computers.

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.

The Benefits of Externalizing Fireworks Pop-up menu JavaScript Free!
Reader Level: Reader Level

Fireworks and Dreamweaver pop-up menus have their uses, in spite of all the critics. One nagging issue though, is that both DW and FW insist on dumping a hefty javascript function into EVERY page that makes use of the menu. This article shows you how to turn this internal js into an external file, and how to link it to the pages that need the pop up menu.

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.

CMX Black Line Master Graphics 3 Free!
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 the third release of the series, Christmas, you'll find a collection of images in PNG format all featuring a Christmas theme 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


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.

Fireworks MX 2004 Piece by Piece – Part 1: The Select Tools
Reader Level: Reader Level

The Piece by Piece series' of articles aim to provide the most comprehensive references available to the interfaces and functionality of Macromedia products. In this installment, we cover the Select Tools section of the Fireworks MX 2004 Toolbar.

(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.

CMX Black Line Master Graphics 2
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, the second series, Art Deco, you'll find classic designs in the tradition of the 1920's and 30's 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


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.


Using the New Auto Shapes in Fireworks MX 2004
Reader Level: Reader Level

When I first saw these things my first reaction was, "just how the hell do I describe them?". My first reaction was, "They are code driven art." That sounded a little presumptuous . So I thought about them a bit more and decided the best way of describing these things is as "interactive clip art." In this exercise I'll walk you through how to apply and manipulate an Auto Shape from the Toolbar and how to "play" with one of the Autoshapes that come prepackaged with the application.

What's New in Fireworks MX 2004 Free!
Reader Level: Reader Level

Every new product release from a major company is accompanied by a good dose of hype and hoopla, and Macromedia is no exception. Now that the latest and greatest version of the MX Studio has been announced it's time to take a look at what the newest version of Fireworks MX has to offer. In this article you'll get a run-down of the new features found in Fireworks MX 2004 and find out if Macromedia has hit nothing but home runs with this version or if there are some singles or foul balls in the mix. Below you'll find my take on what are the best--and worst--of Fireworks MX '04.

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.

Exploring Preference Options in Fireworks MX Free!
Reader Level: Reader Level

If you're an old codger like me you may remember the routine that Johnny Carson and Ed McMahon used to go through on The Tonight Show way back in pre-Jay Leno days. Ed would tell some story about an interesting or unusual fact and Johnny would end up saying "I did not know that". Maybe you had to see it live to appreciate the humor, but I've had a few "I did not know that" moments with Fireworks, and most of them have come with regards to the different program options that are available in the Preferences settings. In this article we'll take a look at a few of them and see what preferences you might want to change from their default settings to help you work more efficiently in Fireworks.

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.

Installing Custom Styles in Fireworks
Reader Level: Reader Level

Creating custom Styles for Fireworks is lots of fun, and can be especially useful if you want to share a set of standard stroke, fill and effects settings with co-workers. Even more exciting, you can take advantage of the custom Styles that are being made available by Fireworks designers all over the world.

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.

Using Guides to help Slice an Image
Reader Level: Reader Level

Last week, we looked at the benefits of slicing. This article delves into the "how" instead of the "why", and shows you a couple tricks along the way.

The CMX Dashpack Free!
Reader Level: Reader Level

Fireworks doesn't have it's own facility for creating dotted and dashed lines, but it does allow you to import custom Styles. The CMX Dashpack contains 6 dotted and dashed stroke styles that you can use anytime you need dots and dashes.

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.

The Benefits of Slicing Images Free!
Reader Level: Reader Level

Slicing up large images in Fireworks is one of the program's key features. But what are the benefits of going through this process? This article explains the reasoning behind slicing and why you should consider it for large images.

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.

Creating Custom Strokes in Fireworks
Reader Level: Reader Level

Many people are surprised that Fireworks doesn't contain a method for applying a dashed line or dotted to a stroke. Yes, it's true that you can type in a series of dashes as text and then convert them to a path to get a dashed line , but what if you want to place a dotted line around a rectangle or some other shape? In that case you'll need to build a custom stroke, which can be a time-consuming process. Wouldn't it be better if you could make your own dashed line setting, Style or Command and then have it at the ready when it was needed? In this tutorial you'll learn to do just that.

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.

Positioning text when attached to a path
Reader Level: Reader Level

Attaching text to a path is pretty easy, but getting that text to go where YOU want it can be a little tougher. This article has tips on how to control your text once it's been attached to a path.

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.

Super Guides for Fireworks MX Free!
Reader Level: Reader Level

Super Guides is an axonometric projection template creator to allow you to create templates of any size, any angle and opacity for your isometric illustration needs. Through a simple yet powerful interface you can quickly create template documents within Fireworks MX to act as a starting point for technical and web illustrations

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.

Levels and curves
Reader Level: Reader Level

Most digital images need at least a little help to show them at their best. Using Levels or Curves can really make a difference. But the dialog boxes for these features can be intimidating, to say the least. This article helps to shatter that wall of fear, and shows you how easy it is to get better quality images using Levels or Curves.

What is This Thing Called PNG? Free!
Reader Level: Reader Level

The PNG format has been around since 1985. While hardly new, the use of the PNG image format still raises concern - even suspicion - when it comes to web graphics. This article will discuss PNG, and hopefully dispel a few myths in the process. I'll also talk about why you should NEVER use one specific PNG derivative.

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.

The Science of Color
Reader Level: Reader Level

How many times have you stared at that blank canvas trying to figure out just where to begin? If you know your business, your audience and the psychological effect you want to have on them, you're well ahead of the game. This article discusses ways to make a color plan and creatively and harmoniously blend your color palette.

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.

Foto 1.0 for Fireworks MX
Reader Level: Reader Level

Foto 1.0 (a Fireworks MX extension) is a collection of 5 non-destructive photo retouching effects for Fireworks MX. FOTO Includes:

1. Monochrome
2. Pencil Sketch
3. Color Glow Pro
4. Soft Glamour Pro
5. Precious


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.