Fireworks CS5 Essential Training
Illustration by John Hersey

Improving the workflow


Fireworks CS5 Essential Training

with Jim Babbage

Video: Improving the workflow

Establishing a comfortable workflow, especially when you are prototyping projects, is a really important component to being efficient and making the best of your time. So I would like to share some things with you that I found useful and maybe they'll solve some of the problems you are already experiencing. Let me start off with Pages here, and one other things you're going to run into when you're coming up with concepts for a project is inevitably the clients is going to want to see a slightly different variation on what you're doing. Now, rather than build a whole bunch of different files or edit your existing file and lose your changes, make use of pages to show those different iterations.
Expand all | Collapse all
  1. 3m 42s
    1. Welcome
      1m 22s
    2. What is Fireworks?
      1m 59s
    3. Using the exercise files
  2. 1h 27m
    1. Creating and opening documents
      7m 36s
    2. Understanding the interface
      9m 43s
    3. Working with tabbed documents
      6m 18s
    4. Setting up rulers, guides, and grids
      10m 7s
    5. Using tooltips and Smart Guides
      5m 40s
    6. Working with panels
      9m 29s
    7. Working with pages
      8m 59s
    8. Working with layers
      13m 13s
    9. Working with states
      4m 35s
    10. Using the Properties panel
      4m 38s
    11. Using the Preferences panel
      7m 34s
  3. 52m 30s
    1. Understanding the Fireworks PNG format
      2m 11s
    2. Saving and exporting files
      5m 11s
    3. Importing files
      5m 34s
    4. Opening Photoshop files
      6m 7s
    5. Opening Illustrator files
      3m 58s
    6. Exporting a single file
      9m 57s
    7. Using the Image Preview window
      1m 52s
    8. Using the Export Area tool
      3m 10s
    9. Creating PDF files
      4m 16s
    10. Saving Photoshop files
      5m 48s
    11. Using Fireworks files for Illustrator
      4m 26s
  4. 1h 2m
    1. Understanding bitmaps
      1m 32s
    2. Resizing images
      3m 48s
    3. Using the selection tools
      8m 0s
    4. Using the drawing tools
      8m 19s
    5. Retouching with the corrective tools: Rubber Stamp
      12m 16s
    6. Using the bitmap effects tools: Blur, Sharpen, and Replace Color
      7m 33s
    7. Using more bitmap effects tools: Dodge and Burn
      7m 1s
    8. Improving images using the Levels filter
      8m 15s
    9. Creating a bitmap mask with a selection
      6m 2s
  5. 1h 10m
    1. Looking at the vector toolset
      6m 53s
    2. Using the Pen tool
      7m 32s
    3. Editing vector shapes with the Freeform and Reshape Area tools
      4m 35s
    4. Filling shapes with patterns and live filters
      3m 17s
    5. Using Auto Shapes
      7m 24s
    6. Using shapes as image elements
      4m 16s
    7. Scaling shapes
      5m 28s
    8. Masking objects with vector shapes
      7m 13s
    9. Applying strokes
      5m 52s
    10. Using Vector Path and Path Scrubber
      6m 9s
    11. Using the Compound Shape tool
      7m 40s
    12. Using Snap to Pixel
      2m 15s
    13. Using Gradient Dither
      1m 46s
  6. 51m 3s
    1. Understanding symbols
      5m 41s
    2. Creating graphic symbols
      13m 5s
    3. Creating button symbols
      10m 22s
    4. Creating animation symbols
      5m 4s
    5. Sharing symbols with the Common Library
      1m 37s
    6. Editing the instance of a symbol
      3m 46s
    7. Adding component symbols to a design
      8m 37s
    8. Exporting and importing symbols
      2m 51s
  7. 17m 34s
    1. Creating GIF animations
      9m 31s
    2. Animating with Twist and Fade
      3m 47s
    3. Creating a tweened animation
      4m 16s
  8. 26m 46s
    1. Using text in Fireworks
      7m 19s
    2. Understanding text properties
      3m 14s
    3. Adding text in a path
      4m 43s
    4. Adding text to a path
      4m 31s
    5. Using text as a mask
      3m 35s
    6. Maintaining crisp text in web images
      3m 24s
  9. 28m 35s
    1. Having fun with filters
      8m 44s
    2. Working with Styles
      4m 10s
    3. Using Blend Modes
      4m 40s
    4. Converting bitmap selections to paths
      3m 50s
    5. Working with Adobe Swatch Exchange files
      2m 33s
    6. Using the Kuler panel for color inspiration
      4m 38s
  10. 1h 14m
    1. Understanding the web toolset
      1m 51s
    2. Creating hotspots
      6m 22s
    3. Using the Slice tool
      8m 57s
    4. Using a master page
      5m 20s
    5. Sharing layers across pages
      4m 49s
    6. Sharing web layers across pages
      3m 30s
    7. Using HTML component symbols
      3m 15s
    8. Creating choices and showing design options to clients
      7m 7s
    9. Importing pages
      2m 47s
    10. Previewing the mockup
      4m 17s
    11. Using HTML prototyping
      5m 22s
    12. Improving the workflow
      20m 30s
  11. 33m 19s
    1. Optimizing images for export, part 1
      15m 36s
    2. Optimizing images for export, part 2
      13m 36s
    3. Generating a CSS-based layout
      4m 7s
  12. 22m 20s
    1. Integrating Fireworks, FXG, and Flash Catalyst
      3m 56s
    2. Integrating Fireworks and Flash
      3m 46s
    3. Using roundtrip editing between Dreamweaver and Fireworks
      5m 52s
    4. Copying and pasting objects to Dreamweaver
      2m 57s
    5. Integrating Fireworks and Device Central
      4m 13s
    6. Working with Bridge
      1m 36s
  13. 13s
    1. Goodbye

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Fireworks CS5 Essential Training
8h 51m Beginner Apr 30, 2010

