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

Working with panels


Fireworks CS5 Essential Training

with Jim Babbage

Video: Working with panels

Panels are controls that help you edit aspects of selected objects or elements inside of a Document. They are an essential part of most, if not all, of modern applications. Now I have a File open here, mockup_index.png. It's just there for display purposes. You don't have to worry about opening it up. I just want to have something onscreen. And as a couple of little points regarding Images inside of Fireworks, you may notice if you're looking really closely that this doesn't look all that good at the moment, and that's because we're zoomed out to about 66%. You can see that down the bottom right corner here.
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

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

Working with panels

Panels are controls that help you edit aspects of selected objects or elements inside of a Document. They are an essential part of most, if not all, of modern applications. Now I have a File open here, mockup_index.png. It's just there for display purposes. You don't have to worry about opening it up. I just want to have something onscreen. And as a couple of little points regarding Images inside of Fireworks, you may notice if you're looking really closely that this doesn't look all that good at the moment, and that's because we're zoomed out to about 66%. You can see that down the bottom right corner here.

Select the Image and press Ctrl +Plus, and that will zoom me into 100%. You can see things are very crisp, and very accurate. So Fireworks has a little issue rendering things at lower magnifications, but it's not permanently detrimental. It's just a rendering thing, so I'm soon back out to 66% and let's move over to our panels here. So we saw earlier in this course, that we had a couple different ways to configure panels in terms of collapsing them and expanding them, primarily through the Workspace Switcher at the top of the Application Window. If I click on that, we've got four choices. We saw these earlier: Expanded mode, which is what we're in right now, Iconic mode, which gives me bit more screen real estate by collapsing all the panels down to just Icons, Iconic mode with panel Names, which basically gives me a little more real estate, but not as much as I get with just the collapsed Icons, and then, lastly, this option for Netbook, for screen to smaller displays.

Now, I'm going to switch back to Expanded mode here for a minute, and let's take a look at how we can sort of work with these panels. Now, aside from those Basic Settings., we've also got options right within the Panel dock, in the Panel Groups themselves to configure things. First of all, if I move to the edge of the panel dock, I can drag out or in to collapse or expand the panels somewhat. So I've got the ability there to free up a little more real estate, or if I really need to see more the panels, I can widen them up. I'm going to go down to the minimum width I can get when they're expanded. I've also got the ability to collapse them all down by using this little icon right here in the upper- right corner of the panel dock.

If I click on that, everything gets collapsed down to Icons and Labels. If I click it again, I expand back out. So that's another way to free up some real estate. Now the panels themselves are set up into Groups. You can see at the very top here, we've got Optimize, History and Align, and when I click on these tabs, I'll see the actual options for those panels. The panels themselves inside of Groups can be repositioned, so for example, if I'm more often using the Align panel, than I am the Optimize panel. I can go ahead and drag that tab over to left, and the other two tabs slide out of the way, and there's my Align panel.

So I can reposition the tabs inside the groups very, very easily. I can also change the height of the panels by moving between two panel groups. As I get between my Align panel and the Pages, States and Layers group below it, I get a double-headed Arrow, and this gives me the ability to expand and contract the panels within a certain amount of space, and I can do that with pretty much any set of panels. One thing you might notice too, if you look down near the bottom of the screen, you'll see that we have two sets of panel groups that are completely collapsed just down to their tabs. And this, again, is a way to free up space for other panels.

There is only so much vertical space you can have, on a monitor, so you won't be able to see all of your panels fully expanded, all of the time. So it's a question of picking which ones you want to work with. So if I go up back to my Optimize, Align and History panel group, I can just double-click on that gray panel bar, the Tab bar, and I'll collapse those groups down to just their tabs. I can do the same thing with Pages, States and Layers, collapse that down, and then the Style, Color palette and Swatches group expands to fill the leftover space. And then I can go down if I want to expand a group, for example, my Document Library and Common Library, just double-click, and they expand out as well.

And again, like I said earlier, you can reposition or change, rather, the height of these panels by moving in between the groups. So you've got lots of different ways to configure the panels internally in this way. Now you can also Float panels. If you want to have a panel floating on your canvas, again, an easy thing to do. Let's go and go to my Pages panel here, and I'll just grab that Pages tab and drag it out onto the canvas. When I let go, it becomes a Floating panel. I can move it around.

