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

Using Graphics' Boards to Create Web Images and Edit Picturess

Assignment for Friday: Create a "rough draft"
of your Web Genre website. Put a workable
link to this wesbite on your portfolio page.
(40 points)


Assignment: (Do after Class)

1. Work on the rough draft versions of your
Web Genre websites. What images, what text,
what colors, what logos, what layout, and what
style are you going to use? See Chris Lewis
drafts of Web Genre website

  • Lewis Flowers ver. 1

  • Lewis Flowers ver. 2

    2. The rough draft of your Web Genre website
    should include at least two pages: 1) a draft of
    your homepage layout, and 2) a draft of the
    template page layout you will use for the rest
    of the pages on the website. After designing
    the homepage interface page, then edit and
    cut some of the elememts to create a template
    page. For example:

1.  Evaluating Webgenre websites.

(See Basic Elements of a Website)

  1. Need Clear Website titles and page titles.

  2. Need text links back to central pages in
    the website.

  3. Every Page has contact and author information.

  4. Make sure pages aren't too long or too wide.
    Users don't like to scroll. (Design either for a
    800 x 600 or 1024 x 768 browser screeen)

  5. Make sure you include Alt tags or
    text links next to images that you are
    using as links.

  6. Each page has Alt tags for all central images.

  7. Each website has a larger structure and goal.

  8. Don't use lines with more than 8 to 10 words.
    It is harder to read text on the web.

  9. Make sure that your websites are all linked
    to your design portfolio pages.

  10. Make sure that your websites provide useful
    links and valuable information.

2. Jessika Fishkin's scanned logos. I used Fireworks
and selected "Filters", "Adjust Colors", and then
selected "Invert" to change from a white to black

  1. Dog in white

  2. Dog in black

  3. Skeleton in white

  4. Skeleton in black

3. CU-Computer Labs with Photoshop installed

4.Protecting your Photos

  1. See Digitial Photo Galleries

  2. See Michael Gordon Copyright Notice

  3. See Rick Rasmussen Photography

  4. See Yosemite by Rick Rasmussen

  5. See Professional Photographers on the Web

5. Digital Watermarks


  2. Introduction to Digital Watermarking

  3. What is Watermarking

  4. Digimarc Imagebridge to Track Digital Images

  5. Digitally Watermarking your Images

  6. Earth Watermark

6.  Use Image Properties to set how text will wrap around an image.  You can right- or left-wrap text around an image.  See Wrapping Text around an Image.

7.  Dithering Effects when you Save a Photo as a Gif Image

8. Making Transparent Gifs

  1. Non-Transparent Jpgs

  2. Transparent Gifs

  3. Sewall Round logos as gifs and jpegs

  4. Remember only Gif images can be saved as

  5. Remember to save the image file you want to have
    transparent, non-white borders, as a Gif file and
    select index transparency and select the white background

8. Digital Photography and Web images

  1. Must-see Digital Photography Sites

  2. Choosing a Digital Camera

  3. The Best Digital Cameras

  4. Two reasons for improved Images on the Web:

    a). Improved Digital Cameras with much
    higher image resolution. These cameras
    have gone from 1 megapixels to 15 megapixels.

    b). Improved Image-Editing Software:

    1. Adobe Photoshop CS2

    2. Macromedia Fireworks 8

    3. Ulead Photoimpact 10

    4. Extensis Intellihance 4.0

9.  Making Photos "pop" using Fireworks
and Photoshop

  1. Sewall Pictures 1

  2. Sewall Pictures 2

  3. Sewall Pictures 3

  4. Sewall Pictures 4

  5. Sewall Pictures 5

  6. Sewall Pictures 6

  7. Sewall Pictures 7

  8. Sewall Pictures 8

  9. Sewall Pictures 9

10.. Using Computer Drawing Boards for Web Design

  1. Intuous 2 Graphic Tablet

  2. Graphine Graphic Tablet

  3. Why a Graphic Tablet

  4. You can use Graphic Tablets for drawing,
    painting, and photo editing on the computer.

  5. You can use Webpainter and Painter drawing
    programs with Graphic Tablets to draw and
    paint using your computer.

12.  Using Photoshop to Edit Scanned Images and
Digital Photos

  1. Jpeg vs. Gif:  Avoiding Dithering

  2. Try to balance image quality with image size

  3. Crop your images to select only the most
    essential elements of the picture.

  4. Use Pictures that are interesting and tell a story

  5. Scanning Photos and print media pictures:
    RGB colors versus CMYK colors.

  6. Feathering Pictures.

  7. Creating photo montages

  8. Using Photoshop Filters.  Don't get too cute.

12.  Editing Scanned and Digital Camera Images using
     Fireworks and Photoshop

  1. Remember save photos as compressed jpg files

  2. Save graphics and line art as compressed gif files

  3. Always save two versions of your image files:
    1) a png file version, and 2) a jpg or gif file
    version. You can always go back and re-edit
    and redo the png version, but it is much
    more difficult to re-edit the jpg version.

  4. Always check the size of your image and the
    size of your image files.  Don't make them too big.

  5. Experiment with several different versions of 
    your images.  Which one looks best.

13.  Transparent Gifs

  1. In Photoshop, go to Image and Mode and select
    "Indexed Colors."

  2. Now go to Image and Mode and select "Color Table."

  3. When the Colored Table box comes up, select the
    color dropper and put it on the color in the image that you want to make transparent.  

  4. Now select that color.

  5. When you save the image make sure you save it as
    a gif file and make sure transparency is selected.

  6. See Mustang Transparent Gif,

    See Mustang on Beach Background

  7. The easier way to do this trick is to use
    layer masking. You would mask the
    background so just the car shows through.

    See Mustang on Green Background













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: 
20115      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: 24 February, 2006

Digital Design Course homepage