Viewers: in countries Watching now:

In Fireworks CS5 Essential Training, author Jim Babbage gives a detailed overview of Fireworks CS5, Adobe's software for creating and optimizing web graphics and interactive prototypes. This course includes a detailed tour of the interface, the enhanced PNG format, and the image editing toolset in Fireworks. Critical concepts, such as prototyping for HTML applications and working with symbols, the heart of an efficient workflow in Fireworks, are covered in detail. Exercise files are included with this course.

Topics include:
  • Customizing the workspace
  • Working with pages, layers, and states
  • Importing content
  • Comparing bitmaps and vectors
  • Creating and editing vector shapes
  • Converting artwork into graphic, button, and animation symbols
  • Animating in Fireworks
  • Maintaining crisp text in web images
  • Sharing content between pages
  • Optimizing images for export
  • Integrating with Device Central, Dreamweaver, Flash, and Flash Catalyst
Jim Babbage

Improving the workflow

Establishing a comfortable workflow, especially when you are prototyping projects, is a really important component to being efficient and making the best of your time. So I would like to share some things with you that I found useful and maybe they'll solve some of the problems you are already experiencing. Let me start off with Pages here, and one other things you're going to run into when you're coming up with concepts for a project is inevitably the clients is going to want to see a slightly different variation on what you're doing. Now, rather than build a whole bunch of different files or edit your existing file and lose your changes, make use of pages to show those different iterations.

So, for example, I've got my little olive_site design up here, and the clients ask for a couple of changes. They want to see a smaller logo and a smaller header, for example. So rather than make any changes here, I'm going to create a duplicate of this existing page. So I'm just going to click on my Page. I'm going to drag it down to my New/ Duplicate icon and create a brand-new copy. Now, it shows up as Page 1 Copy. I think I'm going to rename these. I'm going to change this one to original, and I'll change this one to iteration1.

So I've got a slightly different name for that. Now, I need to make a couple of changes here as the clients request. I'm going to hide my slices for a minute. I'm going to rescale my logo to make it a bit smaller, something along that range there, double-click to lock that in the place. I need to also rescale my header area so I don't have all that extra area. There it's good, and as well, I've also got to reposition these elements because now there's this big gap between the header and the content.

So I'm going to grab my Pointer tool and one nice little trick with Fireworks is if you want to select a lot of different things, you can use your Pointer tool to click and drag over those elements on the page, and as long as you overlap parts of them - I've to do that again - as long as you overlap at least parts of those different objects, you'll select all the object. So that grabs all my content. I'm just going to hold down my Shift key and press the Up Arrow key a few times. Something like that looks pretty good. Now I've got basically an update to my design.

Now, once I've done this I can also export this out as a file for the client to view. I'm just going to check my Optimize panel, and my default format is PNG 24, which is fine except that's going to be a slightly larger file than I probably want for e-mailing. So I'm going to change this to JPEG. That's my default optimization setting at this point. Now, hop back to my Pages panel, and I'll right-click on iteration1 and I'll choose Export Selected Page. This gives me the ability to export this file out in a variety of different formats.

