Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

Scanning Images into your Website


Assignment for Friday (due today): Create a
webpage with at least three different button
styles you are considering using for your
Webgenre website. Put a workable link to this
page on your portfolio page. (See example)
(20 points)

Reading: Web Graphics , pp. 51-64;
Dreamweaver MX, 73-78

Assignment: (Do after Class)

1. Go to Basic Elements of a Webpage for Digital Design.  Look at the list of basic elements of a webpage.  How many of these things do you already automatically include in each of your webpages?  Print out of copy of this list and use it to help you create your next student website:  The Image Website.

2.  Go to to American News Sites on the Web site and look at some of the major newspapers websites.  How do they use images to drawthe reader in and to tell a larger story?  How do these sites useimages to help create a focal point for that webpage?

3.  Start thinking about what kinds of images you want to use in your next website?  What webgenre will you design your Image website in?

4.  Do you have pictures that you want to scan into the web?  Are there pictures that you want to take with your camera to use in your next Image website?  Would you like to borrow the inexpensive Digital Camera that I have available to loan to my Design students?

1.  Basic Webpages that we will create in this class:

  1. Student Design Portfolio Websites (due Jan. 30)

  2. Webgenre Websites:  Creating Genre Sites
    (due March 3)

  3. Image Websites:  Using Images to Tell Stories on 
    the Web (due March 24)

  4. Flash websites (due April 21)

  5. Model Design Websites: Demonstrating Web 
    Design Fundamentals (due May 8th)

2. Basic Elements of a Webpage for Digital Design

3. Model Websites for Web Genre sites

4. Creating Flash Buttons using Dreamweaver

  1. See Examples of Flash Buttons

  2. Go to "Insert" on the Menu and select "Interactive Images" and then select "Flash Buttons."

  3. Remember, that you need to copy these flash
    buttons individually onto your website.

5. Image File Formats for the Web:

  1. GIF Format:   The gif format is the the everyday file format for all types of simple colored graphics and line art.  The  gif format saves colors in an 8-bit format.  Use gifs carefully for animated gifs and simple web graphics.

  2. JPG Format:  Use jpegs for all 24-bit full-color photographic images, as well as for more complicated graphics that contain color gradients, shadows, and feathering.

  3. PNG Format:  If web browsers support it, use png as a substitute for gif.  Because png does not compress your 24-bit images as well as jpg, do not use png for photos.

7. Dithering is caused when a web browser encounters a color that it doesn't support, such as when you try to turn a 24-bit  photographic image into an 8-bit, 256-color image.  Dithered images often appear grainy and pixelated. See Lynch's  Image File Formats.

8.  To Avoid Dithering, use 216 web-safe colors in the
     web color palette when you create gifs and other simple images for the web. You can save a gif file using
"Web Snap Adaptive," which will force the colors of your image to match 256 colors without dithering. Dithering won't occur in image files that use the 24-bit jpg format.  But if you try to transform a jpg file format image into a gif, dithering can occur if you aren't careful.

9.  Scanning Images for the Web

  1. See Example of Scanned Images

  2. Scan at 150 dpi (dots per inch) when you
    scan images into your computer. Remember,
    web browsers will only portray images at 72 dpi,
    so when you save the image for the web it will
    reduce it from 150 dpi to 72 dpi.   However, if you want to clean up the image, scan the image at anywhere from 100 to 150 dpi. Remember to prepare the image for the web you must first save the image at 72 dpi.

  3. Always save a scanned image as a "Tiff" file format. Tiff files were invented for scanning.  If you are scanning directly into Photoshop, you can save the file as a Photoshop (psd) file.

  4. If you have a choice of how many colors to scan in the image, don't bother scanning for more than "thousands" of colors.  If the image is not a photo and has lots of  broad, flat colors, you can get away with scanning for only 256 colors.

  5. After you have saved a scanned image on your local computer, make sure you put it in an original images folder so that you will always have access to the original scanned image.  After you clean up and prepare the image, you will need to save it as a "gif" or "jpeg" file.  You must save the image for the web so that it will be "optimized" for the web.

10.  Optimizing Images for the web in Fireworks

  1. Go to File in Fireworks MX and select "Export Preview"

  2. A Box will come up allowing you to select 
    either a jpeg or gif format for your image file.
     Notice that you can adjust the quality of the
    image from 1 to 100 percent.  Remember,
    the higher the quality, the bigger the image.

  3. Be careful adjusting some of these image settings in Fireworks, some of these features are a little
    technical.  The easiest thing to do is to  select one
    of the four versions of the image and save it.

  4. When you adjust the image size, either resizing up or down, make sure that the image is set for 72 dpi,
    constrain proportions is checked, and "resample
    image" is set for "bicubic."

  5. You will often find that your image file appears to be really large because it was scanned in at a larger size, let's 8 inches by 6 inches.  You should always go to  Image and select "image size" in order to check to see what the actual size of the image is.

  6. Never resize an image in "Indexed Color," but in "RGB Color."  To make sure the image is set for "RGB Color" go to Image and then select "Mode" and make surethat "RGB Color" is selected.

  7. Examples of edited images using Sara Beattie's Image