I can resize it within reason, at least to horizontally; vertically I can collapse it quite a bit. If I collapse it down or if I a resize the panel enough, I'll end up with a Scrollbar, if I'm basically starting to clip anything that's inside the Pages panel itself. And as a mentioned, I can move it around on the canvas. I can close it by clicking on the little X box here. I can even collapse it as a Floating option. I'll just click on the collapse Icon here, and it collapses it down to a much smaller area, so it's not taking up as much space. And then in this mode, if I click on the Actual Pages button, it'll fly out as a menu item.

So there's lots of different ways to work with the panels in that sense. Now on top of all that, not only can I Float the panels, but I can also create my own Panel Groups. I kind of like to have my Pages panel separate from my States and Layers, especially when I'm prototyping. It makes a lot of easier for me to be able to see what Page I'm on, and also to see the layers on that Page, rather than having to flip between Tabs. So I'm going to grab this Pages panel, and I'm going to drag it, and very much like when we were splitting the View in our Document Window Area, we can do the same kind of thing with panels.

If you take a look now in the panel dock, you'll see that faint blue highlight that's just above my States and Layers tabs. If I let go over the mouse now, I create an independent Panel Group for just my Pages. So if I collapse down my Common Library and My Styles, I've now got quite a bit of space in here in which to view my Pages and also to view my States or layers, and if I decide this isn't the route I want to go, I can grab that Pages tab. I can drag it back over to the States and Layers group.

Let go over the Mouse, and they are now all grouped together again, and like we saw before, I can reposition the tabs themselves inside that grouping. I mentioned in an earlier movie, that you can also configure the Panel Group, so that you can work more effectively the way you want to work. And I am going to start this process off. I'm going to Reset my panels and configure it for the way I'd normally work if I was prototyping a Web site Design. So first thing I want to do is I want to separate my Pages panel from everything else. And make sure when you are doing this, especially when you're in the dock like this, that you're not highlighting another Tab Group.

You'll notice right now my Optimize, Align, History Tab Group, or Panel Group rather, is completely highlighted. So if I let go over the Mouse at this point, I'm going to end up grouping my Pages with those other three panels. I don't want that. I want it as own separate grouping, so I'll just move it down a little lower, and as soon as I see that faint Blue highlight, let go of the mouse, and now I've got my Pages panel separate from my States and Layers. I also kind of like to see my layers first. That's the kind of guy I am. So, I'll switch those two around, and I want to get rid of a couple panels that I'm not going to be using.

Go down to the Panel group that starts off with path and just double-click to open that up. And I'm going to select the Image-Editing panel. I do use my Path panel fairly regularly, so I want to keep that one, but I don't really make much use of the Image-Editing panel. I prefer to work from the Tools panel. So I'm going to right-click of the Image-Editing Tab, and I can close that specific panel, just by choosing Close,. It gets rid of it. Special characters, again, they come in handy for me once in a while, but I don't focus too much on these when I'm inside of Fireworks, so I'm going to right-click on that, and close that panel as well.

So now I'm just one of the two that are here, Path and Auto Shapes, and these two I do make use a lot on a fairly regular basis. Same thing with my Styles, Color palette and Swatches panel. I'm going to click on Color palette here, and I'm going to right-click on that particular panel, and I'm going to Close it. So now I'm down to Styles and Swatches and Paths and Auto Shapes, so I've basically gotten rid of some of the panels I don't normally work with. I'm going to switch over to my Optimize panel, and I'm going to expand my Pages panel, and I'm going to collapse my Styles panel for now and expand my Layers panel.

So now I've got those three main Panel Groups displayed. These are the panels I use the most when I'm working with my prototyping, when I'm building out a Web page mockup. So what I want to do is go to my Workspace Switcher and choose Save Current. This gives me the ability to give this particular configuration a Name that's going to mean something to me. So I'm going to type in the Name proto-typing and click OK. Now I actually have that as an option inside of my Workspace Switcher, so anytime I want I could be in any other Workspace, I could have done things to my panels.

I can always come back to that prototyping workspace. Just to give you an example, all right, I'm going to go ahead and grab my Optimize panel and drag it out here. I'm going to go ahead and group by Pages panel with my Align panel. All sort of craziness is going on. And then I've decided that really, I don't want this process, so I'm going to go back to my Workspace Switcher, choose Prototyping again, and automatically, all my panels get put back the way I want them. All the ones I don't want are still left out of the grouping. So there are quite a few different ways you can configure panels and make them work for you, and more importantly, different ways you can save those configurations so that you continue to work in the most efficient manner for your Workflow.

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.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

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:

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.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts. provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now

A trusted source for knowledge.


We provide training to more than 4 million people, and our members tell us that helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

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.