Serena Collage Content Management System : Image Preparation using Adobe Photoshop

The first thing you want to do after you open your image, is to select from the Menu Bar View—Actual Pixels. This will display the image in it's real size, not the zoomed out view that Photoshop sometimes presents.

On the Menu bar select Image—Image Size...

The box that comes up shows us the image size of the picture file. The important things to look at here are the Resolution size (must be 72)  Pixel Dimensions: and the Width: and Height:. The pixel dimensions will display the file size of the image, the current size of this image is 5.98M which is a very large file, and the larger the file the longer it will take to load on the viewers screen. The width and height refer to the width and height of the image in pixels. About 50% of internet users in the world have their computer monitors set to display a maximum 1024x768 pixels, while about 20% of US users are still viewing at 800x600. Even with the higher pixel display, the user will still not be able to view this image because it is 1399x1494 pixels.

NOTE: It is VERY important that the Constrain Proportions and Resample Image checkboxes are CHECKED

Using this Image Size box we are now going to resize the image to a more web friendly size. In the box, you may change either the Width or Height of the pixels. You will notice as you change either the width or height the opposite will change. This is because Photoshop will keep your image from distorting. In our case we want the height of the image to be 300 pixels. As we enter the number 300 Photoshop automatically calculates the width to be 281. Also notice that the pixel dimenions size has now changed from 5.98M to 247K, a much smaller file size that will load a lot faster. Press OK when finished.

Note: If you are not sure what to enter, just take a guess you can always undo your changes and try again!

Now we can see our newly re-sized image. This is much better as you can clearly see the entire image without scrolling. In fact there is plenty of blank space on our screen.

If your image appears too small, or not small enough yet.. Either go to Edit—Undo on the Menu bar, or press Ctrl+Z, and try adjusting the values in Image Size again.

We are now ready to save the image. It is a smart idea to keep your original image intact so you have a full resolution copy to make changes to later or to print. So choose File—Save As... on the Menu Bar and save your new image with a unique name.