ba0453perfectcolor_copy

http://www.bamagazine.com



http://www.bamagazine.com/email/zC7xrC


Before&After ®

2 of 16 Perfect color 0453

iBAmagazine.com

How to find the perfect colorHidden in your photo is the color palette you need. Here’s how to get it out.

No single visual element has more effect on a viewer than color. Color gets attention, sets a mood, sends a message. But what colors are the right ones? The key is that color is relational. Colors don’t exist in a vacuum but are always seen with other colors. Because of this, you can design a color-coordinated document based on the colors in any element on the page. Here’s how.

Here’s the situation: We have an academic schedule for a women’s college to design,

and for a photo we have this no-nonsense, freckle-faced

model. The goal is to look fresh, alive and personal (no

buildings and grounds shots) while conveying the sense

that the program is serious and businesslike. A note

of trendiness will be good. Color is involved in all of it.





Before&After ® Perfect color 3 of 16


iBAmagazine.com

Look close, closer, closestEvery photo has a natural color palette. First step is to find it and organize it. Zoom in on your photo, and you’ll be astonished by how many colors you see.

At normal viewing distance (left) we see a few dozen colors: skin tones, red hair, blue eyes, blue jacket, but zoom closer, and we see mil-lions! First step is to reduce all those colors to a manageable few; you want 16, 32, 64 tops. In Photoshop, first duplicate the photo layer (so you don’t lose the original), then select Filter> Pixelate> Mosaic (right). A large Cell Size gives you very few colors; if you need more, reduce the size.







iBAmagazine.com

Hair

Jacket

Shadow side

Light side

Hair Face

Pull out the colors Now extract colors with the eyedropper tool. Work from the biggest color (the one you see most of) to the smallest. For contrast, pick up dark, medium and light pixels of each.

Work first on the big colors. These are the ones you see at a glance; her skin and hair colors and blue jacket. Then do the small colors—her eyes, lips, the highlights in her hair and soft shadows. You can see in this image a light side and a shadow side; it’s subtle, but pay attention. Finish each area before moving on. Sort your results by color, then each color by value (light to dark). Discard lookalikes. You’ll be thrilled by what you find.







iBAmagazine.com

Try each one on Place the photo on a swatch of each color. The results are pretty, aren’t they? What’s fun is that this will always look good, because the colors you’re using are already there.

Warm colorsThese are the warm colors—pinks, salmons, sepias, browns—of the red-haired model. The warmer colors make her look softer and more feminine. These colors would be good for a cos-metic message or a caring message.

Cool colorsThe cool colors—blues, mainly—make for a more serious, businesslike rela-tionship and convey a direct, to-the-point message. Note that as the values get darker, her face gets perceptually brighter and appears to rise off the page toward you.







iBAmagazine.com

Add to the colors The next step is to add more colors. Select any of the colors, and locate it on the color wheel. The purpose of a color wheel is to show you a color’s relationship to other colors.

Pick any of the photo’s colors—let’s use this blue—and find its general vicinity* on the color wheel. We’ll call this the base color. We already know that the base color goes with the photo. Our job now is to find colors that go with the base color. Keep in mind that if type or other graphics are involved (pretty typical), you’ll need both dark and light colors for contrast.

*Because the wheel is deliberately basic, you will rarely make an exact match. It’s only a guide.







iBAmagazine.com

Create color palettes From your base color, you can now create an exciting range of coordinated color palettes. Values can mix. For example, medium blue works with light teal and dark violet.

AnalogousOne color step either side of the base color are its analogous colors. Analogous colors share undertones (here, blue-green, blue, and blue-violet), which create beautiful, low-contrast harmony. Analogous palettes are rich and always easy to work with.

MonochromaticFirst are the dark, medium and light values of the base color. This is a mono-chromatic palette. It has no color depth, but it provides the contrast of dark, medium and light that’s so important to good design.







iBAmagazine.com

Split complementOne step either way are the comple-ment’s own analogous colors. This palette is called a split complement. Its strength is in the low-contrast beauty of analogous colors, plus the added punctuation of an opposite color. In this case, the blue would most likely be used as the accent.

