Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Fireworks CS6 is the latest iteration of Adobe's powerful web graphics and rapid interactive prototyping tool, and in this course Adobe Community Professional Tom Green gives you an overview of the Fireworks interface, the formats it can output, and its various imaging tools. Along the way, discover how Fireworks integrates with Adobe Edge, Dreamweaver CS6, and other tools in the Adobe Master Collection. Using a project-based approach to the techniques presented, this course helps define where Fireworks fits into the workflow for digital media projects ranging from simple web page prototyping to interface design for rich Internet applications.
In this exercise we're going to look at filling objects with gradients. And gradients are great because they add depth and interest to otherwise flat objects. I've got a big old letter B here, and by adding a gradient to it you can actually bring visual attention to it. So, let's get started. And to get yourself started, open up the gradient.png file located in your Exercise folder. To add a gradient to it, what you do is you just select the object that you want to add the gradient to. You come down to the Properties panel, and you can see that there are a number of fill options here. There's No fill, Solid fill, and right here is Gradient Fill, click it and the Gradient fill opens, this is the Gradient fill panel. And at the top, are a whole bunch of choices.
And what I love about this is the fact that you get to see how the gradients work. So you can choose here your type of gradient. We're going to go with linear. Up here at the top, this is opacity. So you can actually affect the opacity of the colors. These are the actual colors, so I'm going from white to black. And if I want to switch the order, go from back to white, just click this button right here. If I want to make the gradient a little bit more intense, let's say more black, I can just slide this along. And you can see that the gradient actually reflects the change that I've made to it. And you can change the gradient color by just clicking in the color chip here. This is called a crayon, by the way.
So if I click on it, and I want to say go from red to white, that's the color I can get, or if want to change this to black, I just pick a black and I get a nice black to red gradient. Okay, just click on the canvas. This handle here actually shows me the start point. That's what the dot is. And this shows me the length of the gradient or the gradient angle. If I move this over, you can see that it selects the paths. And then I can just change the angle here, and pull this out. And it will be a totally different look.
If I pull this down, you can see that I got more red. And I can also take the gradient across, just by swinging the handle up. And put in the start point somewhere else. Other things I can do it is if I can shorten the path you notice it changes the color. If I lengthen the path it becomes a little bit more distinct. And I can also add colors to this so you can select your object and you can either click here on the gradient fill button or you can just click on the fill color and that'll open the gradient panel.
Now, to add a gradient or to add color to a gradient, you just click on the ramp. This color to color is called a ramp. And if I double-click it, I can choose a color. So I can go like that. And you notice that the change is immediately reflected. And if I bring the black in, and your clients looks at that and he goes, no, that's not our color. Sorry, we would rather have the black and the red. Well to get rid of a color just pull it off the ramp. Other things that you can do here as I said, you can add opacity to the color, so if I pull this color down you notice that the color changes as it moves across this color chip turns grey to show me opacity.
You can also change the gradient type on the fly if you don't want a linear but a radial gradient you can do that. And choose radio. And you can see that. The radio gradient is immediately reflected in the shape. So there you go. There's working with gradients. They really are a lot of fun to work with. I've shown you how to add a gradient. Two places actually, here. With the gradient fill button. And actually the fill color, once you've chosen your gradient. Now I've shown you that you can use the gradient panel to choose the colors. You can use it to amend the colors.
You can add colors, delete colors. You can apply opacity up here and you can swap the colors so you can change the look rather than swapping crayons around And you can also change the type of gradient on the fly just by simply selecting one of the presets.
There are currently no FAQs about Fireworks CS6 Workshop.
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.