Understanding Graphics for Creating ComputerBased Multimedia Projects

1
Understanding Graphics for Creating
Computer-Based Multimedia Projects Web Pages
Adapted by Helen Mongan-Rallis from presentation
by Andrea Pokrzywinski (used with permission
for Educ 5415)
2
Monitor Colors RGB
3
1 Bit Black and White
4
24 Bit Color
5
216 Web Safe Colors

• Macintosh Computers and Window computers have
  different color indexes of 256 colors
• Web safe only 216 colors that match perfectly on
  the monitor when seen on both platforms
• Thus, for reliable graphic design, use only web
  safe colors

6
Graphic Compression

• Graphics files take up a lot of memory
• Causes sluggish performance on web sites with
  graphics
• Two types of graphic compression formats have
  been become standard for web use.

GIF
JPEG
7
JPEG

• Joint Photographic Experts Group-A compression
  standard developed for still images.
• JPEG compression is recommended for photographic
  -style images and continuous -tone images (e.g.
  used for backgrounds).

8
JPEG Compression is Variable
42K
32K
36K
9
JPEG images pixelate as they are enlarged
10
GIF

• Graphics Interchange Format
• A graphic compression format developed by
  CompuServe to allow graphics to load quickly on
  easily through a network.
• Best used with flat graphics and such as logos
  and drawings.

11
GIF - Indexed Color Limited to 256 Colors
12
GIF vs. JPEG
http//www.rit.edu/bdb7236/mmwww/picthis.html
JPEG15,343 bytes GIF26,979
13
Gif vs JPEG
JPEG42,268 bytes GIF21,507 bytes http//www.ri
t.edu/bdb7236/mmwww/picthis.html
14
Transparent GIFs

• Gif files will allow you to set one color to be
  transparent. This means it will allow the web
  pages background to be viewed through this color.

Transparent
Not Transparent
15
Placing transparent objects on background colors
that match the transparency color will prevent
haloing seen in the previous slide.
16
(No Transcript)
17
Interlacing

• Interlacing allows the picture to gradually fill
  in by adding lines top to bottom and repeats
  this till the image is complete.
• Standard format fills from top to bottom.
• Interlacing allows the viewer to see a preview of
  the entire image before it finishes downloading .
• The image on the UMD Psychology dept. web site at
  http//www.d.umn.edu/psychology/people/index.html
  is interlaced. Notice how it loads

18
Anti Aliasing

• Anti-Aliasing smoothes the edges of a graphic.

19
DPI - Screen Resolution

• Monitors read 72 dots per inch in resolution
• Thus there are about 5,200 dots per square inch.
  
• Printed documents usually use 150 dpi or higher
  with 1, 440, 000 dots per square inch.
• For web photos, set your image resolution to 72
  dpi.
• Sony Mavicas are set to take 72 dpi photos

20
Pixels

• 72 pixels to an inch.
• Pixels are the standard measuring tool for
  computer monitors.
• Web page designers design with for a monitor view
  of 640 pixels wide and 480 pixels in height as a
  standard.
• This allows for the lowest common denominator in
  monitors to view the entire screen. This will
  change with advances in technology.

21
Hexadecimal Color Codes
Web colors are coded in six digit code combining
numbers and letters. You can find the codes for
web safe colors on web sites for graphics editors
or it will be built into sophisticated web
graphic editing programs like fireworks.
33CC00
22
Creating Graphics

• Draw a graphic from scratch
• Scan a picture with a scanner
• Draw using graphic applications (e.g. PhotoShop,
  AppleWorks Draw, or PowerPoint draw tools)

23
Capturing Graphics

• Copying from the Web
• Free Web Art Site
• http//www.mccannas.com/
• Purchasing Image CDs
• Eyewire product index http//www.eyewire.com/index
  /

24
Further Information

• Creating World Wide Web Graphics
• http//www.envisiondev.com/idug/oct96_w/wg_main.ht
  m
• Making Web Graphics
• http//www.geocities.com/SiliconValley/Heights/128
  8/making.html
• Creating Graphics for the Web
• http//www.widearea.co.uk/designer/