Upload
robertbenard
View
582
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
Web GraphicsWeb GraphicsWeb GraphicsWeb GraphicsRobert BenardRobert Benard
Mott Community CollegeMott Community College
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
Web GraphicsDid you know that early web pages did not have
graphics at all?
Can you imagine going to a website today without graphics?
Web GraphicsWeb graphics play many roles in web design.
They are:
• Part of the message• Part of the user interface and navigation• Part of the theme
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.
Web Graphics as NavigationIt 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?
Web Graphics as NavigationTo 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.
Web Graphics as ThemeFor 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.
The Technical StuffPixels: 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.
The Technical StuffResolution 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?
The Technical StuffColor: 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?
The Technical StuffAliasing: 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.
Graphic StylesThe 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?
Graphic StylesGIF (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
Graphic StylesJPG (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)
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
Topics Covered• GIF, PNG and JPG images are best for the
web because of their quality and size.