ComplementDirectly opposite the base color is its complement—in this case, the orange range. What the complement brings is contrast. A color and its complement convey energy, vigor and excitement. Typically, the complement is used in a smaller amount as an accent; a spot of orange on a blue field, as shown above.







iBAmagazine.com

Analogous/complementColors analogous to our base color make cool harmony punctuated by a hot spot of complementary color. Keep in mind that opposites of the same value tend to fight but complement when different (below). This is why you want to eyedropper dark, medium and light values of each color.

Complement/analogousThis mixed palette is the same as the split complement but with more color. Its added range yields soft, rich har-mony on the warm side and sharp, icy contrast on the cold side, an intense and exciting combination.

Opposite colors, same value

Opposite colors, different values







iBAmagazine.comPerfect color 10 of 16

MitnerFALL SCHEDULESCHOOL OF BUSINESS ADMINISTRATION

All business—Blue is every one’s favorite color. What’s interesting here is that blue and orange are native to the photo, giving it excellent natural contrast. The blue background swallows her jacket, allowing her intense gaze to lift right off the page. Handsome and businesslike.

Edit and apply Design the page, and now it’s time to make color choices. How to pick? The key is to think message. Weigh each against the original purpose by asking, which colors meet the goal?*

*Review the design goal on page 2








Serious—This palette began in the deep red of her hair, and for an accent took two steps toward yellow. Her eyes and jacket, which on blue receded into the background, now stand in contrast. Note that the red in her hair is a mere highlight, but filling the page it acquires real weight. Serious, warm, draws the reader in.Mitner

FALL SCHEDULESCHOOL OF BUSINESS ADMINISTRATION








Intense—The highlights in her hair carry this page; the blue accent lends contrast and depth. An unexpected point of interest is the yellow headline, which seems cut out of the photo. Dimensionally flat, this mix is intense and engaging (and would win the design contest), but it takes a daring client to choose it.Mitner

FALL SCHEDULESCHOOL OF BUSINESS ADMINISTRATION





Before&After ®




Casual—Analogous to the blue—a step toward green—is teal, a beautiful color not in the photo. Its difference adds depth and vibrancy and relaxes the message somewhat; it’s trendier now, more approachable. Her eyes, which against blue looked blue, now look green. Type color, still light orange, is a soft contrast.

Reminder: Values mix. You can always use dark, medium and light of any color. Note here both medium and light teal.









Pretty—One step the other way is blue-violet, another color not in the photo. Blue-violet is a shift toward red; the result is a slightly flatter image, because face, hair and back-ground are now more alike. Blue-violet is a cool color nor-mally associated with softness, femininity, and springtime (with undertones of freshness).








http://store.adobe.com/type/browser/F/TRAJ/F_TRAJ-10012000.html

http://store.adobe.com/type/browser/F/TRAJ/F_TRAJ-10005000.html

http://www.rubberball.com/search_detail.php?id=bg_75



Perfect color 0453

iBAmagazine.com

Subscribe to Before & After

$36 | 24 PDF articles in individual downloads

Before & After is issued one article at a time in a beautifully designed. A subscription is 24 articles. We e-mail you a notice each time we publish a new article, which you then download. You can read the article online in your browser or onscreen in Adobe Acrobat or Reader. We encourage you to print and save your articles in a binder for fingertip reference. We will e-mail you a notice (or two) when it’s time to renew your subscription.

$48 | Available in print, too! Every eight articles, we’ll mail you a beautiful, commercially printed issue in high resolution on glossy paper, bound and three-hole punched. Identical to the PDF subscription and includes the PDF version free. 3 printed issues, 24 total articles.

Learn more!




http://www.bamagazine.com/learnmore2subscribe/


Before&After

16 of 16 | Printing formats

® Perfect color 16 of 16

Perfect color 0453


Before & After magazine Before & After has been sharing its practical approach to graphic design since 1990. Because our modern world has made designers of us all (ready or not), Before & After is dedicated to making graphic design understand-able, useful and even fun for everyone.

