This article suggests a procedure for resizing images for use on the web.

Mac Screen Snapshot

• Full screen: Command Shift 3
• Partial screen: Command Shift 4

Save .png file to desktop.

Handle the Image

• Start Photoshop Elements

• Open Image

• File, Save As

  • PNG Options
    • Compression: Smallest/ Slow
    • Interlace: None

This may be a large image suitable for demonstration purposes. Also useful for my blog.

Crop Image

It may be necessary to crop the image.

Image, Crop

Use the crop icon (left menu) to crop a piece of the image.

There is so much that can be done but this is beyond the scope of this document.

Resize Images for the Web

Image, Resize, Image Size

• Pixel dimensions
  • Width: 360 pixels
  • Height: 300 pixels

Try with constrain proportions to get a idea as to how suited is this image for the proportions required.

If the image is not properly suited, it is best to remake the image.

Save image if required

Save for the Web

• File, Save for the Web
• Change size and colors.

Get image size to < 200kb

Save as a gif

To Square an Image

Start Adobe Photoshop Elements Editor

Drag the jpg file into the app.

To resize the canvas, for example:

• Image, Resize, Canvas Size
• Width: 160 pixels
• Height: 160 pixels
• Canvas extension color:
  • Choose: #937161 as this will stand out.

The image is resized, now let's improve the background.

• Select Color Picker Tool

  • Click on a background pixel of the desired color.

• Select Paint Bucket Tool

  • Click on the background that needs to be changed.

The background color should now be uniform. However, if not:

• Select Color Picker Tool

  • Click on a background pixel of the desired color.

• Select Brush Tool

  • Brush as desired.

To resize the image:

• Image, Resize, Image Size
• Width: 260 pixels
• Height: 260 pixels

Save a png file

• File, Save As
  • cleaned.png

Save as a gif file

• File, Save for Web
  • Save
    • cleaned.gif