Graphics

1. Graphics Web Design Professor Frank

2. 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?

3. 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!

4. Graphics as Content • Illustrations • Diagrams • Quantitative Data • Analysis and Causality • Integration

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

6. 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”

8. Characteristics of Web Graphics • Dependent on user’s display monitor and bandwidth capacity • Consider handheld technology too!

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

10. 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)

11. Gamma • Degree of contrast between the midlevel gray values of an image

12. 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!

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

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

15. GIF File Compression • Uses lzw compression scheme = best at compressing images with large fields of homogeneous color, such as logos and diagrams

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

17. Dithering

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

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

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

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

22. JPEG Compression • Can choose degree of compression but . . . • The more you squeeze a picture with jpeg compression, the more you degrade its quality

23. JPEG Compression

24. 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!

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

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

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

28. Photographs as GIFs, JPEGs, PNGs

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

30. Archiving Web Graphics • Always save a copy of your original graphics files, including intermediate pieces, not just the original and final files!

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

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

33. Screen vs Printed Color Artwork

34. Complex Illustrations/Photographs

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

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

37. Graphic Text • Use plain html text for text, particularly for essential functional elements of the interface, such as navigation links

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

39. Hidden Graphics • Use media style sheets to hide unnecessary graphics, and replace necessary graphics, such as navigation links, with text

40. Height and Width Tags • All page graphics source tags should include height and width tags

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

42. Colored Backgrounds • Change look of page without adding graphics, or using band-width • Contrast between text and background must be legible!

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

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

45. Color Terminology

46. Last Words • Consider goals for website! Brightly colored, graphics heavy design might not be best for advertising financial firm.