Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
All right, I'm starting off back in Firefox for just a moment here. I just want to make sure we all remember the main Web page features a 590 x 280 pixel image. It includes not only the photograph, but also this text at the bottom with a black bar and a thin stroke. If you click on it, then you bring up this image here, which is the full 1770 x 780 version of the image. It's just a photograph. It doesn't include any text or bar or stroke. We're going to be scaling both of these images in this exercise. So I'm going to switch back to Photoshop.
Make sure that you have opened Desaturated shadows.psd, which is found inside the 12_for_Web folder. What we have here is a collection of four layers as you can see, one of which is a Smart Object. We're going to be looking at Smart Objects in all kinds of detail in the much later chapter. But for now, know this. A Smart Object is a container that holds and protects things. This particular Smart Object contains the full resolution Camera Raw image. So in other words, even though our graphic measures 2360x1040 pixels, it contains 4032x3024 equals more than 12 million pixels inside of this Smart Object, which is one of the reasons the file is so big.
It's 40 Megs, which is very large for the Pixel Dimensions that we have. Then we also have this Smart Filter, happens to be Smart Sharpen, which is radius dependent. What that means is if we reduce the size of the image, we're going to increase the impact of this filter. Now that's the kind of stuff we're going to see in lots more detail in later chapters. But for now, let's go ahead and see what happens if we decide to resample this image with all these layers intact. Go up to the Image menu and choose the Image Size command or press Ctrl+Alt+I, Command+Option+I on the Mac.
Make sure all of your check boxes are on as they are in my case. Incidentally, Scale Styles would be useful to us if we had any layer effects inside this image, but it does nothing to scale the impact of the Smart Filter. So there is nothing in Photoshop that automates the scaling of the Smart Filter at all. You have to do that stuff manually. Now I'm going to change the Width to 590 pixels that automatically reduces the Height to 260. We do not care about the Resolution. In fact, even though the Save for Web command goes ahead and automatically changes the Resolution value to 72 ppi without affecting the Width and Height.
The vast majority browsers don't even pay attention to that information. All right, now I'm going to recommend that when you're re-sampling photographic images, that you go ahead and choose Bicubic Sharper (best for reduction). Where Web graphics were concerned, I agree with this advice, because the sharpness that's applied by Bicubic Sharper looks great onscreen. It specifically geared toward photographic images. If this image contained type, or if it was a high contrast graphic, then I would not recommend this setting. I would recommend you stick with Bicubic (best for smooth gradients).
Anyway, we're going to go with this guy and click OK. Then I'll zoom in once the operation is over, but it does take a few moments to apply. You notice that, because it's working on that big Smart Object and the Smart Filter too. Notice how chunky this image looks. That's because the Smart Sharpen radius is ramped up too high. We would have to go in there now and scale that radius value. I'm going to go ahead and set this image aside, so we can compare it to the better way to work. You can create a duplicate of an image by going to the Image menu and choosing the Duplicate command.
But the easier way to work, it's more convenient anyway. Then go over to the History icon there. Click on it to bring up the History panel. I've been fooling around in this image, so you won't see all these states, but you will see Image Size if you've been working along with me. Go ahead and click on this icon, that very first icon and that will create a duplicate of that State with all the layers intact and everything. Then you can go ahead and hide the History panel. I'm going to zoom in, so we can come back to this image in just a moment. All right. Let's press Ctrl+Tab or Command+Tilde on the Mac to go back to the Desaturated shadows.psd image.
I'm going to press Ctrl+Alt+Z or Command+Option+Z on the Mac in order to undo the effects of Image Size. The better approach, especially when you have complex compositions like this one is to start things off by flattening the image and then apply Image Size. But before you do that, if you've made any changes to your image, be sure to go to the File menu and choose the Save command to update your changes. Now I don't have to do that. I haven't done anything of merit to this file. So instead, I'm going to go the layer menu, and choose Flatten Image, or if you load the DekeKeys, you can press Ctrl+Shift+Alt+F or Command+Shift+Option+F on the Mac, which was a keyboard shortcut suggested by a member of my site.
I think that's an awesome shortcut, because otherwise it goes unused. That goes ahead and fuses the contents of all the layers onto a single background. Now you can downsample the image without any concern about that Radius value. Go to the Image menu. Choose the Image Size command, Ctrl+Alt+I, Command+Option+I on the Mac. Again, change those same settings. Change Width of 590, don't worry about Resolution drop down, here choose Bicubic Sharper (best for reduction), click OK and we have our nicely down-sampled image.
I'll go ahead and zoom in to 200%, so we can compare it to our chunky image. There is the image as it appears. Had I resized it. When I resized it with all layers intact. This is what it looks like when I downsample flat file. Now I want to show you one other comparison here. It's this guy Bicubic Sharper comparison.psd. It shows what happens when you resample the image inside the Save for Web dialog box. Now the advantage of Save for Web is that it won't have to flatten the image first, because Save for Web only sees the composite version of the image.
It doesn't see the Smart Object. It doesn't see the Radius value, none of that stuff. So what I did was I chose Save for Web, I change the Width value to 590, the Height automatically change to 260. Then I set the Interpolation to Bicubic Sharper, and I got this image right there. Compare that to the effects of Image Size set to Bicubic standard. That is Bicubic (best for smooth gradients ), the default setting. It looks the same. Now there is a couple of pixel variations here and there, just because one was working from the layered file and one was working from a flat version of the image, but ultimately, they are the same re-sampling process versus here is Image Size set to Bicubic Sharper.
It actually produces sharper results. So that's why I recommend you go ahead and Flatten your image, and then Resample it using the Image Size command in order to get it down to the right size, and then I do one more thing. I go back to that image, because I could mess things up at this point. I can accidentally go to the File menu and choose the Save command and obliterate my layers. That would be extremely unfortunate in my opinion. So what I suggest you do is go to the History panel once again, and click on this little icon in order to make a copy of the image.
It hasn't been saved. Notice that, we'll have to save it later. Go ahead and close the History panel, go back to Desaturated shadows.psd, and go to the File menu and choose the Revert command in order to restore the layers and everything else that's associated with this file, so that you don't mess it up. In the next exercise, I'll show you how I really made these images, which was to scale the larger version first and the smaller version second.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 42626 Viewers
119 Video lessons · 53996 Viewers
65 Video lessons · 14307 Viewers
113 Video lessons · 82818 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.
Your file was successfully uploaded.