In my case, I just want a plain old flat JPEG file so I'm going to change my Export option to Images Only. I've got a little message about slices being ignored, because there are slices in the design and when you export a flat file, you can't use the slices. So I'll say OK. And I'm just going to my leave my option here as Selected Pages for the Web pages are being exported. And I think I'll rename this though for index.jpg to iteration1.jpg, and make sure I'm in the right location.

There we go and just save away. Now, basically I could go ahead and open that file just to show you what's happened, File > Open and go into my Exercise Files/ch9 and there is my iteration1.jpg file. if I open that up, there it is a flat .JPEG file that I can e-mail to the client for them to comment on or approve or whatever it happens to be. I want to talk a bit more about the Master Page as well. Now, we've looked at the Master Page as a tool for basically storing common elements of your design. Well, you can use the master page to store common navigation for your design as well.

So I'm going to go ahead and add in one more page here, just so I've got a couple of different links to generate. I'm going to drag my iteration1 file down to my New/Duplicate Page icon and create a brand-new copy. I'll change the name to iteration2, and I'll make a slightly different iteration. So I'm going to select my different elements here. One thing I forgot to do is alter my slice location, so I'm going to make changes there as well, because they are a little bit confusing, all those red guides.

So let's actually do that first. I'm going to show my slices again, there we go, and I'll just reposition these slices in the right spot. Now I need to do that for my other iteration page too. Now, this particular part of the image by resized or scaled logo, I'm just going to delete that slice and then right- click on it and Insert a new Rectangular Slice. In my other image, I'll just reposition that too. So everything is back in the right place. Now, while I'm still here I'll make a couple of change as I'm going to shift my text over to the right-hand side of my design.

I'm going to use my Select Behind tool to select my slice and my image by Shift+Clicking and reposition the image over on the left-hand side, and do the same thing with my other image. Again, holding down the Shift key lets me select first the top element and then select by clicking a second time I can select the bottom element at the same time. So now I'll get a slightly different position. I'll make one more change here, and that's my slices on my original iteration page.

They are still in the wrong location. So I'm going to reposition those, and I'm going to delete that old slice for the logo, and then just reinsert a new Rectangular Slice just like that. So now I've got three different pages, my original, iteration1 and iteration2. And what I'd like to do as well is share some of the elements that are on this design. So there are lot of changes going on between the three pages in terms of the content itself, but the navigation is consistent from page to page, so this is a really good opportunity to share that navigation across all the pages.

So I'm going to create one more copy. I'm going to grab my original file, drag it down to my New Pages icon. I'm just going to call it common, and I'm going to pop it up to the top here. This is also basically the way you would add in a Master Page after you start building out in design. If you don't start with the Master Page, it gives you good idea of how you can sort of reverse-engineer that Master Page. So on the common page, I'm going to select everything that's not going to be shared by all the pages.

And that's going to require me to just click and drag across all the elements of my content area, just like that, and I'm going to delete them. Okay, so that's gotten rid of everything but my navigation. So the only thing showing is this navigation bar. I'm going to hop over to my other pages, and I'm going to do the reverse. I'm going to select my navigation and delete it from the pages. And again, just using the Pointer tool clicking and dragging makes it really short work to get rid of those elements.

All right! So the navigation, which is going to become common to all my pages, is now missing from those three pages. I'll go back up to my page. It's got the navigation on it, and I'm going to convert this into a Master Page. I'll choose Set As Master Page from the pages options. And now, if I click on my pages, you'll see that they all have my navigation bar back, all thanks to that master page. Now, the last thing I want to do here is create some links. So I'm going to select my first slice on my Master Page, and I'm going to link off to my original page.

I'll select the slice on my second link and choose iteration1, and on the third one iteration2. And with that done, I'll switch over to my original page, and now I can actually preview this whole structure. So I'm going to go to my File menu and choose Preview in browser > Preview all pages in Internet Explorer and Fireworks will generate all of the temporary pages that are needed, and I can see my design in the browser and if I click on the individual links, you'll see I can move back and forth commonly from each page so that navigation is constant on every single page in that preview.

So it's another way to sort of save some time. Just remember that this is an example where the navigation doesn't change on from page to page. So if your navigation is going to be different on the different pages, adding it to the Master Page is not going to be a good idea. I'll just close the browser. I'm going to take a look at one more file here, choose Open, and I'm going to grab my mockup_site here. And this is just mostly just a reminder about some structuring. I mentioned in the past, it's really important to sort of keep a handle on your structure of your document, and you can do that using pages obviously for different content, but you also can do a lot of structure work inside of your Layers panel.

