Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Optimizing images for export, part 2

From: Fireworks CS5 Essential Training

Video: Optimizing images for export, part 2

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.

Optimizing images for export, part 2

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.

Show transcript

This video is part of

Image for Fireworks CS5 Essential Training
Fireworks CS5 Essential Training

92 video lessons · 29787 viewers

Jim Babbage
Author

 
Expand all | Collapse all
  1. 3m 42s
    1. Welcome
      1m 22s
    2. What is Fireworks?
      1m 59s
    3. Using the exercise files
      21s
  2. 1h 27m
    1. Creating and opening documents
      7m 36s
    2. Understanding the interface
      9m 43s
    3. Working with tabbed documents
      6m 18s
    4. Setting up rulers, guides, and grids
      10m 7s
    5. Using tooltips and Smart Guides
      5m 40s
    6. Working with panels
      9m 29s
    7. Working with pages
      8m 59s
    8. Working with layers
      13m 13s
    9. Working with states
      4m 35s
    10. Using the Properties panel
      4m 38s
    11. Using the Preferences panel
      7m 34s
  3. 52m 39s
    1. Understanding the Fireworks PNG format
      2m 11s
    2. Saving and exporting files
      5m 11s
    3. Importing files
      5m 34s
    4. Opening Photoshop files
      6m 7s
    5. Opening Illustrator files
      3m 58s
    6. Exporting a single file
      9m 57s
    7. Using the Image Preview window
      1m 52s
    8. Using the Export Area tool
      3m 10s
    9. Creating PDF files
      4m 16s
    10. Saving Photoshop files
      5m 48s
    11. Using Fireworks files for Illustrator
      4m 35s
  4. 1h 2m
    1. Understanding bitmaps
      1m 32s
    2. Resizing images
      3m 48s
    3. Using the selection tools
      8m 0s
    4. Using the drawing tools
      8m 19s
    5. Retouching with the corrective tools: Rubber Stamp
      12m 16s
    6. Using the bitmap effects tools: Blur, Sharpen, and Replace Color
      7m 33s
    7. Using more bitmap effects tools: Dodge and Burn
      7m 1s
    8. Improving images using the Levels filter
      8m 15s
    9. Creating a bitmap mask with a selection
      6m 2s
  5. 1h 10m
    1. Looking at the vector toolset
      6m 53s
    2. Using the Pen tool
      7m 32s
    3. Editing vector shapes with the Freeform and Reshape Area tools
      4m 35s
    4. Filling shapes with patterns and live filters
      3m 17s
    5. Using Auto Shapes
      7m 24s
    6. Using shapes as image elements
      4m 16s
    7. Scaling shapes
      5m 28s
    8. Masking objects with vector shapes
      7m 13s
    9. Applying strokes
      5m 52s
    10. Using Vector Path and Path Scrubber
      6m 9s
    11. Using the Compound Shape tool
      7m 40s
    12. Using Snap to Pixel
      2m 15s
    13. Using Gradient Dither
      1m 46s
  6. 51m 18s
    1. Understanding symbols
      5m 41s
    2. Creating graphic symbols
      13m 11s
    3. Creating button symbols
      10m 22s
    4. Creating animation symbols
      5m 4s
    5. Sharing symbols with the Common Library
      1m 37s
    6. Editing the instance of a symbol
      3m 46s
    7. Adding component symbols to a design
      8m 46s
    8. Exporting and importing symbols
      2m 51s
  7. 17m 34s
    1. Creating GIF animations
      9m 31s
    2. Animating with Twist and Fade
      3m 47s
    3. Creating a tweened animation
      4m 16s
  8. 26m 46s
    1. Using text in Fireworks
      7m 19s
    2. Understanding text properties
      3m 14s
    3. Adding text in a path
      4m 43s
    4. Adding text to a path
      4m 31s
    5. Using text as a mask
      3m 35s
    6. Maintaining crisp text in web images
      3m 24s
  9. 28m 35s
    1. Having fun with filters
      8m 44s
    2. Working with Styles
      4m 10s
    3. Using Blend Modes
      4m 40s
    4. Converting bitmap selections to paths
      3m 50s
    5. Working with Adobe Swatch Exchange files
      2m 33s
    6. Using the Kuler panel for color inspiration
      4m 38s
  10. 1h 14m
    1. Understanding the web toolset
      1m 51s
    2. Creating hotspots
      6m 22s
    3. Using the Slice tool
      8m 57s
    4. Using a master page
      5m 20s
    5. Sharing layers across pages
      4m 49s
    6. Sharing web layers across pages
      3m 30s
    7. Using HTML component symbols
      3m 15s
    8. Creating choices and showing design options to clients
      7m 7s
    9. Importing pages
      2m 47s
    10. Previewing the mockup
      4m 17s
    11. Using HTML prototyping
      5m 22s
    12. Improving the workflow
      20m 30s
  11. 33m 19s
    1. Optimizing images for export, part 1
      15m 36s
    2. Optimizing images for export, part 2
      13m 36s
    3. Generating a CSS-based layout
      4m 7s
  12. 22m 20s
    1. Integrating Fireworks, FXG, and Flash Catalyst
      3m 56s
    2. Integrating Fireworks and Flash
      3m 46s
    3. Using roundtrip editing between Dreamweaver and Fireworks
      5m 52s
    4. Copying and pasting objects to Dreamweaver
      2m 57s
    5. Integrating Fireworks and Device Central
      4m 13s
    6. Working with Bridge
      1m 36s
  13. 13s
    1. Goodbye
      13s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Fireworks CS5 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.