by Heather Alvis 13.November 2007 17:13
Many of our clients use our content manager in order to change content and images on their websites. A common problem people have is resizing their images so they are consistent with the original images in the design. Often times, the images straight out of a digital camera don't have the same proportions as the images that fit in snugly with the content in a website. Furthermore, by cropping images to get just the right subject matter in the right location, we change the proportions of the width and height. These changes make it difficult to add photos directly from a camera without a little preparation. This article is about resizing images for those of you who have the need.
Here is the scenario, I have a vertical image straight out of the camera of me standing on North Twin. I want to resize the image so it will fit in this blog, and for the sake of this article, I want the finished image to be 300 px wide by 425 pixels tall (the image out of the camera is 1920px by 2560px).
- Open the photo you want to resize, and make sure it is larger in both dimensions than the desired size (Image>Image Size).
- Click on the crop tool in the main toolbar (or press the letter "c" on the keyboard). Once you click on the crop tool, the horizontal bar changes slightly.
- Fill in the dimensions you want for the finished image followed by "px" for pixels, or "in" for inches. For my image, I've typed in 300 px and 425 px.
- Now, using your mouse, click on the photo and drag the box around your subject. You can let go of the mouse to move the selection around, or resize by dragging in or out at the anchor boxes. The selection remains in proportion to the dimensions you typed in above.
- So, you have an area selected with the same proportions as the finished image. Crop the photo by pressing the "enter" key.
- The image automatically crops and resizes to the correct dimensions. View the new image at 100% by clicking on the "view" tool and choosing "actual pixels" from the horizontal toolbar (alt ctl 0).
- Finally, save this photo for the web by choosing "File > Save for Web". This optimizes your photos for you and allows you to compress them to your liking for download efficiency. I usually optimize my photos as jpegs set at "92".
- Finished Image is 300 x 425
Getting in the habit of using consistent dimensions on the photos in your website can help make the pages feel cohesive and professional-looking. Images that have variable widths (or heights, depending on the page layout), even if by just a few pixels can make the site look chunky and unorganized. With these simple instructions, you should be able to normalize the photos in your website in a short amount of time, which will certainly be worth the effort once you see the results.