Expert: LizaL - 12/31/2004

Question
Hello,

I have a website where I display pictures of the products I sell.  I use a small picture on my gallery pages, a medium sized picture on the product detail page and a large picture if my customer chooses to click a “view larger image” link.  As my website grows, I am getting into different types of products where the image dimensions are different from one product to another.  In an effort to keep my website consistent, is there an easy way where I can make all my product images the same size.  For example: If I have a picture of a CD, a DVD, and a Yoga Mat, how can I make it so they are all roughly the same size?  Any help would be most appreciated.  Thanks!


Answer
Hi Brian,

It sounds to me -- if I've understood you correctly - that all you need to do is a little quality control on the front end before you post your images.

(By the way, I'm assuming you're doing your image prep in Photoshop, and that's where I'm gathering the information for my answer.)

You're probably going to find that you'll need to do some cropping and scaling, in order to keep things approximately the same size. I'll lay out two examples here, and you can tell me if I've gotten the gist of what you want to do:


1. In terms of making everything close to the same viewing size -- that is, making the DVD look close to the size of the CD, optically -- I'd use the Image Size dialog box.

Let's say your CD image is 3x3 inches, and your DVD image is 5x7 inches. Open the larger picture, in this example, the DVD. Go to the Image pulldown menu and select Image Size..., and enter a new document size of 3x3, in the bottom part of the dialog box (where it says Document Size). Keep the Constrain Proportions box checked, so that your image won't distort. Also keep your resolutions the same, in the two pictures (it'll probably be 72dpi, if you're using these online.)

In this example, resizing a 5x7 to a 3x3 doesn't come out exactly to 3x3. Your 5x7 will come out to be 3x3.6 or so. So you might want to adjust and make it a little smaller.


2. Let's say that in your images you have sufficient room to crop. Your Yoga Mat picture might have some background area that isn't necessary to the picture, that you can easily crop out.

The cropping tool (the third one down on the left, in the tool palette) is very configurable. Select that tool, and look at your tool options. You'll find those, once you've selected the cropping tool, up along the top of the window, right under the pulldown menus.

Here's where you'd enter the value you want to crop the image to. You can enter the horizontal and vertical size you want the image to become, and also the resolution.

Drag the cropping tool over your image -- as you do this, you'll see the area you're selecting become brighter than the area you're going to crop.

When you've got the crop you like, double-click on the center of the area you just selected, and the image will crop to the size and resolution you specified in your options.

Note: After you've dragged the cropping tool and released the mouse, your cursor will turn into an arrow. If you don't like the position of the crop, you can move it around by clicking once and dragging with that arrow cursor.


Something else you might want to try:

You can also create an automation in order to have Photoshop make these adjustments for you.

In the Actions palette (found under the Window pulldown menu), you'll see, at the bottom of that palette, three little buttons. One is a square, the next is a circle, and the one to the right of the circle is a triangle. Next you'll see a folder, then a little page icon.

Let's say you've decided on the method you want to use to resize your images. All you have to do to create an action based on this method is click the little page icon at the bottom of the Actions palette, which creates a new action, then click on the circle button. Then perform the steps for resizing on one of your images. Then, when you're finished, click the square at the bottom of the Actions palette.

What you've done is have Photoshop record your steps for changing an image's size. Then when you want to automate things, just open an image and click on the triangle button at the bottom of the Actions palette. This will play the actions, and automatically do the work for you.

Check out the little movie I made:
http://little-works.com/all_experts/actions.mov

Here I changed the size of the black and white image, all the while recording a new action. Then I opened the cat image, and stopped the action. Then I selected the action I'd just created and performed it on the cat image, so the cat image was sized just the way the black and white one was, without my having to go in and do this manually.

If you get mixed up, you can always stop recording -- and if you accidentally record something you don't like, you can always take it out of your action. Notice that there's a trash can at the bottom of the Actions palette, just for this purpose!

This is a great thing to be able to do, but you'll want to make sure you have your steps down before you apply the automation to a big batch of images!


Lastly, suffice it to say, it's always best to do your image prep in a program like Photoshop, rather than rely on your HTML editor to resize images for you.

I hope this helps, and if I haven't made something clear or you need more info, please post back!


Lisa