John McWade Publisher and creative directorGaye McWade Associate publisher Vincent Pascual Senior designerDexter Mark Abellera Senior designer

Editorial board Gwen Amos, Carl Winther Before & After magazine323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995E-mail [email protected] www http://www.bamagazine.com

Copyright ©2005 Before & After magazine ISSN 1049-0035. All rights reserved

You may pass along a free copy of this article to others by clicking here. You may not alter this article, and you may not charge for it. You may quote brief sections for review; please credit Before & After magazine, and let us know. To link Before & After magazine to your Web site, use this URL: http://www.bamagazine.com. For all other permissions, please contact us.

Subscribe to Before & AfterSubscribe to Before & After, and become a

more capable, confident designer for pennies

per article. To learn more, go to

http://www.bamagazine.com/Subscribe

E-mail this articleTo pass along a free copy of this article to

others, click here.

Join our e-listTo be notified by e-mail of new articles as

they become available, go to

http://www.bamagazine.com/email




http://www.bamag.com/email/9r7uVo/

http://www.bamagazine.com/Articles.asp?ID=106

http://www.bamagazine.com/learnmore2subscribe/


http://www.bamagazine.com/Articles.asp?ID=106

http://www.bamagazine.com/

mailto:[email protected]



http://www.bamagazine.com/



Before&After ®

Back | Paper-saver format

iBAmagazine.com

For paper-saver format Print: (Specify pages 19–26)

For presentation format Print: (Specify pages 1–16)

Before & After is made to fit your binderBefore & After articles are intended for permanent reference. All are titled and numbered.

For the current table of contents, click here. To save time and paper, a paper-saver format of this article,

suitable for one- or two-sided printing, is provided on the following pages.

Print Format: Landscape

Page Size: Fit to Page

SavePresentation format or

Paper-saver format

http://www.bamagazine.com/TOC





Befo

re&A

fter | ww

w.bam

agazine.com

1 of 8

Ho

w to

fin

d p

erfect colo

r 04530453

Ho

w to

fin

d p

erfect colo

r

No sin

gle visual elem

ent h

as m

ore effect on a view

er than

color. C

olor gets attention

, sets a m

ood, sends a m

essage. B

ut w

hat colors are th

e right

ones? T

he key is th

at color is relation

al. Colors don’t exist in

a vacu

um

but are alw

ays seen

with

other colors. B

ecause of

this, you

can design

a color-coordin

ated docum

ent based

on th

e colors in an

y elemen

t on

the p

age. Here’s h

ow.

Here’s th

e situatio

n: W

e have

an acad

emic sch

edu

le for a

wo

men

’s college to

design

, an

d fo

r a ph

oto

we h

ave this

no

-no

nsen

se, freckle-faced

m

od

el. The go

al is to lo

ok

fresh, alive an

d p

erson

al (no

bu

ildin

gs and

grou

nd

s sho

ts) w

hile co

nveyin

g the sen

se th

at the p

rogram

is seriou

s an

d b

usin

esslike. A

no

te o

f trend

iness w

ill be go

od

. C

olo

r is invo

lved in

all of it.

How to find thet

Getting that just-right

color is part art, part science. W

e’ll show you.

fec percolor

Befo

re&A

fter | ww

w.bam

agazine.com

2 of 8

Ho

w to

fin

d p

erfect colo

r 04530453

Ho

w to

fin

d p

erfect colo

r

Look close, closer, clo

sestEvery p

hoto h

as a natu

ral color palette. First step

is to fin

d it and organ

ize it. Zoom

in on

your p

hoto, an

d you’ll be astonish

ed by how

man

y colors you see.

At n

orm

al viewin

g distan

ce (left) w

e see a few d

ozen

co

lors: sk

in to

nes, red

hair,

blu

e eyes, blu

e jacket, b

ut

zoo

m clo

ser, and

we see m

il-lio

ns! First step

is to red

uce all

tho

se colo

rs to a m

anageab

le few

