Color Theory Notes

Design: Color Theory

  • Color Theory
    • Three stages
      • primary, secondary and tertiary
  • ROYGBIV
    • visible colors
  • Primary colors
    • Pigment generated colors derived from red, yellow and blue (dark)
    • Light generated colors are derived from red, green and blue (light)
  • Dark color recedes, light color advances
  • Color Mixing
    • RGB (red green blue light generated model)
    • RGY (red green yellow pigment generated model)
    • CMYK (cyan magenta yellow black print process model)
  • Color Modes
    • Monochrome (tints, shades and tones of a single hue)
    • Grey Scale (black and white only)
    • Web Safe RGB (Hexadecimal compatible)
  • Color Modification
    • Tints (add white to a pure hue)
    • Shades (add black to a pure hue)
    • Tones (add grey to a pure hue)
  • Color Harmony
    • Complementary (opposites)
    • Split Complementary (opposites + 1 two colors over)
    • Analogous (colors next to each other on color wheel)
    • Triad (triangle in color wheel)
    • Tetradic (rectangle in color wheel)
    • Quadrilateral (square in color wheel)
  • Color Palettes
    • Different color palettes can invoke mood, location, emotion
  • Color Properties
    • Cool, warm, bright, dark, saturated, desaturated
  • Color Intensity
    • Changes in relation to its surrounding color
  • Color Associations
    • These types of color associations are universal to all people
  • Cultural and Psychological Color Associations
    • These color associations are generated from cultural and contemporary sources and may not be universally recognizable
  • Why Color Matters
    • 73% of purchasing decisions are now made in-store
    • Catching the shopper’s eye and conveying info effectively are critical to successful sales
    • Color increases brand recognition by up to 80%
  • Color Affects
    • Appetite
      • Blue is a rare occurrence in nature
      • We have no appetite response to blue food
    • The Mind
      • Pink is a tranquilizing color that drains your energy
      • Used in prisons, holding cells, opposing team locker rooms

Design Notes

  • What is Graphic Design
    • Design elements are the basic units of a visual image
    • The principles of design govern the relationships of the elements used and organize the composition as a whole
    • All imagery, art, design and photography alike, are comprised of elements that can be broken down and analyzed. This goes for web design as well.

 

  • Design Elements
    • Space
      • Can exist in two or three dimensions
      • It can refer to a positive space or a negative one
      • Can also refer to foreground mid or background elements
    • Line
      • A basic element, it can vary in thickness, texture, and direction
    • Color
      • Draws eyes to certain areas
      • Can have different connotations
    • Shape
      • 3 types
        • Geometric
        • Natural
        • Abstract
    • Texture
      • Can be implied or real
    • Value
      • light and dark parts of an image that give it depth
    • Balance
      • Can be symmetrical and asymmetrical
      • Visual weight of an image
      • Main parts should be balanced

 

  • Design Principles
    • Unity
      • Creates a sense of order, a consistency in size and shape.
      • Proximity can create a sense of unity, it can also show a lack of unity
    • Variety
      • When you have elements that are repeating but not the same
    • Repetition
      • Repeating elements to enhance the meaning of an image
    • Harmony
      • Use of similar elements to create an uncomplicated look or the sense that things are in the right place
    • Proximity
      • Physical placement of the elements
      • Used to convey relation, importance or hierarchy
    • Proportion
      • Golden Ratio
    • Functionality
      • Want design to serve a function
    • Emphasis (Focal Point)
      • Can use color, positioning, proximity or others to create emphasis

Graphic File Formats Notes

  • File Formats
    • All computer documents, or files, are packaged in different formats
    • The format is determined often by the file’s origin, such as a software program like Photoshop, or a device such as a digital camera
    • Graphic files such as a photo, video or artwork can be reduced in file size by using image compression formats
  • Lossy vs Lossless
    • Graphic image formats fall under 2 categories of compression, Lossy and Lossless
    • With Lossy, image data is “lost” or reduced for smaller file sizes but can cause poor image quality. Can result in showing “compression artifacts”
    • Lossless retains image data for higher quality, but larger file sizes
  • Graphic Formats
    • TIF, JPG and GIF are the 3 most common formats for common activities such as printing, scanning and displaying images over the internet
    • PNG is a common web format, is high quality and can contain an alpha (transparency) channel
    • Each format has its own advantages and disadvantages
  • File Format: TIF
    • Stands for Tagged Image Format
    • Common format for desktop publishing, print, photo and graphic design
    • Is a LOSSLESS file format. It retains image data for maximum image quality
    • Can result in larger file sizes, not fit for display over internet, is not browser compatible
  • File Format: JPG
    • Stands for Joint Photographers Expert Group
    • Created for digital photography and works best for photo content
    • Is a LOSSY format
    • Can reduce an image file size by 10:1 without showing significant compression artifacts
    • The level of compression is adjustable
  • File Format: GIF
    • Stands for Graphics Interchange Format
    • Is best for graphics or images that have flat color or even tone, such as a cartoon
    • Reduces image size by “indexing” color from 3 channels to 1
    • Is adjustable by changing color bit levels from 1 to 8
    • Contains no DPI (Dots Per Inch) data for printing. Not a proper format for print
  • Know Your Pixels
    • TIF and JPG are best for images with pixels that blend in color, these are called “contiguous pixels”
    • GIF is best for images with flat even tone, or “non-contiguous pixels”

File Format Exercise: Trees

The best image quality is the PNG-24 file type, however it is also the largest with a file size of 861 KB. The smallest file size is the JPEG low file type with a file size of 43 KB, however the image quality is poor. The best balance of file size and quality is JPEG high. It has almost as good of quality as PNG-24 with a relatively small file size of 147 KB.

File Format Exercise: Buses

The best image quality is the PNG-24 file type, however it has a pretty big file size of 144 KB. The smallest file size is the JPEG Low file type with a file size  of 13KB. The best balance of size and quality is the JPEG High because it has a small file size (34 KB) and looks good. It looks better than any other file size besides PNG-24.