Understanding Graphics for
Creating Computer-Based
Multimedia Projects & Web
Pages
Adapted by Helen Mongan-
Rallis from pr...
Monitor Colors RGB
1 Bit Black and White
24 Bit Color
216 Web Safe Colors
•Macintosh Computers and
Window computers have different
color indexes of 256 colors
•Web safe: only 2...
Graphic Compression
•Graphics files take up a lot of memory
•Causes sluggish performance on web sites
with graphics
•Two t...
JPEG
 Joint Photographic Experts
Group-A compression standard
developed for still images.
 JPEG compression is
recommend...
JPEG Compression is
Variable
42K
32K
36K
JPEG images
pixelate as they
are enlarged
GIF
 Graphics Interchange Format
 A graphic compression format
developed by CompuServe to
allow graphics to load quickly...
GIF - Indexed Color Limited
to 256 Colors
GIF vs. JPEG
JPEG=15,343 bytes GIF=26,979
http://www.rit.edu/~bdb7236/mmwww/picthis.html
Gif vs JPEG
JPEG=42,268 bytes GIF=21,507 bytes
http://www.rit.edu/~bdb7236/mmwww/picthis.html
Transparent GIF’s
 Gif files will allow you to set one color to
be transparent. This means it will allow
the web pages ba...
Placing transparent objects on background colors that match the
transparency color will prevent haloing seen in the previo...
Interlacing
 Interlacing allows the picture
to gradually fill in by adding
lines top to bottom and repeats
this till the ...
Anti Aliasing
 Anti-Aliasing smoothes the edges of a
graphic.
DPI - Screen Resolution
•Monitors read 72 dots per inch in resolution
• Thus there are about 5,200 dots per square inch.
•...
Pixels
•72 pixels to an inch.
•Pixels are the standard measuring tool for computer
monitors.
•Web page designers design wi...
Hexadecimal Color Codes
Web colors are coded in six
digit code combining numbers
and letters. You can find the
codes for w...
Creating Graphics
 Draw a graphic from
scratch
 Scan a picture with a
scanner
 Draw using graphic
applications (e.g.
Ph...
Capturing Graphics
 Copying from the Web
Free Web Art Site
http://www.mccannas.com/
 Purchasing Image CD’s
Eyewire produ...
Further Information
 Creating World Wide Web Graphics
http://www.envisiondev.com/idug/oct96_w
/wg_main.htm
 Making Web G...
Presentation File
Upcoming SlideShare
Loading in …5
×

Presentation File

579 views
490 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
579
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Monitors use a blend of three light colors: Red Green and Blue
  • In one bit color each screen pixel is either black or white.
    8 bit color allows the computer to display 256 colors, using eight bits per pixel to store color code information.
  • 24 bit color is often called true color. Newer computers are capable of this.
  • Gifs create their own color pallettes and are restricted to 256 colors.
  • Presentation File

    1. 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. 2. Monitor Colors RGB
    3. 3. 1 Bit Black and White
    4. 4. 24 Bit Color
    5. 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. 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. JPEGGIF
    7. 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. 8. JPEG Compression is Variable 42K 32K 36K
    9. 9. JPEG images pixelate as they are enlarged
    10. 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. 11. GIF - Indexed Color Limited to 256 Colors
    12. 12. GIF vs. JPEG JPEG=15,343 bytes GIF=26,979 http://www.rit.edu/~bdb7236/mmwww/picthis.html
    13. 13. Gif vs JPEG JPEG=42,268 bytes GIF=21,507 bytes http://www.rit.edu/~bdb7236/mmwww/picthis.html
    14. 14. Transparent GIF’s  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. TransparentNot Transparent
    15. 15. Placing transparent objects on background colors that match the transparency color will prevent haloing seen in the previous slide.
    16. 16. 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…
    17. 17. Anti Aliasing  Anti-Aliasing smoothes the edges of a graphic.
    18. 18. 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
    19. 19. 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.
    20. 20. 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
    21. 21. 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)
    22. 22. Capturing Graphics  Copying from the Web Free Web Art Site http://www.mccannas.com/  Purchasing Image CD’s Eyewire product index http://www.eyewire.com/index/
    23. 23. Further Information  Creating World Wide Web Graphics http://www.envisiondev.com/idug/oct96_w /wg_main.htm  Making Web Graphics http://www.geocities.com/SiliconValley/He ights/1288/making.html  Creating Graphics for the Web http://www.widearea.co.uk/designer/

    ×