I've just collapsed everything down here for a minute so you can see how compact my Layers panel is when I've collapsed the master layers for the design. Now, if I click on my navigation layer, you'll see all my different navigation objects are showing up in there. Now, ideally these should be named so you want to go into each one of these individual objects based on the object that's selected and rename it. So I'll just change name here to tours. I'll zoom out a little bit so I can see things a bit better. There we go.

Next one is contact. Getting into the habit of naming of your objects and your layers and your sublayers is really helpful because you never know when you're going to have to access a file that you might have designed a few months ago, and having everything named makes it a lot easier to get oriented to the file structure. And mission is the last one. There we go, okay. So I can expand and collapse my navigation layer. I've got multiple objects in it so I can basically declutter my Layers panel a little bit.

Now, the main layer here, and actually that should be given a different name as well. We'll just name that. We'll call it main page content. The main content area has quite a few different structure elements to it as well. We've got a header sublayer, a content region sublayer, a footer sublayer, and a backgrounds sublayer. And withinside of those we've got further drilling down. So inside of our header sublayer we also have a logo sublayer, a tour sublayer, and nav bar sublayer and so on.

So it's kept very, very organized, very structured, and it, again, makes it easier to find things as you're moving through. And also from the standpoint of just being able to look at your Layers panel, you only have a limited amount of vertical space here. So if you just put everything inside of a single layer, then you either have to show everything or show nothing, which makes it a little harder to find things as you're moving through that Layers panel. By structuring your design with layers and sublayers and possibly even subsublayers, you're able to condense the overall layer structure and make it a little easier to work.

Now, as well as being able to structure your designs in this way, you've also got the ability to very, very quickly hide entire sections of your site. So, for example, I can choose the content region here, and I can click on the eyeball icon and hide the content that's all inside of my main content region. Equally, I can also lock that region, so if don't want to edit anything in there by accident, I can click on the Lock icon and that particular layer and anything inside of it is no longer accessible for editing. You can also lock or unlock or show or hide layers by using your mouse and dragging through the layers.

So, for example, I can go up to my main page content, hold down my mouse button and drag down the eyeballs, and you see I can basically make my entire site disappear, and go back the other way. So I can show and hide things very quickly. I can do the same thing inside of my locking element. So I can go to my header layer, for example, expand that down. I can click on the Lock icon for the logo, and I can drag downwards and lock everything that's inside the header layer so it won't be edited by accident. So again, a couple of different ways that sort of make you work a little bit quicker.

And lastly with this page, I just want to bring up one other concept. We touched on this in one of the previous lessons, but I think this is a really powerful feature inside of Fireworks. I just want to impress this on you. If you're working in a team atmosphere and you have different designers working on different page content for the same project, being able to bring that content into an existing design is really, really helpful and Fireworks has made this incredibly easy in CS5. So, for example, I'm just going to scroll down at the bottom of my pages here and go to my snowboarding page, and see brand-new content and everything. And what I want to do is add in an additional page to the rest of this content.

So all I've got to do is go to my File menu and choose Import, and I'm going to look for a file called mockup_tourWine_final. This is another design. You'll see a little preview of it here, and it's a single page, and I can see that option right there. If this is a multiple page design, for example, just to give you a quick idea I'll just go to my comps page. If I grab the file that has multiple pages in it, I can actually scroll through the pages, and I can choose which page I'm going to import into my design, which is also incredibly handy.

So I'm going to go back to my tourWine_final here and just choose Open. And I'll get my preview option again here, and you'll see I have 1 of 1 pages. The key with this is to make sure that you choose Insert after current page. That'll tell Fireworks to generate a brand-new page and place all this content on that new page rather than laying it on top of existing content in the current page. I'll just choose Insert, and this process is incredibly fast. Fireworks creates a new page and drops the new content into that page just like that.

Then from here I can go and share my navigation objects and also my Web objects for creating hyperlinks, but this is a really, really nice feature. Now a couple of more tips before we finish off this lesson, both of which hopefully will save you some time, and they all revolve around batch processing and creating custom commands. Now, it's very likely, when you're working on a project, if you're receiving assets from outside your own organization, you're probably to get files that could be the wrong size, maybe they are original photographs for a photo shoot, for a Web site, and they're all coming in a very high resolution.

