Macromedia Dreamweaver 4 Fireworks 4 Studio: Training from the Source

Macromedia Dreamweaver 4 Fireworks 4 Studio: Training from the Source

by Patti Schulze
     
 

Dreamweaver and Fireworks are Macromedia's power tools for developing Web sites. Web designers can create their Web graphics in Fireworks (no Photoshop needed!) and integrate them seamlessly into their Web pages built with Dreamweaver. Macromedia¹s Dreamweaver/Fireworks Studio is now being purchased by 75-80% of users of either product, so Web teams can reduce…  See more details below

Overview

Dreamweaver and Fireworks are Macromedia's power tools for developing Web sites. Web designers can create their Web graphics in Fireworks (no Photoshop needed!) and integrate them seamlessly into their Web pages built with Dreamweaver. Macromedia¹s Dreamweaver/Fireworks Studio is now being purchased by 75-80% of users of either product, so Web teams can reduce production time with tight integration, automation, and customization.

Editorial Reviews

Booknews
Ten lessons provide instruction on using the integration features of Dreamweaver 4 and Fireworks 4. They cover bitmap editing, working with groups and layers, using vector tools, text, fills, live effects, optimizing and exporting, animation, creating buttons, making image maps and slices, and production techniques. An accompanying CD-ROM contains all the files needed for the lessons. Schulze is a Web designer and consultant. Annotation c. Book News, Inc., Portland, OR (booknews.com)

Product Details

ISBN-13:
9780201711622
Publisher:
Pearson Education
Publication date:
06/21/2001
Series:
Macromedia Press Series
Edition description:
BK&CD-ROM
Pages:
376
Product dimensions:
8.04(w) x 9.99(h) x 1.23(d)

Read an Excerpt

Expert from Chapter 1:

bitmap editing

EXPLORING THE FIREWORKS TOOLS PANEL

Fireworks has a variety of tools you can choose by clicking the tool on the Tools panel or by using the shortcut key shown in the following figure. If a tool has a small black triangle in the bottom right corner, it is part of a group of tools; click and hold on the tool to access the pop-up tool group.

For example, click and hold the Pointer tool (top left on the Tools panel) to see the other tools in this area. If the Tools panel is not open, choose Window > Tools.

Fireworks has two modes for editing images: Vector mode and Bitmap mode. Vector mode is for creating vector images, and Bitmap mode is for editing bitmaps. Both modes share the same Tools panel, but some tools change based on the editing mode. For example, the Eraser tool looks like an eraser in Bitmap mode and a knife in Vector mode. The Rectangle tool in Vector mode creates a rectangle that can be resized and edited. In Bitmap mode, the same tool creates a bitmap rectangle that cannot be changed or resized while in this mode.

FLOATING AND TABBED PANELS

The panels used for making changes to images or objects "float" above the document, so they are always on top. Many of the panels are tabbed, with two or more panels combined. You can create your own arrangement by just dragging the tab away from the panel. To combine panels, drag the tab of one panel inside another panel. You'll see a black border appear, indicating that the addition is possible. To access a new panel, click its tab.

As you work with the panels, you'll move them around or close them. To restore the panels to their original positions, choose Commands > Panel Layout Sets and choose from one of the listed screen sizes. A script runs that moves the panels based on the screen size you chose. This command is also very handy when you change your monitor-when you execute the command, the panels move to accommodate the new monitor.

EDITING BITMAP OBJECTS

Photographs or scanned art can be opened or imported into Fireworks. Fireworks recognizes the following bitmap file formats: Photoshop native files (PSD), TIFF, JPEG, GIF, BMP, PICT (Macintosh), PNG, and Targa. After you have opened or imported an image, you can make a variety of changes. Before you can change pixels in a bitmap image, you must first select the area you want to affect. After you make a selection, you can edit only those pixels within the selection. Pixels outside the selection are protected from change. This exercise introduces you to the bitmap editing tools. You will learn to make selections, change colors in the image, and clone part of the image.

When editing bitmaps in Bitmap mode, you will be either editing pixel by pixel (with the Pencil, Pen, or Eraser tool) or editing a selection of pixels. Use the selection tools to select pixels either by their color value or by their location within an area. Only those pixels within the selection are affected by any changes you make.

    1) Open the file Flower butterfly.png file in the Lesson 01 folder. This file contains a bitmap image (the sunflower with the butterfly) and a vector image (the butterfly on the far right). The butterfly in the center of the flower is a bitmap. To change it, you need to select all the pixels that define the shape. To move the vector butterfly, you just need to select it with the Pointer tool. In this exercise, you will change the bitmap butterfly.

    2) Select the Pointer tool from the Tools panel and double-click the image to switch to Bitmap mode. You can also select a bitmap tool such as the Magic Wand tool or the Marquee tool, and click the image to switch to Bitmap mode. A striped border appears around the entire document to indicate that you are in Bitmap mode and editing pixels.

When you are in Bitmap mode, any object you place on the canvas can't be moved or repositioned-you have permanently "painted" the object on the canvas.

    3) To exit Bitmap mode, click Exit Bitmap Mode (the red circle with a white X), located at the bottom of the document window.