; you

wan

t 16, 32, 64 top

s. In

Ph

oto

sho

p, first d

up

licate th

e ph

oto

layer (so yo

u d

on

’t lo

se the o

riginal), th

en select

Filter>P

ixelate> Mo

saic (right).

A large C

ell Size gives yo

u very

few co

lors; if yo

u n

eed m

ore,

redu

ce the size.

Hair

Jacket

Sh

ado

w sid

e

Light sid

e

Hair

Face

Pull out th

e colors N

ow extract colors w

ith th

e eyedropp

er tool. Work from

the biggest color (th

e one you

see m

ost of) to the sm

allest. For contrast, p

ick up

dark, mediu

m an

d light p

ixels of each.

Wo

rk fi

rst on

the b

ig colo

rs. These are th

e o

nes yo

u see at a glan

ce; her sk

in an

d h

air co

lors an

d b

lue jack

et. Then

do

the sm

all co

lors—

her eyes, lip

s, the h

ighligh

ts in

her h

air and

soft sh

ado

ws. Y

ou

can see in

th

is image a ligh

t side an

d a sh

ado

w sid

e; it’s su

btle, b

ut p

ay attentio

n. Fin

ish each

area b

efore m

ovin

g on

. So

rt you

r results

by co

lor, th

en each

colo

r by valu

e (light to

d

ark). D

iscard lo

ok

alikes. Y

ou

’ll be th

rilled

by w

hat yo

u fi

nd

.

Befo

re&A

fter | ww

w.bam

agazine.com

3 of 8

Ho

w to

fin

d p

erfect colo

r 04530453

Ho

w to

fin

d p

erfect colo

r

Try each on

e on

Place th

e ph

oto on a sw

atch of each

color. Th

e results are p

retty, aren’t they? W

hat’s fu

n

is that th

is will alw

ays look good, because th

e colors you’re usin

g are already there.

Warm

colo

rsThese are the w

arm colors—

pinks, salmons, sepias,

browns—

of the red-haired m

odel. The warm

er colors m

ake her look softer and m

ore feminine. These colors

would be good for a cos-

metic m

essage or a caring m

essage.

Co

ol co

lors

The cool colors—blues,

mainly—

make for a m

ore serious, businesslike rela-tionship and convey a direct, to-the-point m

essage. Note

that as the values get darker, her face gets perceptually brighter and appears to rise off the page tow

ard you.

Ad

d to th

e colors T

he n

ext step is to add m

ore colors. Select any of th

e colors, and locate it on

the color w

heel.

Th

e pu

rpose of a color w

heel is to sh

ow you

a color’s relationsh

ip to oth

er colors.

Pick

any o

f the p

ho

to’s co

lors—

let’s use th

is blu

e—an

d fi

nd

its gen

eral vicinity* o

n th

e colo

r w

heel. W

e’ll call this th

e base

colo

r. We alread

y kn

ow

that th

e b

ase colo

r goes w

ith th

e ph

oto.

Ou

r job

no

w is to

fin

d co

lors

that go

with

the b

ase colo

r. K

eep in

min

d th

at if type o

r o

ther grap

hic is in

volved

(pretty

typical), yo

u’ll n

eed b

oth

dark

and

light co

lors fo

r con

trast.

*Because the wheel is deliberately

basic, you will rarely m

ake an exact m

atch. It’s only a guide.

Befo

re&A

fter | ww

w.bam

agazine.com

4 of 8

Ho

w to

fin

d p

erfect colo

r 04530453

Ho

w to

fin

d p

erfect colo

r

Create color p

alettes From

your base color, you

can n

ow create an

exciting ran

ge of coordinated color p

alettes. Valu

es can m

ix. For examp

le, mediu

m blu

e works w

ith ligh

t teal and dark violet.

An

alogo

us

One color step either side of the base

color are its analogous colors. Analogous

colors share undertones (here, blue-green, blue, and blue-violet), w

hich create beautiful, low

-contrast harmony.

Analogous palettes are rich and alw

ays easy to w

ork with.

