Resizing Graphics

Photoshop_Resizing03.jpg
A 12MP camera is TOO GOOD FOR YOU!
It generates enough pixels to fill a 55 x 41 inch computer monitor... and they don't really make those yet
You typically need to REDUCE the number of pixels in a digital photo for screen display

You do that by RESIZING your digital images
A decent sized graphic for a website will normally be no more than 800px x 600px


There are TWO ways to resize a graphic
  1. IMAGE - RESIZE - IMAGE SIZE
  2. The CROPPING TOOL
Photoshop_Resizing10.jpg
1. IMAGE - RESIZE - IMAGE SIZE
Usually gets you started - although the menus may change depending on what version of photoshop you are using
Photoshop_Resizing11.jpg
IF Resample is OFF
You CANNOT change the total number of pixels in the image
You can ONLY change the "Output Resolution" for PRINTING purposes
The PIXEL DIMENSIONS and filesize will stay the same

You CAN change the "Output Resolution" for your image - but that is only useful for preparing images for print.

You need to turn Resample Image ON now
Photoshop_Resizing12.jpg
IF Resample is ON
You can reduce (or increase) the NUMBER of pixels
This is ideal for WEB DESIGN - where the output resolution is meaningless
Graphics can be sized to precisely fit the screen output (72 DPI)
What is RESAMPLE?

IF Resample is OFF
You CANNOT change the total number of pixels in the image
You can ONLY change the "Output Resolution" for PRINTING purposes
The PIXEL DIMENSIONS and filesize will stay the same
IF Resample is ON
You can reduce (or increase) the NUMBER of pixels
This is ideal for WEB DESIGN - where the output resolution is meaningless
Graphics can be sized to precisely fit the screen output (72 DPI)
Photoshop_Resizing00.png
Photoshop_Resizing01.png

Why should YOU resize your graphics?
  • Smaller images = faster load times
  • Precise resizing = cleaner images
  • Photoshop > Google

BEWARE - NEVER corrupt the ASPECT RATIO!

Aspect Ratios

An "Aspect Ratio" describes the relationship of WIDTH to HEIGHT
GOLDEN RULE - Never distort the aspect ratio of a graphic or digital photo!
AspectRatio_Distorted.jpg



People OFTEN make this mistake when they are trying to "fit" a graphic into a certain size of frame.
The correct method is to CROP the photo to fit - or to find another photo that works better for the desired frame
AspectRatio_Cropped.jpg



FONTS can be damaged too - some artist spent a LONG time developing the shape of each letter
Never squash or stretch your text - it corrupts the proper aspect ratio of the crafted font
AspectRatioFonts.png





Widescreen vs Standard Definition

These are "standard" aspect ratios used for north american television and computer displays
Aspect-Ratios.png

Standard Definition
Widescreen

Ratio
4:3 (1.33)
16:9 (1.78)

Resolution
640x480
800x600
1024x768
852x480 (NTSC)
1280x720 (HD 720p)
1365x768
1600x900
1920x1080 (HD 1080p)
1.775
1.778
1.778
1.778
1.778
Alternate HD FormatsFiller150.gif
Filler150.gif
1280x720
1440x1080 (needs 1.33 pixel)
1920x1080 (1.0 pixel)
1.778
1.333 x 1.33 = 1.778
1.778
To convert an image from Standard to Widescreen
Multiply the width by 1.333

To convert from Widescreen to Standard
Multiply by .75