Using Graphics Boards to Create Web Images and Edit Pictures

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)

Need Clear Website titles and page titles.
Need text links back to central pages in
the website.
Every Page has contact and author information.
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)
Make sure you include Alt tags or
text links next to images that you are
using as links.
Each page has Alt tags for all central images.
Each website has a larger structure and goal.
Don't use lines with more than 8 to 10 words.
It is harder to read text on the web.
Make sure that your websites are all linked
to your design portfolio pages.
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
background

3. CU-Computer Labs with Photoshop installed

4.Protecting your Photos

See Digitial Photo Galleries
See Michael Gordon Copyright Notice
See Rick Rasmussen Photography
See Yosemite by Rick Rasmussen
See Professional Photographers on the Web

5. Digital Watermarks

Digimarc.com
Introduction to Digital Watermarking
What is Watermarking
Digimarc Imagebridge to Track Digital Images
Digitally Watermarking your Images
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

Non-Transparent Jpgs
Transparent Gifs
Sewall Round logos as gifs and jpegs
Remember only Gif images can be saved as
transparent.
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

Must-see Digital Photography Sites
Choosing a Digital Camera
The Best Digital Cameras
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

10.. Using Computer Drawing Boards for Web Design

Intuous 2 Graphic Tablet
Graphine Graphic Tablet
Why a Graphic Tablet
You can use Graphic Tablets for drawing,
painting, and photo editing on the computer.
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

Jpeg vs. Gif: Avoiding Dithering
Try to balance image quality with image size
Crop your images to select only the most
essential elements of the picture.
Use Pictures that are interesting and tell a story
Scanning Photos and print media pictures:
RGB colors versus CMYK colors.
Feathering Pictures.
Creating photo montages
Using Photoshop Filters. Don't get too cute.

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

Remember save photos as compressed jpg files
Save graphics and line art as compressed gif files
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.
Always check the size of your image and the
size of your image files. Don't make them too big.
Experiment with several different versions of
your images. Which one looks best.

13. Transparent Gifs

In Photoshop, go to Image and Mode and select
"Indexed Colors."
Now go to Image and Mode and select "Color Table."
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.
Now select that color.
When you save the image make sure you save it as
a gif file and make sure transparency is selected.
See Mustang Transparent Gif,

See Mustang on Beach Background
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