Making oddly sized images work in your layout

- Hello friends, this is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson, I'll show you an awesome design technique to make odd-sized images work in your web layout. When you're creating your layouts for the web, invariably there will come a time when the image you have won't fit into your design whether you scale it up or crop it down. In those situations, it usually seems like you only have two choices, you either abandon the image and start searching for another one or you use the image as best you can and hope that no one notices the odd cropping or reduced quality.

But what if I told you that there's a better option? Specifically rigged to help with this very situation. That's what I'm about to show you. Let's start with a pretend situation. Say you're updating a blog and the illustration or photograph you're using to accompany the story is way too small to fit the post's headers dimension. What do you do? Here's the example layout. As you can see, the picture of books is not nearly wide enough for this post's header. To make it fit, you could try a bunch of things. You could stretch it, you could scale it, you could double it, or even try reflecting it, you could just use it as is with this different solid color background, or you could move it off to one side and fade off the other edge.

Some of these might work well enough but it still may not be what you envision. So let's try a different technique. Let's hide all of this first. Start by duplicating your image layer so I'll drag that onto the New Layer button so I have two copies, hide the top one and select the bottom one. Now we're going to scale it, just cmd or ctrl + t to turn on your Transform tools and scale that up, you wanna hold down your shift key while you're scaling, and then move it up a little bit, hit enter or return to accept the transformation.

Next, we're going to apply a Blur to this image. Filter, Blur, we'll do a Gaussian Blur. You want to blur it out just enough so that you can't really read anything but that you can still identify what it is. Something between 3 and 4 often works best. Let's go like 3.5 and click OK. Now, clearly this image is way too large for our layout, I know that, so what we're going to do is a little trick. We're gonna hide that Books layer and then we're going to click on that big rectangle.

Then that will automatically select that object's layer because we turned Auto Select on in layer in a previous session. If you put your cursor on top of the thumbnail mask, hold down your cmd or ctrl key, and you get that little box with the dotted lines on top, if you click now on that thumbnail, you can select that object. That's all we need, we're gonna collapse this panel and go back to our Books layer. Now we're going to add a layer mask which will hide everything outside our marching ants.

So clicking the Layer mask button, and now everything fits within that shape. Now we can turn on our other Books layer and we can center it to the middle, should snap to the center, there we go. It's still kind of not standing out enough so we can do one more step. That step would be to add a Drop Shadow to that Books copy layer, the image on top. We can do that through the Effects menu, to add a Drop Shadow. How much is up to you but if you want to create a Drop Shadow that falls directly behind the image, here's what you'll do, you'll set the Angle to -90, you'll set the Distance to 5, you'll set the Spread to 0, set the Size to 10 and the Contour, using this menu you'll click down on here and you're going to select Cone, it's the second one in.

That gives you a nice deep, dark, Drop Shadow behind the image. Now you can click OK to close the dialogue box. And you'll notice here the Drop Shadow's extending beyond the borders of our header area which is not what we want. I'm gonna show you a special trick on how to deal with that. What we're gonna do is we're gonna detach the special effect. To do that, you're going to right click on the word Drop Shadow and choose Create Layer. Click OK. Now you'll see that the Book layer is separate from the Drop Shadow layer.

Now, I happen to already have guide setup in this document so I'm turning them on with my cmd or ctrl + ;. You could also use the View menu to hide and show your guides. Now, with the Shadow layers selected, I can grab my Rectangular Marquee tool and select the area above and then use my delete key to zap it, I can even move this shape down below and do the same thing to make sure that none of that layer's shadow extends into my design area. Then I can hide my guides again, and that looks pretty good.

This technique is polished, it's professional and it looks like a deliberate design decision. Though it may not work in every single situation, it's definitely worth the try. You can use it for the web, for mobile, for print, or anytime you have an image that doesn't quite fit your layout, or even any time you think that this aesthetic decision would be appropriate for your design.