Touring the interface

In this lesson, we're going to take a tour of the Fireworks interface. So, to get yourself started, open up the agussavonfalls.jpg image located in your Wxercise folder. And when it opens, you'll probably see a great big image. This image was taken on a Nikon D200, so that means that it's fairly large. And you can see that the physical dimensions to the image are pretty big, 1944 by 2896. One of the things you can do with big images like that is go to view Fit All, and it will just drop it right into the main window, right here.

Now, I'm starting in the PC version of Fireworks, simply because of the fact that there's a feature in the PC version that's not available on the Mac. And it's right up here, this is the main toolbar. And basically, what it does is it gives you a series of tools that are easily accessible without having to go to Windows menus to get them to work. For instance, if I want to print this image, I just click this icon. If I want to group objects on the canvas, this thing here is called a Canvas. I can just click this button rather than go to a menu item.

And I can go to my layers and I can do a little bit of image manimuplation up here. But this is the fundamental difference between the Mac and the PC version of the application. Now, I'm going to swing over to the Mac version of the application, and we'll pick this up in a second. So, here we are in the Macintosh version of the application. And as you notice, it's really not that much different from what you were looking at on the PC. Along the side here is the toolbar. tools are for Selection, Bitmap, and Vector tools. Fireworks uses a combination of both, and throughout this entire course, we'll actually be using many of the tools that are located in these two areas. Now Fireworks is also a web tool for creating web pages, and you can add hot spots, which is right here, or you can slice up your page right here. And down here are the little slices and hot spots, you can see them when you make them on the page, they won't actually be little green squares. Those things would be located up here in the Web Layer, and I'll get over to that in just a second.

You choose your colors here, you get a Eye Dropper tool for sampling colors, the Paint Bucket tool for filling selections, and here are Stroke and Fill. These are not foreground and background colors. They are Stroke and Fill Colors. And you just click it and you can choose a color you want. This button here switches the two, as you can see, goes from there to there. And if I want to switch back, I just choose that one. And if I want to turn off Stroke and Fill, I can click there. And I'm going to put them back.

The View tools are a little bit different that what you may have expected. This one here of course, as the tool tip comes up, will tell you it's the Standard Screen mode. And the Standard Screen is just what you're looking at here. The next button over is full screen with menus. You notice it becomes a great big full screen, a lot of the stuff is minimized. And this button here actually allows you to see your image without the clutter of the interface. If you click it, you can see it. Now, to get back, what you do is you just click on the black area and press the F key, and everything comes back. Down here is the Properties panel.

The Properties panel is contextual. For instance, I've got the Rectangle tool selected here. And you can see it tells me I've got the tool selected, and these are all the properties that can be applied to it. But if I switch over to the Paintbrush, you notice that there's no fill stroke. If I go to the Selection tool, it goes to the Canvas Options. And if I click on the image, it switches again for the properties that can be applied to the image. You're going to be doing a lot of this work. And using the Properties panel, it's a huge, huge advantage to you.

The three buttons at the top here are for editing. This is your original view, this is what it looks like. This one here Preview, if you want to see what an image looks life if you remove color, or you do something with it to optimize it. Or even add interactivity to it with a button, or something like that, this is where you would test the button. Two-up and Four-up give you an opportunity to compare optimization, and this is kind of where you compare it. So you can optimize this image, and compare the changes here against the original.

Click on original. Over here are the various panels, Optimized History and Align panel. To click one, all you do is just click on it or select it. You just click on it and the panel changes to show you what's where. You can also change the view of these by coming up to this little pop-down menu here and changing the mode. So, there's Iconic mode. And what it will do is it'll change all the panels to icons. And what this does is it buys you screen real estate, or you can actually have iconic with panel names if you can't remember what they are. And of course, there is Expanded mode.

There is one aspect working with the Mac that's a little bit different from the PC. It's here in the Window menu. It's use the Application Framer. If I had deselect that, everything just becomes it's own floating window. So, I use the Application Frame and that just puts everything together as one comprehensive whole. You have accessed a Bridge. You notice there's Browsing Bridge, and that's also available here so you can quickly get at it. There's the Hand tool and the Zoom tool. The Hand tool actually is the Space Bar. If you choose the Space Bar, you notice that the hand changes to the grabber hand, and you can move it inside the image.

And the Zoom tool, if you select it and just marquee, you notice that you can move around up and down by just holding the Space Bar down. And one of the little teacher tricks I just love about working with these applications. Double-click the magnifying glass in the tools panel, right here. And it will zoom out to actual size or you can just come back to the View menu fit all and away we go. The other little items that you may be interested in here are the page pop down, you can actually go to various pages.

You can either use this menu here and select pages, or you can use this item here. This little button here actually uploads images to websites. Down at the bottom is a little player. This is for animated GIF's, so you can actuallly flip through it frame by frame. This information here tells me that the size of the image is 1944 by 2896. And the magnification level I'm currently looking at is 16%. Over here, I find out how big the image is in file size and how long it will take to load through a 56K modem.

So, there you go. There's the interface, we're going to be using it a lot throughout this course. And as I've pointed out at the start of this lesson, there's a fundamental difference between the Mac version and the PC version. The PC has a toolbar at the top, the Mac version doesn't. Other than that, all the tools are the same. I've shown you where the panels are. I've shown you where, basically reviewed some of the tools. Gave you a quick review of the Properties panel. Showed you how to select the various items in these panels. Showed you where you can make, more room on the screen for yourself, if you need to.