Start learning with our library of video tutorials taught by experts. Get started

Photoshop Elements 8 for Mac Essential Training

Saving for the web


From:

Photoshop Elements 8 for Mac Essential Training

with Jan Kabili

Video: Saving for the web

If you're planning on putting a photograph on a website, a blog or elsewhere online, it's important that you save the photo in the correct format, usually, the JPEG format, and make it as small as possible but with the kind of photo quality that you wanted to have, so that it's fast to download at the viewers end but on the other hand, so that it still looks good. And those two qualities, small file size on the one hand, and acceptable photo quality on the other, are always a trade-off when you're preparing an image for the web. Elements' Full Edit workspace provides a special interface where you can prepare an image for the web.
Expand all | Collapse all
  1. 2m 35s
    1. Welcome
      1m 18s
    2. Using the exercise files
      1m 17s
  2. 13m 0s
    1. Touring Elements
      7m 24s
    2. Starting from the Welcome screen
      5m 36s
  3. 16m 11s
    1. Importing photos from a camera
      8m 48s
    2. Dividing scanned photos
      3m 52s
    3. Capturing frames from video
      3m 31s
  4. 23m 13s
    1. Touring Bridge CS4
      7m 44s
    2. Opening files from Bridge into Elements
      5m 1s
    3. Rotating photos
      1m 17s
    4. Moving, deleting, and hiding photos
      4m 11s
    5. Renaming photos
      5m 0s
  5. 29m 16s
    1. Tagging photos with keywords
      6m 28s
    2. Rating and labeling photos
      5m 55s
    3. Sorting photos by filter
      6m 23s
    4. Finding photos
      4m 33s
    5. Organizing photos in Collections
      5m 57s
  6. 52m 52s
    1. Touring the Quick Fix workspace in the Editor
      8m 34s
    2. Applying Quick Fix lighting controls
      3m 33s
    3. Applying Quick Fix color controls
      6m 30s
    4. Applying Quick Fix sharpening
      3m 44s
    5. Using Quick Fix touchup tools
      7m 43s
    6. Fixing group shots in Guided Edit
      6m 25s
    7. Merging multiple exposures in Guided Edit
      7m 24s
    8. Applying the Scene Cleaner in Guided Edit
      6m 31s
    9. Running Automated Actions in Guided Edit
      2m 28s
  7. 30m 57s
    1. Touring the Full Edit workspace
      6m 5s
    2. Working with tabbed documents
      4m 28s
    3. Arranging panels
      4m 14s
    4. Using tools
      8m 15s
    5. Setting editing preferences
      3m 8s
    6. Adjusting color settings
      4m 47s
  8. 46m 0s
    1. Using Undo History
      6m 6s
    2. Zooming and navigating
      5m 38s
    3. Creating a blank file
      5m 43s
    4. Photo resizing and resolution
      8m 21s
    5. Enlarging the canvas
      3m 10s
    6. Cropping and straightening an image
      3m 12s
    7. Using the Recompose tool
      3m 23s
    8. Processing multiple files
      6m 16s
    9. Saving and formats
      4m 11s
  9. 23m 25s
    1. Understanding layers
      3m 30s
    2. Working in the Layers panel
      8m 53s
    3. Combining images with layer masks
      11m 2s
  10. 22m 24s
    1. Understanding selections
      3m 39s
    2. Manual selection tools
      7m 36s
    3. Automatic selection tools
      3m 9s
    4. Refining a selection
      3m 59s
    5. Modifying and saving selections
      4m 1s
  11. 55m 51s
    1. Using adjustment layers
      9m 21s
    2. Adding a Levels adjustment layer
      4m 49s
    3. Applying a Shadows/Highlights adjustment
      3m 24s
    4. Adding a Hue/Saturation adjustment layer
      5m 30s
    5. Adjusting with Color Curves
      4m 3s
    6. Removing a color cast
      3m 55s
    7. Correcting skin tone
      2m 10s
    8. Reducing digital noise
      3m 44s
    9. Sharpening photos
      9m 42s
    10. Working with raw photos
      9m 13s
  12. 18m 58s
    1. Using the Smart Brush tool
      5m 20s
    2. Using the Detail Smart Brush tool
      3m 30s
    3. Dodging and burning
      1m 49s
    4. Healing blemishes
      3m 51s
    5. Removing content with the Clone Stamp tool
      3m 15s
    6. Removing red-eye
      1m 13s
  13. 26m 26s
    1. Applying filters
      5m 6s
    2. Adding effects
      3m 0s
    3. Using layer styles
      3m 36s
    4. Using shapes
      8m 25s
    5. Using the Cookie Cutter tool
      2m 54s
    6. Converting color to black and white
      3m 25s
  14. 7m 35s
    1. Creating text
      4m 7s
    2. Editing text
      3m 28s
  15. 27m 26s
    1. Making a photo collage
      7m 15s
    2. Stitching a photo panorama
      3m 43s
    3. Saving for the web
      6m 40s
    4. Creating web galleries in Bridge
      6m 47s
    5. Creating a PDF slideshow
      3m 1s
  16. 4m 34s
    1. Printing photos and contact sheets
      2m 49s
    2. Sending photos by mail
      1m 45s
  17. 23s
    1. Goodbye
      23s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Photoshop Elements 8 for Mac Essential Training
