GirlTECH 2000...Mac Lab...Photoediting in Adobe PhotoShop

How to Resize Images in PhotoShop:

First, find your image. If possible, begin with the best possible quality image. Some of the actions you will perform on images may degrade them. If you are going to use a photograph on the Web, you usually want your final image to be a .jpg because it usually provides the smallest file size for photographic images.

Open Photoshop by clicking on its alias in your GirlTECH Workshop folder. Open the window as much as possible to fill the screen. You will usually need a lot of room to see your image completely when you edit it.

You will need an image to work with, also. You'll find the one we need at either of these two links.

http://teachertech.rice.edu/Participants/msirois/Images/big_rice_arches.jpg

http://teachertech.rice.edu/Materials/GT2000/Mac/day02/big_rice_arches.jpg

Caution ........ the filesize is 468,000 bytes ....... don't everybody try to grab it at once!

Once the image has completely loaded in your browser, save it in your GirlTECH Workshop folder. Then, open Photoshop if you haven't already. Open the file in PhotoShop by Clicking on the File menu, and choosing Open from the drop-down menu. A dialog box will open. Find the file big_rice_arches.jpg in the GirlTECH Workshop folder, click on it, then click on the dialog box's Open button. It will open in PhotoShop's editing window, probably at 33% of its actual size. On the right-hand side of the editing window, you should see a field below a little tab on a toolbox labeled Navigator, which indicates that it is 33%. Highlight the 33%, type the number 100 in its place, and press the Enter key. The image will expand to actual size. Resize the image window by grabbing it in the lower right-hand corner, and dragging it to fill the screen.

Click inside the red box, drag it down and to the right, and you should see a view like the one to the right.

The image was taken with a digital camera, on Rice's quad, near Sewell Hall. The difference is that yours was saved as a .jpg image, and the one to the right was originally saved as a .tif image. Typically, you would never start working with a .jpg, but it was necessary for this demo. You'll see why in a minute.

Since this is obviously way too big an image to put on a Web page (see the Print Size below ...about 18" x 13"), we need to make it smaller,both in terms of dimensions and filesize.

Click on the word Image on the file menu, and choose Image Size from the drop-down menu. The dialog box to the right will pop up.

Even though the standard width for screen resolutions is generally 800 x 600 pixels, many people are still running their computers on a resolution of 640 x 480 pixels. To fit this image in all computer monitors, we need to resize it much smaller than 640 pixels in width. Click in the Width field and change 1280 to 400. Notice that the size in the Width field automatically changes to 300 (because the "Constrain Proportions" box is checked).

Click on the OK button, and the image will shift to the smaller size, like the one below.

This picture is obviously a better size for general viewing in a Web browser. It will load faster, and is still a reasonable quality image.

The final step is to save the file in the appropriate format. Click on File and choose Save As from the file menu.

Make sure JPEG is selected in the Save As field of the dialog box that will pop up, make absolutely sure you give the file a different name (like "rice_arches.jpg" instead of "big_rice_arches.jpg"), make sure the correct folder is selected, then click on the Save button.

Another dialog box will pop up, allowing you to determine how much compression you want to apply to the image. The more compression, the smaller the file size. The more compression, the poorer the quality of the picture. The setting at the right will usually give you a decent picture, but still keep the file size relatively small.

Using this setting after reducing the image size, we ended up with a .jpg file of 25KB, a considerable reduction from the original 468KB.
Okay, why did we choose "Baseline Optimized" over "Baseline Standard"? Any of the three options will produce images that can be viewed by today's web browsers. Baseline Standard was the original .jpeg compression scheme, and its compression ratios aren't quite as good as the other two. Baseline Optimized offers a little better compression ratio than Standard, without sacrificing quality. It is best suited for relatively small images, because the entire image will have to load before it's visible in the browser. The Progressive format option is the most recently developed compression scheme for .jpegs. It offers about the same compression ratio as Optimized, but displays the image in a series of passes. It is especially effective on very large images, because your audience doesn't have to wait to see part of the image. The big_rice_arches.jpg image we used to demonstrate resizing was saved as a progressive image. That's why you saw it begin to display at the top of your browser window and work its way down to the bottom.

Okay, since .jpegs will degenerate over time, why did we use a .jpeg for the demonstration instead of the .tif file I generated from the camera image? Look at the size of the full scale .tif file in the image to the right .... 3.5MB [more than six-and-a-half times larger than the huge .jpg you downloaded].

rice3_filesize_tif.gif (18356 bytes)

Can you imagine how long it would have taken for all of us to download that file?

We need to learn another valuable [but simple technique]. Open the image, big_rice_arches.jpg, in PhotoShop again.

Sometimes we don't need to reduce the size of our image, but we need to cut a small portion of that image out, and save just that portion. This process is called cropping. I'm going to demonstrate the procedure on the overhead, so just follow along. You can review the process later, if you need to, by clicking on the cropping link above.

URL = http://teachertech.rice.edu/Materials/GT2000/Mac/day02/photoediting.html