It Logo
Lesson Activity

Photoshop 7: Resizing, Copying and Cropping an Image for the Web

Often an image is either too large in size or has a large file size. Most web images should be around 50K file size, so it doesn't slow down the loading of a web page. Photoshop makes this easy to do.

  • Open your image
  • To resize it - Select Image - Image Size
  • Change the Pixel Information Window by choosing Pixels or Percent & adding the appropriate number
    • The Difference Between Pixel Information and Document Size - Pixel information defines the size of the image on a computer screen. Document size will change the size of the image when you print it in hard copy.

Resolution is the number of pixels or dots per inch (ppi/dpi). The higher the resolution, the more detail is stored for the graphic. This means that a higher resolution image is higher quality, but it also is larger in file size. The most common setting for computer monitors is 72 dpi; therefore, images intended for web-based or other on-screen projects should have a resolution of 72 dpi. This lower resolution will reduce file sizes and download times. The normal resolution for low-end printing is 150 dpi, and for high-end, professional, quality photographs the resolution should be 300 dpi or higher.
Keep these facts in mind:

  • If you have a 72-dpi graphic and you change it to a higher resolution, you will not increase the quality of the graphic. The information was originally stored at 72 dpi, and the computer cannot “make up” more information to improve the graphic quality.

  • If you have a 300-dpi graphic and you change it to a lower resolution (say, 72 dpi), you will decrease the quality of the graphic. This is because you will lose the extra pixels of information. If you need to reduce the resolution of a graphic, save the original, high-resolution image in case you need it in the future.

 

TIP!! - To get an accurate size of your image

When you open an image, in the browser window, select the image and note the file size.
image size

Copy-Paste All or Part of an Image

Often you want to copy an image into another image or have part of an image, so you need to know how to select it and copy it.

  • Select the Marquee Tool marquee
  • Click & drag the mouse around the section of the image you want to copy.
  • Next, select Edit - Copy & Photoshop copies it to the Windows clipboard; then do one of the following:
    • Open a New Image - Select File - New and leave the size settings as is (Photoshop uses the size information in the Window clipboard)
    • Click on another opened image
  • Now, select Edit - Paste

Crop an Image

Now, if you don't need a new image and you just want to reduce and use part of an image, you can crop it!

  • Select the Marquee Tool marquee
  • Click & drag the mouse around the section of the image you want to copy.
  • Select Image - Crop

Remember!! You will lose the part of the image that is no longer there when you save the image.

Note: The following information is associated with an older version of Photoshop, but you might find it useful.

 


LESSON ACTIVITY:

  1. Using the Marquee Tool, select part of the OU Arch image or any image that you choose.
  2. Copy & Paste this selection to a new Image and Save it for the Web using the JPG format.

Example Image for Lesson (double click & save):
OU Arch Image