New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

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

Up and Running with Photoshop CS6
Illustration by

Saving for the web


From:

Up and Running with Photoshop CS6

with Chad Perkins

Video: Saving for the web

So let's say I have finished my masterpiece, and now I'm ready to put it on the web for the world to see it. What I'm going to do is go to the File menu, and I want to Choose Save for Web. We can choose Save As, as Choose File Formats there, but we're not going to get the control and flexibility that we will get by choosing File > Save for Web. This opens up it's own little Window that gives us all kinds of power for saving for the web. First we have the original image, and actually I want to zoom out here so I'm going to use my keyboard shortcuts, Spacebar Ctrl Alt or Spacebar Cmd Option on the mac. Click out so I can see everything.
Expand all | Collapse all
  1. 1m 59s
    1. Welcome
      1m 59s
  2. 3m 7s
    1. Overview
      3m 7s
  3. 19m 26s
    1. Importing images from a camera
      4m 3s
    2. Using Adobe Bridge
      7m 10s
    3. Using Camera Raw
      5m 57s
    4. Opening images in Photoshop
      2m 16s
  4. 45m 18s
    1. Creating new documents
      3m 43s
    2. Interface overview
      5m 43s
    3. Navigating documents
      4m 58s
    4. Working with layers
      9m 33s
    5. Straightening images
      3m 15s
    6. Cropping images
      3m 54s
    7. Performing basic transformations
      5m 45s
    8. Moving and aligning objects
      8m 27s
  5. 8m 36s
    1. Understanding pixels
      2m 19s
    2. Understanding resolution
      4m 32s
    3. Saving your work
      1m 45s
  6. 23m 33s
    1. Understanding color modes
      3m 55s
    2. Using adjustment layers
      3m 35s
    3. Fixing problems automatically
      2m 36s
    4. Reading a histogram
      3m 40s
    5. Adjusting exposure (brightness)
      4m 27s
    6. Adjusting colors selectively
      5m 20s
  7. 31m 4s
    1. Intro to selecting
      4m 47s
    2. Making quick selections
      6m 45s
    3. Refining selections
      8m 26s
    4. Making a collage
      11m 6s
  8. 11m 46s
    1. Removing small problems
      2m 4s
    2. Fixing bigger problems
      6m 39s
    3. Intelligently scaling an object
      3m 3s
  9. 12m 33s
    1. Creating Smart Objects
      5m 13s
    2. Applying effects
      5m 1s
    3. Adjusting applied effects
      2m 19s
  10. 26m 30s
    1. Creating text
      5m 47s
    2. Editing text
      8m 30s
    3. Using layer styles
      5m 54s
    4. Creating graphic design elements
      6m 19s
  11. 31m 14s
    1. Painting
      9m 54s
    2. Customizing brushes
      9m 44s
    3. Creating vector shapes
      11m 36s
  12. 14m 51s
    1. Understanding file formats
      3m 46s
    2. Saving for the web
      7m 6s
    3. Printing from Photoshop
      3m 59s

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 ...
Up and Running with Photoshop CS6
3h 49m Beginner May 14, 2012

Viewers: in countries Watching now:

Adobe Photoshop is more than just an image editing application—it is a foundational staple in all the visual arts, from print design, to photography, to web design, to motion graphics and 3D graphics. In this course, Adobe Certified Instructor Chad Perkins covers the basics of Photoshop. Learn about the components of visual images, making selections, color correcting, fixing images, outputting images, and much more. This course uses Photoshop CS6, but the information presented is applicable to all versions of the application.

Topics include:
  • Getting images into Photoshop
  • Creating and navigating documents
  • Working with layers
  • Cropping and straightening images
  • Color correction
  • Making selections
  • Fixing image problems
  • Working with effects
  • Creating and editing text
  • Exporting and printing
Subjects:
Design Photography video2brain
Software:
Photoshop
Author:
Chad Perkins

Saving for the web

So let's say I have finished my masterpiece, and now I'm ready to put it on the web for the world to see it. What I'm going to do is go to the File menu, and I want to Choose Save for Web. We can choose Save As, as Choose File Formats there, but we're not going to get the control and flexibility that we will get by choosing File > Save for Web. This opens up it's own little Window that gives us all kinds of power for saving for the web. First we have the original image, and actually I want to zoom out here so I'm going to use my keyboard shortcuts, Spacebar Ctrl Alt or Spacebar Cmd Option on the mac. Click out so I can see everything.

