Join Jim Babbage for an in-depth discussion in this video Using the Fireworks interface, part of Fireworks CS4 Getting Started.
- View Offline
Knowing your way around the interface is important for working efficiently in any applications. So let's take a few minutes and look at the main parts of the Fireworks interface. It is also worth noting that Fireworks shares the same UI as Photoshop, Flash, Dreamweaver and the Illustrator. So moving between applications should become a fairly seamless process. Over on the top left, we have got some commonly used tools. Over on the right- hand side we have the search field for Help and just down below that a typical menu area and below that a toolbar called the main toolbar, where you'll do some common things like printing or undoing or opening files, closing files, things along that line. Over on the left-hand side we have got the toolbar where you'll find all your tools for selecting, working with bitmaps, working with vectors, setting up interactive web components and setting colors for fill and stroke for vectors.
Down at the bottom we have got our Properties inspector, docked with a couple of other Properties panels, the Symbols or Auto Shape Properties, and over on the right-hand side are the panels. Now panels are floating controls what you edit objects with in your design and restructure the design itself in terms of pages, or states, or layers and things along that line. And they are really easy to configure so you can set up your own customized workspace. You can drag panel right outside of this large panel dock by just clicking on the tab and dragging out into the workspace area. If I want to regroup it back in the panel dock, I can just grab that tab again, drag it in and drop it over top of one of the panel groups and there we go. It's back inside of a panel.
So really easy to configure in that way. I can also move the panels themselves so like essentially change the stacking order and set them up the way I want them to be viewed. I can collapse panels vertically by just clicking on the panel tab bar here and that will expand and collapse the panels quite quickly. And I can even collapse the panels down to a much smaller workspace by clicking on the double headed arrow on the right-hand side. That gives me a lot more free space for my canvas area. Being draggable means that the panels are pretty configurable. So you can set up your workspace the way you want to work. So for example I like to have the Pages panel separate from everything else. So I can see my pages in a multi- page document, like the one that's currently visible on screen. I can see those right away and I can also see my Layers and States also separately. And there may be panels that I don't use too often. So I may want to get rid of them. So I am going to go down below here and I am going to my Image Editing panel and I am just going to right-click on that and close it. I will do the same thing for my Special Characters panel for the time being and then I will minimize that panel again and bring up my Pages and my Layers panels so I can see them as well.
So now I have got a sort of setup that I like to work in and one of the other nice things about this interface is that I can set this as a custom workspace. So I can always come back to this. I can always work the way I want to work. Currently we're in one of the default modes, which is the Expanded Mode. If you go right back up to the top of the workspace you will see Expanded Mode and if I click on that menu you will see three defaults that we can work with that come with Fireworks: Expanded Mode, Iconic Mode and Iconic Mode With Panel Names. And there's a couple other ones here that have got my name attached to them and these are custom workspaces.
I am going to re-save this current workspaces by choosing Save Current and I'm going to give it a name. I'm just going to call it Jim's Workspace. And now, there it is there. I just overwrote my original one and I can select that anytime I want and it will display the workspace that I want to work in. Anytime I go to any of the other workspaces that here whether they are default workspaces or custom workspaces, I will chose Iconic Mode as an example here. I can click back on that Workspace Chooser, pick my custom workspace and then it comes back out to the way I want them to be. So in this way you can setup Fireworks to work the way you want. Now as well as being able to configure the panels and move them around and change their order, we have also got the same kind of control inside the document window itself. I can go over to where my open documents are and I can move the tab around and change the order of how these guys appear. What also is really neat is I can grab one of these files and drag it away from the tab bar and create a floating document window, with just one document in it.
And for that matter I can select another document, I'll drag my surf_gear here, and I can drag that and drop it into that floating document window. So now I have got two document windows each with their own different files in them and what gets even kind of cooler here is that I can have completely separate docked viewing windows. So I am going to grab this floating panel, this floating document window, drag it over to the left-hand side and let go. And when I let go after seeing a little blue highlight, I can basically get two sets of document windows. So this is what's being referred to as the N-Up view and you can have multiple document windows set up like this.
In fact if I grab my document window again, drag it away, I can refloat it and rather than running it vertically, I can grab that tab and bring it up to the top and here I got them running horizontally across. So we have got lots of different ways to control how we work in the workspace itself and how we see our documents. So this video has given you a general overview of the interface where most of the features are located. We also got a look at the Preferences panel, which is the centralized location for controlling a lot of Fireworks features and its tools. And with this updated UI in Fireworks we now have much more consistency between applications like Photoshop, Dreamweaver, Flash and Illustrator.
- Importing and exporting images Measuring distances between guides for precise positioning Editing symbols in place Creating multi-page HTML click-through prototypes