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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.