1 / 44

“We find that people quickly evaluate a site by visual design alone.”

“We find that people quickly evaluate a site by visual design alone.”. Stanford Guidelines for Web Credibility, 2002. BCIS 5130 Fundamentals of Presentation Design. Graphics. Color Theory. R OY G B I V. The Visible Color Spectrum.

jirair
Download Presentation

“We find that people quickly evaluate a site by visual design alone.”

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. “We find that people quickly evaluate a site by visual design alone.” Stanford Guidelines for Web Credibility, 2002

  2. BCIS 5130Fundamentals of Presentation Design Graphics

  3. Color Theory

  4. R OY G B I V The Visible Color Spectrum

  5. Separation into the Visible Spectrum Prism Spectral light White light Wikipedia

  6. The Entire Electromagnetic Spectrum Wikipedia

  7. Hue: Artist’s or Painter’s Primaries

  8. Hue: Artist’s or Painter’s Primaries

  9. Two Major Technological Color Models RGBor additive color: for projected color (RGBcolors added yield white) CMYKor subtractive color: for print / dye color (CMYKcolors added yield black)

  10. Hue: Additive or Light Primaries

  11. Hue: Subtractive or Printer Primaries

  12. Color Reflection and Absorption RGB CMYK

  13. Color Reflection and Absorption

  14. Color Perception

  15. The Eye and Photoreceptors Photoreceptors Light Retina After www.cis.rit.edu

  16. The Eye and Photoreceptors Photoreceptors Fovea centralis Light Retina After www.cis.rit.edu

  17. The Eye and Photoreceptors Photoreceptors Fovea centralis Light Retina Blind spot

  18. The Retina and Photoreceptors • 127,000,000 rods (black and white) • 6-7,000,000 cones (color) • ~48% red cones • ~48% green cones • ~4% blue cones, all outside of the fovea centralis

  19. Rods and Cones

  20. Rods and Cones

  21. The Retina and Photoreceptors Very few Rods Only Rods Only Rods Only Rods Only Not many Rods or ConesRods or Cones Many Rods and ConesRods and Cones High color Sensitivity High light sensitivity Retina Blind spot After www.cis.rit.edu

  22. Computer Color Display

  23. Monochromatic Display

  24. Polychromatic (color) Display 1 Pixel

  25. 8-Bit Color = 256 Table Choices (GIF) Yale Web Style Guide, 1996 Color table has maximum of 256 color settings (0 - 255) Intermediate colors are created by illusion (e.g., dithering)

  26. 8 Bits + 8 Bits + 8 Bits = 24 Bit Color (JPG) Yale Web Style Guide, 1996

  27. Physical Limitations of Displaying and Printing Color Thomas Abrahamsson http://elfwood.lysator.liu.sel

  28. Digital Graphic Formats

  29. Digital Image Types & Formats Magnified bit-mapped pixels • Still images • Vector • Bitmap • Animated images • Vector • Bitmap

  30. Digital Image Types & Formats Magnified vector objects • Still images • Vector • Bitmap • Animated images • Vector • Bitmap

  31. Vector-Based Graphics Described mathematically Generate small files (typically) Resize with no distortion Create drawings, illustrations, movie graphics, computer games, web applications

  32. Sample Vector Code 4 3 2 1 5 CitationSoftware.com (2003) Moveto 3 inch, 4 inch Lineto 5 inch 4 inch Lineto 5 inch 6 inch Lineto 3 inch 6 inch Lineto 3 inch 4 inch Setlinewidth .5 inch Setlinecolor yellow Stroke

  33. Some Vector-Based Formats AI (Adobe Illustrator) SWF, SVG, FLW (Adobe Flash) DWG, DXF (Autodesk AutoCAD) CDR (CorelDRAW!) WMF(Windows meta file)

  34. Some Vector-Based Formats AI (Adobe Illustrator) SWF, SVG, FLW (Adobe Flash) DWG, DXF (Autodesk AutoCAD) CDR (CorelDRAW!) WMF(Windows meta file)

  35. Play video vector animation UNOmaha College of IS&T.mpg

  36. Bit-Mapped Graphics Use file compression algorithms Generate large file sizes Are best for photos, pictures, etc. (when authenticity, details, or mood are important) Record data for each pixel inside the image boundary

  37. What is a Pixel? Wikipedia …a picture element, the smallest piece of information in an image. Below, an image reconstructeed from a set of pixel values, using dots, lines, or smooth filtering.

  38. Pixels Originated With Mosaics Roman plate 1st century AD, www.about.com

  39. Pixels Derive from Pointillistic Art A Sunday on La Grande Jatte by GeorbesSeraut

  40. Winslow Homer, “Girl Carrying Basket” Bitmap graphic (with pixels)

  41. Winslow Homer, “Girl Carrying Basket” Vector graphic (with objects)

  42. Some Bit-Mapped Formats GIF(CompuServe; 256 colors) JPG, JPEG, Progressive JPEG (17+ million colors) PNG(a GIF successor format) BMP (common in Windows)

  43. Some Bit-Mapped Formats, 2 PDD, PSD, PDF (Photoshop) TIF, TIFF (Win/Mac cross-platform; fax file format) Try to use JPG, BMP, GIF

  44. End of Section Graphics

More Related