Web Design Help
Course Help
Rich Media
Graphics
Guidelines
contact Us
Email:
Phone: (208) 885-2121
Location: Education Bldg. Rm 208
Suggestion Box

Graphics for the Web

Image SourcesTopics

Resources

Open Image in Photoshop

  • Start Photoshop.
  • Select File > Open and navigate to the image you want to edit and open it.

Resize Image

  • To change the size of the image, select Image > Image Size.

  • Make sure Resample Image is checked (Bicubic) before following the steps below.
  • If you are using this image for the Web or PowerPoint, adjust the settings under Pixel Dimensions.
  • If you want to change the scale of how the image would look on paper, adjust the settings under Document Size.

CTI Recommended Guidelines

  • Web              300 x 200 pixels     (72 pixels/inch )
  • PowerPoint   1024 x 768 pixels   (72 pixels/inch)
  • Printed          4 x 6 inches            (200 dots/inch)

Photo Correction

  • To change the color/brightness levels of the image, select Edit > Adjustments > Levels

  • Make sure the Preview option is checked before following the steps below.
  • Click the Auto button to have Photoshop adjust the levels of your image for you automatically. If this does not produce the desired effect, you may adjust the Levels manually as follows.
  • The triangles at the bottom of the histogram represent shadows (Black Triangle, #1), midtones (Grey Triangle, #2), and highlights (White Triangle #3). Increase shadows by dragging the Black Triangle (#1) to the right. Add highlights by dragging the White Triangle (#3) to the left. Adjust the midtones by moving the Grey Triangle (#2) left or right until the image looks good to you.
  •  Check and uncheck the Preview box to compare the adjusted image with the original.
  • Click OK to apply your changes.

Sharpen Image

  • To adjust the sharpness of the image, first display your image at 100% by selecting View > Actual Pixels.

  • Next, select Filters > Sharpen > Unsharp Mask.

  • Use the recommended settings from the CTI Guidelines table below to adjust the Amount, Radius and Threshold to desired effects.
  • Check and uncheck the Preview box to compare the adjusted image to the original.
  • Click OK to apply your changes.
CTI Recommended Guidelines Dimensions
  • Amount      40% - 80%
  • Radius       0.0 - 4.0
  • Threshold  0 - 3

Save Image

Photo for Web
  • To save a photo for the Web, select File > Save for Web and save as JPEG with quality ~50%.
Drawing for Web
  • To save an image with just a few colors for the Web, select File > Save for Web and save as GIF 32 dithered.
Photo for PowerPoint
  • To save an image for PowerPoint, select File > Save for Web and save as a JPEG with quality of 90%.
Photo for Print
  • To save an image for printing, select File > Save and save as TIF uncompressed.

Animated Tutorials

File Size: Smaller is Better!  2:12  90kbps
An overview of how file size can drastically effect your internet experience.
Get an image from the Web  1:55  90kbps
Learn how to download an image from any website.
Image cropping and resizing  3:45  90kbps
Learn the basics of image editing by croping and resizing your image.
Photoshop Work Environment  13:26  90kbps
An overview of the Photoshop work environment. Get an explanation of what all those palettes mean.
JPG vs. GIF  4:42  110kbps
There are two primary graphic file types used on the web, gif and jpg. Learn the difference here.
Optimizing a JPG  4:59  110kbps
Learn how to compress a photographic image for the web.
Download Project File
Optimizing a GIF  2:50 110kbps
Learn how to compress a line drawing for the web.
Download Project File
Transparent Images  3:25  110kbps
How to save images so they aren't rectangular looking and don't have jaggy edges. Download Project File

Additional Resources