Home
Username:
Password:
Adobe Fireworks CS3 Tutorials

Getting Started / Explaining Fireworks

Subtitles of the Movie

Fireworks has been around for a number of years. It's not as popular or well-known as some of the other graphics applications from Adobe, such as Photoshop, or Illustrator, so it may be unfamiliar to you, but Fireworks is really quite a versatile program, specifically it's designed for creating and editing and optimizing Web graphics. With Fireworks you can create and edit both bitmap and vector images. You can quickly and easily design Web effects, such as roll overs, navigation bars, and pop-up menus. You can use Fireworks to crop and optimize graphics to reduce their file size, and also save time by it allows you to automate repetitive tasks. Fireworks is smaller and much more focused and streamlined than either Photoshop or Illustrator, but yet does many of the jobs that Web designers require from both of these workhorses, so rather than using both Photoshop and Illustrator, you can combine those activities just to one program, Fireworks. After creating or modifying your graphics, Fireworks will export or save your files, as JPGS, GIFS, or one of another graphic formats, along with HTML files containing HTML tables and JAVA script code; all of these for use on the Web. You can also export or save file types specific to other applications, such as Photoshop or Flash, if you want to continue working with these files in those programs, in addition, it's easy to make Fireworks the default image editor for authoring applications like Dreamweaver, or Director. In the Fireworks Tools panel there are distinct sections containing tools for drawing and editing vectors or bitmaps. In Fireworks the tool you select determines whether the object you create or edit is a vector or a bitmap. For example, the pen tool, right here in the Vector section, creates and modifies vector images, whereas the paintbrush tool, here in the bitmap section of the tools window, creates bitmap images. Notice that the text tool here is in the Vector section, and using this tool you create and modify text. This text is vector; it can even be spell-checked using Fireworks' great spell checker. After drawing vector objects, bitmap objects, or text elements, you can use a wide variety of tools, effects, commands, and techniques to enhance or complete your graphics. For example, you can apply filters to the images. You can go into the Button Editor to create interactive navigation menus and buttons like I have here. Here's the button editor. Notice that when you do create these buttons, they appear here in the Library window here of the Assets panel, where a single modification is made to this master button. For example, let's change the color to purple, and click Done. We'll change all of the buttons that are based on that master symbol here in the Library. You create interactive graphics in Fireworks by drawing slices or hot-spots on your Fireworks canvasses, using either the Hotspot tool or the Slice tool here in the Web section of the Tools panel. The Slices tool creates these blue-green rectangles. This cuts or slices the graphic into different sections. To these sections you can apply roll over behaviors, or animations, or even URL links so that each of these slices links to a different URL page. You select the slice and then here in the link text field of the properties inspector, type your link. Notice that right here I have some buttons and there are slices around each one. If I go to the preview panel, notice that I can demonstrate these animations, so those slices make those animations possible. You can even take each of the slices and using the Optimize panel, optimize each slice differently than the others. So, for example, this slice I can optimize as a GIF; the adjacent slice as a JPG. These slices then allow you to fine-tune how your pages will be optimized. Those sections are optimized better as GIFS. You can slice those up and using the Optimize panel here set the optimization export so that those files are exported as GIFS and those sections that are better optimized as JPGS, slice those up and set them for JPG here in the Optimize panel. One of the most important of Fireworks' many features, are its powerful optimization tools to help you find the best balance between small file sizes and acceptable visual quality when exporting graphics to your Web pages. You can use Fireworks' handy optimize panel, as I've demonstrated previously, or the very powerful Export Wizard. Part of this wizard includes this image preview panel, where you have a single view pane, a dual view pane, or a four-up pane. Normally you'll start in the 2-view pane and decide whether you want to export as a GIF or a JPG using the image preview to see how the images look, and then seeing the file size. Notice that this is 17K, 2 seconds; this is 34K, 5 seconds, so in this case the GIF is a better option. Then you move to the 4-panel view, change all of the settings to various types of GIF images and using the information in the images here, all in one place, decide on which of these four provides the best results, and then go ahead and export, based on those results. In this way, you can quickly compare the quality and sizes of the exported graphics, insuring that all files that are exported from Fireworks load as quickly as possible in the browser, but still look acceptable.

Tutorial Information

Course: Adobe Fireworks CS3
Author: James Gonzalez
SKU: 33836
ISBN: 1-934743-42-9
Release Date: 2008-01-25
Duration: 8.5 hrs / 93 lessons
Work Files: Yes
Captions: For Online University members only
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available