Join Sue Jenkins for an in-depth discussion in this video Using content-aware scaling for photos on the web, part of Productivity Tips for Web Designers.
- Hi everyone, this is Sue Jenkins with Productivity Tips for Web Designers. In this weeks lesson, I'll be showing you how to use Content-Aware Scaling to stretch and shrink images for your web layouts without causing any of the normal image distortion you'd see in a regular scale transformation. Many websites nowadays include large banners or background graphics. You've seen them, the rotating banners, the wide header photos and the giant parallax scrolling background images.
In most cases these images are relatively wide yet short enough to fit the layout from edge to edge. To create these kinds of graphics in your web layouts you often need to start with images that have been originally photographed or drawn as landscape rather than portrait. In addition, these images have enough information within the crop area to communicate what you need to communicate effectively. If you're not a photographer or illustrator yourself finding the right stock images for your project that also fit this criteria can take literally hours.
For those of use without hours to spare, I highly recommend using Content-aware scaling. This feature which was released in Photoshop CS4 lets you protect certain areas in your image from skewing or distorting while you scale the image to fit your layout. Let's jump over to Photoshop to see how it works. You can use Content-Aware Scaling anytime you have an image that needs to be wider, taller, narrower, or shorter than it already is.
This technique works best on most images but especially photos that have a uniform background that can easily stretch without looking distorted, like product shots and landscapes. Before you begin, make sure that the layer you're scaling is a regular Photoshop layer. If your layer is a locked background layer like this pool image, you'll need to convert it into a regular layer first by double clicking. let's compare regular scaling with Content-Aware Scaling.
With regular scale transformations you can scale unilaterally, so let's do cmd or ctrl t to bring up the transform controls around your image. So you can do scaling horizontally, you can do scaling vertically, you can hold down your shift key while scaling to scale proportionately. But sometimes you just need your image to be a little taller or a little wider.
That's where Content Scaling really shines. As you'll see in a minute with Content-Aware Scale, the important information remains mostly intact while the less important information gets stretched or compressed. So I'm going to hit enter now to release the transform and show you how to do the Content-Aware Scale. To begin, make sure your layer is selected then you'll go up to your Edit menu and choose Content-Aware Scale and try scaling in and out.
Pretty amazing, right? What's happening is that Photoshop is analyzing your picture data on the fly to determine which parts are low frequency or lacking in details so that it can stretch or compress them in the direction that you're scaling. Once you have the image scaled to your liking, you can apply the change by pressing enter or return on your keyboard. Now watch what happens when you scale an image with people in it. After you select Content-Aware Scale from the Edit menu and right before you start scaling, make sure that the little person icon on your control bar, that's this little guy right here.
Make sure that it's flushed with the control bar rather than pressed in like a button. So not like that, but like that, then you can scale. This feature actually helps Photoshop identify people by recognizing skin tones and then it adds those pixels to the high frequency areas that it aims to protect to make sure that those parts don't get distorted while you scale. So my people are staying intact but everything around them is compressing.
It's pretty amazing stuff. And when you have your transformation the way you wanted it again, you'll just press enter or return on your keyboard to accept the change. Let me turn on this pipe layer. Sometimes you'll have an image where areas are so similar like the pipe in the sidewalk, it's all pretty much the same, so skewing is going to be unavoidable even with Content-Aware Scaling. So let's take a look at how this one works, Edit, Content-Aware Scale, and you're going to start to see that pipe smooshes pretty quickly.
It's just too similar to surrounding pixels. So let me click enter or return and get out of that. There is a way using Alpha Mask to protect those areas. And let me show you how this works. The first thing you'll do is use any of your selection tools, I actually prefer using the Lasso Tool and I will select the area or areas within my document that I think should be protected. If you want to add to your selection hold down your shift key that puts a little plus mark next to your Lasso so you can add to the selection, and maybe I want to make this a little bit bigger something like that.
Okay, so now I have my selection and I need to save it. Go to your Select menu and choose Save Selection. Now you can just give it a name, I'll call it pipe and click OK. And cmd or ctrl d to deselect your selection. So that part is saved now as part of this document and now when we go up to our Edit Content-Aware Scale before you scale, go back up to your control bar and under the Protect menu click the drop down and you're going to choose the name of the selection you just saved.
So there's my Pipe selection. So now those pixels are going to be added to that protected area that Photoshop is going to avoid. So now when I scale my lovely pipe and that blot of gum on the sidewalk those parts are staying intact and the rest is collapsing around it. The same will hold through if I were to stretch it out. Those parts are protected. If you do find that the protected areas are still compressing or stretching a little bit, you may need to enlarge your selection area for your Alpha Mask, and let me show you how to do that.
So I just hit enter or return on my keyboard to release the Content-Aware Scale and we're going to go into the channels panel so that we can edit the mask. There's my mask at the bottom and I'll select it to make it active. And just like with most layer mask, you use your paintbrush to paint with black and white to add and subtract from the selection. Painting with white will add to your selection while painting with black will subtract. So I want to enlarge my selection. I'll grab my paintbrush, make sure white is on top and then I can paint.
When you're finished switch back to the layers panel, actually click on RGB first so that you release the mask. Go back to the Layers panel and now you can try Content-Aware Scaling. Got to go choose my Pipe now I can scale, and again those areas are protected. Hit enter or return to accept the transformation. So there you have it Content-Aware Scaling gives you the power to stretch or shrink your images to fit your web layouts without unnaturally squashing or stretching your image.
This is really powerful stuff that can definitely take some of the aggravation out of your web design workflow.