Answers adobe creative suite 5

Answers 1 The Publish command can create a playable SWF file and automatically embed it into an HTML page. The Publish command also offers a wide range of exportable formats in addition to standard .swf creation. 2 To display your Flash animation on video devices such as iPods and PSPs, as well as to import into a video editing or motion graphics program. 3 Adobe AIR applications are able to interact with the user’s operating system and local files. Projectors have security restrictions which prevent this, and don’t feature the same ActionScript capabilities necessary to work with the operating system. 823 Fireworks Lesson 1: Adobe Fireworks Jumpstart Fireworks is a unique hybrid of vector and bitmap graphics programs. It provides a user-friendly environment for prototyping web sites and user interfaces, and creating and optimizing images for the Web. And because it’s part of Adobe’s Creative Suite, Fireworks also offers time-saving 824 integration with Photoshop, Illustrator, Dreamweaver, and Flash. What you’ll learn in this lesson: • Publishing to the web and CD • Customizing Publish Settings • Creating a standalone, full-screen projector • Exporting to video Starting up You will work with several files from the fw01lessons folder in this lesson. Make sure that you have loaded the CS5lessons folder onto your hard drive from the supplied DVD or online. ePub users go to www.digitalclassroombooks.com/epub/cs5. See “Loading lesson files” on page XXIX. About Fireworks Adobe Fireworks is a versatile graphics program that combines features found in image-editing, vector-drawing, and Web-optimizing applications. Instead of jumping from one program to another to create graphics for your web site, Fireworks lets you use one program from start to finish. Work with vector and bitmap objects Fireworks includes tools for working with both vector and bitmap graphics. You can draw an object and then use a wide 825 array of tools, effects, and commands to enhance it. If you’ve created a graphic in another program, Fireworks also imports and edits graphics in JPEG, GIF, PNG, PSD, and many other file formats. Make graphics interactive In Fireworks, you can add interactive areas to a Web graphic using slices. Slices divide an image into exportable areas, to which you can apply rollovers and other interactive behaviors. Optimize and export graphics The optimization features of Fireworks help you find the right balance between file size and visual quality for your graphics. Once you’ve optimized your graphics, you can export them in a number of different file formats, including JPEG, GIF, animated GIF, and HTML tables containing sliced images. Vector and bitmap graphics Graphics on your computer are displayed in either vector or bitmap format. It’s important that you understand the difference between the two file types, because Fireworks is capable of opening and editing both formats. About vector graphics Vector graphics are drawn objects that use anchor points, lines, and vectors, or mathematical equations that contain color and position information. They are defined by a series of points that describe the outline of the graphic. The color of 826 the graphic is composed of the color of its outline (or stroke) and the color of its interior (or fill). Vector graphics are also described as resolution-independent. This means that a graphic’s appearance doesn’t change when you move, resize, or reshape it. Vector graphics feature crisp edges and flat areas of color. About bitmap graphics As you may already know, your computer screen is a large grid of pixels. Bitmap graphics are composed of dots (or pixels) arranged inside this grid. In a bitmap graphic, the image is defined by the location and color value of each pixel in the grid. When viewed at a certain distance, the dots create the illusion of continuous tone, as in a mosaic. Bitmap graphics are resolution-dependent, which means that the image data is restricted to a grid of a certain, specified size. Enlarging or transforming a bitmap graphic changes the 827 pixels in the grid, which can make the edges of the image appear jagged. Bitmap graphics feature gradations in tone and softer edges. The startup screen When you start Fireworks without opening a document, the Fireworks startup screen appears in the work environment. The startup screen gives you quick access to Fireworks tutorials, recent files, and Fireworks Exchange, where you can add new capabilities to some Fireworks features. 1 Disable the startup screen by clicking the Don’t Show Again checkbox when the startup screen opens. Fireworks lets you re-access the startup screen if you want to later. Press OK. 828 2 Close the startup screen. You’ll be creating a new document using the File > New menu command. The Start page appears by default when Fireworks is first opened. Creating a new Fireworks document As with most computer applications, your first step is to create a new document. New documents in Fireworks default to its native file format, Portable Network Graphic (PNG). This means that regardless of the optimization and export settings 829 you select, the original Fireworks PNG file is preserved to allow easy editing later. 1 Select File > New. The New Document dialog box opens. 2 In the New Document dialog box, type 800 in the Width text field, 600 in the Height text field, and make sure that both drop-down menus are set to Pixels. Measurements are usually expressed in pixels in Fireworks, as you’re designing for a pixel-based monitor. Use the New Document dialog box to set up your file. 830 3 Set the Resolution, or number of pixels per inch in your bitmap grid, to 72. Most computer monitors can only display graphics at between 72 and 100 pixels per inch. 4 Set the Canvas Color, or the background color to Transparent. You could also have used the Custom color swatch to select a custom canvas color. 5 Press OK to accept your new document settings. Workspace basics You create and manipulate your files using various elements, such as panels, bars, and windows. Any arrangement of these elements is called a workspace. The workspaces of the different applications in the Adobe Creative Suite share the same basic appearance, so that you can easily move between the applications. Fireworks workspace overview When you open a new document in Fireworks, the document window appears in the center of the screen, and displays the file you’re working on. Document windows can be tabbed and, in certain cases, grouped and docked. 831 The document window displays the file you’re working on in the center of the screen. The Fireworks workspace includes the Tools panel, Property Inspector, Application bar, and other panels. • The Application bar, across the top of your screen, contains a workspace button for switching workspaces, menus, and other application controls. The Application bar contains menus and other application controls. 832 • The Property Inspector, at the bottom of the document window, initially displays document properties. It’s context-sensitive, however, and changes depending on which tool you’ve chosen, or what you’ve selected in the document. The Property Inspector is context-sensitive and displays content relative to what you’ve selected. • The Tools panel, on the left side of the screen, contains Bitmap, Vector, and Web tool groups. These tools are used for creating and editing elements of your graphic. Related tools are grouped, or nested. 833 834 The Tools panel contains tools for creating and editing elements of your graphic. Other Fireworks panels Panels are floating windows that let you work with layers, paths, and colors, and otherwise edit the appearance or behavior of a selected object. Although they are docked to the right side of the workspace by default, each panel is draggable, and so you can group panels into your own custom arrangements. 835 836 Panels let you edit the appearance or behavior of a selected object. Working with bitmaps Creating bitmaps As mentioned earlier in this lesson, bitmap graphics are composed of small squares called pixels, which fit together like the tiles of a mosaic to create an image. Some examples of bitmap graphics are photographs captured with your digital camera, or graphics created in paint programs. They are sometimes referred to as raster, or pixel-based, images. In Fireworks, you can create bitmap images by drawing and painting with bitmap tools, by converting vector objects to bitmap images, or by opening or importing images. Bitmap images cannot be converted to vector objects in Fireworks. Importing a bitmap In this exercise, you’ll import a JPEG file to use as a header graphic for a web page. Fireworks imports and edits graphics in JPEG, GIF, PNG, PSD, and many other file formats. 1 With your Fireworks document open, select File > Import. The Import File dialog box opens. 2 Navigate to the fw01lessons folder within the CS5lessons folder, and select the file BlueSky.jpg. 837 3 Press Open. The corner-shaped, import cursor indicates that the file is ready to be placed in your Fireworks document. 4 Click once in the upper-left corner of your canvas to place the image at its original size. You can also drag the import cursor to draw a rectangle that scales the image to fit. Bitmap images are imported using the File > Import command. Cropping a bitmap The imported image fills your canvas, but you’ll want to crop its dimensions for use as a web page header. 838 1 From the Tools panel, choose the Crop tool ( ). 2 Choose View > Rulers, if you do not see the rulers in the document window. Position your cursor on the left edge of the canvas, at the 200-pixel mark on the vertical ruler. 3 Drag down to the 300-pixel mark on the vertical ruler, and across to the right edge of your canvas. You should end up with a crop selection box that is 800 pixels wide and 100 pixels high. Images can be cropped with the Crop tool. 4 Double-click inside the bounding box or press Enter to crop the selection. 839 To cancel a crop selection, press Esc. Double-click inside the bounding box to accept your crop. Applying a filter Next you’ll use a filter to lighten a portion of the image and complete the bitmap portion of your header graphic. 1 From the Tools panel, choose the Rectangular Marquee tool ( ). 2 Drag a rectangle over the bottom half of your header graphic. A flashing selection outline appears over the area, 840 identifying those pixels as being currently selected for editing. A selection flashes when the pixels inside are ready for editing. 3 Select Filters > Adjust Color > Hue/Saturation. The Hue/ Saturation dialog box appears. 4 In the Hue/Saturation dialog box, slide the Lightness slider to 50, and click the Preview checkbox to see the results of the lightening in your image. Set a Lightness value in the Hue/Saturation dialog box. 5 Press OK to accept the Hue/Saturation filter setting. 841 Press OK to accept your filter setting. 6 Choose File > Save, and save this file as Header.png in the fw01lessons folder. Now you’ll work with the vector tools to add a navigation bar to your header. Working with vector objects As mentioned previously, a vector graphic’s shape is defined by a path, and by the anchor points that are plotted along it. A vector graphic’s stroke color follows the path, and its fill occupies the area inside the path. Vector object shapes include basic shapes, free-form shapes, and Auto Shapes, or object groups that have special controls for adjusting them. You can use a variety of tools in Fireworks to draw and edit vector objects. Drawing and editing basic shapes You use the basic shape tools to draw rectangles, ellipses, and polygons. 842 Fireworks features both basic and auto shape tools. Drawing a rectangle The Rectangle tool draws rectangles as grouped objects. To move a rectangle corner point independently, you need to ungroup the rectangle or use the Subselection tool ( ). 1 From the Tools panel, select the Rectangle tool ( ). 843 If you can’t see the Rectangle tool in the Tools panel, click and hold on the tool to choose it from the list that appears. 2 Move the pointer to the canvas, positioning it on the left side of the lightened area of your header. The cursor changes to a plus sign (+), indicating that you can draw the rectangle. 3 Click and drag diagonally from upper left to lower right, creating a rectangle that is 750 pixels wide and 25 pixels high, and leaving a small margin of the lightened sky around it. The rectangle automatically fills with the default fill color (gray). Leave the fill at its default; you’ll change it later in this exercise. 844 Leave the rectangle’s fill at its default color (gray). While holding down the mouse button, press and hold the spacebar to adjust the position of a basic shape as you draw it. Release the spacebar to continue drawing the object. Resizing a rectangle If you have difficulty drawing your rectangle at the correct size by dragging, you can do one of the following: • Enter new width (W) or height (H) values in the Property Inspector or the Info panel. • In the Select section of the Tools panel, select the Scale tool and drag a corner transform handle. • Select Modify > Transform > Scale and drag a corner transform handle, or select Modify > Transform > Numeric Transform and enter new dimensions. • Drag a corner point on the rectangle. Auto Shapes Auto Shapes, unlike other object groups, have diamond-shaped control points in addition to the object group handles. Dragging a control point alters only its associated visual property. Most control points have tool tips that describe how they affect the Auto Shape. 845 Auto Shape tools create shapes in preset orientations. For example, the Arrow tool draws arrows horizontally. Use the Auto Shape tools to create shapes with preset orientations. The Auto Shape tools Arrow: Simple arrows of any proportions, and straight or bent lines. 846 Arrow Line: Straight, thin arrow lines providing quick access to common arrowheads (simply click either end of the line). Beveled Rectangle: Rectangles with beveled corners. Chamfer Rectangle: Rectangles with chamfers (corners that are rounded inside the rectangle). Connector Line: Three-segment connector lines, such as those used to connect the elements of a flowchart or organizational chart. Doughnut: Filled rings. L-Shape: Right-angled corner shapes. Measure Tool: Simple arrow lines that indicate dimensions for key design elements in pixels or inches. Pie: Pie charts. Rounded Rectangle: Rectangles with rounded corners. Smart Polygon: Equilateral polygons with 3 to 25 sides. Spiral: Open spirals. Star: Stars with any number of points from 3 to 25. Working with text Now you’ll add some text to serve as navigation links for your header bar. 847 Fireworks provides many features typically reserved for desktop publishing applications, including the ability to use a variety of fonts at different sizes as well as kerning, spacing, color, and leading controls. Create and move text blocks Text entered into a Fireworks document appears inside a text block (a rectangle with handles). Text blocks are either auto-sizing or fixed-width blocks. • An auto-sizing text block expands horizontally as you enter type, and shrinks when you remove text. When you click on the canvas with the Text tool and start typing, auto-sizing text blocks are created by default. • Fixed-width text blocks are created by default when you drag to draw a text block using the Text tool. They allow you to control the width of wrapped text. When the text pointer is active within a text block, a hollow circle or hollow square appears in the upper-right corner of the text block. The circle indicates an auto-sizing text block; the square indicates a fixed-width text block. Double-click the corner to change from one text block to the other. 1 Select the Text tool ( ). 2 In the Property Inspector, set the following: • Arial Bold for the font and style. 848 • 12 points for the font size. • White for the font color. Click the color swatch and choose white from the color palette. Use the Property Inspector to set the attributes of the type you’ll enter. 3 Create a fixed-width text block by dragging to draw a text block inside the navigation bar. Leave a small margin, but extend the text block at least halfway across the navigation bar. To move the text block while you drag to create it, hold down the mouse button, press and hold down the spacebar, and drag the text block to another location. 4 Type the following navigation links, with five spaces between each: Home, About Us, Products, Services, Contact Us. 5 Click once in the document window with the Zoom tool ( ) to confirm that you’ve typed correctly. 849 Type the navigation links as shown. 6 If you choose, you can select text within the text block and reformat it. Formatting and editing text The quickest method of editing text in Fireworks is to use the Property Inspector. As an alternative to the Property Inspector, you can also use commands in the Text menu. 1 Do one of the following to select the text you want to change: • Click a text block with the Pointer tool ( ) or Subselection tool ( ) to select the entire block. To select multiple blocks simultaneously, hold down Shift as you select each block. • Double-click a text block with the Pointer or Subselection tool, and then highlight a range of text. • Click inside a text block with the Text tool, and then highlight a range of text. 2 Change or reformat the text. 3 To exit the text block, do one of the following: 850 • Click outside the text block. • Select another tool in the Tools panel. • Press Esc on your keyboard. 4 Select File > Save to save your file. Applying color Fireworks has a wide variety of features for creating, selecting, and applying colors. You’ll now use some of these features to add color to your navigation bar and text links. Apply a sampled color 1 With the Pointer tool ( ), click the (gray) navigation bar to select it. 2 Select the Eyedropper tool ( ) from the Tools panel. 3 Click in the blue sky at the top of your header graphic to sample that color. 4 The blue sky color is applied to the navigation bar. 851 The Eyedropper tool allows you to sample color from your image. You can also apply color to image elements in other ways. Apply a swatch color to text 1 With the Text tool, drag to select all your text links. 2 Click the Fill Color box icon ( ) in the Tools panel to make it active. 3 Select Window > Swatches. Use the Swatches panel to apply color to your text. 4 Click on a dark-blue swatch (of your choice) to apply the color to the fill of your text. 852 Using the Color Mixer If you choose, you can use the Color Mixer by choosing Window > Color Mixer to view and change your current stroke and fill colors. The Color Mixer allows you to view and change your current stroke and fill colors. By default, the Color Mixer identifies RGB colors as hexadecimal, displaying hexadecimal color values for red (R), green (G), and blue (B) color components. Hexadecimal RGB values are calculated based on a range of values from 00 to FF. You can select alternative color models from the Color Mixer panel menu. Although CMYK is a color model option, graphics exported directly from Fireworks are not typically intended for printing. 853 Using Layers In Fireworks, you use layers to separate your document into discrete planes, as if the elements were created on separate acetate overlays. A document can be made up of many layers, each in turn containing sublayers or objects. As a point of reference, Fireworks layers resemble layer sets in Adobe Photoshop. The Layers panel Each element in a Fireworks document resides on a layer. You can either create layers before you begin adding elements or add layers as needed. The canvas is below all layers and is not technically a layer. 854 Each element in a Fireworks document resides on a layer. The Layers panel displays the current state of all layers in your image. The name of an active layer is always highlighted. The stacking order is the order in which objects appear in the document and determines how objects on one layer overlap objects on another. Fireworks places the most recently created layer on the top of the stack. You can easily rearrange the order of layers and of objects within layers. Activate a layer When you draw, paste, or import an object in your document, it is automatically placed at the top of the active layer. To activate a layer, do one of the following: • Click a layer name in the Layers panel. • Select an object on a layer. Organizing layers In a Fireworks document, you organize layers and objects by naming them and rearranging their stacking order in the Layers panel. Moving layers and objects in the Layers panel changes the order in which objects appear on the canvas. Objects at the top of a layer appear above other objects in that layer on the canvas. Objects on the topmost layer appear in front of objects on lower layers. 855 Naming layer objectsv 1 Double-click the Bitmap object in the Layers panel. 2 Type the new name, Photo, for the object and press Enter. 3 Repeat the process to rename the Home layer to Links. It’s a good idea to name your layers descriptively. Moving a layer object 1 Click the Photo object in the Layers panel. Drag it above the Nav Bar object, releasing it when you see a double line appear between the Links and Nav Bar objects. 856 Dragging layers changes the order in which objects appear on the canvas. 2 The Nav Bar object disappears from your image, as it’s now obscured by the Photo object. Protecting layer objects Locking an individual object protects it by preventing it from being selected or edited. A padlock icon ( ) indicates a locked item. You can also protect objects and layers by hiding them. 857 1 Lock the Links object by clicking the square in the column immediately to the left of the object name. 2 Lock the Photo object by clicking the square in the column immediately to the left of the object name. Objects on locked layers can’t be selected. 3 Click with the Pointer tool ( ), noting that neither of these objects can now be selected. 858 Show or hide objects and layers Hiding an individual object protects it by preventing it from being viewed, selected, or edited. A visibility icon ( ) indicates a visible item. 1 Hide the Links object by clicking the square in the far-left column next to the object name. The missing visibility icon indicates that the object is invisible. A missing visibility icon indicates an invisible layer. 859 2 Show the Links object again by clicking the square in the far-left column next to the object name. The visibility icon indicates that the object is now visible. Merging objects in the Layers panel To clean up your Layers panel, you can merge objects. Objects and bitmaps to be merged do not have to be adjacent in the Layers panel or reside on the same layer. Merging down results in all selected vector and bitmap objects becoming flattened into the bitmap object that lies beneath. Vector objects and bitmap objects cannot be edited separately once merged. 1 Unlock the Links and Photo objects in the Layers panel, and click to select the Links object and only the Links object. Shift+click or Ctrl+click to select multiple objects. 2 To merge the Links and Photo objects, do one of the following: • Select Merge Down from the Layers panel menu. 860 Merging down results in all selected vector and bitmap objects becoming flattened. • Select Modify > Merge Down. • Right-click (Windows) or Ctrl+click (Mac OS) the selected layer and select Merge Down. Deleting a layer object Because you won’t be using it after all, you’ll now delete the Rectangle object. 861 1 Click the Rectangle object to activate it. 2 Click the Delete Selection button ( ) at the bottom of the Layers panel. Unwanted layers are deleted using the Delete Selection button. About the Web layer The Web layer appears by default as the top layer in every Fireworks document. It contains Web objects, such as slices, used for adding interactivity to exported documents. 862 You can’t delete, duplicate, move, or rename the Web layer. You also can’t merge objects that live on the Web layer. Creating slices for interactivity Slices are Web objects that are created using HTML code, and are an essential part of creating interactivity in a Fireworks document. Slicing carves up a document into smaller pieces and exports each piece as a separate file. When it’s exported, Fireworks creates the HTML code that will reassemble the graphic in a Web browser. Although it’s also used for optimizing and updating, the biggest advantage of slicing is that it adds interactivity so that images can respond to user actions. Create rectangular slices You can create rectangular slices by drawing with the Slice tool. 1 Select the Slice tool ( ). 2 Drag to draw a slice object over the Home portion of your header graphic. Be sure to make it cover the entire (lightened) area from top to bottom. 3 Repeat the process for the About Us, Products, Services, and Contact Us link areas. 863 Slicing adds interactivity so that images can respond to user actions. To adjust the position of a slice as you drag to draw it, hold down the mouse button, press and hold down the spacebar, and then drag the slice to another location on the canvas. Release the spacebar to continue drawing the slice. Resizing one or more slices You can edit the slice guides (lines extending from the slice object) to define the boundaries of the split image files that are created when the document is exported. 1 Position the Pointer tool ( ) or Subselection tool ( ) over a slice guide. The pointer changes to the guide movement pointer. 864 Drag a slice’s guides to resize it. 2 Drag the slice guide to the desired location. The slices and all adjacent slices are resized.Working with slices can be compared to using a table in a word-processing application. When you drag a slice guide to resiz e a slice, all adjacent rectangular slices are also resized. You can also use the Property Inspector to resize and transform slices. If multiple slice objects are aligned along a single slice guide, you can drag that slice guide to resize all the slice objects simultaneously. View and select slices You can control the visibility of slices in your document by using the Layers panel and the Tools panel. When you turn slice visibility off for the whole document, slice guides are also hidden.The Web layer displays all the Web objects in the document. 1 Select Window > Layers. 2 If necessary, expand the Web layer by clicking the triangle. 865 The Web layer displays all the Web objects in a document. 3 Click a slice name to select it. Naming slices 1 Double-click the bottommost slice in the Web layer. 2 Type the new name, Home, for the slice and press Enter. 3 Repeat the process to rename the About, Products, Services, and Contact slices. 866 It’s a good idea to name your slices descriptively. Show and hide slices Hiding a slice simply makes the slice invisible in the Fireworks PNG file. Hidden slice objects can, however, be exported in the HTML file. 1 Click the visibility icon ( ) next to the Home slice in the Layers panel to hide it. 867 Hiding a slice makes it invisible. 2 To show the Home slice again, click in the visibility column next to the Home slice in the Layers panel. 3 To hide or show slice guides in any document view, select View > Slice Guides. Making slices interactive Fireworks provides you with two ways to make slices interactive: 868 • For simple interactivity, you can use the drag-and-drop rollover method. • For more complicated interactivity, you can use the Behaviors panel. About rollovers In a rollover, when the mouse pointer rolls over one graphic, that action triggers the display of another graphic. In Fireworks, the trigger is always a Web object (that is, a slice). The simplest rollover swaps an image in State 1 with an image directly below it in State 2. You can also build more complicated rollovers in Fireworks. Adding simple interactivity to slices Because it’s the fastest and most efficient way to create rollover effects, you’ll use the drag-and-drop rollover method. This method allows you to determine what happens when the pointer passes over a slice. The end result is commonly called a rollover image. When a slice is selected, a round circle with crosshairs appears in the center of the slice. This is called a behavior handle. 869 The drag-and-drop method is the most efficient way to create rollover effects. Dragging the behavior handle from a trigger slice and dropping it onto a target slice allows you to quickly create rollover effects. When you select a trigger Web object created by using a behavior handle or the Behaviors panel, all its behavior relationships are displayed. By default, a blue behavior line represents a rollover interaction. The trigger and target can be the same slice. Create and attach a simple rollover A simple rollover swaps in the state directly under the top state and involves only one slice. 1 With the Pointer tool ( ), select the slice you named Home earlier. 2 Click on the crosshairs in the middle of the slice, and drag to the left to link the slice to itself. Release the mouse button, and the Swap Image dialog box opens. 870 The trigger for a rollover and its target can be the same slice. 3 In the Swap Image dialog box, make sure that the slice is set to swap with State 2, which will become your rollover state. 4 Repeat step 3 for each of your remaining slices. 5 Access the States panel by selecting Window > States. The default State 1 should be selected. 871 The States panel shows the rollover states for your document. 6 In the States panel menu, choose Duplicate State, and press OK in the Duplicate State dialog box. State 2 appears as your rollover state. Make sure State 2 is selected before moving on to the next step. 872 Choose Duplicate State to duplicate State 1. 7 In the Layers panel, select the Bitmap layer. 8 Select Filters > Adjust Color > Hue/Saturation, and slide the Hue slider to 70. This is the color that each slice button will change to when the pointer rolls over it. Press OK to accept this setting. 873 Use Hue/Saturation to change the appearance of your rollover state. 9 Click the Preview tab at the top of the document window, or select File > Preview in Browser to test the rollover, then close the browser and return to Fireworks. Test your rollover using the Preview tab. You’ve now finished creating your header graphic, including an interactive navigation bar. But in order to use it on a web page (or on multiple web pages), you must first optimize and export this graphic correctly. Optimizing and exporting Getting your graphics out of Fireworks is a two-step process. Before exporting, you have to optimize your graphics, which 874 involves restricting the file size so that they download quickly, while keeping them looking as good as possible. You can take advantage of the Export Wizard to be guided through the optimization and export process. This wizard recommends settings, and shows you the Image Preview to help with optimization. The Image Preview can also be used independently of the wizard. Using the Export Wizard The Export Wizard guides you through the optimization and export process step by step. 1 Select File > Export Wizard. The Export Wizard dialog box opens. 875 The Export Wizard guides you through optimization and export. 2 Choose to select an export format. If desired, you can also choose to add a Target export file size in this dialog box. Press Continue. 3 Choose JavaScript rollover as the intended export for frames in your document, and press Continue. 876 Choose JavaScript rollover as the intended export for frames in your document. 4 The Analysis Results window opens, recommending different export formats for your graphic, based on its content and potential usage. Press Exit to close the wizard. 877 The Analysis Results window recommends different export formats. 5 The Image Preview window opens with recommended export options. 878 Image Preview displays the document or graphic exactly as it will be exported. Using the Image Preview You can open the Image Preview either through the Export Wizard or from the File menu, by choosing File > Image Preview. The preview area displays the document or graphic exactly as it is exported and estimates file size and download time with the current export settings. 879 When you export animated GIFs or JavaScript rollovers, the estimated file size represents the total size across all states. To increase redraw speed of the Image Preview, deselect Preview. Changing the preview area If you can’t clearly judge the quality of the image(s) in the Preview window, do one of the following: • To zoom in, press the Zoom button ( ) and click in the preview. Alt+click (Windows) or Opt+click (Mac OS) the button in the preview to zoom out. 880 Zoom in to change the preview area. • To pan around the image, click the Pointer button ( ) at the bottom of the dialog box and drag in the preview. Alternately, you can hold down the spacebar when the Zoom pointer is active and drag in the preview. • To divide the preview area to compare settings, click a split-view button ( ). Each preview window can display a preview of the graphic with different export settings. 881 Click a split-view button to divide the preview area. When you zoom or pan while multiple views are open, all views zoom and pan simultaneously. Setting export options You can change the settings to reduce file size without sacrificing quality. 1 In the Options panel on the left side of the Image Preview window, set the JPEG Format to 80 percent quality. The JPEG format was recommended by the Export Wizard, and 882 works well here because there’s no transparency or animation in this graphic. 2 Leave the other settings at their defaults, and examine the download information being displayed at the top of the Image Preview window. By exporting this graphic as a JPEG, you’ll reduce the file size to 10.12K, and it will only take 1 second to download from the Web using a 56 Kbps modem. Use these settings to optimize your graphic as a JPEG. 883 3 Make sure there’s no noticeable loss of quality in the JPEG portion of the Image Preview, as this is often a byproduct of reducing the file size. 4 Click the JPEG portion of the Image Preview once to make sure it is the format that will be exported. Exporting using Image Preview 1 Press Export. The Export dialog box opens. Export directly from Image Preview using the Export dialog box. 2 In the Export dialog box, do the following: 884 • Choose to Export HTML and Images to include your slices and rollovers. • Choose to Export HTML File in the HTML category. • For Slices, choose to Export Slices. • Leave the other settings at their defaults, and choose to save your files to the fw01lessons folder within the CS5lessons folder. 3 Press Save. All the files necessary for you to import this rollover graphic into a web page are exported, including all slices and rollover images, as well as the HTML code that houses and assembles it into a single image. To have more control over this process, you can use workspace tools such as the Optimize panel, the preview buttons in the document window, and the Export dialog box. Optimizing in the workspace Fireworks provides optimization and export features in the workspace itself that give you control over how files are exported. You can use preset optimization options, or you can customize the optimization by choosing specific options such as file type and the color palette used. The Optimize panel contains the most useful controls for optimizing. By default, the panel shows settings that refer to the active selection (a slice or the whole document). 885 The Optimize panel shows settings for the active document. The preview buttons in the document window show how the exported graphic would appear with the current optimization settings. Click on the preview buttons to see how the exported graphic will appear. 886 You can optimize the whole document in the same format, or select individual slices or areas of a JPEG and select different optimization settings for each. Choose a file type Customize the optimization by selecting a specific file type from the Export File Format pop-up menu in the Optimize panel and then setting format-specific options, such as color depth, dither, and quality. You can save the settings as a new preset. GIF Graphics Interchange Format (GIF) is a popular Web graphic format that is ideal for cartoons, logos, images with transparent areas, and animations. Images with areas of solid color compress best when exported as GIF files. GIF files contain a maximum of 256 colors. JPEG Developed by the Joint Photographic Experts Group (JPEG) specifically for photographic or high-color images. JPEG supports millions of colors (24-bit). The JPEG format is best for scanned photographs, images using textures, images with gradient color transitions, and any images that require more than 256 colors. PNG Portable Network Graphic (PNG) is a versatile Web graphic format that can support up to 32-bit color, contain 887 transparency or an alpha channel, and be progressive. However, not all Web browsers can view PNG images. Although PNG is the native file format for Fireworks, Fireworks PNG files contain additional application-specific information that is not stored in an exported PNG file or in files created in other applications. WBMP Wireless Bitmap (WBMP) is a graphic format created for mobile computing devices such as cell phones and PDAs. This format is used on Wireless Application Protocol (WAP) pages. Because WBMP is a 1-bit format, only two colors are visible: black and white. TIFF Tagged Image File Format (TIFF) is a graphic format used for storing bitmap images. TIFF files are most commonly used in print publishing. Many multimedia applications also accept imported TIFF files. BMP The Microsoft Windows graphic file format. Many applications can import BMP images. Saving optimization settings By default, Fireworks remembers the last optimization settings you used after saving or exporting a file. You can then easily apply these settings to new documents. 888 Saved optimization settings appear at the bottom of the Settings pop-up menu in the Optimize panel and in the Property Inspector. When you save a preset, the file is saved in the Export Settings folder in the Fireworks configuration folder on your hard drive. To save optimization settings: 1 From the Optimize panel Options menu, select Save Settings. Select Save Settings to save optimization settings. 889 2 Type a name for the optimization preset and press OK. Exporting a single image If you’ve opened an existing image in Fireworks, you can save it rather than export it. 1 In the Optimize panel, select a file format and set format-specific options. 2 Select File > Export. 3 Select a location to export the image file to. 4 Enter a filename with no extension. An extension is added during export based on the file type. 5 From the Export pop-up menu, select Images Only. 6 Press Save. Export a sliced document As you’ve seen, when you export a sliced Fireworks document, an HTML file and all associated images are exported. The HTML file can then be viewed in a web browser or imported into other applications for further editing. You can also choose to export only selected slices from your graphic. 890 Exporting selected slices 1 Shift+click to select multiple slices. 2 Select File > Export. 3 Select a location in which to store the exported files, such as a folder within your local web site. 4 From the Export pop-up menu, select HTML and Images. 5 Enter a filename with no extension. An extension is added during export based on the file type. If you are exporting multiple slices, Fireworks uses the name you enter as the root name for all exported graphics. 6 From the Slices pop-up menu, select Export Slices. 891 Use settings in the Export dialog box to define which slices are exported. 7 To export only the slices you selected before export, choose Selected Slices Only, and ensure that the Include Areas without Slices option is not selected. 8 Press Save. Results of exporting When you export HTML from Fireworks, it produces the following: • If the document contains interactive elements, all the HTML code necessary to reassemble sliced images and any 892 JavaScript code. The HTML code automatically contains links to the exported image. • One or more image files, based on how many slices are in your document and how many states you include in rollovers. When you export HTML from Fireworks, it produces a variety of files. • A file called spacer.gif, if necessary. The spacer.gif file is a transparent, 1-pixel-by-1-pixel GIF image that Fireworks uses to fix spacing problems when sliced images are reassembled in the HTML code. You can choose whether Fireworks exports a spacer. 893 • If you export or copy HTML to Dreamweaver, notes files may be created that make the integration between the two programs easier. These files have an .mno extension. Congratulations! You have now completed your introduction to Adobe Fireworks. You can use the knowledge gained from creating a web page header graphic, complete with vector and bitmap elements, slices, and rollover interactivity, to inform your future use of Fireworks. Self study 1 Create a new file, and choose File > Import to import a bitmap image into the workspace. Use the selection tools to select a portion of the graphic, and apply a filter to that selection, leaving the other pixels untouched. 2 Create a new file, and draw a pie chart using the Pie Auto Shape tool. Use the other drawing tools to edit the dimensions of the pie’s slices, and then experiment with applying color and text to the slices. 3 Use the Optimize panel in the workspace to optimize one of the graphics you’ve created, choosing the appropriate export settings for the content of the graphic. Save your optimization settings for future use with a similar graphic. Review Questions 1 How do vector graphics differ from bitmap graphics? 2 What is the default format for all new Fireworks files? 894 3 How can you tell whether a text block is auto-sizing or fixed-width? 4 What is the difference between the Web layer and other layers in your document? 5 When is it best to optimize a graphic as a JPEG? What images are best exported as GIFs? Answers 1 Vector graphics are drawn objects that use anchor points, lines, and vectors, or mathematical equations that contain color and position information. Bitmap graphics are composed of dots (or pixels) arranged inside a grid, and the image is defined by the location and color value of each pixel in the grid. 2 New documents in Fireworks default to its native file format, Portable Network Graphic (PNG). This means that regardless of the optimization and export settings you select, the original Fireworks PNG file is preserved to allow easy editing later. 3 When the text pointer is active within a text block, a hollow circle or hollow square appears in the upper right corner of the text block. The circle indicates an auto-sizing text block; the square indicates a fixed-width text block. Double-click the corner to change from one text block to the other. 4 The Web layer appears by default as the top layer in every Fireworks document. It contains Web objects, such as slices, 895 used for adding interactivity to exported documents. You can’t delete, duplicate, move, or rename the Web layer. You also can’t merge objects that live on the Web layer. 5 The JPEG format is best for scanned photographs, images using textures, images with gradient color transitions, and any images that require more than 256 colors. Images with areas of solid color compress best when exported as GIF files, because they contain a maximum of 256 colors. 896 Illustrator Lesson 1: Illustrator CS5 Essentials Illustrator can be used to create many types of artwork. In this lesson, you will use the shape tools, work with basic selection techniques, and assemble some artwork using object stacking order. Along the way, you will learn some helpful tips for creating artwork on your own. What you’ll learn in this lesson: • Creating shapes • Selecting objects using the selection tools • Transforming shapes 897 • Using layers to organize artwork Starting up Before starting, make sure that your tools and panels are consistent by resetting your workspace. See “Resetting Adobe Illustrator CS5 Preferences” on page 3. You will work with several files from the ai01lessons folder in this lesson. Make sure that you have loaded the CS5lessons folder onto your hard drive from the supplied DVD or online. ePub users go to www.digitalclassroombooks.com/epub/cs5. See “Loading lesson files” on page 4. Using the shape tools Making shapes is an important part of using Adobe Illustrator. In Lesson 3, “Working with the Drawing Tools,” you learn how to make your own custom shapes and lines using the Pen tool, but many times you will work with shapes that are ready-to-go, right off the Tools panel. Though it may seem simple if you have used Illustrator before, transferring a shape from the Tools panel to the artboard can be a little confusing for new users. To start this lesson, you’ll create a new blank document; think of it as a piece of scratch paper that you can use for shape practice. You will put a number of shapes on this new document throughout the exercise; feel free to delete or reposition them as you move on to make room for new ones. You won’t use this document in any other lessons. 898 1 In Illustrator, choose File > New, or use the keyboard shortcut Ctrl+N (Windows) or Command+N (Mac OS). The New Document dialog box appears. 2 If they are not already selected, choose Print from the New Document Profile drop-down menu and Inches from the Units drop-down menu. When you change the units to inches, the New Document Profile setting changes to [Custom]. Keep in mind that the Document Profile can be changed after the file has been created, as can the units of measurements. Specify the settings of your new Illustrator document. 3 Press OK. A new blank document appears. 4 Select the Rectangle tool ( ) from the Tools panel. Click and drag anywhere on the artboard. By clicking and dragging, you determine the placement and size of the rectangle. Typically, you would pull from the upper-left corner diagonally to the lower-right corner. 899 Click and drag from the upper-left to the lower-right corner. 5 It is a good idea to save your files often after you start working. Choose File > Save As to save this file. The Save As dialog box appears. 6 Type ai0301_work.ai into the File name (Windows) or Save As (Mac OS) text field, navigate to the ai01lessons folder within the CS5lessons folder that you dragged onto your desktop, then press Save. 7 When the Illustrator Options dialog box appears, leave the version set to Illustrator CS5 and press OK. The file is saved. If you are not able to save in the ai01lessons folder, the folder may be locked. See the tip on page 4 for instructions to unlock your lessons folder. Repositioning and visually resizing the rectangle Now that you have your first shape on the page, perhaps you want to relocate it or alter its shape or size. 900 1 Choose the Selection tool ( ) from the Tools panel. A bounding box with eight handles appears around the rectangle you just drew. If you do not see the eight handles, make sure you have the rectangle selected by clicking on it once. If the bounding box is still not visible, choose View > Show Bounding Box. The bounding box is a feature that can be toggled on or off and that allows you to transform a shape without leaving from the Selection tool. The bounding box provides handles to help transform shapes. 2 Using the Selection tool, click inside the rectangle and drag it to another location on the page (do not click on the handles, as that resizes the shape). If you click inside a shape and it becomes unselected, it probably has no fill. Fill and stroke are discussed in Lesson 2, “Adding Color.” By pressing the letter D, you revert back to the default white fill and black stroke, then you can easily select the shape. 901 3 Hover over the bottom-middle handle until the cursor becomes a vertical arrow and the word path appears. Click and drag. When you click on a middle handle and drag, you adjust the size of the selected handle’s side only. 4 Click on a corner handle and drag. When you click on a corner handle, you adjust both the sides connected to the corner point. Click and drag a middl