What is???

Graphic Design

It can refer to a number of artistic and professional disciplines which focus on visual communication and presentation.

Various methods are used to create and combine symbols, images and/or words to create a visual representation of ideas and messages.

Multimedia

Multimedia is a broad term that applies to the integration of text, graphics, sound, video and animation into a document.

The term can be used as a noun (a medium with multiple content forms) or as an adjective describing a medium as having multiple content forms.

Image Management

This is a more narrow term that applies to the use of graphics in a document.

It encompasses every aspect of graphics from the creation to the final product whether in print or in some other medium.

It requires you to make decisions such as the size of file, the number and type of colors used, and what format is most appropriate.

Graphics

This can be defined as everything on the page that is not actual textual content.

Examples are photographs, drawings, line art, graphs, diagrams, typography, numbers, symbols, geometric designs, maps, engineer drawings, or other images.

Image Structure & Storage

Going Digital?

Film Cameras: Digital Cameras:

Lower priced cameras No processing chargesVery high resolution No film charges Lots of accessories & gizmos Instant resultsBetter tonal quality New and funBetter exposure control Special effectsLess time for making prints Can send via email & slides Easier on the environmentMore stable history Have your own darkroom

Overview of Digital Cameras Image Sensor

A chip with millions of photosites Collects the data that's stored in each image

Photosites Record the brightness of the light that falls on it Stored as a set of numbers Sets the color & brightness of pixels

Pixels Is a data representation of a specific location in a

matrix or grid The more pixels in a captured image, the higher the

camera resolution.

Understanding Resolution

A 1 Megapixel camera captures roughly 1200 pixels x 800 pixels

When you enlarge a digital image, the pixels show

Resolution Needed

USE: PPI:Web pages and e-mails 72

On-screen 72

Ink-jet 150

Photo-printing: snapshots 200

Printing press 300

PPI =Pixels Per Inch

PPI vs. DPI

PPI is many times refer to as DPI, but they are actual different.

PPI =Pixels Per Inch refers to the square pixels in a digital

image DPI=Dots Per Inch

refers to printed dots and the space between them

Megapixel Chart

Each colored box represents a certain number of megapixels. The numbers along the top and left side are print dimensions in inches at 300ppi (pixels per inch). Most books and magazines require 300ppi for photo quality. For example, the chart shows that you can make a 5" x 7" photo quality print from a 3 megapixel camera.

See next slide for chart

inches @ 300ppi (numbers inside colored boxes are megapixels)

Notice that as the print size doubles, the megapixels required increases geometrically. You can make nice 8" x 10" prints with a 6 or 8 megapixel camera, but to make a true photo quality 16" x 20" print, you need between 24 and 30 megapixels. Don't be fooled by manufacturers' claims that say you can make 16" x 20" prints from an 8 megapixel camera. While you certainly can make a print that size, it will not be true photo quality.

Here is why.

A megapixel is 1 million pixels. It's an area measurement like square feet.

A typical 8 megapixel camera produces images that are 3266 x 2450* pixels.If you multiply 3266 by 2450, you get 8,001,700 or 8 million pixels.

To find the largest photo quality image you can print, simply divide each dimension by 300:3266 / 300 = 10.89 inches2450 / 300 = 8.17 inches

Here is why. (con’t)

If you are not publishing your images in a book or magazine, and you're just making prints for yourself or your friends, you can "cheat". Good quality inkjet printers can make a nice looking print at 250 or 200ppi. At 200ppi, the maximum print size becomes:3266 / 200 = 16.33 inches2450 / 200 = 12.25 inches

If you know how to use image editing software like Photoshop, you can "cheat" even more by increasing the image size, and even doubling the number of pixels in the image. The quality of the camera and lens becomes more important at this point because any loss of detail or sharpness is magnified. If an image is enlarged too much in this manner, it will look "fuzzy" or "pixelated".

Megapixels vs. Maximum Print Size

Megapixels Pixel Resolution* Print Size @ 300ppi

Print size @ 200ppi

Print size @ 150ppi**

3 2048 x 1536 6.82" x 5.12" 10.24" x 7.68" 13.65" x 10.24"

4 2464 x 1632 8.21" x 5.44" 12.32" x 8.16" 16.42" x 10.88"

6 3008 x 2000 10.02" x 6.67" 15.04" x 10.00" 20.05" x 13.34"

8 3264 x 2448 10.88" x 8.16" 16.32" x 12.24" 21.76" x 16.32"

10 3872 x 2592 12.91" x 8.64" 19.36" x 12.96" 25.81" x 17.28"

12 4290 x 2800 14.30" x 9.34" 21.45" x 14.00" 28.60" x 18.67"

16 4920 x 3264 16.40" x 10.88" 24.60" x 16.32" 32.80" x 21.76"

35mm film, scanned 5380 x 3620 17.93" x 12.06" 26.90" x 18.10" 35.87" x 24.13"

*Typical Resolution. Actual pixel dimensions vary from camera to camera.

**At 150ppi, printed images will have visible pixels and details will look "fuzzy".

“Digital Film”-Storage Options

