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.
These are all stock assets of Fireworks. So we are going to work with AutoShape from my Vector tools. We're also going to be working with some AutoShapes from the AutoShapes panel. We'll start with the Tools panel. And what I want to do is I want to add a star shape to my little tag. So I am going to go down to the very bottom here to find my Star. And the great thing about this is you don't have to do a lot of preset. It's basically going to draw, when I click and drag, a star shape for me automatically, just like that. When I let go the mouse, it'll fill with whatever color was currently selected in the Properties panel. I am going to zoom in a little bit.
Sometimes when you are working with a small shape like this, it makes it easier to zoom in, so you can actually reposition things. So I am just going to reposition this, and I want to make a couple of changes to this. You notice these little yellow diamonds in different places. Well, these control different components of the star. I can, first of all, change the number of points. Now, I want a five-pointed star here. Just to show you what I mean, you can go all the way down to a triangle, all the way up to like a sun burst, if you want to just by dragging that one slider. Now think about this for a minute. We've looked at the Pen tool.
We've looked at the Free Form tool and the Reshape tool. Adding a bunch of extra points to create a custom shape, a multi pointed star, for example, while it isn't impossible, it's going to take you bit a time. So this really does save you a lot of time. I can change the radius of the star. I can even change the outer radius as well. I can do whatever I want with this thing. It's all controlled programmatically. And I can even make the stars' points rounder if I want by controlling that diamond there. And I am going to select my Scale tool so I can just rotate my star around a little bit, pop it in the middle and double-click, maybe make that quite so narrow.
There we go. And I am going to change the color as well. I'd like to have this white. So really quickly, you can drop in these AutoShapes, customize them a little bit, and it saves you a lot of time from having to build the entire shape from scratch. Now, that's one example. I want to show you some other examples that are, to me, kind of fall more under the productivity side of Fireworks than the creative site, but they're very handy tools in and of themselves. I am going to switch over to my mockup_index.png file. And I am going to zoom out. I press Control+Minus a few times so I can see a little bit more of my design.
And actually, there is my tag, again, right there. But what I want to do here is I want to add in some of the kind of neat productivity features that we see inside of the AutoShapes panel. Now, the first one I am going to work with is one called the Annotation AutoShape, and you'll see it right here. It's at the top of the list, and this is a kind of a neat little feature. If you're working on a team for design, you may have questions about something you're working on, or you may have questions about something somebody else did. And if you're passing files back and forth, what better way to ask questions than to include your questions in the file itself, and this is where the Annotation AutoShape comes in really handy.
So I am going to move this onto my canvas. I am going to bring it over here. And I'll zoom in a little bit so we can see things a bit better. And it's a little tiny icon to begin with. If you look really closely, you'll see a little diamond in there once you select it. Click on the diamond, you'll get a little bubble showing. So I am going to resize this bubble, and I am going to reposition things a little bit. We are at a fairly zoomed out range here. So you don't really see the text too well. So I'll zoom in a little bit more. There we go. That's better. And I am just going to go ahead and grab my Sub Selection tool, click on the text that's in there, and if I double -click, I get my Text Editing tool.
So I am going to change this default information to something a little more useful. And the question is going to be, Are the monthly special logos too small? There we go. There is my question. And I'll just grab my Pointer tool. Now, one little thing about the AutoShapes is that if you're going and editing inside the shape, sometimes you'll get a message from Fireworks saying that we've edited subelement of the AutoShape. And this is a pretty typical message you'll get, especially with the annotate shape. You're not actually hurting anything in this case.
So you can just say OK. And if we click back on our shape, you can see all the control buttons are still there. I think I'll make my shape a little bit smaller again. And if I want to, I can just click on the Annotation button again, and it will just bring it down to one specific little tiny icon. I think I'll move that over, just so it's sort of in the right general area. I can leave it open. I can close it down. Really, it's up to me. So I'll just keep it open for now so we can see it. So that's one of the shapes. Now, the other one that I find really helpful is the File Info.
Again, this is just a neat thing. You're not thinking of it as a shape per se, but it's actually a nice little production tool. And again, we are dealing with a fairly large file here. So I am zooming out just to show you how it would apply this. If you, again, take a look in the AutoShapes panel, you'll see an icon in the third row, over on the right, and this is the File Info AutoShape, and it's a pretty cool little feature. I am just going to click and drag it. I am not even going to worry about where I drag it. Now, watch what happens. Fireworks automatically pushes it down to the bottom of the canvas, which is pretty cool. I am going to zoom in a little bit here, so I can see this a little bit better.
And what you see is a whole range of information about this specific file: the file name, the dimensions, the resolution, how many pages were in the file, how many layers, how many states when it was created right down to the date and time, what platform it was created on and what software it was used to create it. That's a really handy little AutoShape, because you can just drop this in the bottom of any design you are working on, and you've got all the basic information about the file right at your fingertips. Now that in itself is kind of neat, but what's really cool about this is you can actually edit this information.
Now, that is not part of your set of categories up here. What that does is it gives you a line break. So you notice that my information drops into two lines. If I take that line break out, just delete it like so, add a space between when I think I will add a comma just to make sure we don't end up with any weirdness going on, and I click OK, notice that my information now spreads across one single line inside the AutoShapes. So that's pretty cool. So I could break this into multiple lines just by adding that backslash on the R, or I can bring it down to one single line if I want to.
So now, you have seen a few different AutoShapes. As you can tell, they're a lot more than the ones we were looking at, found inside both the Vector tools and also inside the AutoShapes panel. They're there to play with, experiment with. By all means, give them a try, have some fun with them and see how they can fit into 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.