Mo

no

chro

matic

First are the dark, medium

and light values of the base color. This is a m

onochromatic palette. It has no color

depth, but it provides the contrast of dark, m

edium and light that’s so

important to good design.

Sp

lit com

plem

ent

One step either w

ay are the comple-

ment’s ow

n analogous colors. This palette is called a split com

plement. Its

strength is in the low-contrast beauty

of analogous colors, plus the added punctuation of an opposite color. In this case, the blue w

ould most likely

be used as the accent.

Co

mp

lemen

tD

irectly opposite the base color is its com

plement—

in this case, the orange range. W

hat the complem

ent brings is contrast. A

color and its complem

ent convey energy, vigor and excitem

ent. Typically, the com

plement is used in a

smaller am

ount as an accent; a spot of orange on a blue field, as show

n above.

Befo

re&A

fter | ww

w.bam

agazine.com

5 of 8

Ho

w to

fin

d p

erfect colo

r 04530453

Ho

w to

fin

d p

erfect colo

r

An

alogo

us/co

mp

lemen

tC

olors analogous to our base color make

cool harmony punctuated by a hot spot of

complem

entary color. Keep in mind that

opposites of the same value tend to fight

but complem

ent when different (below

). This is w

hy you want to eyedropper dark,

medium

and light values of each color.

Co

mp

lemen

t/analo

gou

sThis m

ixed palette is the same as the

split complem

ent but with m

ore color. Its added range yields soft, rich har-m

ony on the warm

side and sharp, icy contrast on the cold side, an intense and exciting com

bination.

Op

po

site colo

rs, sam

e value

Op

po

site colo

rs, d

ifferent valu

es

Mit

ner

FALL SC

HED

ULE

SCH

OO

L OF BU

SINESS AD

MIN

ISTR

ATIO

N

All b

usin

ess—Blue is every one’s favorite color. W

hat’s interesting here is that blue and orange are native to the photo, giving it excellent natural contrast. The blue background sw

allows her jacket, allow

ing her intense gaze to lift right off the page. H

andsome and businesslike.

Edit an

d ap

ply

Design

the p

age, and n

ow it’s tim

e to make color ch

oices. How

to pick? T

he key is to th

ink

message. W

eigh each

against th

e original p

urp

ose by asking, w

hich

colors meet th

e goal?*

*Review the design goal on page 1

Befo

re&A

fter | ww

w.bam

agazine.com

6 of 8

Ho

w to

fin

d p

erfect colo

r 04530453

Ho

w to

fin

d p

erfect colo

r

Serio

us—

This palette began in the deep red of her hair, and for an accent took tw

o steps toward yellow

. Her eyes

and jacket, which on blue receded into the background,

now stand in contrast. N

ote that the red in her hair is a m

ere highlight, but filling the page it acquires real weight.

Serious, warm

, draws the reader in.

Mit

ner

FALL SC

HED

ULE

SCH

OO

L OF BU

SINESS AD

MIN

ISTR

ATIO

N

Inten

se—The highlights in her hair carry this page; the

blue accent lends contrast and depth. An unexpected

point of interest is the yellow headline, w

hich seems cut

out of the photo. Dim

ensionally flat, this mix is intense and

engaging (and would w

in the design contest), but it takes a daring client to choose it.

Mit

ner

FALL SC

HED

ULE

SCH

OO

L OF BU

SINESS AD

MIN

ISTR

ATIO

N

Befo

re&A

fter | ww

w.bam

agazine.com

7 of 8

Ho

w to

fin

d p

erfect colo

r 04530453

Ho

w to

fin

d p

erfect colo

r

Mit

ner

FALL SC

HED

ULE

SCH

OO

L OF BU

SINESS AD

MIN

ISTR

ATIO

N

Casu

al—A

nalogous to the blue—a step tow

ard green—is

teal, a beautiful color not in the photo. Its difference adds depth and vibrancy and relaxes the m

essage somew

hat; it’s trendier now

, more approachable. H

er eyes, which against

blue looked blue, now look green. Type color, still light