CompactFlash SD SmartMedia Multimedia Card Memory Stick

1 GB is poor ($13) 2 GB is ok ($15) 4 GB good ($20) 8 GB better ($40) 16 GB best ($115)

Compact Flash Card

SD Card

SmartMedia Card

MultiMedia Card

Memory Stick

Original Composition Coming In Tighter

Landscape Orientation

Portrait Orientation

Crop Version 1

Crop Version 2

Crop Version 3

Photography Tips

Focus Fill the frame Rule of thirds Place subject off center Background Unusual angles Get down on subjects level Unifying elements Look of lines Look for reflections Tell a story

Image File Types

Painting vs. DrawingPhotoshop vs. Illustrator

Painting/Photoshop Paint or photo programs create images by using

pixels, which is known to as a raster (or bitmap) image

If an image is enlarged beyond its original size it will become pixelated

Drawing/Illustrator Drawing programs create images using

mathematically defined lines and curves, which is known as a vector image

If an image is enlarged beyond its original size it will retain clean crisp lines

Lossless vs. Lossy

Lossless A lossless compression algorithm

discards no information. It looks for more efficient ways to represent an image, while making no compromises in accuracy.

Lossy In contrast, lossy algorithms accept

some degradation in the image in order to achieve smaller file size.

File Types

TIFF (Tagged Image File Format) very flexible format that can be lossless or lossy.

The details of the image storage algorithm are included as part of the file. In practice, TIFF is used almost exclusively as a lossless image storage format that uses no compression at all. File sizes are quite big.

PNG a lossless storage format. However, in contrast with

common TIFF usage, it looks for patterns in the image that it can use to compress file size. The compression is exactly reversible, so the image is recovered exactly.

GIF creates a table of up to 256 colors from a pool of 16 million. If the image

has fewer than 256 colors, GIF can render the image exactly. GIF achieves compression in two ways. First, it reduces the number of

colors of color-rich images, thereby reducing the number of bits needed per pixel, as just described.

"lossless" only for images with 256 colors or less. For a rich, true color image, GIF may "lose" 99.998% of the colors.

JPG is optimized for photographs and similar continuous tone images that

contain many, many colors. It can achieve astounding compression ratios even while maintaining very high image quality.

Lossy JPG works by analyzing images and discarding kinds of information that

the eye is least likely to notice. It stores information as 24 bit color. Important: the degree of compression of JPG is adjustable. At moderate compression levels of photographic images, it is very difficult for the eye to discern any difference from the original, even at extreme magnification.

RAW is an image output option available on some digital cameras Lossless disadvantage is that there is a different RAW format for each

manufacturer, and so you may have to use the manufacturer's software to view the images. (Some graphics applications can read some manufacturer's RAW formats.)

BMP is an uncompressed proprietary format invented by Microsoft. There

is really no reason to ever use this format. PSD, PSP, etc. , are proprietary formats used by graphics

programs. Photoshop's files have the PSD extension, while Paint Shop Pro files

use PSP. be sure to save your end result as a standard TIFF or JPG, or you may

not be able to view it in a few years when your software has changed

Principles of Design

Contrast

The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page—it’s what makes a reader look at the page in the first place.

Repetition

Repeat visual elements of the design throughout the piece. You can repeat colors, shapes, textures, special relationships, line thicknesses, fonts, sizes, graphic concepts, etc. This develops the organization and strengthens the unity.

Alignment

Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look.

Proximity

Items relating to each should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the reader a clear structure.

White Space

White space is the space on a page that is not occupied by any text or graphics. You might call it “blank” space. Beginners tend to be afraid of white space; professional designers use lots of white space.

Use white space to separate and emphasize parts of a desktop publishing document.

  White space makes the document easier to

read and allows the reader to move quickly from one part of the document to another.

Relevance

Each graphic element should fulfill a specific function.

Proportion

Its relative importance and its environment should determine the size of a graphic element.

Direction

Effective graphic design guides the reader through a publication.

Consistency

Consistency in design helps the people reading you document to find their way around.

Total Picture

Think of graphic design as the visual equivalent of a jigsaw puzzle. Your job is to assemble a total picture from a series of parts.

Dominant Element

Part of being a good designer is understanding how you want to lead the reader’s eye around the page; that is, which item you want them to look at first, which second, and so on.

Restraint

Strive for simplicity in design.

Attention to Detail

Successful design is based on attention to detail.

Designing with Type

Concordant Relationships

A concordant relationship occurs when you use only one type family without much variety in style, size, weight, and so on. It is easy to keep the page harmonious, and the arrangement tends to appear quite and rather sedate or formal—sometimes downright dull.

Conflicting Relationships

A conflicting relationship occurs when you combine typefaces that are similar in style, size, weight, and so on. The similarities are disturbing because the visual attractions are not the same (concordant), but neither are they different (contrasting), so they conflict.

Contrasting Relationships

A contrasting relationship occurs when you combine separate typefaces and elements that are clearly distinct from each other. The visually appealing and exciting designs that attract your attention typically have a lot of contrast built in, and the contrasts are emphasized.

Categories of Type

Serif

