|
Home | Résumé | Courses | Contact | Useful Links | Favorite Links | USC - Homepage |
Topics in Desktop Graphics - (CPTR240) - Lectures
Macromedia Fireworks lets you create and save complex and precise pixel selections of an image. This saves you the time and effort of re-creating selection marquees.
In this tutorial you will create and save a pixel selection, delete the non-selected area from the selection, convert the selection to a vector object, apply a Live Effect to the selection, and export the selection as a JPEG file for use in any Web page development application.
Create, save, and restore a pixel selection
Before beginning, first save the image shown below from your browser to your computer by doing one of the following:
Right-click the image and choose Save Image As from the pop-up menu. Then, in the Save As dialog box, navigate to a folder in which to store the image, type a name for the image, choose PNG file format, and click Save.
1. In Fireworks, choose File > Open, navigate to the image, and click Open.
2. Click the Zoom tool and zoom in as much as necessary for precise pixel selection.
3. Choose Edit > Deselect to deselect the image.
4. Click the Polygon Lasso tool.
A blue striped border appears around the edge of the canvas to indicate that Fireworks is now in bitmap mode.
5. In the Options panel for the Polygon Lasso tool, set the Edge to Anti-Alias. If the Options panel is not open, choose Window > Tool Options to open it.
6. With the Polygon Lasso tool, click where you want to place the first selection point. We began at the point of the left ear.
7. Continue pointing and Shift-clicking along the perimeter of the dog until the selection marquee completely encompasses the dog. Click as often as necessary to keep the marquee as close to the edge of the dog as possible.
8. Choose Modify > Marquee > Save Selection to save the selection area.
9. Choose File > Save As, navigate to a folder in which to save the bitmap image file as a PNG file, type a name for the file and click Save.
10. Click outside the canvas or press Esc to remove the pixel selection.
11. To restore the pixel selection, choose Modify > Marquee > Restore Selection.
Note: You must be in bitmap mode to restore a pixel selection.
Delete the unselected area from the dog
Delete the background from the dog to make the Live Effect you will create later more dramatic.
1. Choose Modify > Marquee > Select Inverse to select the area around the dog.
2. To delete the area around the dog, do one of the following:
- Press Delete.
- Choose Edit > Clear.
Choose Edit > Cut.
The background of the graphic is deleted.
3. Choose Modify > Marquee > Restore Selection to restore the saved pixel selection.
4. Choose Edit > Cut to move the dog to the Clipboard.
5. Click the Pointer tool and double-click outside the canvas to return to vector mode.
6. Choose Edit > Paste to paste the dog back into the document as a vector object.
Add a Live Effect to the dog
Use the Drop Shadow Live Effect to add drama and depth to the dog graphic.
1. Select the dog with the Pointer tool. If the Effect panel is not open, choose Window > Effect to open it.
2. In the Effect panel, choose Shadow and Glow > Drop Shadow from the None pop-up menu.
Drop Shadow appears in the Effect panel with a check mark beside it. Double-click Drop Shadow to edit the drop shadow attributes.
Export the dog to JPEG for use on the Web
1. Choose File > Save to save the dog image as a PNG file, which is the Fireworks native file type.
2. Choose File > Export. The Export dialog box opens.
3. In the Export dialog box, navigate to the folder in which to save the exported file, and name the file with a .jpg extension.
4. Choose Images Only from the Save As Type pop-up menu and click Save. The exported JPEG file is now ready for use on a Web page.
Selectively compressing areas of an image
Macromedia Fireworks lets you export a graphic with areas of varied compression. Selectively compressing an image lets you maintain high levels of detail in some areas and lower levels of detail in others to reduce the graphic's overall file size.
Create a selective JPEG mask
In Fireworks, you can create and save a selective JPEG mask to indicate how the area covered by the mask is to be compressed during export. The mask in this tutorial will be compressed very little to enable the masked area to appear as high quality. The rest of the image will be compressed more to reduce overall file size. This feature usefully blurs areas of less importance and makes important areas appear sharper.
In the following sections, you will create and save a selective JPEG mask, define quality settings for the mask, choose optimization settings for the parts of the image not covered by the mask, and export the image as a JPEG file.
Note: You can save only one selective JPEG mask in a Fireworks document.
1. From your browser, save the image shown below on your computer by doing the following:
- Right-click the image and choose Save Image As from the pop-up menu. Then, in the Save As dialog box, navigate to a folder in which to store the image, type a name for the image, choose PNG file format, and click Save.
2. In Fireworks, choose File > Open, navigate to the image, and click Open. A blue striped border appears around the outer edge of the canvas to indicate that Fireworks is now in bitmap mode.
3. Click the Ellipse Marquee tool.
Drag to select the area to export with high quality.
4. Choose Modify > Selective JPEG > Save Selection as JPEG Mask. The Selective JPEG mask appears as a translucent red object.
Choose quality settings for the image
Compress very little to enable the masked area to appear as high quality. Compress the rest of the image more to reduce overall file size.
1. In the Optimize panel, choose JPEG - Smaller File from the Settings pop-up menu, and click the Selective Quality button. If the Optimize panel is not open, choose Window > Optimize to open it.
2. In the Selective JPEG Settings dialog box, select the Enable Selective Quality option and enter a compression value of 95 in the text box.
This indicates that the area of the JPEG mask is less compressed to preserve higher resolution quality during export.
3. Click OK.
4. Click the Preview, 2-up, or 4-up tab at the top of the document window to see how the image will look upon export.
5. Select any of the previews except the original preview.
6. In the Optimize panel, enter 60 in the Quality text box. The lower the value, the more the image is compressed.
Export the image to JPEG for use on the Web
Exporting the file to JPEG makes the file viewable in browsers.
1. Choose File > Save to save the image as a Fireworks PNG source file.
2. Choose File > Export. The Export dialog box opens.
3. In the Export dialog box, navigate to the folder in which to save the exported file and name the file with a .jpg extension.
4. Choose Images Only from the Save As Type pop-up menu and click Save. The exported JPEG file is now ready for use on a Web page.
Source: David Jacowitz and Gary White - Macromedia FIREWORKS MX (2004) - http://www.macromedia.com/support/fireworks/tutorial_index.html
|
Home | Résumé | Courses | Contact | Useful Links | Favorite Links | USC - Homepage |
