Lesson 7
- 1. Web Graphics Robert Benard Mott Community College
- 2. Topics How web graphics become part of a web page and its message How web graphics become part of a web pages’ navigation Discover how a theme can be enhanced by graphics Understand the concepts of pixels, additive and subtractive colors, anti-aliasing Learn what graphic styles are best for the web
- 3. Web Graphics Did you know that early web pages did not have graphics at all? Can you imagine going to a website today without graphics?
- 4. Web Graphics Web graphics play many roles in web design. They are: Part of the message Part of the user interface and navigation Part of the theme
- 5. Web Graphics as the Message There are times when web graphics are your message. When this is the case, graphics are: Large Photographic or detailed Important Sometimes graphics are the message because “a picture is worth a thousand words.” Imagine explaining what a dog looks like to someone that has never seen one, but for other things, graphics are not needed at all.
- 6. Web Graphics as Navigation It is sometimes attractive to have nice graphics serve as our user interface and navigation elements. These navigation elements are called icons just like on our Windows desktop. A good example of using graphics as icons in Mott’s website. http://www.mcc.edu . We have also used icons in this class. Remember the pictures for the landscaping company!? From that lesson, what do you remember about web graphics and accessibility standards?
- 7. Web Graphics as Navigation To make sure our web pages are accessible, we want to make sure that we have “alternate text” available for those who may be unable to see the page.
- 8. Web Graphics as Theme For websites where “look” is important, most web designers develop a theme that is common throughout the entire site. The reason behind this is so users are aware they are still on the same site and it makes it more visually appealing. This hopefully translates to users staying longer and purchasing our products! Navigation graphics can be incorporated in a theme.
- 9. The Technical Stuff Pixels: On computers, we view tiny, almost visible square dots of color called pixels. The word pixel means picture element. These pixels combined together make our image. Think of George Seurat’s painting using pointillism.
- 10. The Technical Stuff Resolution is the number of dots per inch (dpi). If the resolution is low, there are few dots per inch. If the resolution is high, there are many dots per inch. Do we want high or low resolution images for the web?
- 11. The Technical Stuff Color: Computers are based on additive colors, not subtractive colors. With additive colors, the more color you add, the lighter the color gets. With subtractive colors, the more color you add, the darker the color gets (think of coloring with multiple crayons as a kid – remember the ugly brown color you would get?) Additive colors get lighter because your computer displays images by combining different colors of light. To put this in the easiest way possible, what color is a standard piece of paper? What color is your monitor when turned off?
- 12. The Technical Stuff Aliasing: Because pixels are square, it is very difficult to display things like curves or diagonal lines without them appearing like steps. The jaggedness, or stairs, is called aliasing. Anti-aliasing is the process of using colors to fool the eye into thinking something is smooth.
- 13. Graphic Styles The graphic styles that are best for the web are GIF and JPG. Why do you think these are the best graphic styles? Why isn’t BMP a good graphic style to use for the web?
- 14. Graphic Styles GIF (graphic interchange format) was developed to send graphics over telecommunication lines. GIF images are: Compressed for smaller size 8-bit (256 colors only) Parts can be made transparent Compatible with older browsers Can be animated
- 15. Graphic Styles JPG (joint photographer’s expert group) Can be thousands of colors Can’t be transparent Can’t be animated Allows different quality types which means different image sizes (storage size)
- 16. Topics Covered Web graphics become part of a web pages’ message when a picture is worth a thousand words For appearance sake, many web pages include images for navigation buttons To create continuity and an attractive design throughout a website, many websites use graphics as part of their template. Pixels are like little dots on a page to make a larger image Computers use additive colors because colors are made with light
- 17. Topics Covered GIF, PNG and JPG images are best for the web because of their quality and size.