Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
All right, a few exercises ago I was telling you that when I'm downsampling continuous-toned photographic images, I like to first flatten my artwork and then apply the Image Size command using Bicubic Sharper. That is not what I do when I'm working with high contrast designs or other artwork that include graphical elements, and lines, and shapes, and text, and that kind of thing, because in that case Bicubic Sharper doesn't fare nearly so well. I have opened the composition that I created by the end of Chapter 10 and I've called it Final MH banner 4x.psd, because it's four time as large as the final Web graphic that I want to create.
And by the way, when you first open this image, you're going to get this font warning, telling you that some fonts are missing. That's Rotis once again, just click OK and don't worry about it. I also have opened this image, which is the final size graphic, where I have gone ahead and downsampled the image to 590 pixels wide, and it's called High-contrast comparison.psd found inside the 12_for_Web folder. And notice that I have two layers, one is called Bicubic, one is called Sharper. Now, Bicubic is the downsampling with the standard default Bicubic, best for smooth gradient setting.
And Sharper is Bicubic Sharper. When you first turn on the Sharper graphic and compare it, you might think that it actually looks a little better because the stars are popping out and the glasses are looking a little more razor sharp and all that jazz, but actually we have some problems here. I'm going to go ahead and zoom in to this graphic to four times its normal size, so 400% zoom ratio. And notice that we have these black halos surrounding every single one of the letters inside this image. We also have black halos around the individual stars, which is an unnecessary degree of exaggeration.
And by the way, it's going to increase file size, because that makes the image harder to compress, and we have dark halos around the rims of the martini glasses and the bubbles, and on and on, compared with turning that layer off, we lose all those unnecessary dark halos. We really don't need them. This was a sharply focused, high-contrast piece of artwork in the first place. It stands on its own. It doesn't need a bunch of aftermarket sharpening. So, I'm going to return back to my Final MH banner 4x.psd file.
There's no reason to flatten this image and apply the Image Size command, because the only advantage that the Image Size command has over the downsampling powers of Save for Web is that Save for Web cannot do Bicubic Sharper. It's just does standard Bicubic all the time. Well, that's all we need and it works from the composite image. It doesn't look at the layers the way Image Size does, so it's the perfect solution. So, I'm not going to worry about flattening, I'm not going to worry about Image Size, I'm just going to go to the File menu, choose Save for Web & Devices, Ctrl+Shift+Alt+S, Command+Shift+Option+S on the Mac.
Now, if this was a sufficiently large image, it's possible that Save for Web & Devices will complain at you. And it will tell you that this image is just too big to work on, in which case you're going to have to flatten it and downsample it and all that jazz. But I'm starting from a moderately large image in the first place, not a horribly large one. All right. Let's switch to the Optimized display here, so that we're just seeing one image. And now I'm going to downsample the image by entering 590 for the W value and pressing the Tab key. As soon as you press Tab, it actually does its thing.
Now again, it has this disturbing habit at least in this version of Photoshop of showing me a bright line on the right and bottom edges of the preview, that doesn't turn out to actually be there, so just go ahead and ignore that. Right now I'm looking at the image compressed using JPEG, notice that JPEG High and I'll go ahead and zoom in, so I can better see what I'm doing. The good news is that we're getting a small file size of just under 47K. However, the bad news is especially when compared with the original version of the image that we have all kinds of artifacting going on.
And artifacts are pixel transitions that don't contribute to anything to our actual understanding of that image file. In other words, it's nothing we did on purpose. It's something that was added by the JPEG compression, and it ends up looking like we have noise details throughout the image. And it's also creating a little bit of wiggle around some of these letters. Notice that kind of duplication of information around the hump of the H right there, and it also impairs the legibility of the text, especially if you compare these details to the original image, which doesn't have any of that noise going on, very smooth transitions.
There isn't that weird detail over the edge and so on. So JPEG, even though it services continuous-tone photographic images very well, it doesn't do a very good job on high contrast artwork like this. We're better off using GIF or PNG, and I'm going to explain each in the upcoming exercises.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 64261 Viewers
119 Video lessons · 71681 Viewers
125 Video lessons · 32342 Viewers
103 Video lessons · 31571 Viewers
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.