Transcript Principles of Graphic Design

Droddy
“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)
 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.
JPG – 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
GIF (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
BMP (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
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
Two Types: Painting and Drawing
Painting Programs:
• Create images using pixels
• Photoshop is a painting program
• Primarily used for photo editing and
enhancement
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:
•
•
•
Notice: These programs
.ai (Illustrator)
both incorporate drawing
.fla (Flash)
painting tools.
.eps (Encapsulated Post Script – usedand
in printing)
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 Flash: .fla
 Adobe Photoshop: .psd
 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
Tagged Image
TIFF
File Format
or TIF
Graphics
GIF
.bmp
.tif
Painting
Painting
.gif
Painting
JPG or
JPEG
Joint
Photographic
Experts Group
.jpg
Painting
PNG
Portable Network
Graphics
.png
Painting
PSD
Photoshop
Document
.psd
Painting
Interchange
Format
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
Repetition – repeating parts of the design
throughout the project
• Brings unity
• Can be used with many elements:
• Font
• Colors
• Etc
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
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
Alignment – allows the eye to
connect related elements
• Left, right or centered
• Line up related objects
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
• 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
Organizes millions of colors.
Helps a designer make good color choices.
There is a different color wheel for Subtractive and
Additive color.
 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
The primary colors of the
CMYK model create
BLACK when mixed
together.
The primary colors of the
RGB model create WHITE
when mixed together.
 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.
 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
 A three color palette
 Uses one of the colors on the wheel and the two adjacent colors of its
complement
 Example:
 Next to each other on the color wheel
 Create harmony
 Easy to use in design
 Example:
 Shades of the same color
 Eye pleasing