Serif describes the extensions at the end of the main strokes that define each letter; these extensions are called serifs. Oldstyle—Footlight MT Light

▪ Slanted serifs▪ Diagonal stress

Modern—Onyx▪ Thin serifs▪ Vertical stress

Slab Serif—Rockwell▪ Thick serifs▪ Vertical stress

San Serif

“Sans” means “without” (in French) , san serif typefaces are those with out serifs on the end of the strokes. San serif typeface is almost always monoweight, meaning there is virtually no visible thick/thin transition in the stroke; the letter forms are the same thickness all the way around. Comic Sans MS

Script

The script category includes all those typefaces that appear to have been hand lettered with a calligraphy pen, both connected style & non-connected styles Lucida Calligraphy

Decorative

Decorative fonts are great– they’re fun, distinctive, easy to use, often times cheaper, and there is a font for any whim you wish to express. If the thought of reading an entire book in the font make you want to throw up, you can probably put it in the decorative pot. Jokerman

Symbols/Glyphs

This is a font that is made of symbols. Many fonts actually have symbols, but some font are all symbols. In design software they are known as glyphs. example

Units of Measurement

Choosing Units of Measurement

Precision is often a key to good design

Units of Measurement Point Pica Inches

Defining your document in points, picas or inches is a personal preference

Conversion

Point Point = 1/72 of an inch Point = 1/12 of a pica

Pica Pica = 1/6 of an inch Pica = 12 point

Inch Inch = 72 points per inch Inch = 6 picas per inch

Planning a Publication

Planning a Publication

Who is the intended audience? What is the basic message you are

trying to communicate? In what format will readers encounter

my message? What similar messages have my

readers encountered from other sources or competitors?

How does this publication relate to my other publication?

Color

Primary Colors

They are called the primary colors because they are the only colors you can not create.

Secondary Colors

If you take equal amount of the color next to it you’ll get the secondary colors

Meaning of Color

Yellow Health Hope Happiness

Orange Energy Enthusiasm Flamboyant

Red Love Pageantry Power

Violet Nobility Wisdom Spirituality

Blue Peace Coolness Tranquility

Green Life Renewal Growth

Tertiary Colors

To fill the empty spots take equal amount of the color next to it you’ll get the tertiary colors

Complimentary Colors

Colors directly across form each other, exact opposites.

Triad Colors

A set of three color equidistant from each other.

Split Compliment Triad

Choose a color from one side of the wheel, find the compliment directly across the wheel, but use the colors on each side of the compliment.

Analogous Colors

A set of two or three colors that are next to each other on the wheel. No matter which ones you combine, they all share an under tone of the same color.

Shades & Tints

Hue—the pure color Shade—add black to a hue to create Tint—add white to a hue to create

Monochromatic Colors

A combination composed of one hue with any number of is corresponding tints and shades.

Hue

Shades Tints

Shades & Tints in Combination

Most fun of all, choose one of the four color relationships (complimentary, triad, split complementary triad, analogous), but in stead of using hues, use various tints and shades of those colors. This expand your options tremendously.

Tones

Tone—the difference in the value of color; the particular quality of brightness, deepness, or hue of any color

You want to make sure you have contrasting tones.

If you must stick to a particular color scheme you can possible add shadows to help separate the two elements.

Warm vs. Cool Colors

Warm colors Tend to have some red or yellow in them Come to the front It takes very little to make an impact (red

& yellow jump into your eyes) Cool colors

Tend to have some blue in them Recede into the background Sometimes you have to use more to make

an impact or contrast effectively

How to begin to choose color?

Sometimes it can be overwhelming. Start with a logical approach. Ask yourself some questions.

Choosing Color

Is it a seasonal project? Summer—reds & yellows Winter—cool blues Autumn—oranges & browns Spring—greens

Choosing Color

Are there official colors? Start with tint & shades Or split compliment colors

Choosing Color

Does your project include a photograph or other image? Pick up a color in the photograph &

choose a range of colors based on that Choose analogous color to keep the

project sedate and calm Choose complimentary colors to add

some visual excitement

Choosing Color

Are you working on a recurring project? You might want to set a color palette

that you use constantly throughout

CMYK (print) vs. RGB (web)

CMYK C=cyan (blue) M=magenta (sort of red) Y=yellow K=black

RGB R=red G=green B=blue

CMYK (print) vs. RGB (web) CMYK

With the four colors of ink you can print many thousands of colors, which is why it is called “four color process”

This is the color model we use for print It does not appear as vivid as what you will see on your

computer monitor, so don’t be disappointed RGB

This is the color you see on you computer monitor, TV & cell phone

RGB is composed of beams of light the goes straight from monitor to your eyes

RGB file sizes are smaller and some techniques in Photoshop only work in RGB

Reference

Williams, Robin. “The Non-Designer’s Design Book, 3rd ed.” Peach Pit Press, 2008.

www.wikipedia.org Bean, Karen; Lake, Susan.

“Multimedia and Image Management.” Southwestern, 2004.

www.design215.com/toolbox http://www.wfu.edu/~matthews/misc

/graphics/formats/formats.html