top of page

Graphic File Formats

understanding format choice and image compression

File format

Lossy vs Lossless

Graphic Formats

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

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

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

TIF

JPG

GIF

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

  • 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

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

DESIGN

THE PRINCIPLES AND ELEMENTS

What is Graphic Design

  • Design elements are the basic units of a visual image

  • The principles of design govern the relationship of elements used organize the composition as a whole.

  • All imaginary, 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 relationship of of elements used and organize the composition as a whole

  • All imaginary, art, design and photography alike, are compromised of elements that can be broken down and analyzed by its visual components and the principles that guide them,

 

Design elements

  • Space

  • Line

  • Color

  • Shape

  • Texture

  • Value

  • Balance

Space

  • Space can exist in 2 or 3 demensions

  • It can refer to a positive space or a negative one

  • It can also refer to foreground mid or background elements  

 

Color

  • Pop art

  • Russian poster art

  • Metal

  • Earth

  • Beach

  • Flowers

  • Fruit

Balance

  • Balanced

  • Unbalanced

  • Symmetrical

  • Asymmetrical

PRINCIPLES

  • Unity

  • Variety

  • Repetition

  • Harmony

  • Proximity

  • Proportion

  • Functionality

  • Emphasis

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.

 

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

 

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

 

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

 

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 assignments

  • 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/snas-serif fonts/type for smaller body copy

  • Snas-serif fonts designed for screen viewing assist in readability

  • Sans-serif fonts desigmed for screen viewing assist in readability

 

For optinum legibility choose classic time-tested typefaces

 

Serif vs sans serif: serif reads best at smaller sizes, can be complimentary

Font variance: too many confuse the reader

Definition: fonts that are too similar cause ambiguity

Readability: use upper and lower case letters for optimum clarity

Aligment: left aligment reads easiest, consider eye flow as it moves down as a page

Emphasis: use these tools with discretion and without disturbing eye flow

Intergrity: avoid stretching or distorting type

Weight: stive for a sense of balance

 

The Mac is not a Typewriter

Kerning

Tracking

Large text blocks: rags

  • Stive for consistentes, rhythmic rags (the rag is the right edge of your left-justofied paragraph).

  • The purpose of efective rags is not only to achieve aesthetic beauty, but to enable readers to move gently and effordtlessly down a text column.

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

 

Consistent spacing

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

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

  • This means that word spacing should increase proportionally as letter spacing increases.

HELVETICA "THE MOVIE"

Where does Helvetica originate from? what country? 

-Switzerland

What does the name Helvetica mean in english? 

-the swiss type face

What year was Helvetica created, who create it? 

-1957 by Max Miedinger 

What is the design style that Helvtica rought to popularity worldwide? 

-swiss style 

Name 3 qualities of Helvetica 

-horizonal on the edge

-neutral 

-dramtic 

List the name of 3 different design styles or design movements that are discussed in the film 

-modetnism

-grunge 

-post-modernism 

Which screen fonts did Mathew Carter design? 

-verdana and georgia 

What is the cloned version of Helvetica called? 

-Arial 

Is David Carson a trained designer? How does it affect his approach? 

-no, he is not proportly thought the rules 

What magazine did David Carson Design?

-Ray Gun 

Name 5 brands that use Helvetica 

-Target

-verizon 

-muji 

-SAAB

-Oral B 

ACTIVITIES

Stefan Sagmeister’s design career began at the tender age of 15, working for an Austrian Youth magazine, where he soon realised he preferred the design part to the writing. He studied graphic design at the University of Applied Arts Vienna before receiving a Fulbright scholarship for the Pratt Institute in New York.

 

After spending some time in Hong Kong, Sagmeister returned to NYC and worked for his hero, fellow graphic designer, Tibor Kalman, for half a year before opening his own studio. He founded Sagmeister Inc. in 1993, a New York based design firm. The firm was renamed Sagmeister & Walsh Inc. in 2012, when American graphic designer Jessica Walsh was made partner. The company’s diverse range of clients over the years include HBO, Time Warner and the Guggenheim Museum.

Paula Scher

 

In 1972, she was hired by CBS Records to the advertising and promotions department. After two years, she left CBS Records to pursue a more creative endeavor at a competing label, Atlantic Records, where she became the art director, designing her first album covers. A year later Scher returned to CBS as an art director for the cover department. During her eight years at CBS Records, she is credited with designing as many as 150 album covers a year. Some of those iconic album cover designs are Boston (Boston), Eric Gale (Ginseng Woman), Leonard Bernstein (Poulenc Stranvinsky), Bob James (H), Bob James and Earl Klugh (One on One), Roger Dean and David Howells (The Ultimate Album Cover Album) and Jean-Pierre Rampal and Lily Laskin (Sakura: Japanese Melodies for Flute and Harp). In addition her designs were recognized with four Grammy nominations. She is also credited with reviving historical typefaces and design styles.

An Italian, Massimo was born in Milan in 1931. It was there that he first studied art and architecture, until he came to America in 1957. In 1960, together with his wife Lella Vignelli, he established the Vignelli Office of Design and Architecture in Milan. in 1971 they formed Vignelli Associates, and in 1978, Vignelli Designs. His work covers nearly every field of design including advertising, identity, packaging, product, industrial, interior and architectural design. An avid fan of modernism, his work is always very clear and concise with no clutter or unnecessary material.​

Professor Erik Spiekermann is an internationally renowned type designer (FF Meta, ITC Officina, FF Info, FF Unit, Nokia Sans, Bosch Sans et al), as well as a prolific writer and creator of wayfinding systems worldwide. “Information designer” is the phrase he feels best expresses his work, which began when he was a teen. “A neighbor was a printer,” explains Spiekermann, “I used to hang out at his shop. When I was 15, I got a small printing press and started messing about with metal type.” He started working as a printer and typesetter while studying art history and English at university.

Think of the font you most commonly use when working on your computer.

 hich one is it and why do you use that one?

I usually use CAUDEX because it looks formal and classy. 

bottom of page