1 / 46

Graphics

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

oprah
Download Presentation

Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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”

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

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

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

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

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

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

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

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

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

  16. Dithering

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

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

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

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

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

  22. JPEG Compression

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

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

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

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

  27. Photographs as GIFs, JPEGs, PNGs

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

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

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

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

  32. Screen vs Printed Color Artwork

  33. Complex Illustrations/Photographs

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

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

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

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

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

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

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

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

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

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

  44. Color Terminology

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

More Related