Introduction

Where do you start with putting graphics onto your web site? There's a lot more to it than just scanning and saving as Jaypeg.

  1. How does the color screen of a computer display graphics? Builder.com has a good introduction. This also covers image formats.

  2. A good overview for creating graphics for the web is at webmonkey. I have collected all the pages for Web Graphics Overview

  3. HTML source has a very helpful page on Image Formats and Optimising Images. Notice his distinction between amateur, skilled and "the master" graphic optimiser.
Process

# Action DPI typical Dimensions Save As File Size
width height
1 Scan Cropped Image (for web) 96 441 268 .psd
(photoshop default)		 356 Kb
  Scan image for printing 300 1720 1100 .psd 5.5 Mb
  Digital Camera Image 72 1600 1072 .jpg 1.63 Mb
  SAVE          
2 Change dpi to 96 if neccessary (Image —> resize) 96        
3 DUPLICATE
(Image —> Duplicate Image)		          
  Manipulate Image
(Enhance —> Quick Fix)		          
4 File —> Save For Web (JPG)
(same name_300 .jpg)		 96 300 182 .jpg 30 Kb
5 Duplicate Image.
Make a thumbnail		 96 80 80 .jpg 4 Kb
6 File —> Save For Web (JPG)
(same name_80.jpg) 		96 80 80 .jpg  

Notes

  1. Make that "constrain Proportions" is checked when you resize or change resolution (dpi) otherwise you'll distort the image.
    Resizing Image

  2. By duplicating your graphic before manipulating it you can easily go back if you screw up (which you will, I assure you). Then use this image to Save For Web.
    You might also want to duplicate this image before saving so that you can make a thumbnail from it.

  3. Save For Web.
    The rule of thumb when saving graphics for the web is:

    • Photos - JPG (jaypeg) format. Lowest quality.
    • Everything else - GIF
    Here's what you'll see:

    save for web
    The preview pane shows the original file size and file size when saved. It also shows the time it would take to download this graphic. Remember - the smaller the file size the better.
    You can also change the size that you save either as percentage of the original or a fixed width or height (as you might want to do with a thumbnail).

  4. Make a Thumbnail
    Having duplicated your final image, choosethe Crop Tool and select an interesting part of the image and crop.
    Save for web and adjust image dimensions to approx 80 pixels wide and save as JPG low quality.
    You can now use the Thumbnail to link to the larger image. Eg:
Class Exercise

  1. Take turns two at a time to scan in two photographs. The T.As will be on hand to assist.

  2. Create folder on home drive (eg H:\photos) and save scanned originals in PSD format.

  3. Go back to your PC.

  4. For each photo, do stages 2 through 5 above making sure to save in a new filename when neccessary. You should end up with 3 files per scanned photo (eg football.psd, football_300.jpg, football_80.jpg) . At this point, don't bother with enhancing the photos - we'll cover that on Thursday.

  5. Create a web page with a heading and the two thumbnail photos linked to their 300 pixel width counterparts.
    Note: In order to 'see' the photos on the web, you will need to copy the jpg files from h:\photos to what folder before linking on the web page you have made?

  6. Copy the web URL to this page into a new entry in your personal blog. This assignment will be graded.