Now, we don't need high- resolution images inside of Fireworks. It's not the most efficient way to work. So rather than constantly opening them up and resizing them and saving them, we can actually batch process a whole series of files to the size and dimension that we want. And I'm going to show you how to that right now. I'm going to go to my File menu, and I'm going to choose Batch Process, and I'm going to browse to my folder. Now, I have a folder in here conveniently called hi_res_photos, so if I open that up, there is a few different images in here, all high-resolution quality images.

And I can select individual images for this process, but they're all high-res files so I'm just going to go and choose Add All, and that adds everything inside this folder to the list of files that are going to be worked on. I'm going to click on my Next button and here I can choose what processes I want to use, so the very first one is Scaling. I want to rescale these so I'm going to add that to my including batch. And I think I'm also going to choose to rename these files so I'm going to add that process here as well.

And lastly, I'm going to choose Export. So I've got three different processes I'm going to run through with all these images. Now, each one of these different actions has different options that I can control down here at the bottom of the Batch Process window. So for Scaling, for example, I'm going to go in here, and I'm going to choose Scale to Fit Area, and I don't want any of these images bigger than 600 pixels wide or tall. So that's going to force both vertical and horizontal images to have a maximum dimension of either 600 pixels wide if it's a horizontal image or 600 pixels high if it's a vertical image.

Click on my Rename option here and all I want to do in this case is add a prefix. So I want to have some indication that these are my Web images. So I'm just going to put in the term here Web_, so that's going to add that prefix to every single file. And the last bit here, Export. I want to set these all to JPEG-Better Quality, and I could edit the setting, but you don't really see anything in the Edit menu here because you have multiple files so you're just kind of guessing. So I'm going to go with JPEG- Better Quality. That should do the job.

Click on my Next butto,n and here I can determine where these files are going to be output and whether it's the same original folder or whether it's going to be a custom location. I can even control how the backups are handled. I can Overwrite existing backups, I can add Incremental backups, and I can even save this entire set of steps as a script. We'll get to that one in just a minute. What I want to do here is pick a Custom location now. I don't want these back in my high- resolution folder, because there is not much point in having them there. So I'll go to my Desktop, go to our Exercise Files, and I'm going to create a brand-new folder here called web_photos.

That one is blatantly obvious so we'll choose that and click Open. So now you'll see a path pointing to my web_photos folder. Now, before I go any further, if this is a process I think I'm going to be needing on a regular basis, rather than having to walk through all these individual steps in the Batch Process Wizard, what I could do is I can save this as a script that I can call on from the Commands menu. So I'm going to click on Save Script and again, you can determine where you're going to save this particular file.

Now it really comes down to your own preferences here. Keep in mind that Fireworks has to know where to find the file. So I'm going to go ahead and go to my Computer, open up my C drive, go to Users, and there is me, so I'm going to go ahead and pop it into that location, and I'm going to call this Web_resize. I don't need to worry about naming conventions here particularly, but I'd like to just keep in the habit of having those spaces in my file names.

So I'm going to pop that in there as Web_ resize, and I think I'll put it into My Documents folder like so and just click Save. So that's going to save that file for me, and we'll see that what is it that comes in handy in just a minute. My next step is to click on Batch. Fireworks run this exercise relatively quickly. Actually, if you're watching the screen, you'll notice that it generated my - you'll see the files updating inside my Web Folders icon in my ch9 folder.

So in relatively short time, Fireworks took about 13 high-resolution, 4000 pixel wide images and reduced them down to maximum long dimension of 600 pixels. Just click OK. I'm back to Fireworks. Now, that command that we were talking about, let me just show you what's happened there. If I go up to my Commands menu, I can choose Run Script, and I can browse for that Web_resize file, and just click on Open. Once I launch the custom command, I can go and choose whether I want to work with the currently open files, or go to custom and basically custom means I can go browsing for other images.

And I can run that entire script again, all the resizing, the renaming and so on, on a new batch of files if that's what I want to do. So that's a pretty handy feature. I'm just going to click Cancel there because we don't actually need to do that. There is the couple of ways of speeding up your workflow. The Batch Process command in itself gives you the ability to resize a whole series of files, for example, really, really quickly, and you can even save that script as something that you can use later on and save yourself even more time, because you don't have to walk through all the batch processing steps.

So those are just a few of the things I run into on a regular basis and different solutions I have created for resolving them. I hope you've picked up some tips to help you smooth out your workflow and make your job even easier.

There are currently no FAQs about Fireworks CS5 Essential Training.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed Fireworks CS5 Essential Training.

Return to your organization's learning portal to continue training, or close this page.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.