How do I transform images to specific image dimensions without distortion?

Question

I need to resize images to given width/length, but when I do this in photoshop my images come out warped looking. What should I do?

Answer 1

Simple answer is you don't.

You can not change the width and height of an image by transformation without warping the image unless you transform proportionally. If you need images which are not proportional to the original, the best solution is to crop the images.

If you wish to change the size of an image in a non-proportional manner without warping it, you must crop the image, not transform it.

Answer 2

There are a few ways to transform without having warping occur:

For dimensions:

1. Go to Image Size and make sure the "Constrain Proportions" box is checked before you change the height or width.
2. I'm not sure what you're editing but also Ctrl+T (Edit > Transform) and then holding the shift key down while you move a corner anchor.

For total size:

• Save For Web & Devices and then on the top right click on the arrow for more options (Optimize Menu) and one of the choices is Optimize To File Size.

My suggestion:

When I do a JQuery gallery that requires the images be of the same size - generally for me this is only my thumbnails - I first do a proportionate scale making the smaller of the two dimensions to be whatever value I want it to be, then I crop the other dimension, then save for web.

So if let's say my full size image is 1350 x 780 and I want to do 120x120 thumbnails. I would go:

1. Edit > Image Size > Make sure Constrain Proportion is ticked off > Change height to 120
2. Then there are two options: Image > Crop > 120 on the height and pick if it would be best for center, bottom, or top to get cropped automatically. Or draw a 120x120 box so that you can position it exactly where the best crop would be.
3. Now go ahead and Save For Web and if you want a particular file size do the Optimize To File Size option.

I don't generally Crop my full size images but that depends on what type of jQuery code you've written. Just transform proportionately and it won't be warped.

Answer 3

I would advise either rescaling it proportionally or saving it at a fixed kilobite size while retaining the present quality to a fixed maximum file size. I like the scaling option myself for technical things. I like the fixed file size for things like facebook. It depends on your software in mine the utility is called scale and keep the keep proportional box checked.