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.
When you are exporting out images for the Web, typically, if they are photographs, you are going to be exporting them out as JPEG files. JPEGs do a good job of handling image data. However, they can do a real number on text quality. JPEGs are not really good at handling solid color, and that's usually what text is made up of. So we are going to look at an example here of how to maintain better quality with your text, when you are planning to export out your file. So, here's my design, a little teaser image going into one of my Web pages. We've got a little saying up top and a little logo down in the bottom.
As it stands right now, it looks fine inside of Fireworks. But I want to do a couple of things here. I am going to open up my Optimize panel, and I'm going to switch to my Preview mode. As soon as I switch to Preview, we're seeing exactly what is going to happen to the image once it's exported based on the current export settings, and if you look really closely around the text, you'll see that there is some issues, these weird little artifacts going around there. I'll zoom in just a little bit so you can see it a little bit better. This is what's referred to basically as JPEG Artifacting. It's one of the problems we have with text in JPEGs is that we get some odd little weirdness going on around the text.
In many cases, the text actually appears a lot more blurry than it was originally intended to be. Now, Fireworks has a couple of ways in which we can handle this kind of thing. Firework has a great little feature for reducing this text quality problem in JPEG files. We'll take a look over in the Optimize panel. You'll see an option here called Selective Quality. Now, it's currently disabled. You can see there is a number 90 in there, and it's not available for editing. We are going to be making a change to this in just a second. What I do want to point out before we go there is take a look in the bottom-left corner of your Document window, and you'll see that the current file size is 22 KBs, not bad for a relatively large file.
We'll see why this becomes important in just a minute. We are going to hop back over to our Selective Quality. We'll click on the little icon to enable the Selective Quality settings. So, we have a couple of choices here, and the one we are working with is really the easiest one. All we are going to do is enable the Selective Quality. When you enable this option, you've got the ability to control the quality over certain elements. As soon as you enable this option, you'll also notice that Preserve text quality appears checked as well. Now, we are not seeing the effect just yet, but when I click OK, if you take a really good look at your image, you might have noticed that things got a little bit nicer around the edges of the text.
Keep in mind, I am zoomed into 150%. So, it's larger than we normally see for our actual image. The file size, however, also increased somewhat. We are at just over 24.50 KB, so we added a couple of kilobytes to the entire files size. We are not stuck with this particular value. If we are really concerned about the file size, we can certainly adjust the Selective Quality. I can click on that numerical value there and maybe set it to 80, and see what that gives me. I'll just tab out of the window there. I've saved about a KB.
But at 80, we are starting to see those Artifacts much more noticeably. So, I am going to change it to 85, and that's a bit better. Let's set the file size to just under 24 KB. That's not too bad. I think we're pretty good stead there. If I go back out to 100%, we are not noticing that problem quite so much anymore. If I am still concerned about it though, I can certainly beef it back up to 90. But that's giving me a way to quickly control the quality of the text when it gets exported as part of a JPEG file.
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.