CLASSROOM
    

 

Session 1
Session 2
Session 3
Session 4
Exercise 1
Exercise 2
Colour
Graphics
Sample 1
Sample 2
Sample 3
Tips 1
Tips 2
Scripts
Glossary
Homework

 

Design on the Web:

  • structural information design and

  • graphic design

Color Schemes:

Date and Time

cooltext.com
Using video or digital camera for self-portrait

Open your video image in Photoshop. To change the background of your image to white, use lasso tools (hold Alt key when clicking).
Feather your selection by 2 pixels before cutting the background to white foreground.  Save your image as p1.jpg into your WebPages folder.

Creating images for GIF animation

Open your portrait image taken from video camera in Photoshop.
Resize it to 300 x 400 pixels end save as CompuServe GIF.
Name it p1.gif and save. Now apply some filters (Distort, Artistic) and save  this new image as CompuServe GIF - p2.gif.  You can create a few more images (p3, p4), starting always from p1.jpg.

When reducing the final image to indexed color GIF format.  Ensure that there is no dithering set. The reason you do not want dithering for the GIF image is that with solid colors the GIF converter tends to fill them with a two-tone mesh in an attempt to recreate the base color. When this occurs you will not be able to set a good GIF transparency. So turn off the dithering!

Using GIF Animator

Use Animation Wizard from File menu, which will guide you through the process.  Experiment with different settings.

A Maple College student worked
part-time as a waiter  in a restaurant
::

 Customer: Waiter!  What's that thing at the bottom of my plate?
 Waiter:     That's the design, sir.

 Customer: But it's moving !!!!
 Waiter:      It's an animated gif, sir.

It's always faster to include graphic dimensions in your HTML to speed up the loading of your page. This also helps the page stay still so that the user can start reading the information without the page jumping to accommodate the graphics as they load. Alt tags are beneficial as well to entice your reader to wait for the
graphics and they are essential for any navigational links that are being rendered
as graphics. If someone has to wait on a slow connection just to find out which link is which, you'll lose them in a hurry.
Always give your viewers the option to click to a larger version of a graphic instead of springing that 100k photo on them with no warning. Most people, if properly warned, will take the time to look, but won't when it's pushed on them. So always list the file size of the image and let them decide if it's worth their time or not.
Practice scanning images in at smaller resolutions and then try cropping out
unnecessary elements to further squeeze down the file size.
HOMEWORK:
Internet Resources

Web Pages That Suck
http://www.webpagesthatsuck.com/
Builder.com
http://www.pageresource.com/
ttp://info.med.yale.edu/ caim/manual/