Digital Design for the Arts and Humanities website

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

Digital Photography and Web Images

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.  Go to a number of your favorite websites and study how they use pictures and images to create a focal point on a webpage.

2.  Study how Designers use a Title Caption with a
to create and reinforce the larger story told by
the image.

3.  Study how in addition to a Title Caption and central image Designers use short descriptive stories under the picture to help draw the reader into the page.

4.  When you read some magazines this week notice how thepage-length advertisements often use a central picture and a Title Caption to draw the reader into reading the advertisement.


1. How do we change photos by computer editing?

2. Model Websites for Web Genre sites

2. See Progression of Web Genre website

  1. Kohl's Ad image

  2. Lewis Flowers ver. 1

  3. Lewis Flowers ver. 2

  4. Lewis Flowers ver. 3

3. Examples of a student Scanned Image 

3. Examples of gif text using color gradients

4. Creating Text Paths in Fireworks

  1. See Examples of Text Paths in Fireworks

  2. See Example of Advertisement using flowing text

  3. See Example of Modified Advertisement

  4. See Example of Text Path Trick

  5. See Abomb examples of using text paths:
    abomb.jpg , abomb1.jpg

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

  7. See low source roses version.

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

  9. Create a path using the Vector Ellipse Tool.

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

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

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

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

  14. 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.

5. 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. See this Bush Picture with Moire and
    this Bush Picture with the Moire removed using
    Gaussian Blur

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

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

  5. After adjusting the "Gaussian Blur," go to "Xtras"
    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.

  6. Now resize you image and save for the web.

  7. See these images:  Computer, Computer 2,
    and Computer 3-gif version

  8. Remember computers use RGB colors to
    create the colors of an image.  Images in
    magazines are created by using CMYK
    colors.  Photographs from film use RGB

6.  Scanning and working with images

  1. Sewall Lion 1

  2. Sewall Lion 2

  3. Sewall Lion 3

  4. CU postcard

  5. Sewpostcard

  6. Sewpostcard1

  7. Sewpostcard with Digimarc watermark

  8. Sewall postcard4

  9. Sewall Postcard5

  10. Sewall Postcard6

7. Some tips for using Digital Cameras

  1. See snowex1.png, snowex2.png, snowex3.png

  2. These images are examples of basic image
    files that digital cameras create when you take
    a picture.

  3. Note that most digital cameras make these
    images using 72 dpi resolution, which can make
    the image file really big.

  4. When you edit these image files in Fireworks,
    the first thing you want to do is to change their
    resolution from 72 to 300 dpi. 300 dpi is the
    standard resolution for photograph files.

  5. Call up the imagefile in Fireworks and go
    to "Modify Canvas" and select "Image Size."

  6. When the "image size" box open us, un-check
    "resample image and then change 72 dpi to
    300 dpi. After you do this, then re-check
    "resample image." This will cause the
    image file to be compressed down in to
    a tighter, clearer file.

  7. After doing this, your image won't appear
    as big, because making it at 72 dpi stretches
    out the image to fit the total pixel size
    available on your digital camera.

  8. An image changed from 72 to 300 dpi will
    look sharper and clearer and more

  9. Save the processed image with a different
    name than the original. Always keep the
    original photo image file as a back-up if
    you need to go back and totally re-edit
    the photo.

  10. Higher mexapixel cameras set at high image
    settings take superior pictures.

  11. These days the standard for high-quality
    digital images is a 8 megapixel camera

  12. Take lots of pictures and have on hand
    lots of digital film memory media

  13. Always take bigger images than you are going
    to use. Computers allow you to use big image
    files to improve quality and resolution.

  14. When printing using an inkjet printer, set your
    resolution to no higher than 300 dpi.

  15. Computers enable photographers to take much
    better pictures than there skill levels would
    allow. Using the tools in Fireworks and
    Photoshop, you can really improve your images.

  16. Always save the original image files that you
    took using your digital camera in their "raw"
    form. You can always go back and re-touch
    and re-do an image using the original image

8. Adding borders to photographs

  1. See example image: oceanex.png

  2. You can use the the "Effects" menu and
    select "Outer Bevel" . But when you do this
    it makes the edges of the boder rounded.

  3. To make a border with just flat edges,
    use the vector tool, with the fill set as
    transparent and the edge set to black.

  4. Which ever way you make your border,
    try not to make it to thick. Remember it
    is intended to be just a simple frame to
    the image.

8. Using Layers and Transparencies to blend Images

  1. See balloons.htm, beachmontage.jpg, montage.jpg

  2. Using the Magic Wand tool and threshold to
    select out images from photos

  3. You can select smaller pieces of an image
    to make adjustments to it.

  4. You can use cut and paste to merge parts of
    multiple images.

9. Using Masks to blend and re-touch images

  1. See carrepair.jpg, bluebeach.jpg, redbaby.jpg ,
    and liteflowers.jpg

  2. See examples of using mask layers:
    fruit.jpg , mirage.jpg , oranges.jpg, grapes.jpg

  3. You can make each layer semi-transparent
    by adjusting the opacity for each layer.

  4. By adjusting a layer's transparency and
    its color "curves" and its "hue/saturation"
    under the filter menu bar.

  5. You can use layer masks to select different
    parts of each image layer to appear in the
    final image. Layer masks are very useful
    when you want to blend images.

  6. You can also use layer masks to add one
    part of an image to another part of an image.
    For example, adding a new sky to a nature

  7. A lot of advanced Image techniques involve
    layer masks andd adding and blending images
    on top of each other.

  8. Layer masks can be a great tool to create
    a blended collage affect.

  9. Remember in the "Mask Edit" mode, using
    a white brush adds material to the image and
    using a black brush takes material away. You
    use the bitmap brushes to make sure your
    mask contains just the material you want.

  10. See Masks are Easy and Masks Power with

  11. You can also use layer masks to put images
    inside text. See Fruit Text , which uses Fruit
    as the background filler for the text. Also
    see Bluebeach Text, which used Bluebeach.

  12. Create an image layer and a text layer. Make
    sure the text is white. Now select both layers
    and go to "Modify" and select "Mask" and
    chose "Group as Mask."

  13. Notice that you can unlock the image and
    change which part of the image the text
    will mask.

  14. Make sure you use White text to make
    this Mask effect work. Black Text will not
    work using this Masking effect.

9. Protecting your Photos

  1. See Digitial Photo Galleries

  2. See Michael Gordon Landscapes of
    the American West

  3. See Michael Gordon Copyright Notice

  4. See Rick Rasmussen Photography

  5. See Yosemite by Rick Rasmussen

  6. See Chris Lewis rough draft of
    Digital Photography website

  7. See Professional Photographers on the Web

8. Digital Watermarks


  2. Introduction to Digital Watermarking

  3. What is Watermarking

  4. Digimarc Watermarking Guidelines

  5. Digital Images with Watermarks

  6. Earth Watermark

9 .  Evaluating Webgenre websites.

  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.

  5. Make sure you include 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.

10.  Making Links Open in Different Browser:

  1. See Setting Links to Open in New Windows

11.  Using a Scanner and Photo Editor to Prepare Images
      for the Web

12.  Using a Digital Camera to create Images for the Web.

13. Using the Digital Images on the Web

14.  Photo-Sharing on the Web

15.  The Power of Images to tell stories.

  1. Life Magazine Home Page

  2. Newsweek.Com

  3. U.S.News.Com

  4. The Atlantic Online















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: 
13758      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: 6 February, 2007

Digital Design Course homepage