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 Fireworks,Photoshop, and
Image Editors to create Web Images


Assignment: (Do after Class)

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

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

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. Rough Drafts of Web Genre websites are due by
the end of the day. I will start grading them on

2. See student's example of a rough draft of a
Web Genre website.


3. See Annie Tuck's Web Genre Model sites


3.See Lee DeRose's Web Genre rough draft

4.. See a model for a revised Google site.
-----Compare this model with the Google Site

4. Using Graphic Tablets for drawing images and
editing photographs.

  1. Demonstrate Deep Paint and Web Painter
    using the Wacom Board

5. Creating and Using Layer Masks

  1. See rose picture
  2. See examples of using masks to
    combine two or more images:
    Skymask, Skymask2, and Skychange
  3. See "png" version of Skymask2.
    Notice how I have used multiple layers
    of the same image and have made
    adjustments to each layer
  4. Use Image Masks to select only that
    part of an image that you want to
    work with. The Mask hides all the
    rest of the image.
    (See Grain (gif), Grain1 (jpg), Grain2 (original)
  5. You can use the paintbrush tool to
    select the area to be masked within
    an image.

  6. Remember in Masking, using the white paintbrush tool adds to the mask and using the black paintbrush toolsubtracts from the mask.
  7. Or you can use the Marquee tool to draw
    a box or circle around that part of the
    image that you want to include in the mask

  8. See my Postcard Example made with Layered Masks

5. Using the Rubber Stamp Tool to copy adjacent
objects in an image

  1. In order to use the Rubber Stamp tool, you must
    first select it from the tool bar.
  2. Now go to the area you want to copy, hold
    the shift key to select that area.
  3. Now go to the area you want to change and
    move the cursor over that area.
  4. Notice that an exact copy of the initial
    selected area is painted here.

6. Using Mask to cutout Text from an Image

  1. See Text using background images
    See Utah ad and Travel ad.
  2. Put the image you want to use for the text
    on its own separate layer
  3. Put a new layer just above it and type
    text on this layer. Make sure you
    don't use black text for this, because
    if you do this trick won't work.
  4. Layer masks use black to select the
    object and white to unselect the
    to be masked.
  5. Now select this text layer and the
    image below it and to to "modify
    and select "mask" and then choose
    "group as mask."
  6. This creates a new layer with just
    the text part of the image masked.

6. Demonstrate using Photoshop to edit a
couple of Pictures of Sewall Hall.

6.  Image Editing Tricks in Photoshop and Fireworks

  1. a) pic1

    b) pic2

    c) pic3

    d )pic4

  2. Color Pallette Options for Gif Images
    (See the Gradient Tool for creating
    bands of color. Gradient Text)

  3. Use Transparency to make a background
    image semi-transparent. Use this image
    as the background for your webpage's
    initial table. See Grapes webpage

  4. Use WebSnap Adaptive or Web 216 

  5. In Dreamweaver, altering an Image's
    appearance by using "v-space," "h-space",
    and "border."

  6. Using the Marquee tool, you can change the
    options from "normal" to "fixed ratio" to
    "fixed size."

  7. Using the Marquee tool, you can change the
    characteristics of the edge that is cut out by
    selecting "hard," "anti-alias," or "feather."

  8. Using the Shape tool to create borders>
     We are going to use "round shape tool,"
    the "stroke tool," and the scale tool to do this.

  9. Remember, if you hold down the shift key
    when you are using the tools to draw a circle, 
    Fireworks will create a perfect circle.

  10. Editing parts of an image using Fireworks.

  11. Using Paths in Fireworks.  Putting Text on a Path
    see "Sewall image"  and "Sewall image 2".
    See Beer Mug example.

  12. Increase "smoothing" in "export preview" to
    smooth some of the rough edges of an image.

  13. Using Webpainter 3.

  14. Using Photoshop to create special, "cool effects"
    for images.

  15. See

  16. Bluefaces2 image

7. Examples of Basic Image Website Layout

  1. A Davis Family Album

  2. Sewall Academic Program Faculty

  3. Social Security Blues

8.  Feathering an Image

  1. Use Use sewpic1.jpg to Feather.

  2. Use the Oval Marquee Tool  and change  the
    shape from a Rectangle to a Circle.

  3. Draw an ellipse around the picture, and go to 
    "Modify" on the toolbar menu and select "feather." 
     You can feather an image from 10 to 30 pixels and 
    still have it look good.

  4. Now go to 'Modify" and use "select inverse", and 
    now push the delete key.  This will delete the rest of the image in the background and leave the feathered

  5. Be wary of getting too fancy with feathering.  It should add to your page not appear tacky or out of place.

9.  Learning to Look for Images and Caption Title Web Tricks

  1. See Good Design Portfolio for Good Ad Images
  2. Slate.Com
  3. Salon.Com
  4. CNN.Com
  5. Adobe.Com
  6. LandRover USA.Com
  7. USA Today.Com















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: 
16513      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: 23 February, 2006

Digital Design Course homepage