How to make my web banner graphic proportional?
January 23, 2010 10:47 AM   Subscribe

How do I make web banners (the ones on top of blog/website, not ads) without warping the picture I want to use?

I know the size I'm looking to create for my web banners, but when I change the image to fit that size, it ends up warping with its proportions out of whack. If I choose keep it proportional, it's not the size I want. I'm using Picnik and have heard about Pixelmator. I don't have PhotoShop.

Are there any other professional looking options, resources, suggestions on how to make this work. I know there's got to be an easy way around this since so many people have blogs with banners. Just not sure where to look.

posted by healthyliving to Computers & Internet (4 answers total) 2 users marked this as a favorite
If you don't want to stretch the image, then you have to CROP it. I think that's the keyword you're missing. The simplest approach, assuming we're talking about a photo which has the wrong proportions for a banner, would be to scale it to the width of the banner ad, then crop the height to fit. Picnik does seem to have a crop feature.

Some programs (not sure if Picnik does this) allow you to make a selection with set proportions, then crop to that selection. Then you can scale the cropped image to the exact pixel size of the ad. This gives you more fine control of the portion of the image you want to keep when cropping.
posted by teg at 11:00 AM on January 23, 2010 [1 favorite]

I come across this often with clients when designing things. Apparently there is a lack of fundamental understanding of what an aspect ratio is and how it functions. I've tried a few tactics but found this one the most effective:

You have a certain size box that you want to fit things in. Let's say it's 100 pixels tall and 400 pixels wide.

The fact that it's pixels does not matter. It's 100 somethings by 400 somethings. Reduce this to 1 by 4.

Imagine you have a giant billboard in front of you with the image you want to fit into this banner. Imagine that you've cut a square that's 1 inch tall by 4 inches wide. You hold this in front of you and look at the billboard through the square.

You can pan around the billboard looking through your rectangle, or you can walk closer or farther from the billboard, but you can't do anything else to the billboard.

If you pan too far to the sides, you see the sky behind through your viewfinder. If you walk back too far, you see sky on more than one side.

In an image editor, the basic process is to first create the mathematical ratio you need to end up with, like the 4 x 1 above. Crop your source image to fit this mathematical ratio. So, if you had an image from your camera and it was 1280 x 1024. This is a 5 x 4 ratio image. Even if you kept the maximum width in the source image, you're going to need to cut out a large portion of the top, bottom, or both to fit that 5 into the 1. There's no way around that.

So, let's say you want to keep the full 1280 width. That means you have 320 pixels of height left to work with. You can slide up and down the image, but you're stuck with 320.

Once you've cropped the image to match the ratio, use the image resize function. If you did the crop correctly, you should be able to plug in one number and the other number will fall into place.

Please forgive any stupid math errors in this comment.
posted by odinsdream at 11:00 AM on January 23, 2010 [1 favorite]

In Picnik, when you use "resize" you want to make sure the "Keep Proportions" box is checked. Or use "Crop" to trim out part of the image to give it the proportions you want without stretching.
posted by ook at 12:02 PM on January 23, 2010

I suggest this:

it uses a process called retargeting to change the size of the picture without changing the skewing the important parts
posted by rebent at 3:17 PM on January 23, 2010

« Older I cannot mentally visualize.   |   Activity Suggestions On A Cruise Newer »
This thread is closed to new comments.