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.
Part of what makes Fireworks unique is that it handles both vectors and bitmaps just as easily. In fact, you've already seen in previous lessons that you can place vector and bitmap objects on the same canvas and switch between them seamlessly. Let's have a closer look at some vector objects to get a better understanding of vectors in general. All right. I have got my olivestuff.png file open, and it is made up entirely of different vector objects, and just to give you an idea of what I mean, I am going to select my Pointer tool. I am going to move my mouse over the first vector in the upper-left corner.
And as I move my cursor around, you'll see that different elements get selected. Now these are all different vector objects. For example, if I click on that bottom yellow part of that olive branch design, you'll see I select an entire shape. Now if we look down in the Properties panel, we can get a sense of how this vector is constructed. You'll see over here on the left-hand side, that we've got an ability to name the path. Just like any other object inside of Fireworks, we can give each individual object its own custom name. We've got our options for controlling width and height and position. In the next column of attributes over, we have controls over the Fill.
Now this is where we can literally control what goes inside that path. You'll notice that we see a color in here, in the Color Fill box, sort of a pale yellow, but we can easily change that from a solid color to a range of different things, from Gradients to Patterns, and just literally by selecting one of these options, we change the entire fill of that vector path. I am just going to press Ctrl+Z or Command+Z on the Mac to undo that little step. But you can see we have a lot of control over what goes on inside the path.
We can also control the edge of the path, whether it's a Hard edge and with a rectangular shape like this, you don't see too much difference, whether it's an Anti-Alias edge that blends with the background elements a bit, or whether it's a Feathered edge. Now I'll deselect it, so you can see really blends with the outer areas. You can see how the vector seems to glow a bit right now. So again, I'll just undo that change. Now a Vector is made up of two main elements: the Fill and the Stroke. The next column over controls the Stroke, basically, what goes around the outside of the vector's shape.
Now in this particular example, there's no stroke been applied. You'll see there is no color value in the Stroke Color. If we go ahead and change that, I am going to click on my Color options here, and I think I am going to pick one of these green shades from down on one of the other graphics. The other great thing about picking color is you can sample it from anywhere on the canvas. Now I've got now a 1-pixel stroke, and I can change that stroke to a range of different categories. There's quite a few different things I can do in here. I've got a whole range of different types of stroke effects that I can use, or I can keep things really, really simple.
Now just to give you an example, there are some fun ones in here. I am going to go into my Unnatural Stroke category here, and we've got some interesting ones like Fluid Spatter. If I select that, and increase the size of my stroke, you'll see we get some very interesting things happening to the stroke itself. So we are getting a little more of an organic feel, for example. I am just going to switch that back to a 1-pixel Soft Stroke, and we'll just deselect, and you can see now what's happening. We are getting that obvious division, an obvious line running around the entire shape. Now we can also control the position of the stroke right from the Properties panel.
Little hard to get noticed with a single pixel stroke, so I am going to beef it up to even just 2 pixels, and as I do that, you'll notice a slight change on the canvas. But down here on the Properties panel, I've got these three options for aligning the stroke. I can align the stroke to the inside of the path, which gives us a nice sharp corner all the way around. Again, if I deselect it, you'll notice that the edges of the stroke are quite sharp. I can set the stroke to the middle, which means the stroke will be a bit on the inside and the outside of the path, and the last option I have is the outside edge of the path.
So the stroke is placed outside of the path, and you will notice that the corners seem a little bit more rounded now. Now aside from picking a color and picking a category for the stroke, you can also apply textures. If your strokes are thick enough or heavy enough, you can apply an actual texture to the stroke to make it look a little more organic. We've also got options inside the stroke area to edit the existing stroke. We can save a custom stroke. We can even delete a custom stroke. In our next column over, we've got the ability, again, to change things like Opacity, and this is Opacity for the overall object.
So if I change my Opacity from 100 down to 55, I am actually lightening up the entire object. I can also, again, experiment with Blending modes to change how the color in that particular object blends with other colors underneath it. And I can apply a Filter, so I can go right into my Filters menu and just quickly go in and choose, oh, let's go and add a Drop Shadow, just like that, very quick and easy to apply that kind of thing, and the effect follows the contour of the path.
In the last section here, in the Properties panel, combines two features. We've got our Compound Shape tool in the upper part of the grouping, and we've got our styles down in the lower part. Compound Shape is new to Fireworks CS5, and it gives you the ability to combine a lot of simple vector objects in order to make a much larger, more complex type of object. We'll be looking at this in more detail in another lesson. And down below that we have our Style options. Now at the moment, there is no style applied to the currently selected object. So I would have to go into my Styles panel and choose a style from the groups, or families of styles that are here.
So I can click the Plastic Styles family, for example. I can locate a style I think will be suitable, and as soon as I click on that style, it gets automatically applied to the Vector, and then I'll see it show up in the Styles menu here in the Properties panel. I can do things like update the style. I can redefine it. I can delete the style. I can even break the link from this style to the original style that it was created with. Now unlike bitmap objects, which are made up of a bunch of pixels, vector objects are more of a mathematical formula that describe an object's size, the color its filling, the object, and also the outline, or stroke, around the object.
One of the advantages to vectors is, unlike bitmaps, they can be scaled, and there is no degradation in quality. So I can go ahead and grab one of my examples here. I think I will work with same one I have been working with so far. I'll just go ahead and click and drag around the whole thing to select everything that's part of that particular design, and then I'll choose my Scaling tool, and I'll just resize it. And you can see I've resized it significantly. I can even rotate it, and there's no image quality breakdown whatsoever.
The image looks just as good at a small size as it did at a larger size. So there you have it, a little bit of an overview of vectors, what you can do with them. As we move through other lessons in this chapter, you'll learn a lot more about Vector tools and how to work with vectors to customize or create new designs.
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.