Droddy

Principles of Digital Graphic

Design

PIXELS AND RESOLUTION“Pixel” is short for two words: Picture and

Element.• Pixels (tiny squares) combine to form the image the

human eye perceives• Too small for the human eye to distinguish• Each pixel displays one color

Resolution is the number of pixels in an image• More pixels = higher resolution• Measured in ppi (pixels per inch)

or dpi (dots per inch)

RESOLUTION AND COMPUTERS

The higher the resolution, the better the quality,

however:

The higher the resolution the more memory it takes

up and the longer it takes to download when viewed on

the Web.

Most computer screens display at 72ppi.

Saving an image at a higher ppi will only waste

memory, increase download time and will not be

displayed at the higher resolution.

FILE TYPESJPG – Joint Photographic Experts Group

(those who developed this file type)• Used for photography (at very high res) and web

(at lower res)• Supports 16 million colors• Compresses an image every time it is saved by

throwing out subtle color changes (lossy compression)• Good practice to keep an original of the image in

case the image degrades below quality standards.

• Compression can be adjusted in this file type

FILE TYPESGIF (graphic interchange format)

• Efficiently compresses files• Only 256 colors• Best for images that have large areas of the same color

• Cartoons, logos, etc

• Lossless compression – compression without loss of quality.

• Used when an image has transparent parts• Can be “animated”• Good for Web due to small file size, Unsuitable for

photographs

FILE TYPESBMP (bitmap)

• Not usually used on the Web but can be used for digital graphics

• A Microsoft Windows format used in the Paint Program, or used in word processing

• Sometimes clipart is saved as BMP• Large File but limited to only 256 colors

TIFF or TIF• Large file sizes – too large for digital

purposes• Can be used in print• Not compressed• Displays 16 million colors• Many scanners produces images as

TIFF files• Digital cameras can save in TIFF format

FILE TYPES

FILE TYPES

PNG (Portable Network Graphics)• Was designed to replace gif and jpeg (for

digital purposes) files, but hasn’t done so yet• Supported by some web browsers and is

the native file type for Fireworks• Compresses without loss of image quality

and supports 16 million colors

Compression – the process of reducing the file size

of an image• Often required in digital media to decrease load times• Lossless – reduces the file size of an image without

losing any pixel information• Lossy – reduces the file size of an image by removing

pixels that are not essential• Greater compression = Quality loss

File Compression

You Must Balance Quality and File SizeIn the use of Digital Media!

Two Types: Painting and

Drawing

Painting Programs:• Create images using pixels• Photoshop is a painting program• Primarily used for photo editing

and enhancement

Image Management Programs

Drawing Programs:• Create images using mathematically defined lines and

curves – Vector Graphics• Illustrator is a drawing a.k.a. vector program• Can scale infinitely without loss of quality• Vector Graphics - can be converted to other types of

graphics

Common Vector Formats:• .ai (Illustrator)• .fla (Flash)• .eps (Encapsulated Post Script – used in printing)

Image Management Programs

Notice: These programs both incorporate drawing and painting tools. However, they specialize in one or the other.

Each image management program has a file format

specific to only that program, called its Native Format.

This is your working file. It is wise to always keep a

copy of an image in its native format so it can be

edited.

Adobe Illustrator: .ai

Adobe Photoshop: .psd

Image Management Programs

Adobe Flash: .fla

Adobe

Fireworks: .png

• Once a copy of an image has been saved in its native format, you can change to another file format by using Save As

• Sometimes you must Export to obtain a certain file type

• Different file formats are appropriate for different uses

• Some programs only import graphics with specific file formats

• Some images look better saved as one format over another

• Some images need to be small in order to load quickly on the Internet

Acronym

File Format Extension Program Type

BMP Bitmap .bmp PaintingTIFF or TIF

Tagged Image File Format

.tif Painting

GIF Graphics Interchange Format

.gif Painting

JPG or JPEG

Joint Photographic Experts Group

.jpg Painting

PNG Portable Network Graphics

.png Painting

PSD Photoshop Document

.psd Painting

Acronym

File Format Extension Program Type

CDR CorelDraw .cdr Drawing

AI Adobe Illustrator .ai Drawing

FLA Flash .fla Drawing

WMF Windows Metafile

.wmf Drawing

EPS Encapsulated Postcript

.eps Drawing

BASIC DESIGN PRINCIPLES

Repetition – repeating parts of the

design throughout the project• Brings unity• Can be used with many elements:

• Font• Colors• Etc

BASIC DESIGN PRINCIPLES

Contrast – some elements of the design

are created different from the rest• Adds visual interest• Creates a focal point• Must be used sparingly and for elements

you want to emphasize

BASIC DESIGN PRINCIPLES

Proximity – grouping related

elements together• Eliminates confusion• Helps create whitespace – a part of the

project that is not taken up by images, text or other elements• Allows the eye to rest• Does not have to be white

BASIC DESIGN PRINCIPLES

Alignment – allows the eye

to connect related elements• Left, right or centered• Line up related objects

BASIC DESIGN PRINCIPLES

Perspective – creating depth and viewing

angle• Linear perspective: the closer an element is in

an image, the larger it is• Atmospheric perspective: considers how objects

look through air• Objects in the foreground are in focus, clear and

have more vibrant colors• Objects in the background are less focused and

less vibrant in color

Color Models: Additive and

Subtractive• Additive (RGB): color model used for

display screens such as computer screens and televisions• Light is added from the source in order to

see the color• Hence the name additive color

• Red, Green and Blue mix to form all the other colors

COLOR THEORY

• Subtractive (CMYK): how we see color naturally and how printing colors are mixed• Light reflects off of objects and some of the

color is absorbed, or subtracted. We only see the colored light waves that are reflected• Hence the name subtractive color

• Cyan, Magenta, Yellow and blacK mix to form all the other colors

COLOR THEORY

Organizes millions of colors.

Helps a designer make good color choices.

There is a different color wheel for

Subtractive and Additive color.

The Color Wheel

Primary Colors – the colors that cannot be mixed by

mixing the other colors in the model.• RGB – Red, Green and Blue• CMYK – Cyan, Magenta, Yellow and Black

The center of the color wheel is the color made when

mixing the primary colors of each color model.• RGB – White• CMYK - Black

Types of Color

Made by mixing the primary colors

Found between the primary colors on the color wheel

The primary colors of the CMYK color model are created

by mixing the primary colors of the RGB color model, and

the reverse is also true.• Therefore, the primary colors on the CMYK color wheel are

found as secondary colors on the RGB color wheel.

• And Vice Versa.

SECONDARY COLORSThe primary colors of the CMYK model create BLACK when mixed together.

The primary colors of the RGB model create WHITE when mixed together.

Located directly across from each other on the color

wheel

Used to create contrast in a design• One complimentary color is dominant color• One complimentary color is used as an accent

COMPLIMENTARY COLORS

A three color palette

Uses one of the colors on the wheel and the two adjacent

colors of its complement

Example:

Split Complement

Next to each other on the color wheel

Create harmony

Easy to use in design

Example:

ANALAGOUS COLORS

Shades of the same color

Eye pleasing

MONOCHROMATIC COLORS