Macromedia fireworks MX bible phần 6 pdf

471 Chapter 14 ✦ Capturing and Importing Figure 14-8: This FreeHand vector object instantly became a Fireworks vector object after being dragged and dropped, and then it quickly fell victim to the Inner Bevel Live Effect and a Fiber texture fill. Importing External Files Sharing objects between applications on your computer is fine, but sometimes you’ll want to import whole files into Fireworks. This is as easy as opening Fireworks’ own PNG files. The process is slightly different depending upon whether you’re importing bitmap image files or vector art. In addition to using File ➪ Import, you can quickly import entire files into Fireworks by dragging them from Explorer on Windows or the Finder on Macintosh, and then dropping them into a Fireworks document window. Grasping bitmap image files Imported bitmap image files appear as bitmap objects in Fireworks. Table 14-2 details the bitmap image file formats that Fireworks understands. Tip Fireworks document window Freehand document window 193662-1 ch14.F 8/2/02 2:54 PM Page 471 472 Part IV ✦ Coordinating Workflow Table 14-2 Bitmap Image Files Fireworks Can Import Filename Macintosh Format Extension Type Code Notes Fireworks .png PNGf A PNG file with Fireworks-only File Format information, such as vectors, added. This is the default file format for Fireworks 3 and 4. Fireworks 4.0 .png PNGf Updated automatically when opened. Can be saved and opened again in Fireworks 4.0. Fireworks 3.0 .png PNGf Updated automatically when opened. Can be saved and opened again in Fireworks 3.0. Fireworks 2.0 .png PNGf Updated automatically when opened. Cannot be saved and then opened again in Fireworks 2.0. Fireworks 1.0 .png PNGf Updated automatically when opened. Cannot be saved and then opened again in Fireworks 1.0. The Background is placed on its own layer. Portable .png PNGf Standard PNG documents that don’t Network Graphic have extra Fireworks information. Photoshop .psd 8BPS Version 3.0 or later only. Layers, Layer Document Effects, and editable text are preserved, except for editable text layers from Photoshop 6. GIF .gif GIFf Graphics Interchange File Format. Static or animated. Each frame of an animated GIF is placed on its own frame in Fireworks. JPEG .jpg, .jpeg, JPEG Avoid importing JPEG images due to .jpe, .jfif their lossy compression scheme and low quality. Targa .tga TPIC Common UNIX image format. WBMP .wbm WBMP Wireless bitmap format. Used in wireless devices. 193662-1 ch14.F 8/2/02 2:54 PM Page 472 473 Chapter 14 ✦ Capturing and Importing Filename Macintosh Format Extension Type Code Notes TIFF .tif or .tiff TIFF Tag Image File Format. High-quality lossless compression similar to PNG. Microsoft Bitmap .bmp BMP Default image format for Windows 3.0 and later. PICT .pict, .pic, PICT Default image Combination vector- (Macintosh only) .pct, .p bitmap format. Fireworks renders any vector as a bitmap. Importing a bitmap image into an existing document To import a bitmap image into an existing Fireworks document, follow these steps: 1. Choose File ➪ Import, or use the keyboard shortcut, Ctrl+R (Command+R). Alternatively, you can use the command Insert ➪ Image. Fireworks displays the Import File dialog box (see Figure 14-9). Figure 14-9: The Import File dialog box shows previews as you navigate and then choose a file to import into Fireworks. 193662-1 ch14.F 8/2/02 2:54 PM Page 473 474 Part IV ✦ Coordinating Workflow 2. In the Import File dialog box, select your file and click Import after you finish. 3. Hover your mouse cursor over the Fireworks document window into which you would like to import. The cursor changes to the import cursor, which resembles a right angle. 4. Position the import cursor where you want the upper-left corner of the imported image to be located, and then do one of the following: • If you want to insert the image at its original size, click once. • If you want to insert the image so that it fits a specific area in your docu- ment, click and drag a box that delineates that specific area. Fireworks resizes the image to fit that area while maintaining the image’s aspect ratio. The chosen image is inserted into the document as a new bitmap object. Bringing in Photoshop files Most of the bitmap files that Fireworks can import are fairly interchangeable; importing a PNG or TIFF image results in a single bitmap object inside Fireworks. Photoshop documents are a bit different, though, because they contain layer infor- mation. Therefore, they can contain the equivalent of multiple Fireworks bitmap objects. Photoshop files also contain unique attributes, such as editable text and layer effects, which have corresponding features in Fireworks. If your Photoshop file contains layers, they are changed into Fireworks objects upon import, instead of into Fireworks layers. Although the nomenclature is different, Photoshop layers and Fireworks objects perform a similar function within each application. Importing multiple Photoshop files into a Fireworks document results in each document being placed into its own Fireworks layer, while still maintaining the individual elements of each document as Fireworks objects. Layer Effects are similar to many of Fireworks Live Effects, creating editable bevels, drop shadows, and glows. In fact, when you import a Photoshop document into Fireworks, all Layer Effects are converted directly into their corresponding Live Effects and remain editable, as shown in Figure 14-10. Also note that the four layers of the Photoshop document have been translated into four separate Fireworks objects within one Fireworks layer. 193662-1 ch14.F 8/2/02 2:54 PM Page 474 475 Chapter 14 ✦ Capturing and Importing Figure 14-10: Importing Photoshop files maintains layers, layer effects — converted to Live Effects — and editable text. Although the translation of a Photoshop document into a Fireworks document can be remarkably accurate, you can fine-tune the process to suit your workflow in the Import panel of Fireworks Preferences. To modify the way that Fireworks imports a Photoshop document, follow these steps: 1. Choose Edit ➪ Preferences, or use the keyboard shortcut, Ctrl+U (Command+U). Fireworks displays the Preferences dialog box. 2. In the Preferences dialog box, select the Import tab (Windows), or the Import option (Macintosh). Fireworks displays the Import preference options (see Figure 14-11). Layer Effects become Live Effects Text layer becomes text object Photoshop document window Fireworks document window Photoshop layers become Fireworks objects 193662-1 ch14.F 8/2/02 2:54 PM Page 475 476 Part IV ✦ Coordinating Workflow Figure 14-11: The Import preference options enable you to choose how Fireworks imports a Photoshop file. 3. Under Layers, choose Convert to Fireworks Objects in order to change the layers of the Photoshop document to Fireworks objects; check Share Layer Between Frames in order to share the Fireworks layer that contains your new objects across all the frames of your document. To distribute Photoshop layers to Fireworks frames instead, choose Convert to Frames. 4. Under Text, choose Editable to convert Photoshop editable text to Fireworks text objects. Choose Maintain Appearance to flatten editable text into Fireworks bitmap objects. You might want to flatten text when you know you won’t need to edit it so that the appearance will be even closer to the original Photoshop document. You might also choose this option if you know you don’t have the correct typefaces installed. 5. Check Use Flat Composite Image to ignore all the special attributes of the Photoshop document and import it as a single flat image, as though it were a TIFF. This provides the maximum similarity to the original Photoshop image, and is a good choice if you’re only using Fireworks to optimize and export your Photoshop document. 6. Click OK when you’re done. After your Import preferences are set, you’re ready to import a Photoshop document, confident that it will be imported in the way that’s most useful to you. To import a Photoshop document into a Fireworks document, follow these steps: 1. Choose File ➪ Import, or use the keyboard shortcut, Ctrl+R (Command+R). Fireworks displays the Import File dialog box. 2. Navigate to and select the Photoshop file that you want to import. Click Open when you’re done. 193662-1 ch14.F 8/2/02 2:54 PM Page 476 477 Chapter 14 ✦ Capturing and Importing 3. Hover your mouse cursor over the Fireworks document window into which you would like to import. The cursor changes to the import cursor, which looks like a right angle. 4. Position the import cursor where you want the upper-left corner of the imported image to be located, and then do one of the following: • If you want to insert the image at its original size, click once. • If you want to insert the image so that it fits a specific area in your docu- ment, click and drag a box that delineates that specific area. Fireworks resizes the image to fit that area while maintaining the image’s aspect ratio. The Photoshop document is inserted into your Fireworks document. Fireworks can import Photoshop file formats from version 3 through version 7. Photoshop was a Macintosh-only application before version 3, and the file format was also different. Photoshop 2.5 or earlier documents have a Macintosh Type of “8BIM,” rather than the newer format’s “8BPS,” and they typically don’t have a file- name extension. Open them in Photoshop 3, or higher, and then save them in the newer format before attempting to import them into Fireworks. Although Fireworks can’t directly import the native file formats of applications other than Photoshop, many other bitmap-editing applications, such as Painter, can export as Photoshop documents. You can then import them into Fireworks with layers intact. Corel Photo-Paint is a popular Photoshop alternative that can save images as Photoshop documents and retain layer information. Unfortunately, Fireworks imports Photo-Paint-created Photoshop documents as flat images. Discovering vector art files If you prefer to do your drawing in a traditional vector graphics drawing program, Fireworks is the ideal place to finish up your work and prepare it for the Web. Under most circumstances, vector objects remain vector objects, just as if you had created them in Fireworks itself. Table 14-3 details the vector file types that Fireworks can import. These file types cover the most common vector drawing tools. One vector art file format that is notable for its absence is Macromedia’s own open vector standard, Shockwave Flash (.swf). Moving objects between Flash and Fireworks involves exporting from Flash as an Illustrator document and then importing into Fireworks. Another fairly common format that Fireworks can’t import is a Windows Meta File (.wmf), which is commonly used for vector graphics clip art collections for Windows users. To open these files, first open them in another application and export them as one of the file types in Table 14-3. Caution Caution 193662-1 ch14.F 8/2/02 2:54 PM Page 477 478 Part IV ✦ Coordinating Workflow Table 14-3 Vector Graphics File Types Fireworks Can Import Filename Macintosh Format Extension Type Code Notes FreeHand fh7, .fh8, AGD3 The vector-based format of FreeHand 7 Document .fh9, or fh10 through 10. Illustrator 7 .ai uMsk Adobe Illustrator 7’s vector-based Document default format. CorelDRAW 8 .cdr CDR8 CorelDRAW’s vector-based format must Document have been saved without CorelDRAW’s built-in bitmap or object compression in order to be openable in Fireworks. Encapsulated .eps EPSF A format that most desktop publishing PostScript applications can export. Fireworks opens and imports EPS files as bitmap objects only, and does not retain vector information. Importing a vector art file To import a vector art file from Macromedia FreeHand, Adobe Illustrator, or CorelDRAW into an existing Fireworks document, follow these steps: 1. Choose either File ➪ Import, or use the keyboard shortcut, Ctrl+R (Command+R). Fireworks displays the standard Import File dialog box. 2. In the Import File dialog box, select your vector art document and click Open after you’re done. Fireworks displays the Vector File Options dialog box (see Figure 14-12), with suggested settings appropriate to the document you are importing. 3. In the Vector File Options dialog box, change the dimensions or resolution of the vector art, if necessary. Change the dimensions with the Scale, Width, or Height boxes. Change the print resolution with the Resolution box, if you have a reason to do so. 4. Choose whether Fireworks should antialias paths and/or text, and the type of antialiasing you desire, using the Anti-Alias checkboxes and the Anti-Alias Type option list. 5. Under File Conversion, select what to do with pages from the Page Import option list. You can choose to open a single page by choosing Open a Page and putting the page number in the Page box. You can also choose Open Pages as Frames to distribute all the pages in the file to frames in Fireworks. 193662-1 ch14.F 8/2/02 2:54 PM Page 478 479 Chapter 14 ✦ Capturing and Importing Figure 14-12: The Vector File Options dialog box allows you to specify how your vector file is imported. 6. Under File Conversion, select what to do with layers from the Layers Import option list. Choose Ignore Layers to flatten the layers. Choose Remember Layers to keep them as they are. Choose Open Layers as Frames in order to distribute all the layers in the file to frames in Fireworks. 7. To include invisible and background layers, select the appropriate checkboxes. 8. Under Render as Images, select how you want to handle complex vector objects. Deselect all the boxes to maintain vector information under all circumstances. 9. Hover your mouse cursor over the Fireworks document window into which you would like to import. The cursor changes to the import cursor, which looks like a right angle. 10. Position the import cursor where you want the upper-left corner of the imported vector art to be located, and then do one of the following: • If you want to insert the vector art at its original size, click once. • If you want to insert the vector art so that it fits a specific area in your document, click and drag a box describing that specific area. Fireworks resizes the image to fit that area while maintaining the image’s aspect ratio. The vector information is inserted into the document as a new vector object. Layers import option list Page import options list Anti-Alias Type option list 193662-1 ch14.F 8/2/02 2:54 PM Page 479 480 Part IV ✦ Coordinating Workflow Importing an EPS file Most desktop publishing applications can export to an Encapsulated PostScript (EPS) file. Although an EPS file technically contains vector information, opening EPS files in Fireworks flattens the entire file into one bitmap object. To import an EPS file into an existing Fireworks document, follow these steps: 1. Choose either File ➪ Import, or use the keyboard shortcut, Ctrl+R (Command+R). Fireworks displays the standard Import File dialog box. 2. In the Import File dialog box, select your EPS file, and click Open when you’re done. Fireworks displays the EPS File Options dialog box (see Figure 14-13). Figure 14-13: The EPS File Options dialog box enables you to fine tune how your EPS document is imported. 3. In the EPS File Options dialog box, change the dimensions or resolution of the incoming image information, if necessary. Change the dimensions with the Width, or Height boxes. Change the print resolution with the Resolution box, if you have a reason to do so. Check Constrain Proportions to keep from distorting the height to width ratio of your image. 4. Choose whether Fireworks should antialias the image using the Anti-Alias checkbox. Click OK when you’re done. 5. Hover your mouse cursor over the Fireworks document window into which you would like to import. The cursor changes to the import cursor, which resembles a right angle. 193662-1 ch14.F 8/2/02 2:54 PM Page 480 [...]... workaround using Macromedia Flash as an example, see “Importing Flash animations,” later in this chapter To open a group of independent documents as one animation, follow these steps: 1 Choose File ➪ Open, or use the keyboard shortcut, Ctrl+O (Command+O) Fireworks displays the Open dialog box (see Figure 14- 16) 19 366 2-1 ch14.F 8/2/02 2:54 PM Page 489 Chapter 14 ✦ Capturing and Importing Figure 14- 16: Files... to 2 56 colors ✦ Windows: Matches the system palette used by the Windows operating system when the display is set to 2 56 colors 505 20 366 2-1 ch15.F 5 06 8/2/02 2:55 PM Page 5 06 Part IV ✦ Coordinating Workflow ✦ Grayscale: Converts the image to a grayscale graphic with a maximum of 2 56 shades of gray ✦ Black & White: Reduces the image to a two-tone image; the Dither option is automatically set to 100... FreeHand, CorelDRAW, and Illustrator formats is easily imported into Fireworks Many stand-alone clip art collections are also available, either on CD-ROM, or on the Web Be careful to choose collections in formats that Fireworks can import and favor collections of vector images because they provide maximum flexibility in Fireworks 481 19 366 2-1 ch14.F 482 8/2/02 2:54 PM Page 482 Part IV ✦ Coordinating Workflow... to Fireworks MX Now you can rebuild Web sites in seconds, keeping all behaviors and JavaScript intact Not only does Fireworks rebuild a Web page’s graphical elements, it also rebuilds all text areas within the file as text slices within Fireworks The Reconstitute Table command works on standard HTML and XHTML files As if this functionality weren’t enough to make your redesign job much simpler, Fireworks, ... first table of the Web page to be imported and click the left mouse button 4 Fireworks imports the HTML or XHTML file and rebuilds the graphics and the behaviors in the first table It leaves the file ready for you save as a source PNG and then edit, as needed, for your site redesign 485 19 366 2-1 ch14.F 4 86 8/2/02 2:54 PM Page 4 86 Part IV ✦ Coordinating Workflow Making Screen Captures Capturing all or... quickly based on existing clip art images, which are easily modified in Fireworks to suit a particular project Fireworks includes an extensive collection of clip art on its CD-ROM; almost 2,000 separate Fireworks documents Thankfully, these documents are also referenced by an Extensis Portfolio database file called Fireworks MX Clipart.fdb.” This document opens in the free Extensis Portfolio browser... you will import into Fireworks Flash can export seven vector file types, and Fireworks can import three vector file types (plus EPS as a bitmap object), but Adobe Illustrator is the only vector file type that they have in common Caution Choose Adobe Illustrator, not Adobe Illustrator Sequence 6 In Fireworks, choose either File ➪ Open, or the keyboard shortcut, Ctrl+O (Command+O) Fireworks displays the... done Fireworks displays the Vector File Options dialog box 19 366 2-1 ch14.F 8/2/02 2:54 PM Page 491 Chapter 14 ✦ Capturing and Importing 8 Under File Conversion, select Convert Layers to Frames in the Layers Import option list, so that each layer of your Adobe Illustrator file is placed in a Fireworks frame 9 Under Render as Images, deselect Groups Over and Tiled Fills Over Click OK when you’re done Fireworks. .. Flash animation is now a Fireworks animation, complete with vector information Objects are editable and are ready to be manipulated with Fireworks tools and exported as an animated GIF Summary You can incorporate elements into Fireworks documents from external sources When you’re importing elements into Fireworks, keep these points in mind: ✦ You can acquire images directly into Fireworks from TWAIN-compliant... You can copy and paste, or drag and drop elements from other applications into Fireworks ✦ You can import a long list of bitmap and vector file types into Fireworks ✦ Fireworks imports Photoshop files with layer information, editable text, and layer effects intact Fireworks can also export to the Photoshop file format ✦ Fireworks includes an extensive collection of clip art, as well as the Portfolio . appear as bitmap objects in Fireworks. Table 14-2 details the bitmap image file formats that Fireworks understands. Tip Fireworks document window Freehand document window 19 366 2-1 ch14.F 8/2/02 2:54. becomes text object Photoshop document window Fireworks document window Photoshop layers become Fireworks objects 19 366 2-1 ch14.F 8/2/02 2:54 PM Page 475 4 76 Part IV ✦ Coordinating Workflow Figure. (Command+O). Fireworks displays the Open dialog box (see Figure 14- 16) . Caution Cross- Reference 19 366 2-1 ch14.F 8/2/02 2:54 PM Page 488 489 Chapter 14 ✦ Capturing and Importing Figure 14- 16: Files