• Lesson Index:
• Overview
• Layout
• Getting Started
• Setting Colors
• Draw Layout
• Enhance Photo
• Import Image
• Gradients & Masks
• Components
• Making the Header
• Smudge Tool
• Write Title
• Navigation Bar
• Footer
• Finishing
• Slicing
• Export
• Export Options

Getting Started with Fireworks

We want to create our CreativeWorks website design layout (also will be referred to as "design comp") for a website that is nicely viewable in a 800x600px screen -- that is 800 pixels wide and 600 pixel high. Designing a website with a width of 800px is fairly standard. There are some sites that are starting to make their widths larger under the assumption that most people have their monitor resolution set to 1024x768 or higher and that the site will be viewable in those resolutions without horizontal scrolling. However, if you go to MSN, yahoo, or google, they all make their width fit within a width of 800px. And we will continue to use this standard.

The first thing that you see when you open up Fireworks is the Welcome screen.

Next, we will create a new file by selecting menu File -> New.

Enter the stated dimensions as shown. A resolution of 72 pixels/inch is standard for images that are planned to be viewed on screen. For images that are planned to be printed on brochurs, you will need to set this higher (say 300 pixels/inch). The measure pixels/inch is equivalent to dpi (or dots per inch). For web work, we keep the pixels/inch at 72. Selecting a white canvas is fine for now. Click Okay.

Next, we save our document by File -> Save As. Save the file with the name creativeworks.png in a folder called creativeworkscomp as shown. I happen to put mine in c:\creativeworkscomp for example.

The next time you want to work on this Fireworks file, simply load Fireworks and open this PNG file. Alternatively, you can find the creativeworks.png file in Windows Explorer and double-click on it. Windows will typically launch Macromedia Fireworks for you and load the PNG file.

File Formats

Notice that Firework's native format the the PNG (Portable Network Graphic) format. Traditionally, the two file formats that are used on the web are GIF and JPG (also known as JPEG).

The GIF format good for images containing a lot of solid colors. For example, icons, cartoons, backgrounds, etc. GIF also supports transparency and image animation. JPG is good for photographic images, or images with a lot of gradients and fine details. JPG does not support transparency nor animation. All browsers will be able to display these two types of formats without any problems. And most designers will use their graphics program to export to the GIF and JPG format before placing the image on the web server.

Most modern browsers is now able to display PNG file format without any problem. And you can put images that are in this format directly on the web server without exporting. However, throughout this course, I will still perform the export the traditional way, because I can perform optimizations that can get me smaller file sizes in the GIF and JPG format than in the PNG.

Fireworks Environment

What you see in the middle of Fireworks environment is your canvas.

To the left is the toolbox. If you don't see the toolbox, select Windows->Tools from the menu.

To the right are some panels as shown. If you click on the titles of each panel, it will open and collapse the panel. For example, open up the Layers panel as shown below. If you do not see this panel, bring it up using menu Windows-> Layers. Panels have context menus when you click as shown.

You can close the panel to make it disappear from view by selecting Close Panel Group from the context menu. Bring it back with the menu command as described above.

One of the more important panels is the Properties panel which you can bring up with Windows->Properties or Ctrl-F3. This panel will look different depending on which object you have selected. We will talk more about this panel later.

Both the toolbox and panels can be torn from its dock by dragging its handles. Once detached, they can be resized as well. They can be docked back in place, but you might have to give it several tries.

100% Scale

When designing, we often need to see how our art looks at 100% scale, or in actual size. Make sure our document is in 100% Scale by Ctrl-1 or selecting as shown.

When we do this, you might find you can not see the entire canvas because there are too many panels in the way. Plus those ugly panels detract from your art anyways. Get rid of all those panels and toolboxes by selecting the pointer tool and then press Tab.

Press Tab again and your panels and toolbox comes back.

Alternatively, you can get more canvas space by collapsing them...

Setting Guides in Fireworks

Although our canvas is 800px wide, our web page is going to 760px wide so we have 20px on each side for some air and things like browser frames. Let's have 10 pixel top margin also (just for some air).

We need precision, so drag out a vertical guide to about 20px according to the ruler. If you don't see the ruler, do View -> Rulers.

No need to drag it precisely, because with the pointer tool selected, we double-click on the green guide.

And set its position to 20.

In a similar manner. Set the other vertical guide to 780. And set two horizontal guides -- one at 10 and one at 590.

I have set the scaling to 66% so you can see the whole canvas.

In the next lesson, we will set colors to draw a rectangle.