6h 41m Beginner Oct 13, 2009

Viewers: in countries Watching now:

Photoshop Elements 8 for Mac Essential Training highlights the important features of this comprehensive image editing application. Photographer Jan Kabili shows how to use Photoshop Elements 8, along with its companion program, Bridge CS4, to organize and edit photos, build projects like web galleries and photo collages, and share photos with family and friends. Jan dives deep into the application's editing tools, which rival those of the full product, Photoshop, in their ability to take snapshots and turn them into great photos. Exercise files accompany the course.

Topics include:
  • Finding photos by keywords, ratings, and filters
  • Fixing group shots and merging multiple exposures with Guided Edit
  • Correcting photos automatically in Quick Fix
  • Adding adjustment layers to correct color and lighting
  • Eliminating red-eye in portrait shots
  • Reducing digital noise
  • Preparing photos for the web
Subject:
Photography
Software:
Photoshop Elements Elements
Author:
Jan Kabili

Saving for the web

If you're planning on putting a photograph on a website, a blog or elsewhere online, it's important that you save the photo in the correct format, usually, the JPEG format, and make it as small as possible but with the kind of photo quality that you wanted to have, so that it's fast to download at the viewers end but on the other hand, so that it still looks good. And those two qualities, small file size on the one hand, and acceptable photo quality on the other, are always a trade-off when you're preparing an image for the web. Elements' Full Edit workspace provides a special interface where you can prepare an image for the web.

It's called the Save for Web workspace. To access that workspace, I'm going to go up to the File menu, after I finished editing my photo and go down to Save for Web. And that opens the photo here in the Save for Web window. On the left is the original photo and on the right is a copy of the photo optimized for the web with whatever settings happen to be over here at the moment. I can use these two views to compare the optimized version with the original, to make sure I'm not degrading the photo quality too much as I try to get the file size down.

Over on the right, the first setting that I'll look at is the format. When I'm working with a photograph, I'll usually want to save it in the JPEG format, which stands for Joint Photographic Experts Group. The most important setting for optimizing in the JPEG format is the Quality setting and there are two ways to change the quality here. One is to come to the Quality slider and just drag it to increase the quality amount but usually, I'll use the Presets over here. If I choose the Low preset, that sets a quality of only 10.

If I choose a Medium preset, I get a quality of 30. High is a quality of 60 and so on. Now the higher I make the quality, the less compressed the image will be when I save it in the JPEG format. And the less compressed that the image is the larger its file size will be and the file size is reported down here at the bottom left of the optimized view of the image. So notice the file size now with the quality of High, if I reduce that quality to Medium, the file size goes down but the trade-off is that the photo quality also goes down.

