Web Graphics

1,272 views

Published on

Adding "eye candy" to Websites is and important part of Web design. Here are the basic things to consider.

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,272
On SlideShare
0
From Embeds
0
Number of Embeds
64
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Graphics

  1. 1. Web Graphics Getting Started with “Eye Candy” for Webs By: Mr. Breitsprecher
  2. 2. Digital Images <ul><li>Made up of “pixels” </li></ul><ul><li>Colored dots of light </li></ul><ul><li>Create illusion of image </li></ul><ul><li>All digital pictures are rectangular </li></ul>
  3. 3. Web Formats <ul><li>2 Main formats for Web graphics </li></ul><ul><ul><li>GIFS </li></ul></ul><ul><ul><li>JPG </li></ul></ul><ul><li>PNG is a new format, combines best of GIFS & JPG </li></ul><ul><li>PNG not supported by all browsers </li></ul>
  4. 4. GIFs <ul><li>Graphic Information Format </li></ul><ul><li>Up to 256 colors </li></ul><ul><li>1 color may be “transparent” </li></ul><ul><li>Supports animation </li></ul><ul><li>Not good for photos </li></ul><ul><li>Best when picture has few colors </li></ul>
  5. 5. JPGs <ul><li>Joint Photographic Experts Group </li></ul><ul><li>Supports 16 million colors </li></ul><ul><li>Good for photos </li></ul><ul><li>Use when many colors </li></ul>
  6. 6. File Size <ul><li>Kilobytes of data, not size of picture </li></ul><ul><li>Large files are better image </li></ul><ul><li>Large files load slower </li></ul><ul><li>Compromise between file size and quality </li></ul>
  7. 7. Resolution <ul><li>Number of pixels in a picture </li></ul><ul><li>In print, more pixels mean better quality </li></ul><ul><li>High quality print images at least 600 dots per inch (DPI) </li></ul><ul><li>Computers cannot display more than 72 </li></ul>
  8. 8. Anti-Aliasing <ul><li>Pixels are rectangular </li></ul><ul><li>Edges in pictures can appear “jagged” </li></ul><ul><li>Edge of pixels is called “alias” </li></ul><ul><li>Computer software can “soften” edge, create illusion of smoothness </li></ul>
  9. 9. Graphic Software <ul><li>Professionals use ADOBE PHOTOSHOP for Web graphics </li></ul><ul><li>PAINTSHOP PRO is a similar program, low cost, easy-to-use </li></ul>
  10. 10. Using Graphics <ul><li>Identity Graphics. Tell who you are. i.e. Corporate and product logos. </li></ul><ul><li>Structural Graphics. Overall shape and layout of page. </li></ul><ul><li>Navigational Graphics. Provide links to other pages or sites. </li></ul><ul><li>Contextual Graphics. Related to content on a page - used to help convey or illustrate information. </li></ul><ul><li>Ornamental Graphics. Create eye appeal without adding to content of page. </li></ul>

×