460 likes | 732 Views
Graphics. Web Design Professor Frank. Graphics. What are the most effective uses of graphics? W hat’s the best way to integrate words and images into an understandable story for the user?. Role of Web Graphics. Define boundaries of a web “site” or “place” on the web
E N D
Graphics Web Design Professor Frank
Graphics • What are the most effective uses of graphics? • What’s the best way to integrate words and images into an understandable story for the user?
Role of Web Graphics • Define boundaries of a web “site” or “place” on the web • Graphics don’t need to be elaborate but they do need to be consistent!
Graphics as Content • Illustrations • Diagrams • Quantitative Data • Analysis and Causality • Integration
Graphics as Communication • Trust the reader’s intelligence • Respect the medium • Tell the truth as you understand it • Don’t cherry pick your data • Be bold and substantial
Origins of Information Graphics • 19th Century mapmaking • 1850-1950 Mechanical reproduction and mass publications • Early 20th Century – Joseph Pulitzer used graphics to educate illiterate “masses”
Characteristics of Web Graphics • Dependent on user’s display monitor and bandwidth capacity • Consider handheld technology too!
Color Displays • Cathode ray tubes or backlighted flat-screen technologies • Red-green-blue (RGB) additive color model – “adds up” to white light • Most screens can transmit 16.8million colors
Screen Resolution • Pixel – “picture elements” • Most standard computer displays have resolutions that vary from 72 to 96 pixels per inch (ppi) • 1:1 display ratio (one pixel in the image equals one pixel on the screen)
Gamma • Degree of contrast between the midlevel gray values of an image
Graphics and Bandwidth • Don’t assume all users have high-speed connections (ie rural areas) • The more graphics you incorporate, the longer the user will wait to see your page!
Graphic File Formats • GIF, JPEG or PNG • Rules of thumb: • Nature of the image (“photographic” collection of smooth tonal transitions or a diagrammatic image with hard edges and lines?) • Effect of ile compression on image quality • Efficiency of a compression technique in producing smallest file size that looks good
GIF • Graphic Interchange Format • Incorporates “lossless” compression scheme to keep file sizes at a minimum without compromising quality • 8-bit graphics and thus can only accommodate 256 colors
GIF File Compression • Uses lzw compression scheme = best at compressing images with large fields of homogeneous color, such as logos and diagrams
Dithering • Process of reducing many colors to 256 (GIF max) or fewer • Pixels of two colors are juxtaposed to create the illusion that a third color is present
Improving GIF Compression • Remove colors that aren’t needed – a simple logo might only need 6 or 8 or 10 colors • In Photoshop - don’t save every file automatically with 256 colors
Interlaced GIF • Image data is stored in format that allows browsers that support this feature to build a low-resolution version of the full-sized gif picture on the screen while the file is downloading (“fuzzy to sharp”) • Best for 200 x 100 pixels or greater
Transparent GIF • Select colors in a gif graphic’s color palette to become transparent – usually background • Imperfect property - every pixel in the graphic that shares that color will also become transparent
JPEG • Joint Photographic Experts Group • Full-color images, at least 24 bits of memory to each pixel = up to 16.8 million colors • “Progressive JPEGs” gradually load on screen
JPEG Compression • Can choose degree of compression but . . . • The more you squeeze a picture with jpeg compression, the more you degrade its quality
JPEG Compression • Once an image is compressed using jpeg compression, data is lost and you cannot recover it from that image file • Each time you save or resave an image in jpeg format, the image is compressed further and the artifacts and noise in the image increase • Always save an uncompressed original!
PNG Graphics • Portable Network Graphic • Nonproprietary alternative to GIF • Designed specifically for use on web pages • Full range of color depths, support for sophisticated image transparency, better interlacing, and automatic corrections for display monitor gamma
PNG Graphics • Can also hold a short text description of the image’s content (Internet searchable) • Best for line art, text and logos • Files are much larger than JPEGs • Not all web browsers support PNG files
Imaging Strategies • Small page navigation graphics, buttons, and graphic design elements such as logos and icons should be handled as noninterlaced gif or png graphics.
Diagrams/Illustrations • Best to use vector graphics: • Easier to draw and modify using vector-based illustration programs such as Adobe Illustrator • Can be easily resized without loss of image quality
Archiving Web Graphics • Always save a copy of your original graphics files, including intermediate pieces, not just the original and final files!
Summary • Advantages of GIF Files • most widely supported graphics format • diagrammatic images look better than jpegs • supports transparency and interlacing • Advantages of JPEG Files • achieves huge compression ratios (faster downloads) • produces excellent results for most photographs and complex images • supports full-color (24-bit, true-color) images
Images on the Screen • Complex graphics or color photographs often look surprisingly good on web pages • True-color (24 or 32 bit) displays show enough colors to reproduce photographs and complex art accurately, in as many as 16.8 millions colors • The light transmitted from display monitors shows more dynamic range and color intensity than light reflected from printed pages
Diagrams for Computer Screens • Carefully design to match the grid of pixels on the screen • Use orthogonal lines (straight horizontal or vertical lines) or diagonal lines at 45-degree angles • Keep icons and navigational graphics simple
Diagram Size • Graphics carefully built to match the pixel grid cannot be resized in Photoshop • Use anti-aliasing to smooth the boundaries of curves and angles
Graphic Text • Use plain html text for text, particularly for essential functional elements of the interface, such as navigation links
Working With Large Images • Reducing image dimensions: the fewer pixels in the image, the smaller the file size, and the faster the image loads. • Consider displaying a modest-sized version of the photo, with links to the full-size or wallpaper version.
Hidden Graphics • Use media style sheets to hide unnecessary graphics, and replace necessary graphics, such as navigation links, with text
Height and Width Tags • All page graphics source tags should include height and width tags
Alt-text • Alt attribute allows you to supply an alternate text description with any images you place on your page • Describe the content and function of an image in just a few words
Colored Backgrounds • Change look of page without adding graphics, or using band-width • Contrast between text and background must be legible!
Background Graphics • Cascading Style Sheets (CSS) – sets background graphic/defines where it displays, whether it repeats, and, if so, in what direction, whether the image is fixed in place or scrolls with the page, etc
Color Terminology • Hue - wavelength of color along the spectrum of visible light, ie “yellow,” “orange,” or “red.” • Saturation - the intensity of a color • Brightness - The lightness or darkness of a color or how close to either black or white a given color is.
Last Words • Consider goals for website! Brightly colored, graphics heavy design might not be best for advertising financial firm.