Understanding graphics for creating computer based multimedia projects web pages
Download
1 / 24

Presentation File - PowerPoint PPT Presentation


  • 304 Views
  • Updated On :

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) Monitor Colors RGB 1 Bit Black and White 24 Bit Color 216 Web Safe Colors

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Presentation File' - paul


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Understanding graphics for creating computer based multimedia projects web pages l.jpg

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)





216 web safe colors l.jpg
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


Graphic compression l.jpg
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


Slide7 l.jpg
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).




Slide10 l.jpg
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.



Gif vs jpeg l.jpg
GIF vs. JPEG

http://www.rit.edu/~bdb7236/mmwww/picthis.html

JPEG=15,343 bytes GIF=26,979


Gif vs jpeg13 l.jpg
Gif vs JPEG

JPEG=42,268 bytes GIF=21,507 bytes

http://www.rit.edu/~bdb7236/mmwww/picthis.html


Transparent gif s l.jpg
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.

Not Transparent

Transparent


Slide15 l.jpg

Placing transparent objects on background colors that match the

transparency color will prevent haloing seen in the previous slide.


Interlacing l.jpg
Interlacing the

  • 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…


Anti aliasing l.jpg
Anti Aliasing the

  • Anti-Aliasing smoothes the edges of a graphic.


Dpi screen resolution l.jpg
DPI - Screen Resolution the

  • 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


Pixels l.jpg
Pixels the

  • 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.


Hexadecimal color codes l.jpg
Hexadecimal Color Codes the

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


Creating graphics l.jpg
Creating Graphics the

  • Draw a graphic from scratch

  • Scan a picture with a scanner

  • Draw using graphic applications (e.g. PhotoShop, AppleWorks Draw, or PowerPoint draw tools)


Capturing graphics l.jpg
Capturing Graphics the

  • Copying from the Web

    Free Web Art Site

    http://www.mccannas.com/

  • Purchasing Image CD’s

    Eyewire product index http://www.eyewire.com/index/


Further information l.jpg
Further Information the

  • Creating World Wide Web Graphics

    http://www.envisiondev.com/idug/oct96_w/wg_main.htm

  • Making Web Graphics

    http://www.geocities.com/SiliconValley/Heights/1288/making.html

  • Creating Graphics for the Web

    http://www.widearea.co.uk/designer/


ad