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.
The two main characteristics of a vector are its fill and stroke. The fill is the area inside the vector path, and the stroke is the border that follows the path itself. We, as we've seen, we can fill a vector shape with quite a range of different characteristics from solid colors to gradient fills, to textures, to patterns. We're going to take a few minutes here to explore the Stroke options for vectors. So I've got a whole series of buttons that have been set up here almost like a style guide that might be handed to the client for approval. I want to make a couple of changes to one of the buttons, specifically my Explore button, the Rollover State.
So I'm going to make sure that my Subselection tool is chosen. The reason for that is these are all grouped objects, just to give you an example. If I grab my Pointer tool, I select the entire button. But I just want to affect one element withinside of this group. So I'm going to choose my Subselection tool, and I'm going to click on the actual button shape. Now if I take a look down in the Properties panel, I'll see that I have a Linear Fill. That's giving me my white to red fill. But I don't have any stroke on this particular button. I want to add a stroke to make things standout a little bit better.
So I'm going to go ahead and choose a stroke color. Now I can select color from anywhere, not just the color picker. If there's a color on the canvas or inside the application that I would rather use, I can just move my cursor over that color and select it. So I'm going to go over that red star and choose that color. And as soon as I select the color, you'll see it shows up inside the Properties panel. And if I click away from my button, you'll see that the effect has been applied, nice little even red stroke, and that doesn't look too bad. But aside from just adding in the stroke itself, we've also got a lot more control over the stroke.
We can change things like its position. So we can change characteristics like the stroke's alignment to the shape. So we can pop that stroke on the inside. We can pop it in the middle, or on the outside. The default tends to be the Middle. But really it comes down to you determining which most suits your end goals. So I'm going to go with the inside, and we'll take a look, and that looks not too bad. So aside from changing the position of the stroke, we can also change the actual size of the stroke. We can make it thicker or thinner. Our lowest number obviously is 1, but we can certainly make it thicker if we want.
We've got options here to change Stroke category. There're quite a few different ones to pick from. Now at a 1-Pixel brush and a 1-Pixel size, we're not going to see too much difference, regardless of what stroke we pick. Some of the strokes may be a little harder to see when they're set at 1-Pixel. So we're going to keep things the way they are for the time being at 1-Pixel Soft. Now just because we're working with a single pixel doesn't mean we're out of options. I can go ahead and choose to Edit the Stroke and change some of its categories. So I'm going to go down to the bottom of my stroke area in the Properties panel and choose Edit Stroke.
I'll just move this window out of the way a bit. This is actually new to Fireworks CS5, the ability to access the Stroke Options Right from the Properties panel makes it a lot easier to get to these things, because it's used to take a bit of drilling down to find this panel. So all I'm going to do here is I'm going to change my Dash settings, which currently are set to None. I'm going to go with a Single Dash. I just want things to look a little bit different. I can see down below a preview of what that stroke is going to look like. I can change the value, for example, change it from Off 2 to Off 4.
If I tab away from that, you'll see I get a little more spacing, and it might be a little more noticeable here actually on my canvas. Once I've got something that I like, I can just click OK. I'll just deselect the stroke again so you can see what we've got. So here we've got that nice little dashed border all the way around. Now, if I've spent a bit of time putting together the stroke as a custom setting, I may want to hang on to this for future use. I've got other buttons here to deal with after all. So after I've created my custom stroke, I can go down and choose to Save that Custom Stroke. So I'll click on the Save icon.
We get our little Save Stroke dialog box coming up, and we get a chance to name this. So I'm going to call this explore_dash and click OK. Now, where does that get saved exactly? Well, let's take a look. In our Stroke Categories, you'll see it's showing up in the main button, but the Stroke itself gets saved inside the same category folder as the original stroke. So in this case, we are dealing with pencil stroke. You'll see there we've got Pixel Hard, Pixel Soft, Colored Pencil, explore_dash and Graphite. So that's where that particular stroke has been saved.
So anytime I want, I can go and grab any other vector shape. Well let's go, and grab this circle around my Explore star here and change that to Pencil explore_dash and just like that, instant dash, notice it takes on the color characteristics of that particular object as well, which is nice a little bonus feature. So there you've got a couple of ways to actually work with strokes, creating new strokes, saving the strokes and just in case you get tired of it, you don't want it anymore, you've also got the option to delete the custom stroke. Click on that little Trashcan.
You get a little warning box from Fireworks saying, are you sure you want to do this? If you click OK, it'll be removed from the Stroke Categories. It'll still show up though inside the Stroke Category button until you change things around them. One last thing before we wrap up. You can also apply strokes to text. Now I've got this Explore text out here in the bottom of my button list. I'm going to select that. We still have the options in here for Stroke. You'll see, inside the Properties panel, there's that little Stroke icon, and I can go ahead, select that color value, and I can pick a color again. I can do it from the Color Picker or from the canvas.
I think this time I will go and grab it from my Canvas as well. As soon as you select a color, you will see the stroke gets applied to the actual text. This tends to work better with large bold text, maybe if you're doing text for design purposes only. For small text, the result usually isn't that desirable, but it's worth knowing that you have the option of applying it, and you can certainly experiment with the color and even, again, experiment with Stroke Categories when you're working with text. Strokes can help to define an edge for a shape, for better separation from a background, or if a stroke is applied to text, it can act as a highlight to outline the text and make it stand out more.
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.