How do I get graphics ready to insert into a page?

Back to FAQ

Picasa: Cropping and Resizing Graphics (View Screencast)

Photoshop: Cropping and Resizing Graphics (View Screencast)

Determining Pixel Size

It is best to have graphics as close as possible to the size they will end up being on a web page before insertion. Here are two examples that will help in understanding pixel size.

300x248 pixels  

Click for original.
300x248 pixels   100x89 pixels

 

Cropping a Graphic in Picasa (See screencast below.)

  1. Determine the size in pixels that a graphic should be on the web page.
  2. In Picasa, move the magnifying slider to 100%.
  3. Click Crop, then draw a box around the part of the graphic that should remain.
  4. Click Apply and then Save.

Resizing a Graphic in Picasa (See screencast below.)

  1. Determine the size in pixels that a graphic should be on the web page.
  2. In Picasa, move the magnifying slider to 100%.
  3. On the File menu click Export Picture to Folder.
  4. Click Resize to: and then adjusdt the pixels by either using the slider or typing a number. The number represents the vertical pixel size. Horizontal size will be automatically adjusted with the proper aspect ratio.
  5. Click Export.

 

Screencast: Cropping and Resizing Graphics in Picasa

 

Cropping a Graphic in Photoshop

  1. Determine the size in pixels that a graphic should be on the web page.
  2. Click the Crop tool, then draw a box around the part of the graphic that should remain.
  3. Double click within the the box that is drawn around the part of the graphic that should remain.
  4. Go to File and click Save As. Save the graphic with a different file name to preserve the original image.

Resizing a Graphic in Photoshop

  1. Determine the size in pixels that a graphic should be on the web page.
  2. In Photoshop, click the View menu and then Actual Pixels. The actual size of the graphic will be displayed.
  3. On the Image menu click Image Size. In Pixel Dimensions, change the Width to the desired pixels. The Height will automatically be adjusted to preserve aspect ratio.
  4. Click OK.
  5. Go to File and click Save As. Save the graphic with a different file name to preserve the original image.

Screencast: Cropping and Resizing Graphics in Photoshop