Computer and Web Design Resources at TinkerTech.net

Resizing Photos and Saving them as a Jpeg File in Paint Shop Pro 7

When you take a picture on a digital camera and download it to your computer the dimensions of the photo will be 640x480 pixels at minimum. With newer digital cameras, the dimensions will be even larger. For a web page, a smaller image is preferred. Those dimensions are really too large for a web page. Also, when you scan images they may scan in much larger than you want. To resize an image use the following steps.Open Paint Shop Pro. Click Start > Programs > Jasc Software > Paint Shop Pro 7 (students in my classes will find Paint Shop Pro in the Web Design folder)

Open the image you want to resize. File > Open. If you need an image to work with click here. (Right click the picture and select Save Picture As, give the file a name and save it to the appropriate folder.)

Turn on your Rulers if they are not already on. View > Rulers. The rulers will show you the height and the width of an image. (Click the image to the right to view my image with the rulers turned on.)

Click View > Normal Viewing [1:1]. You image will display the accurate size on the screen

You can also check the image dimensions by clicking Image > Canvas Size

To resize the image, click Image > Resize

You can resize an image by exact pixels, percentages, or print size. I typically use Percentage of original and usually start decreasing the image size by about 75%. You can use whatever resize option that suits your needs. If you know the amount of space that you have to work with on the page you can type in the Pixel size, if you are more comfortable with resizing your image in inches use the Actual/Print Size.

Select the Percentage of original radio button and type 50 in the Width box. The Height should automatically be set to 50% because the Maintain aspect ratio is checked (default setting). It is a good idea to keep the Maintain aspect ratio setting checked because you want to resize the width and height by the same amount, otherwise the image will appear out of proportion.

Resize type should be set to Smart size. Bicubic is used for enlarging images and Bilinear is used for reducing images. Smart size will automatically use the appropriate setting.Resize all layers should be checked. If you are working on an image that has multiple layers you can resize on single layer in the image by un-checking the option.

Click OK to resize the image.

Cropping Images

Another common technique that people want to do with photos is use only a portion of an image. The photo above has cars in it and they detract from the beauty of the trees. You can use the crop tool to select the portion of the image that you want to keep and crop out the areas that you don't want. This is also great when you want to crop that special person who isn't so special anymore out of your photos.Click the Crop tool from the toolbar. When you move your mouse pointer over the image the pointer changes into the cropping pointer. Select the area of the image that you want to keep by holding down your left mouse button (I started in the upper left-hand corner of the image) and dragging down and to the right to draw a box around the area that you want to keep. If necessary you can resize the box by moving your mouse over the box's border and when your mouse turns into a double headed arrow hold down your left mouse button and drag the border to the appropriate size.When you are happy with the area selected, double click the center of the image. Your image is now cropped. I typically crop my images first and then resize them. Here is my cropped image.

Saving a File as a JPEG for a Web Page or Email

Click File > Export > JPEG Optimizer (Click the image to the right to see a sample of the JPEG Optimizer.)

When saving for the web, there are two main things that you need to concern yourself with; file size and the quality of the image.When you adjust the compression value slider or type a different value in the set compression value to box, the sample image on the right will reflect the changes that will be made to your image. The compressed number, below the sample image will be the new file size. The image on the left is the original image and the uncompressed file size. You want to use the highest amount of compression while still maintaining quality. For my sample image I used a compression value of 40. Usually on photos with people I use a compression value of about 27 because using a higher value results in a poorer quality photo, ie, faces tend to become very pixilated and looked smudged.

Adjust the Compression Value until you have a compression setting that results in a sample image on the right that is acceptable in quality.

The Format tab in the JPEG Optimizer screen allows you to set the type of JPEG file that you want to use. Standard is the default file format and the image will display when it is fully loaded in the browser. Progressive displays a very pixilated image at first and then the image becomes clearer as it downloads. Progressive is nice because your visitors have an idea of what the image will be before it fully downloads, but it also produces a larger file size. The Download Times tab displays the time it will take the image to download at various modem/connection speeds. Keep in mind that you never want a page to take more than 30 seconds to download at 28.8. (That should be 30 seconds for ALL the text and graphics on your page, not just the single image.)Basically the only thing that you really need to adjust in the JPEG Optimizer is the Compression. Once that is done, click OK. The Save As dialog box will appear. Select the folder that you want to save the image to and type the file name (you do not need to include .jpg in the filename, Paint Shop will automatically add that to the filename).

Please take a minute to sign my Guest Book.

If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.

Stop by my Amazon Store for gifts for the web developer.