Home
Username:
Password:
Adobe Photoshop CS4 Tutorials

Web Preparation / Save for Web




Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.


Learn More

Subtitles of the Movie

The Save for Web feature is very powerful and I highly suggest that you use it. What it does is it allows you to maintain extremely high quality in your images but it compresses them to a very manageable size so that your Web page is loaded very quickly. Now in this particular image if I were to go to the Image Menu and choose Image Size I can see that this file as it is, is 796K. Now that's just under a megabyte. That's really too large for practical Web use, especially if you're going to have a whole bunch of different images on the same page. Now even though computers are getting faster and faster with the high-speed modems and DSL, and the cable modems and all that great stuff, this would load very quickly, but sometimes you want to design for a lower common denominator. So what I'm going to do is show you how we're going to squish this file size down but still have the image look great, and you're going to find that option under the File Menu, right here where it says Save for Web and Devices. And once again, I use this all the time and you'll be quite shocked at how efficient it is and how great your images will look once they're done. So what do we have here? We have the ability to click on a slice and we could optimize them individually or we can choose an entire page or an image to do this with. So here's the original and here's optimized, and we can look at the image in 2-Up fashion or 4-Up fashion. Let's go ahead and look at the 2-Up. Here in our original we can see that this is 797K as I showed you earlier. As a matter of fact, let me to go 4-Up so you can see this more clearly. Now, unfortunately this is a pretty big dialog box so I really can't show you the entire thing, but you can see that this one here is 15.84K. The quality is really not that different. Look at this one here, and look at the GIF file. So what you can do is go to Presets and you can choose from JPEG, PNG, and WBMP, and of course that's black and white, but look how small that is. It's 3K. So I'm going to choose PNG. No, actually I'll go to JPEG so we can just focus on what we're doing here and look at the quality now. Here we have a much, much compacted file size. Now there is some slight dithering and pixelization compared to this one, which looks much smoother, but you can always go over here now and adjust the Quality. So the Quality currently is 60. We can go to this dropdown and choose Maximum, or we can choose Very High, and always keep your eye over here and see how that number changes. So this slice is going to be 18K and is going to take about four seconds to load on a 56K modem. We can also use the Quality Slider to drop this down manually, and once again we can keep our eye at the Quality here. Now, it looks really bad now. It's really degrading quite a bit, but the file size is only 2K. So your job as a Web designer is trying to decide a good in between point between Quality and Speed. So once you choose what you want you can also choose to look at a different preview as far as how the monitor's going to look, so this is a Macintosh with no color management, here's Windows, and you can use the Documents Profile so you could see how the cover space changes. You can also choose Metadata here as well. And, if you need to you can choose a Color Table. So, this is a very important window and it's really going to show you the power of this particular feature. We started out with an image that was 797K and we wind up with something that's 5K, but of course the image is degraded quite severely, so I would typically keep it on something like High and just try to fine-tune it so it's still going to look professional, but it's going to load very, very quickly. Once you're done, all you have to do is Accept it, and then you'll save your file to your Desktop and then you could put it in your HTML Folder, or upload it to your server and then look at the quality there. If need be, you can always return to your document and then modify it and then try Saving it for Web again. So, once again, I highly recommend using this because I don't know what the compression scheme it's using, but it really does create a very dramatic size difference and this will allow you to have more images on your website of higher quality that will load very fast for your viewers.

Tutorial Information

Course: Adobe Photoshop CS4
Author: Dwayne Ferguson
SKU: 33956
ISBN: 1-935320-22-X
Release Date: 2009-01-16
Duration: 9 hrs / 141 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available