How to Resize or Crop Digital Images Using Photoshop Elements For Your SchoolWeb Site Monica Mais 416 338-4260 monica.mais@tdsb.on.ca Sal Lopiccolo 416 397-3530 sal.lopiccolo@tdsb.on.ca
How Pixels and Resolution relate in Digital Images. High Resolution File Low Resolution File By default digital cameras capture images at a resolution of 72 pixels per inch (width x height). The same standard resolution used for the internet. However you may be given a high resolution image that has a large pixel size that will need to be reduced in pixel size. In order to do that you need to click in the Resample Image checkbox (at the bottom of the Image Dialog Window) to make the pixel values editable. This will also disconnect Resolution from the Width and Height. Change the pixel width dimension to f t where you are placing the image on the school site and the height is mathematically changed automatically. Shown below is the Image Size Dialog Box for the above photo, in hi and low res. By putting in new values, you can re-size a digital photo. Along with the pixel dimensions the physical dimensions are given for printing purposes.
Steps to follow when Sizing your Digital Images for the School Web Site Builder 1. Decide what you are sizing your image or graphic for. Ask yourself, is it going to be used in the Content Area (one or two column skin), or for your Banner Area. This information is crucial to determine what numbers you input in the Image Size window. Remember that the width dimension is the key to having the image fit properly width wise on the web page. To re-size your photos for use on your school web site in Photoshop Elements you need to go to the Image Menu, at the top of the program window. Image > Re-size > Image Size (Ctrl + Alt + I) Pixel Sizes: Banner - 960 x 160 pixels One column skin 650 pixels wide Two Column Skin 450 pixels wide (Content Pane) 200 pixels wide (rightcontent Pane)
How to crop and rotate your digital images for your school web site Cropping Trimming a portion of an image to improve its composition and focus a viewer s attention. The cropped image on the right looks more appropriate as a vertical picture with no distractions in the foreground. As well, placing the subject to one side of the frame and having straightened the horizon line of the stage adds up to a stronger composition over all. Cropped Image To access the Crop Tool, click once on it from the Editor Tool Box located at the right side of your screen and about half way down. Once the tool is active go to the top of the window in the Preset Options for the Crop tool and input specif c pixel dimensions. This will depend on your f le needs. i.e.: content area or banner area That way when you click and drag out you crop you will see exactly what area is included and what area is being trimmed away. 288 432 288 x 432 pixels is the same as a 4 inch by 6 inch @ 72 ppi If your dimensions are the same but you just want to change from a vertical to a horizontal crop you can easily switch that by clicking the arrows between width and height.
You can now use the crop tool since you have established the crop dimensions. Simply click and drag out diagonally across your image to approximately where you would like the crop to stop. Once you have your crop frame active you can f ne tune your selection by clicking on one of the four corner handles to pull outward to increase, or push inward to decrease the crop area. You will know that re-sizing the crop area is active by the straight two headed arrow curser. Keep in mind that your proportions remain the same since we put in specif c values at the top. In this case 4 x 6 inches at 72 pixels per inch (ppi) At this point we can also move the crop position by placing the curser inside the crop area and either using the mouse by clicking and dragging or by using the arrow keys on the keyboard to move the entire crop selection.
In addition you can rotate your crop selection. Rotate by placing your curser close to any one of the 4 corner handles and click and drag in the direction you would like to rotate your image. You will know that the rotation is active because your curser will change into a curved double headed arrow. By clicking on either the check mark or the circle you can decide whether to perform or cancel a crop selection. The f nal cropped Image.