orange, is a soft contrast.

Rem

ind

er: Valu

es mix. Y

ou

can

always u

se dark

, med

ium

and

ligh

t of an

y colo

r. No

te here b

oth

m

ediu

m an

d ligh

t teal.

Mit

ner

FALL SC

HED

ULE

SCH

OO

L OF BU

SINESS AD

MIN

ISTR

ATIO

N

Pretty—

One step the other w

ay is blue-violet, another color not in the photo. Blue-violet is a shift tow

ard red; the result is a slightly flatter im

age, because face, hair and back-ground are now

more alike. Blue-violet is a cool color nor-

mally associated w

ith softness, femininity, and springtim

e (w

ith undertones of freshness).

Befo

re&A

fter | ww

w.bam

agazine.com

8 of 8

Ho

w to

fin

d p

erfect colo

r 04530453

Ho

w to

fin

d p

erfect colo

r

Typefaces

1 (a–b) Trajan Bold | a) 36 pt, b) 8 pt

2 Trajan Regular | 18 pt

Images

3 Rubberball.com

Article resou

rces

Co

lors

C0 M

40 Y60 K0

C100 M

60 Y0 K45

C0 M

40 Y100 K0

C0 M

90 Y80 K45

C0 M

25 Y60 K0

C60 M

0 Y20 K15

C30 M

0 Y12 K0

C100 M

90 Y0 K25

C60 M

50 Y0 K15

456789101112

Be

fore

& A

fter m

agazin

e B

efore & A

fter has been sharing its practical approach to graphic design since 1990. B

ecause our modern w

orld has m

ade designers of us all (ready or not), Before &

A

fter is dedicated to making graphic design understand-

able, useful and even fun for everyone.

Joh

n M

cWad

e Publisher and creative director

Gaye

McW

ade

Associate publisher

Vin

cen

t Pascu

al Senior designerD

ex

ter M

ark A

be

llera Senior designer

Editorial board Gw

en

Am

os, C

arl Win

the

r B

efo

re &

Afte

r mag

azine

323 Lincoln Street, Roseville, CA

95678 Telep

hon

e 916-784-3880 Fax 916-784-3995E-m

ail mailbox@

bamagazine.com

w

ww

http://ww

w.bam

agazine.com

Co

pyrig

ht ©

2005 Be

fore

& A

fter m

agazin

e, ISS

N

1049-0035. All rig

hts re

serve

d

You may pass this article around, but you m

ay not alter it, and you m

ay not charge for it. You may quote brief

sections for review. If you do this, please credit B

efore &

After m

agazine, and let us know. To feature free

Before &

After articles on your W

eb site, please contact us. For perm

ission to include all or part of this article in another w

ork, please contact us.

Subscrib

e to Before &

After

Did you

enjoy th

is article? Subscribe, an

d

become a m

ore capable, con

fiden

t designer

for pen

nies p

er article. To learn m

ore, go to

http

://ww

w.bam

agazine.com

/Subscribe

E-mail th

is articleTo p

ass along a free copy of th

is article to

others, click h

ere.

Join our e-list

To be notifi

ed by e-mail of n

ew articles as

they becom

e available, go to

http

://ww

w.bam

agazine.com

/email

Mit

ner

FALL SC

HED

ULE

SCH

OO

L OF BU

SINESS AD

MIN

ISTR

ATIO

N

3

45

1a

Mit

ner

FALL SC

HED

ULE

SCH

OO

L OF BU

SINESS AD

MIN

ISTR

ATIO

N

Mit

ner

FALL SC

HED

ULE

SCH

OO

L OF BU

SINESS AD

MIN

ISTR

ATIO

N

Mit

ner

FALL SC

HED

ULE

SCH

OO

L OF BU

SINESS AD

MIN

ISTR

ATIO

N

Mit

ner

FALL SC

HED

ULE

SCH

OO

L OF BU

SINESS AD

MIN

ISTR

ATIO

N

21b

57 8

67

1011 9412 4

Documents

ba0453perfectcolor_copy