11.  Scanning Images from Books or Magazines into the web.

  1. Scanning images from books or magazines can create unusual color shifts in the image because printing inks use "CMYK (Cyan, Magenta, Yellow, and Black ) colors."This problem creates unwanted dot patterns and moires, giving the image a pixelated look.

  2. Before resizing your images, try to get rid of this
    dot pattern or "moires."

  3. In Fireworks go to "Filters" and choose "Blur" and then select "Gaussian Blur."  Set the blur setting to "1.2 pixels".  This will cause the little dots to blur, which removes the "moires."

  4. After adjusting the "Gaussian Blur," go to "Filters"
    and select "Sharpen" to use the "sharpen filter" to
     increase the contrast in the image, which corrects
     for the little blur you added to get rid of the dot patterns.

  5. Now resize your image and save for the web.

  6. Remember to always scan large and to reduce
    down rather than scanning small and enlarging

  7. Scan the entire image and then crop the
    specific images you want to use.

12.  Using Fireworks to Clean-up a Picture for the Web

  1. In Fireworks, go to "Filters" and select "Adjust Color." If you want Fireworks  to automatically optimize your image, then select "auto levels."  

  2. If you want to adjust the "Color Balance," 
    "Brightness/Contrast," "Hue/Saturation," then
    select and adjust these settings.

  3. Remember, if you don't like a change you've made in Fireworks, you can always go to "Edit" and select "Undo,"  which will undo the action you just did.

  4. I am constantly using "undo" to fix bad adjustments I have made when cleaning up a picture.

13.Using Sharpening Effects and unSharpen Mask

  1. The Sharpen effect in the "Filters" menu works
    by changing some gray pixels in the image
    to black or white.

  2. Be careful with sharpen. Although it may seem
    that more detail is revealed, in fact some of
    the detail is lost.

  3. The Unsharpen Mask adjusts the contrasts
    levels of adjoining pixels where strong color
    changes occur, giving the illusion of a
    sharper, in-focus image.

  4. The three sliders in the Unsharpen Mask
    adjust the degree of unsharpening

  5. The Sharpen Amount slider has values that
    range from 1 to 500. The higher the amount,
    the more drastic the change. Normally
    you set this to 100 percent

  6. The Pixel Radius slider determines how far
    out from the edge--1 to 500 pixels--the
    filter will go. The higher the radius, the more
    noticeable the change. Set his between
    .06 and 2.0. I usually use about a 1.5 radius.
    Experiment with this. How small the pixel
    radius depends on the nature of the image.

  7. The Threshold slider determines which pixels
    are affected by the contrast change. For
    most images a value between 7 and 12 is about right. Some people use a very low threshold,
    even a 0 threshold. I use a 9 threshold.

14. Buying an Inexpensive Scanner

  1. Images are portrayed on the web in only 72 dpi
    (dots per inch) format.

  2. Pictures in magazines and books use 300 dpi

  3. Gif files only can use an 8-bit color format.  Jpeg
    files can use up to a 24-bit color format.

  4. A 48 bit Color Scanner will scan an image using
    2 to the 48th power number of colors.  So a
    24 bit color scanner will scan at 2 to the 24th power.

  5. If you intend to save an image in the GIF format, make sure you select indexed- or web-safe colors because the Gif format will only use 216 web-safe colors.

  6. When a Color Scanner says it will scan images up to 2400 x 1200 dpi it scans images at millions of dots per inch.  When a Color Scanner says it will scan at 600 x 600 dpi that is still scanning at 360,000 dots per inch, which is still very impressive.

  7. If you want a scanner to scan images for the web and for the print media, you really don't need a scanner that scans more than 600 x 600 dpi.

  8.  So don't feel you have the buy the 48 bit 5200 x 1200 dpi  scanner when a 24 bit or 32 bit 600 x 600 scanner is good enough for most web and print medium scanning.

15. Creating Text Paths in Fireworks

  1. See Examples of Text Paths in Fireworks

  2. Scanned image with text on paths

  3. See Example of Advertisement using flowing text

  4. See Roses advertisement using the low source-
    high source trick

  5. See low source roses version.

  6. In order to create text that flows around
    a path, you must first create a path.

  7. Create a path using the Vector Ellipse Tool.

  8. Now create a line of text just above this path.

  9. First select the path and then select the
    text, so that both are selected.

  10. Now go to the "Text" menu and select
    "attach to path."

  11. You can adjust how the text flows around
    the path by going to the "Text" menu and
    selecting "allign."

  12. You can also make small changes in how the
    text follows the path by selecting the text
    and then using the space bar to move the
    text just a little bit.














Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
7355      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 20 February, 2006

Digital Design Course homepage