So that you can see that, I'll put the quality down at Low and you can start to see that the image is breaking up a little in the green area here of the door. It's showing what are called JPEG artifacts, which basically look like square groups of pixels. Now when I'm judging for JPEG artifacts, I want to be at 100% view of the image so that I see it the same way my viewers will when they look at it on a website. And viewing this image at 100%, I can see those artifacts here and over here around the black number.

They are most often visible in areas of high-contrast like this. But just so that you can see them better, I'm going to get the Zoom tool from the abbreviated toolbox on the top- left of the Save for Web window and I'm going to zoom in, in the optimized image so that you can see those squares more clearly. That's what I'm trying to avoid. To go back to 100% view, I'm going to double-click the Zoom tool and to eliminate some of those JPEG artifacts, I am going to increase the photo quality to Medium. If I still see some artifacts as I do here, I might go to the Quality slider and drag it over just a bit, putting it somewhere between medium and high quality.

Now I find the appearance of the photo is acceptable to me and the file size is okay too. But there is no magic number for file size that I can recommend. That depends on a lot of factors, many of which you can't control, like the speed of the Internet on a given day, or the number of other graphics that might be in the pipeline and it also depends on how important photo quality is to you. But just remember that file size is always a trade-off with photo quality when you're compressing a photo as a JPEG for the web. There are just a couple of other settings to look at over here.

One is the ICC Profile setting. ICC profiles are part of a color management system that I explained in an earlier movie on color settings. If you're interested in that subject, you can go back and listen to that movie. But in a nutshell, if you think your viewers will be using a web browser like Apple's Safari, which can read ICC profiles, then I suggest that you check ICC Profile here and that will attach a little bit of textual information to your photograph that will describe to the web browser at your viewers end, how you intended the colors in the image to look.

So, there will be more consistency between the colors that your viewer sees and the colors that you saw while preparing the image for the web, here in Photoshop Elements. However, if you do add an ICC Profile, it will increase the file size. In this case, it increased the file size by about 3 kilobytes. Sometimes that's not worth it if you think your viewers will be using a web browser that can't read ICC profiles. However, I think that in the future, we're going to see more web browsers that can read these profiles. So in general, I recommend that you include an ICC profile with your images for the web.

One more thing to show you in the controls over here is in the Image Size field. Let's say that I decide that 18 kilobytes is just too big and I need to get this file size down lower but I'm not willing to compromise anymore in photo quality. Then what I can do is to reduce the actual dimensions of the file in pixels. So I could come over to the Height field here, select the current height in pixels and type a lower number, say, 250 pixels. Because Constrain Proportions is checked, the width will be reduced proportionately.

Then to apply that change, I am going to click the Apply button. As I do, keep your eye on the file size down here and you see it would be reduced significantly. But at the same time the dimensions of the image are smaller too. So that's all I would do to set up this image for JPEG compression. If I didn't like the result and I wanted to go back to ground zero, I could move my mouse over the Cancel button, holding down the Option key and that would reset all of the settings in this window. But I actually like this result so I am going to click OK and that opens the Save Optimized As dialog box, saving the optimized version of the file in the JPEG format.

At this point, I would navigate to a destination where I wanted to save this file and click Save. So the next time that you're preparing files for the web, don't just go up to the File menu and choose Save As and save another copy as a JPEG. Instead, use the special controls and the previews that you'll find here in the Save for Web window to prepare your images for display on the web.

Find answers to the most frequently asked questions about Photoshop Elements 8 for Mac Essential Training.


Expand all | Collapse all
Please wait...
Q: I have learned about keywords, but I need to learn more about IPTC and keywords. Specifically, when I add keywords (under the IPTC tab), must they be one word only?
A: A keyword can be more than one word.
Share a link to this course
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.
Upgrade now


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.

Upgrade now

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 Photoshop Elements 8 for Mac 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 preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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