Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,974 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Customizing the workspace
- Working with pages, layers, and states
- Importing content
- Comparing bitmaps and vectors
- Creating and editing vector shapes
- Converting artwork into graphic, button, and animation symbols
- Animating in Fireworks
- Maintaining crisp text in web images
- Sharing content between pages
- Optimizing images for export
- Integrating with Device Central, Dreamweaver, Flash, and Flash Catalyst
Skill Level Beginner
Welcome back to our optimization journey. In the last lesson, we sliced up the majority of our Web site, but we have a couple of other elements we need to deal with here. We've got a big JPEG file that's underneath a semi-transparent text box and also underneath a little tag. And I'd like to have these all as separate elements, so I've got a little more control over placement. So I'm going to start off with the big image. We're going to select our JPEG file. I'm just going to press Ctrl+C or Command+C on the Mac to copy it. Then I'm going to press Ctrl+N or Command+N for a new document, and you'll see that Fireworks picks up on the copied size of our file and gives me the exact dimensions of the JPEG file right here.
I'm going to click OK, and I'm just going to paste it in. I'll zoom out a little bit so you can see things a little bit better. There it is. It didn't get place in exactly the right spot, but that's not a big deal. We can go down to the Properties panel and just type in 0, 0 on the X and Y coordinates, and then it's dropped in the right location. So this image ideally needs to be a JPEG file. It's a photographic image. So we can slice this up if we like, but we can just as easily deal with this inside the Preview Window and simply by choosing JPEG as our format choice and maybe I'll do it 2-Up so I can preview that the two of them compared to each other.
There is the original and here's the JPEG quality image. I'm going to zoom in a bit. I want to sort of keep focus on their faces because that shows up in the original image. Now, at this moment we're looking okay. We have 80% quality, and it doesn't look so bad, but it's a 112 kilobyte file. So I want to try and get this down to a slightly lower number. I'm going to reduce this down to, let's try 70%, and that gives me 76K.
That's not bad, but it's still a fairly large file, and I'm starting to get some noticeable artifacting around their faces, which I'm not really, really happy with. I'd just zoom in one more step, so it's definitely getting a little bit fuzzier around the bodies compared to the original image. So we can't really do much with the plain old optimization setting here, but there is something else we can try. I'm going to switch back to my Original view, and I'm going to zoom out a little bit. And what I want to do is I want to select the areas that I want to keep crisp, and then let some area sort of fall off a little bit.
We've got a lot of oceanscape and stuff like that here that is really just background information. It's not too much of a problem if that gets a little more heavily compressed than our people. So I'm going to try and do a quick selection here with my Magic Wand. I'm going to increase the Tolerance to about, oh, let's go to about 30. Let's go with the standard. Let's try 32 for it to see how far we get. Oh, if I hold down the Shift key, I can go ahead and continue to select those areas. The trick is with this I just want to try to make sure I don't select the people.
It doesn't really matter to me anything else as long as I get the majority of this thing selected. And sometimes working with the lower tolerance with your Magic Wand is actually faster than trying to use the high tolerance settings, because the high tolerance settings can select too much and in fact, we've already got some of her jeans selected there. All right! So now I've got most of it. I can swap over to another Selection tool.
I'm going to grab my Lasso tool and hold down my Shift key. I'm just going to draw around the rest of this, or the most of it anyway, so and same over here, and let's try to get rid of - anything that doesn't require any great detail I'm going to try to select in this. And it may take me a couple of little runs, but we'll get there. Now again, I am holding down the Shift key, and that allows me to add to my current selection without losing anything that's already selected, just try and trace around the foot a little bit, not too too worried about the area in between the legs.
It's not much there. So that's selected most of the sky for me and if I hold down the Alt key or the Option key on the Mac, I can get rid of the selection that sort of walked across on her jeans. There we go. I've done a relatively decent job of making a selection. I could certainly spend more time and fine-tune this. The reason I'm making this selection is so that I can use something called a JPEG Mask. Now, I've selected the sky and the scenery because it's actually a little easier to do than select the people. What I need to do before I enable this JPEG Mask is I need to invert the selection.
So I'm going to go to my Select menu and choose Select Inverse. So now the people are selected. My next step is to actually apply the mask. So I'm going to go up to my Modify menu and choose Selective JPEG and from there choose Save Selection as JPEG Mask. And you see what happens, my people get outlined in this pinkish mask, and the rest of the scene is completely normal looking. Now, what the idea behind this is I'm basically going to be preserving the detail in the masked area and allowing heavier compression in the area that is not masked.
So I have a little more control over the quality, and we'll see what we can get away with here. As soon as I enable a JPEG Mask, the Selective quality option automatically get switched on, by default. And basically the idea here is that Selective quality in the masked area is going to remain at 90% quality and at the moment, the rest of my design is going to be 70%. So let's switch to Preview mode, and let's zoom in a bit. Now, all we need it to be at 100% here, so let's go to 100%.
And I'll start dragging down my Quality, mostly as an example here. I'm going to reduce this significantly so you can see what happened. So I'm going to go down to about 40%. Now, if you look really closely you're going to see that we're getting a lot of JPEG artifacting happening down the sky. Now I've granted I've really reduced this significantly, but you're starting to really notice, an image quality change whereas my main two people are still fine. Now, they don't need to be quite at 90 % so I'm going to knock them down to 70 or down to 80%, sorry.
That should be more than enough for them. You'll notice as I do that slight changes to the file size, we dropped down to 73 K, and I think I'm going to apply some Smoothing as well. Now the Smoothing, we'll have to try this out and see if it does a good job. It may affect my main people a bit too much and in fact, it is. So Smoothing is not really going to be all that suitable. In fact, I'll just go down to 8 so you can see what happens when you choose a value like that. Basically, it's smoothing out the pixels and making everything blurry.
So it really wasn't suitable in this case. So I'm going to go back to 0 and I'm going to increase my Quality for the rest of my image to, let's try about 60. That's not bad. At 100% I can still see it a little bit, but you know what? It's not too too bad, and we're going to be missing a lot of this information too because of the overlay that's happening with the text box. So I think I can live with that. So it's 60 Quality for everything else and 80 Quality for my subjects that are in the mask.
I've been able to go from a file that was over 100 kilobytes down to an 85 KB file. So that's not too bad. From here, I'd want to go ahead and export the file, or I can save it with these settings. So what I think I'll do is I'll do File > Save As, and remember, if you're saving this and you want to save things like that JPEG Mask, save it as a PNG file. That way when you come back to it, the information is still there. So I'm just going to save this as couple and notice my default option is Fireworks PNG.
So I'm going to go ahead and save that. I'll do the exporting later on. Let's take a look at our other two images that we've got to work with here. So I'm going to hop back over to my original design, and I'm going to select my tag. Now the tag is something that is basically sitting on top of my photograph, and again, it's covering up a lot of the area. So I want to export this out as well, and I want to export this out with some transparency. So I'm going to, again, copy, so Ctrl +C, and I'll press Ctrl+N for a new document, and I'll press Ctrl+V to paste that in, and it dropped itself right in there quite nicely.
Now, in this case here, again, because this is overlaying a photograph, I do need to have some transparency going on. So I'm going to change the formats here. I'm going to switch to Preview, I'm going to go from JPEG to, well, let's see we'll try PNG 8 to begin with, and I want to set up Alpha Transparency and actually, you know what, that might be okay. That might be okay. So one of the interesting things about Fireworks and PNGs is that Fireworks is the only application I know of that supports variable transparency in an 8-bit PNG file.
You can't do this is in Photograph. Take a look over in your Color palette here, and you'll see all these colors that have a little chunk taken out of them. And this indicates that there has been some variable transparency added to this. So even is an 8-bit file, we've still got some transparency working for this around the edges, probably around the string and around the edges of the tag. Now, my other option, if I want transparency, is to choose PNG32. It has a default of transparency but only if you set your Canvas color to transparent, okay? If you have a cut background color in your file and you try to export as PNG32, you won't get a transparent image. You have to have a transparent canvas.
And that file is going to be 17 kilobytes, so let's just compare there, 17 compared to 4. I think I know which way I'm going on this one. It doesn't look that bad at 100%. So this one will end up being a file that I save out as a PNG 8 with Alpha Transparency. And again, if I'm not going to export it right away, I can just press Ctrl+S to save this, go to File > Save As, and I want to save this as tag, and we'll save it as a Fireworks PNG file.
There that one is done now. Okay, one more. I'm going to hop over again. Our last one is this semi-transparent text box. This is another situation where we're going to be calling on the PNG format to handle this variable transparency, the fact that this is somewhat see-through. If I select the box, you'll notice that it's got an Opacity of 95%. That's what giving it that a little bit of see-through or semi-transparency. So what I want to do here is select that image, and again, I'm going to copy it so Command+C, and this is actually just a vector image with a gradient applied to it.
So I'll copy it, New Document, and I'll paste it, and you'll see it comes in as 95% quality. Now, also again, I want to make sure that my canvas is transparent. This is really important, and you can just see that little checkerboard showing up underneath that image. I've a couple of choices here with this. I could export out the entire graphic as a one big chunk and drop it into a div as a background image. But if you want some flexibility in terms of whether that text box is going to get wider or not, probably the better choice would be to save this out as a slice or a smaller piece.
Now I'm going to keep the whole image in here, but I'm going to go ahead and draw a Web Slice. It doesn't need to be very much, so I'll go to about 20 pixels again. There we are. And I want to make sure that this is being exported out in the format I want. PNG 8 is going to give me --let's switch to Preview mode here - 817 bytes. PNG32 is 4 kilobytes. That's still not bad actually, and it's tempting to work with the PNG32.
The only risk you run with PNG32 is the fact that older browsers, like older versions of an Internet Explorer, have issues handling that transparency. So it's kind of iffy, but if you want to sort of think in modern-day standards, you can get away with PNG32 or PNG 8 and certainly give it a test in your favorite browsers, or maybe your at least favored browsers, and decide which version do you want to go with. So I'm going to go with, I think just because of file size, I'm going to take a look at that PNG 8 again.
And at 100%, even though it's a gradient, it doesn't look bad. So I think I'm going to stick with that, I'm going to rename the Slice. Let me go back into my Original view here, I'm going to rename the Slice, textbox_bkg, and then I would export out that slice as well. Now, again, I'm going to save this as a record, so I've got the file to come back to, so I'll choose File > Save As, and I'll just call it textbox_gradient, so I know, all right, save it into my folder.
So you can see here that even though you can create some pretty sophisticated graphics and designs inside of Fireworks, you may find yourself in the situation where you'll need to pull some of those graphics out of the original design in order to export them properly. Don't be afraid to do this. It's just part of the workflow as a Web design professional, and it's a good practice, and it's a good idea to get comfortable with it, so that you can produce those complicated and beautiful and sophisticated designs that you really want to do.