Join Abigail Rudner for an in-depth discussion in this video Panel management, part of Fireworks 8 Essential Training.
- View Offline
There are lots of panels in Fireworks 8, and it is with panels that you'll be controlling different aspects of your document. You really can't do much of anything without having a document open. I have closed the startup screen as well as the document that I had opened in the last exercise, so that I could begin fresh by choosing File>New. I'm going to go with the size that's already defined in the new document window, which is 500 by 500 pixels at a resolution of 72 pixels per inch, the default size for anything web.
The canvas color is set to white and I'm going to click Okay. The panels on the right side are considered docked panels. You can collapse and expand these panels with this little button here. Click it again, that allows you to have a little bit more real estate when you're working. Over here on the left we have the tool bar. The tool bar itself can also be moved around by grabbing on the two stripes that looks like kind of two dotted lines up here. When you mouse over this little area, you can grab the tool bar itself and move it around if you want to put it on another part of the screen.
To get it back into the dock you simply drag it across, and when you see the light blue highlighting you can release and re-dock the tools. The tools are broken up into different areas; there are the Select tools, the Bitmap tools, the Vector tools, the Web tools, Colors, and View. Down here at the bottom we have the Properties Inspector. The Properties Inspector is a context sensitive panel that allows you to modify different aspects of your page; Color is one of those aspects.
As you can see when I mouse over the Color box here on the Properties Inspector, I can see the hexadecimal value of this canvas; it's white FF, FF, FF. I'm not stuck with this canvas color, I can click on the Color box, and when I do so the Color Picker is revealed. I can choose a new color. If I had some other artwork on my canvas, I could actually use this eyedropper to sample color. You can see it's crazy, I can sample color right from the interface if I wanted to.
But I'll just choose a color from the Color Picker itself, and my canvas color will change; and that's done with the Properties Inspector. Since currently the only thing I can change with the Property Inspector is the canvas; it's the only thing I have to work with, there's no artwork here. The properties that are being displayed are those of the canvas. I can also change the canvas size by clicking on the Canvas Size button, I'm going to resize my canvas a little smaller so that I can work with it more comfortably inside of this movie tutorial. I'm going to change this to 400 by 400 and this area here, the anchor, refers to if and when you need to extend your canvas, making it wider or taller.
You can anchor or place your canvas in a specific region of these nine selection areas or boxes, so that your canvas will either extend to the right and down, up and down to the right, up and down and to the left, from the center, etc. Since I have no artwork on this canvas yet, nothing will be trimmed away, I really don't have anything to worry about despite the fact that I'm making it smaller. I'm just going to leave it at the default position, which is Center, and click Okay, and my canvas will become smaller.
Now before I click Okay, I want to mention something, 89 percent, do you see this up here? I know it's a little bit light, but 89 percent, what does that refer to? Well I'm going to talk about that. I'm going to click Okay now. I am resizing the canvas. When I click Okay, still at 89 percent, but when I double click on this hand tool in my Tools palette at the bottom here of View, this number is now 112 percent. What is this number? This number refers to the size that the canvas will be viewed at; this is not the artwork changing size, or actually the canvas changing size, but the setting for the magnification.
So with my canvas larger to fit it in Window, the canvas needed to be viewed smaller. Now that my canvas is smaller, when I double click a hand tool to fit it in the window, the canvas fits in the window at 112 percent. Just so you know, if you double click the Zoom tool, you will go to 100 percent at any time during your workflow. If you double click the hand tool, you will fit your canvas into the available size that you have in your window. Going to go back to 100 percent here.
Also, I wanted to mention that this area here, at the bottom of the document window that says 100 percent right now, it may change depending on the zoom factor that you're at, can also control your magnification. So I can zoom way out here, 25 percent; you can see I'm way zoomed out on my document. To quickly zoom back up I could either click and choose 100 percent, or a greater magnification, or I could just simply double click the hand tool, double click the zoom tool. There's another little item here I wanted to point out to you, and this is called the view menu itself.
We have three modes, or three view modes, we have the Standard Mode, which we are in now, what is known as the Full Screen with Menus, and the Full Screen Mode itself. Now I'm going to just move my document window a little bit smaller, so that when I go through these three views you can see the difference. Standard Mode is what we're in now. Clicking the middle button, Full Screen Mode with menus. Now what this does is actually docks my document that I'm working on, to the interface. And if I have more than one document open, each document will be selectable by tabs that will go across the top of this window here.
So that's kind of a nice feature, giving you some more real estate. And finally the last button here, Full Screen Mode, gives me a nice black mat around everything. You can see I cannot get to my Preview. Over here we have Original Preview, Two Up and Four Up, we can't get to those modes here at this view. But it is a nice way of taking a look at your artwork without being obstructed by any menus that you don't want to see; and then you can click this little Collapse button, there we go. You could move this window open, you could collapse your Property Inspector a bit, so that you can open up your real estate and get a good clearer look at what you're designing there.
A quick way to cycle through these three view modes is to press the letter "F," the "F" key, "F" as in fancy on your keyboard. And I'm going to do that now, I'm going to press "F." That puts me back to Standard Mode, "F" again, Full Screen Mode, "F" again, the Black Mat Mode. That's actually not called the Black Mat Mode; it's called Full Screen Mode. We have Full Screen with Menus, and we have Standard Screen Mode, I just call it the Black Mat Mode because it's black. All right, back to the Standard Mode, that's where I like to work.
Open up my Property Inspector. Open up my Panels Area, and everything is now set as it was. Also it's good to know that by pressing the Tab key on your keyboard, you can instantly hide and then press the Tab key again, and then show all of your menus. Each panel has a black twirly, a little arrow that can be clicked on and reveal what's inside each of these control panels. And as I said, it is with panels that you'll be controlling different aspects of your document, as we work further into the tutorials we'll be using most of these panels and getting to know them well; but just a little bit more interface control here.
I'm going to show you that if I click on these set of dots, there's some small gray dots that live just to the left of the down pointing arrow, I can tear panels out of the dock. The reason you might want to tear panels out of the dock is so that you can close panels you're not using, and arrange panels that you are using in ways that are appropriate to the task that you're currently doing. And as you can see, I'm tearing out all of these panels. No more panels are docked.
If you're not careful you can drop panels into each other; you may or may not want to do that. There's a couple of ways to do this. One way to put panels together, not torn out this image editing away from the layers panel. You can see that these are separate panels. If I want to I can click on the dots in the Optimize Panel and drag it right into the Layers Panel. A bright blue highlight occurs, which tells me I'm inside that panel. And when I release, I have now put the Optimize and Layers panel into the same panel group.
See I can collapse them and you can see that they are together. I can also do this another way; there is an Options Button on every single panel. This is a button that allows you to look at the options for that panel, and you can see if I go down towards the bottom here, I can choose Group Layers With. I can group this panel with any of these other panels that I so choose. So let's say I want to group it with the Align Panel, now the Layers Panel is no longer grouped with Optimize, but it's grouped with the Layers Panel.
So you can see that you can set this up in terms of making panel sets anyway that you want. Again I'm going to close up some more of these panels. I'm actually going to close all of these panels, except for these two. Now let us say I was working on some animation with text, I might want to have the Special Characters Panel open, along with the Frames, and History Panel, and maybe the Colors Panel. And lets say that when I work with text animation I always want to have these panels open.
Well, how can I ensure that when I want to work on that type of animation I get those panels open? I can do that by choosing Window>Workspace Layouts>Save Current. You notice I was tinkering around in here already making a couple of custom panel layout sets of my own. I'm going to save this one as "Text Animation." And when I click Okay, my workspace layout will be saved. I'm going to click Okay.
And in fact if I go back to Window, and then to Workspace Layouts, and set my workspace layout back to the default setting of 1024 by 768, everything is going to reset to Default. I've now done that. And I can go back to Window one more time, Workspace Layouts, and choose Text Animation, so that the default setting will be taken over by my own workspace layout called "Text Animation." I've clicked on it, wonderful.
So what I'm trying to show you is that you can customize the Fireworks workspace in a many number of ways. If you play around with this, move some of these panels around, move the Tool Panel, click on these handles; they're the small dots to the left of the arrow, you'll get a four directional cross-hair cursor when you do that. There's that four directional cross-hair cursor, and this allows you to drag your panels around and replace them, arranging your workspace in the way that suits you best.
So now that you know how to rearrange your interface to your liking, there are just a couple of more items I want to make sure that I mention before I head out of here into the next exercise. I'm going to move the Property Inspector down to reveal at the bottom of the Document Window, and this window when you 're working inside of Fireworks is known as the Document Window, contains some VCR controls. These are for working with animation. You can create both GIF Animation and Export Animations from Fireworks into Flash, so these tools help with animation.
We'll look at them a little further on down the road when we're talking about animation. Additionally, up at the upper right hand corner, there is a button that is called the Quick Export Button. When you click on this button and hold you will notice there are some areas that you can export to from Fireworks to Dreamweaver, to Flash, Freehand, Director; we can also quickly preview our work in a browser, Preview in Browser. We'll be setting the browsers a little bit later on.
We've got some other areas for exporting to Photoshop, Go Live, Front Page, and Illustrator. Copy HTML code, and update HTML, these are all things we'll take a more detailed look at later. I just wanted to show you what that button was. At the top of the document window, you'll notice that there are four buttons; one is called Original: that is the working mode, when you work on your document you work in the Original Mode. The Preview Mode is how you will look at what your page, your document, your navigation, your pieces and parts are going to look like when they are exported out.
And in fact you'll be able to set up different optimization for different parts of your designs, and look at them using this Preview Mode. And the Two Up and Four Up Mode will allow you to look at your documents; compare and contrast optimize settings, which we will be doing also in our upcoming movies. Of course, as with any other application, we do have the whole set of menu items up at the top of our window, and very essential is the Fireworks Help Menu, within which you can locate: Fireworks Help, Getting Started with Fireworks, Fireworks Live Docks, What's New in Fireworks 8, Using Fireworks, Extending the Exchange, Managing Extensions, the Support Developer Centers, Documentation Resource Center, Forums, Training, etc.; so great area for you to check out.
I think I have pretty much covered everything we need to, to get you feeling comfortable with working inside this interface, and as we move through the tutorials you'll get even more specifics on what each of these panels can do for you.