To exit Bitmap mode, you can also press the Esc key (Windows and Macintosh), Ctrl+Shift+E (Windows), Command+Shift+E (Macintosh), or Command+period (Macintosh only), or choose Modify > Exit Bitmap Mode.

USING THE MAGIC WAND TOOL

With the Magic Wand tool, you can select neighboring pixels of the same or similar color. The level of similarity depends on the tolerance level you set in the Tool Options panel. The lowest level, zero, selects one color; you pick the exact color with the tip of the tool. The highest setting, 255, allows the greatest range of colors to be selected. For example, if the tolerance is set to 50 and the RGB value of the color selected is R = 100, G = 100, and B = 100, then colors from 50, 50, 50 to 150, 150, 150 are within the 50 tolerance level and thus are selected.

To understand this better, look at the many shades of blue in the sky in the bitmap image you have opened. The blue of the sky is dark at the top of the image and gradually lightens as it nears the horizon. If you used a low tolerance level, for example 10, then the number of blue pixels selected is limited to a small area around where you click with the tool. If you select the entire sky, you will need to continue to click to add pixels to the selection. If you use a large tolerance number, for example 255, then you will also select colors outside the blue color range.

The default tolerance level of 32 is generally a good starting point. Instead of increasing the tolerance level, try adding to the selection by holding Shift and clicking another color...

    3) Drag the Hue slider until you get a color you want.
The values displayed in the text box as you drag the slider reflect the degree of rotation around the color wheel. A positive number rotates counterclockwise; a negative number rotates clockwise. Dragging the slider all the way to the left or right changes the hue to the color at 180 degrees from the original color. If you are unfamiliar with the color wheel, open the Color wheel.png file in the Lesson 01 folder. Opposite (or 180 degrees) from blue in the color wheel is yellow. If you drag the Hue slider all the way to the left or right, the sky changes to yellow.

If you change the color too much, the edges of the selection, especially around the flower, will look too harsh. Bitmap images are made up of pixels, which are square. Around

the petals of the flower are pixels that are a color combination of the blue sky and yellow flower.

These pixels trick your eye into seeing a smooth edge around the flower and are not in your selection because of their color. When you change the hue to magenta, for example, the color is far different from the blue, and those pixels stand out, resulting in a hard edge around the flower. Experiment with the slider until you get a darker blue or a violet-blue color.

    4) Drag the Saturation slider to change the intensity of the sky.
Dragging the slider all the way to the left changes the color to gray. Dragging the slider all the way to the right changes the intensity of the color to its brightest point.

    5) Drag the Lightness slider to change the brightness level of the sky.
Drag the slider to the left to darken the overall color tone of the sky. At the far left end, the color turns to black. Drag the slider to the right to lighten the color. At the far right end, the color turns to white.

Adjust the sliders in the Hue/Saturation dialog box to your liking.

    6) Click OK to close the Hue/Saturation dialog box.
If you want to hide the selection area to better view your changes, choose View > Hide Edges. To view the selection area, select the command again. If you are happy with the results of your changes, deselect the area by choosing Edit > Deselect.

If you want to save your selection before you deselect it, choose Modify > Marquee > Save Selection. To use the selection again, choose Modify > Marquee > Restore Selection. Fireworks only saves one selection.

USING THE LASSO TOOL

The Lasso tool creates a freeform selection boundary around an area. Wherever you drag, you draw a selection outline. When you release the mouse button, the selection area closes automatically. To close the selection area yourself, return to the first point of the selection. As you come close to the beginning, the pointer displays a small square. To close the selection, release the mouse when you see the square.

The Polygon Lasso tool draws straight-line segments. This tool works differently than the Lasso tool; instead of dragging the tool to make the selection, click for your first point, release the mouse, move to a new location, and click again to define a line segment. Just as with the Lasso tool, you'll see a small square by the cursor when you are close to the beginning point. Click when you see the square to close the selection. You can also double-click to close the selection, even if you have not moved the cursor back to the beginning point...

Read More

Meet the Author

Patti Schulze is the founder and president of Digital Training & Designs (www.digitrain.com), a Macromedia and Adobe Authorized Training center in Dallas, Texas. Patti has created many Web sites: from recommending the hardware, installing the software, and developing databases and e-commerce to designing the graphics and coding the HTML. Patti developed the Macromedia curricula for Fireworks, Dreamweaver Fundamentals, Dreamweaver Advanced and Dreamweaver / Fireworks Integration that is used by Macromedia Authorized Training centers. She speaks at Web conferences on topics such as Designing with Dreamweaver and Creating User Interactivity.

Training from the Source TM is the authorized training series from Macromedia Press. Each book in the series is based upon curriculum originally developed for use by Macromedia's authorized trainers. The lesson plans were developed by some of Macromedia's most successful trainers, and refined through long experience to best meet students' needs.

Macromedia Press: What Books about the Web can be! Founded in 1996 in a creative partnership between Macromedia, Inc and Peachpit Press, Macromedia Press provides creative professionals and all users of Macromedia software and technology with the highest quality trade computer books available today.

Read More

Customer Reviews

Average Review:

Write a Review

and post it to your social network

     

Most Helpful Customer Reviews

See all customer reviews >