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.
Text can be used as a mask just like Bitmaps or Vectors can. This makes complete sense, because text is really just another type of vector. So, I've got a file open here. We are going to do a bit of masking with text. Before we get started though, I want to show you the final result. On Page 2 of my design here, I've got my mask text creating a slightly different effect, tying in a Live Filter, and some slightly different positioning for that particular image. We get an interesting look to our design. So, we are going to hop back over to page 1 to actually build this out.
Now, I've got everything set up for you, all the objects are in place. If you want to build it completely from scratch, all the images that you need are in the Exercise folder. All right. So what we are going to do here is take a look at what we are up against. In the foreground images layer, we've got all of our graphics for our foreground elements, the three photos and the logo. And the background is where we've got our text and two Bitmap images. Now, the two images are exactly the same image. I'll make them both visible. You see if I hide and show one of them, you don't see any difference onscreen. So, we are going to use this text object to mask this bitmap, and then play around with Positioning and Live filters.
So, first thing I want to do is select my text. Now, the text itself has been scaled a little bit vertically, so it looks a little bit more stretched out, and that's the effect I was going for. Again, because it's text, and because the text is basically a vector, I can scale things without any real distortion. Keep in mind I am also looking at this at 50%. So, if I am going to 100 %, text looks pretty crisp. So I'll zoom back out, so we can see the whole thing. So, my text is selected. All I need to do is got to Edit > Cut and remove it completely from the design.
Now, I am going to select my top bitmap. I am going to choose Edit > Paste As Mask, and the text gets dropped in as a mask. Now at the moment, you don't see any difference at all. If we take a look, the mask is obviously there, but because we are dealing with the same image for our mask and for our background. We are not noticing any difference just yet. So, let's start to make this look a little bit different. We are going to go down to our Live Filters, and I am going to choose Shadow and Glow > Drop Shadow. As soon as I do that, all of a sudden things start to stand out a little bit.
We can actually see a shadow edge around the text. So, that's step one in what we are going to do. Step 2 is repositioning the actual image that's part of the mask, so that we get a slightly different texture inside the text itself. As it sits here right now, it actually doesn't look too bad. But I want to try something little bit different with this. So, I am going to select my Pointer tool, and I am going to grab the little control handle in the middle of the Mask Object, and I am going to drag upwards. As I drag upwards, you'll see we are getting a different look.
We are basically moving the photograph, and we are basically repositioning it within the mask. So as we move it around I have to watch they stay fairly centered here, because I am working with the full width of the design. But once I get something that I like, I'll let go over the mouse, and you can see that we get a completely different look to things now. Now, you notice, I didn't move it up quite high enough. I am still seeing the shadow or the reflection of the bird in the water. So, I got to move that a little higher up, so that shadow is gone.
Something like that looks pretty good, and there we go. So, you could see that didn't take very long at all. All we have to do was cut the text from the design, paste it back in as a mask, reposition the photo inside the mask, and we've got a pretty interesting looking design using the same photograph, for both the background and for the mask.
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.