How to make my web banner graphic proportional?

January 23, 2010 10:47 AM

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.

Thanks.

posted by healthyliving to Computers & Internet (3 answers total)

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]

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: http://rsizr.com/

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