Join Tom Green for an in-depth discussion in this video Project: Creating a banner image, part of Fireworks CS6 Workshop.
In this lesson, what we're going to do is sort of pull together what we've learned in the chapter so far and apply it to an image. And the image we're going to recreate is right here. It's this little wall from the Country Cottage Cafe that is sitting in the header of the Fireworks user page. And to get yourselves started, I want you to open up the countrycottagecafe.jpg image located in your Exercise folder. And when it opens, welcome to the Country Cottage Cafe.
We only need a piece of the image so we can crop the image. And all you've got to do there is just draw at the Crop Area. And making sure that you don't have the constrained Proportions button clicked here for the width and height in the Properties panel. You can actually manually set the width and height of your Crop Area. Now, the Crop Area is 504 pixels wide and it is 114 pixels high. And we want to take it right to the edge, so we'll just type in a 0 for the x, press the Enter or Return key, and there we are.
Push the cursor up to the top, you see the Compass. And we can pull down and identify the Crop Area. Having done that, you can press the Return, Enter key, and we now have our image. Select the image and copy it, Cmd or Ctrl C. You can also use Edit > Copy if you want and open up a brand new document, File > New. Now, a new document will always open up to the size of the contents on the clipboard, and which is the exact size of the document.
We don't want that. We're going to slide that shadow under it, and I'm going to show you a couple of ways of doing that. So let's take the width out to 520 pixels, and we'll set the height to 150. Look over the white canvas color and a resolution of 72 pixels per inch, click OK, and you can see there's the new document. Now, all you have to do is Paste. Cmd or Ctrl + V, and the image comes in. Let's just move it into the middle of the area. Now, let's put that little border around it.
And the border is done using a Filter. So you'll select the image, click the plus sign for Filters > Bevel and Emboss. We're going to put an Inner Bevel on it. It looks like a button right now. So, we're going to change that to a ring. And it looks like it's framed. Now that frame is way too thick, it's 10 pixels thick. Let's bring the thickness down to about 4 pixels. And we're going to have a 75% contrast, so it's a little bit of an edge there.
The softness is going to be at 3, and of course, the angle of the light is 135 degrees, and we are done. And if you take a look at your Layers panel, you'll see there's the Bitmap. Now, adding the shadow, there are three ways to add the shadow to this image. The first way that we're going to do is we're just going to simply come to the Vector tools, select the Ellipse tool, and just draw out an oval ellipse that's filled with black.
And you can change the edge to feather. Now, let's take the feather out to about, let's say, 40 pixels. And now, I can just take that our little oval, move it into position, and I come over to the Layers panel and slide it under the Bitmap. And we have created the shadow. Okay, that's one way of doing it. Slide the Ellipse Layer and press Delete key to get rid of it. Another way is to simply do this. You select the Oval Marquee tool, again dry your lips.
Make sure that you've got a black fill. Select the Paint Bucket, come over and just click. Now you see that the feather is at 40. Settings from the Ellipse tool were applied, so we just click inside the selection and there it is. And if I deselect, you can see there's the shadow. Now the problem with this is that the shadow you see goes over the image, so that's not good. But it, you know, it's a way you can do it.
Okay, undo. Cmd or Cntrl + Z. Just keep doing it. Okay, shadow's gone. Keep the selection. What you're going to do this time is you're going to come over to the Layers panel, and you're going to click on the Add New Bitmap right there. Notice the selections there. If you make a selection with Bitmap and there's a selection there, it will go onto that layer. This time, just get the Paint Bucket, click inside the selection. It's over the image because it's in its own layer. Just come to select, deselect.
And all you have to do is slide the Bitmap Layer with the shadow under it, and you have now added a drop shadow. So, there you go. There's a way of taking a piece of a picture, jazzing it up using a filter. In this case, we used the Inner Beveled Filter, and then I showed you three ways of adding the shadow. The first way is to use the Ellipse tool and just slide it into it's own layer. Or you can use the Bitmap Oval Marquee tool and just draw the marquee. And using the Paint Bucket tool, just click inside the selection and fill it with the color.
You can set the feathering and the opacity and all that, and there are two ways to doing that. One way is to add it directly to this one Bitmap, that's kind of a destructive method. And the other way I showed you was to simply just add a new Bitmap. Put the selection on that Bitmap Layer, fill it, and then away you go.
- The Fireworks interface
- Vector drawing
- Working with bitmaps
- Image retouching and color correction
- Masking in Fireworks
- Working with text
- Creating symbols
- Creating for Edge and mobile
- Importing Photoshop and Illustrator documents