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

Introduction: Image Design for the Web


Assignment: (Do before Class):
Web Graphics , pp. 8-14, 20-44;
Images on the screen ; Html and Graphics

Assignment for Friday: 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.(20 points)

Assignment: (Do after Class)

1. Practice adding e-mail links on your webpages.  Remember the code is  mailto:e-mail address for example:

2. Study the Web-safe Color Chart and  Paletteman Online Color Picker. Also see Web Design Color
Scheme Generator
. Do you understand why it is important to create web-safe colors, so the colors
you use on your webpage won't dither?  

3. Practice creating vector-based shapes and editing
and creating new images.

4.  Practice creating buttons using the Effects menu bar.

5.  Try to add styles to some of the vector-based shapes
     you have created.

1. You can now buy copies of the 3 assigned books
from Barnes and Noble in Boulder at 30th and
Pearl Streets :

  1. Web Page Design, by Brian Austin
  2. Web Graphics, by Mary Lojkine
  3. Dreamweaver MX 2004, by Nick Vandome

Go to the front of the store and ask at the main
counter for the larger order books being held
for "Professor Lewis".

2. Example of Flash buttons on webpage

2. Using image effects to create simple borders
for images. ( Use A Photo Tour of Sewall )

  1. Open an image in Fireworks.
    See these examples: Flowersb.jpg
    and Flowersc.jpg

  2. Make the Canvas size a little bigger
    than the image so that you can see
    the outside borders on the image.

  3. Select the image and choose "Effects."

  4. Now choose "Outer Bevel." Make sure
    your edge is small, such as 1 or 2 pixels.

  5. For most image borders you should use
    black as the border color.

3. Saving Images in Fireworks ((See Sewall Photos)

  1. If you try to save an image using "save as",
    Fireworks will save the image as a "png"

  2. In order to save the image as a "gif" or
    "jpeg" file, you must use"export preview"
    and choose what format you want to
    save the file in.

  3. Remember, photographs and images
    with more than three or 4 colors should
    be saved as "jpeg" files. Simple graphics
    such as buttons can be saved as
    "gif files."

  4. Always try to compromise between the size
    of the image file and its quality. A higher
    quality file will always be a bigger file.

  5. You can often compromise with images by
    creating thumbnails of them and allowing
    viewers to click on them to get the full
    picture, knowing that it will take a little
    while to download.

  6. You can also use two versions of an image:
    a "High Source" and a "Low Source". The
    "low source" will load up quickly and then
    slowly the "high source" image will fill in the
    background, often before the viewer really
    knows what is going on.

  7. To feather images, you can use the "Select"
    menu and then choose "Feather." Remember,
    you can always adjust how much feathering
    you want.

3. Examples of Feathered, anti-aliased,
aliased images, and transparent gifs.

  1. Examples of four versions of the same images

  2. Example of Transparent gif using a matte that is
    the same color as the background of the page

  3. You can use matte to set the background color
    for both a gif and a jpg image.

  4. Example of Interlaced gif

  5. Example of Progressive jpg

  6. Example of High source/Low source trick

4. Setting the Export Image options

  1. First choose jpg or gif for the format

  2. Examples of Dithering: dither.htm, dithest.htm

  3. Then select quality, from 0 to 100 %

  4. Now select "progressive" or "interlaced" image

  5. For gif files, select "websnap adaptive"

  6. For gif files, you can select the number of
    colors that will be shown in the image.

  7. If you select a small number of colors for a
    gif file, be prepared to select dithering,
    which reduces the color banding that occurs
    when your browser can't match the color

  8. Setting loss will blur the image and make it
    smaller in size. Be careful when using a
    high loss value.

  9. For jpeg images, you can select smoothing,
    which like loss for gifs, will blur the image
    a little bit

  10. When adjusting gif images, always do so
    trying to balance quality with image size.
    The smaller the image, the lower the quality.

  11. After adjsuting all your settings in fireworks,
    you can save those settings and use them
    on a series of jpg or gif images. Near the
    "Saved Settings" box, select "+" and save
    your settings as a file.

5. Using "Filters" to adjust images in Fireworks

  1. Using Adjust Colors options.
  2. Using Sharp and Unsharpen mask
  3. Using Blur and Gaussian Blur
  4. Using the "Others" option. You can
    select "convert to alpha" or "find edges."

6.. Creating Buttons using Fireworks

  1. Image Buttons Example

  2. See Buttons Example Page

  3. See Making Buttons with Spot IT

  4. See Jessica Fishkin's Ski Buttons

7.  Using Fireworks

  1. Study diagram of Fireworks Toolbox and
    keyboard shortcuts

  2. You must learn and understand the basic
    limits of each individual piece of software.

  3. Just because you can do something with
    one piece of software doesn't mean that
    it will work the same way on another software.

  4. Larger lesson:  Fireworks MX is not Photoshop 7.

  5. You must learn to use both Fireworks MX and
    Photoshop 7 separately.  They both have
    their own logic and layout.

  6. Fireworks uses both vector-based graphics
    and bitmapped-based graphics.

  7. When using images in Fireworks, you are using
    the bitmapped-based graphic.

2.  Menu bars that I keep open when I am using Fireworks:  Tools, Stroke, Tool Options, Optimize, Styles, and Layers.

3.  You can reduce and increase the size of the menu bar by double-clicking on it.  This is a neat trick.

8.  Editing Images in Firewworks (See Sewall Photos)

  1. You can cut and copy parts of an image only in
    "bitmapped" mode. You select "bitmapped
    mode" by selecting the bitmap image to
    work on in Fireworks.

  2. After copying the image in bitmapped mode, turn
    bitmape mode off and paste that copy into your
    larger image.

  3. You can doubleclick on a bitmapped image to turn
    bittmapping "on" or "off" for that image.

  4. When you want to add "effects" or work with a
    specific bitmapped image, you must first turn
    bitmapping on.

  5. Take advantage of paths and layers to add multiple
    copies of images to a single, larger image.

  6. By using paths and layers and the pointer, you
    can move each image layer around the larger 
    image on the canvas.

  7. Remember to use your arrow keys to move your
    images around the canvas.  The arrow keys give
    you precise control over movement and placement.

9. Creating High-Source and Low-Source images in Fireworks.

Use the Optimize menu bar to adjust the
image qualities of your image in either jpeg or giff
formats. Using the jpeg format, save one version of
the image at 20 percent quality and the other
version at 80 or 100 percent quality. Use the 20
percent quality version as your
low source image
and the 80 to 100 quality version as your high
source version.

10. See Lynch on Graphic image formats:.
Summary-File formats.

  1. Examples of variation on Beattie's png file

  2. Fixing Broken Images.

11. See Lynch on GIFs

12. See Lynch on JPEG graphics.

13. Creating vector-based shapes and adding styles to shapes

  1. Vector-based shapes
  2. Vector-based shapes with added styles

14.  See my example of Single Pixel-Width Image Spacer GIFs  and a webpage using the single-width image trick.

15. See Lynda Weimann on 1 ) The Browser-Safe Color Palette by Hue,  2) The Browser-Safe Color Palette by color value    See a  Web-safe Color Chart. Also see Paletteman Online Color Picker a great webpage color picker. Also see Web Design Color Scheme Generator

16.  See Aligning Images in Webpages.

17.  Adding a link that sends an e-mail message:

  1. Insert link and type "

18.  Creating Buttons with Fireworks.   See
      examples of buttons I made with Spot

19. When making images links, turn the hypertext border off,  to "border = 0", so that you won't see a
black box around your linked image.












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: 
7580      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: 17 February, 2006

Digital Design Course homepage