top of page

Notes

Graphic File Formats

(understanding format choice and image compression)

File format

  • All computers documents, or files, are packaged in different formats.

  • The format is determined often by the file 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 format.

  • File format

  • All computers documents, or files, are packaged in different formats.

  • The format is determined often by the file 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 format.

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 advantage 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 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 Pixel

  • TIF and JPG are best for images with pixels that blend in color, these are called “contagious pixels”.

  • GIF is best for images with flat even tone, or “non-contagious pixels”.

 

Alias vs Anti-Alias

Design

(Principles & Elements) 

​

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.

What are the Elements and Principles

  • Design and art elements are the basic units of a visual image.

  • The principles of design and art 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 by it’s visual components and the principles that guide them.

Design Elements

  • Space

  • Line

  • Color

  • Shape

  • Texture

  • Value

  • Balance

Space

  • Can exist in two or three dimensions

  • Refer to positive or negative space

  • Refer to foreground mid or background elements

Color

  • Pop art

  • Russian poster art

  • Metal

  • Earth

  • Beach

  • Flowers

  • Fruit

Balance

  • Balanced

  • Unbalanced

  • Symmetrical

  • Asymmetrical

Design Principles

  • Unity

  • Variety

  • Repetition

  • Harmony

  • Proximity

  • Proportion

  • Functionality

  • Emphasis

 

  • Unity : creates a sense of order, a consistency in size and shape

  • Proximity : can create a sense of unity, can also show lack of unity

Color Theory

Primary Colors

  • Pigment generated colors are derived from these primary colors: red, yellow, and blue

    • Subtractive color

  • Light generated colors are derived from these primary colors: red, green, and blue

    • Additive color


 

Secondary and Tertiary

  • Secondary: mixing primary colors create other colors/ for example:

    • Blue + yellow = green

    • Blue + red = violet

  • Tertiary and beyond: A secondary color wheel can expand to tertiary and beyond.

Color Mixing

  • RGB - red, green, blue - light generated model

  • RGY - red, green, yellow - pigment generated model

  • CMYK - cyan, magenta, yellow, black - print processed model

 

Color Modes

  • Monochrome - tints, shades, and tones of a single hue

  • Grayscale - Black and white\

  • Web safe RGB - hexadecimal compatible

  • One of these doesn’t exist in the light spectrum - Purple

Color Modification

  • 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

  • Split complementary

  • Analogous

  • Triad

  • Tetradic

  • Quadrilateral

  • Tints - add white to a pure hue

  • Shades - add black to a pure hue

  • Tones - add grey to a pure hue

 

Color harmony

  • Complementary

  • Split complementary

  • Analogous

  • Triad

  • Tetradic

  • Quadrilateral

Color properties

  • Color properties

  • Warm

  • Cool

  • Bright

  • Dark

  • Saturated

  • Desaturated

  •  

  • Color intensity - changes in relation to its surrounding color

  • Color association - these type of color associations are universal

  • Cultural and Psychological 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-stores

  • Catching the shoppers 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

Writing assignment

​

  • What are the 3 primary colors?

    • Red, yellow, and blue

​

  • How are secondary colors created? Cite an example

    • By mixing primary colors. Green + Blue = Yellow

​

  • How are tertiary colors created? Cite an example

    • By mixing one primary and one secondary color. Ex: red-orange

​

  • What is the difference between subtractive and additive color models?

    • Subtractive - Pigment generated colors are derived from these primary colors: red, yellow, and blue

    • Additive - Light generated colors are derived from these primary colors: red, green, and blue

​

  • How can color affect our perception?

    • It affects our likes and dislikes towards certain objects and gets embedded into our brain as thus.

​

  • How does one color affect another?

    • A color’s intensity changes in relation to its surrounding color

​

  • Find an example or show an example of a grayscale image. ​

​

​

​

​

​

​

​

​

  • Find an example or show an example of a monochrome image.

​​

 

​​

​

​

​

​

​

​

 

  • Find an example or show an example of an image that uses complimentary color.

​

​​

​

Typography

“Fonts are the clothing that our ideas wear”

Web typography

  • Legibility vs Readability

  • Expressive fonts/type for eye catching readability

  • Clean serif/sans-serif fonts/type for smaller body copy

  • Sans-serif fonts designed for screen viewing assist in readability.

 

Legibility: Choose classic time-tested typefaces.

These typefaces should be drawn and crafted with consistency among characters. And exhibit highly legible proportions

Ex: Baskerville, Times New Roman, Caslon, etc

  • Serif vs San-serif: Serif reads best at smaller sizes, can be complementary.

  • Font Variances: Too many confuse the reader

  • Definition: Fonts that are too similar cause ambiguity.

  • Readability: the upper and lower case letters for optimum clarity.

  • Alignment: Left alignment reads easiest, consider eye flow as it moves down a page.

  • Emphasis: Use these tools with discretion and without disturbing eye flow

  • Integrity: avoid stretching or distorting type

  • Weight: Strive for a sense of balance.

 

The Mac is not a typewriter

Kerning

Tracking

Large text Blocks: Rags

  • Strive for consistent rhythmic rags (the rag is the right edge of your left-justified paragraph)

  • The purpose of effective reags is not only to achieve aesthetic beauty, but to enable readers to move gently and effortlessly down a text column

  • Effective rags consist of lines establishing an informal but consistent pattern of line endings

Consistent spacing

  • For text type, use consistent letter and word spacing to produce an even, uninterrupted texture.

  • Letters should flow gracefully and naturally into words, and words into lines.

  • This means that word spacing should increase proportionally as letter spacing increasings

bottom of page