One of the problems I see is that my image size is pretty wide, 1458 pixels wide by 972. That's pretty colossal for an image on the web. So what I actually want to do is maybe to take this down to 50%. And that's a little bit more manageable for the web. And for quality here, I want to take this to Bicubic Sharper. So if you're going to use res something up, if you have to make something bigger by scaling it up which is typically not something you would do in this dialog box.

But if you had to, you want to use Bicubic Smoother, and if you're shrinking an image, you want to use Bicubic Sharper. If you forget and leave it on Bicubic, it it's not the end of the world, but Bicubic sharper will get you there, a little bit smoother. I could just hit Tab to, and actually make that happen. And I'm going to press a Spacebar + Cmd or Spacebar + CTRL, to zoom back in there so we can see our image. And if we click on orignial, this is the original image, if we click on optimized we can see the same image, but using the compression method specified over here on the right.

Also below the image we get all kinds of info about the image so if we look at our original for example, we can see it's 1.35 megabytes and this is the original. Click on optomize we can see that this is a gif and its 180k and it would take about 34 seconds on a 56k modem to download. And we could change that by clicking this little thing here. Its always a good idea if your going to put this on the web especially on like a professional website that your aware of your slowest customers but these days most people have much faster modem then a dial up 56k modem, so let's just say 512 for our purposes here. It only takes five seconds as a GIF.

There's also some more information here about the GIF. But GIFs are really good for areas of flat color. If we have a flat vector graphic that we're going to save, GIFs are good because then we get this color table here, we can choose how many colors we want in the image. And we can choose our file formats up here, so right now I'm using a GIF. There's 256 colors, but I could break this down to just, maybe 16 colors. And you can see how there's little what they call dithering. Basically it's using little dots to try to simulate other colors. And I could also, click one of these colors, and I don't need this red for example click it, to select it, put it all to the trash can to throw it away, in that particular tone gets thrown away.

But for most images with continuous tone, with smooth gradual changes in color, photos and the like, we don't want to use GIF, we want to use JPEG if we can help it. So, I'll change this to JPEG, and then we get a much better image quality here, and you'll notice it's only 49k, so it's less than a third of the size, and it looks much better. So again, if you're looking for flat art, GIF is better, typically. If you're looking for something like photo realism then you'll probably want a JPEG image.

And we could adjust the quality here, maybe to 100% and as we take this down lower, let's get somewhere around there, it'd be about 50%. We don't really see too much of a problem, until we zoom in. I could just click on the zoom tool here in the little mini toolbar and click here and we can actually start to see a little bit of the problems. But it sure would be nice if we could see the original and the optimized right next to each other, so we can see how much of this image is being degraded.

And we can, by clicking on the (LAUGH) (INAUDIBLE) panel here, we can see the original on the top, oops, I accidentally zoomed in too much. I'm going to hold the Alt or Option key, click that and zoom out a little bit go back to the Hand tool. And so we have the original at the top and then we see what the degraded compressed JPEG version will look like so that way you know what your getting into you know what the image compression is going to do to your image and see if you can tolorate it or not.

So this actually looks fairly decent. We're losing some details here and a few other places, but generally that looks pretty good. I'm think I'm just going to bump this up to about 65, just for good measure here. And we don't have the color table for GIF images because GIFs don't allow you to create a color table and then throw away colors selectively like JPEGS do. Another popular format now is what they call PNG, PNG. And this is popular on the iPhone for graphics, and on the web it's becoming more and more popular. Just a lot of power here there's two different type of PNG's. There's a PNG 8, which is basically the equivalent of a GIF as you can see, we have a little color table again.

And there's also PNG24, which is kind of like smooth color, like a JPEG. Now one of the big advantages of the PNG, actually the PNG24 specifically, over the JPEG, is that JPEGs can not have transparency. If you just had like a simple shape, on a transparent background in Photoshop, then if you saved it as a JPEG, it would force you to create a mat behind it, and that's what this mat color swatch is. And so if we want to save that transparency we'll need to use a GIF, or a PNG 8, which creates a hard edge of transparency, or we could choose PNG 24, which actually can create subtle, faded edges, so we have a gradual, going from opaque pixels to transparent pixels.

You can have a feathered edge, essentially, with a PNG 24 file. Now the magic here is that when you are done you can click Save at the bottom and once you save out this image you can go back to Photoshop and your original image is not compressed, your original image isn't even shrunk down at all. So this is basically just saving a copy for the web and not actually changing the size of your image. So if you're working on a, a super big proof and you wanted to send somebody samples of it, the save for web dialog box is the best way to not only shrink your image down to size for the web, but to see which file format works best and what the final size is going to be.

There are currently no FAQs about Up and Running with Photoshop CS6.

 
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.
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.

join now 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 Up and Running with Photoshop CS6.

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
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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

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.