Color Perfecto

8/14/2019 Color Perfecto

1/25

Before&After

Continued

XiBAmagazine.com U

Perfect color 0453

How to fnd the

tGetting that just-rightcolor is part art, part science.

Well show you.

fec

percolor


2/25

Beore&Ater

2of16 Perect color 0453

XiBAmagazine.com U

How to fnd the perect colorHidden in your photo is the color palette you need. Heres 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 dont 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. Heres how.

Heres the situation: We have

an academic schedule or a

womens college to design,

and or a photo we have thisno-nonsense, reckle-aced

model. The goal is to look

resh, alive and personal (no

buildings and grounds shots)

while conveying the sense

that the program is serious

and businesslike. A note

o trendiness will be good.

Color is involved in all o it.


3/25

Beore&Ater Perect color 3of 16

3of16 Perect color 0453

XiBAmagazine.com U

Look close, closer, closest

Every photo has a natural color palette. First step is to fnd it and organize it. Zoomin on your photo, and youll be astonished by how many colors you see.

At normal viewing distance

(let) we see a ew 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

ew; you want 16, 32, 64 tops.

In Photoshop, frst duplicate

the photo layer (so you dontlose the original), then select

Filter> Pixelate> Mosaic (right).

A large Cell Size gives you very

ew colors; i you need more,

reduce the size.


4/25

Before&After Perfect color 4of 16

4of16 Perfect color 0453

XiBAmagazine.com U

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 seemost 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 smallcolorsher eyes, lips, the highlights in

her hair and soft shadows. You can see in

this image a light side and a shadow side;

its 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. Youll be thrilled

by what you find.


5/25



XiBAmagazine.com U

Try each one on

Place the photo on a swatch of each color. The results are pretty, arent they? Whats funis that this will always look good, because the colors youre using are already there.

Warm colors

These are the warm colors

pinks, salmons, sepias,

brownsof the red-hairedmodel. 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 colors

The cool colorsblues,mainlymake 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.


6/25



XiBAmagazine.com U

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 colors relationship to other colors.

Pick any of the photos

colorslets use this blueand

find its general vicinity* on thecolor wheel. Well 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), youll need both

dark and light colors for contrast.

*Because the wheel is deliberately

basic, you will rarely make an exact

match. Its only a guide.


7/25

Before&After Perfect color 7of16


XiBAmagazine.com U

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 lightteal and darkviolet.

Analogous

One color step either side of the base

color are its analogouscolors. 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.

Monochromatic

First 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 thats so importantto good design.


8/25



XiBAmagazine.com U

Split complement

One step either way are the comple-

ments own analogous colors. This

palette is called a split complement. Its

strength is in the low-contrast beauty

of analogous colors, plus the addedpunctuation of an opposite color. In

this case, the blue would most likely

be used as the accent.

Complement

Directly opposite the base color is its

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


9/25



XiBAmagazine.com U

Analogous/complement

Colors analogous to our base color make

cool harmony punctuated by a hot spot o

complementary color. Keep in mind that

opposites o the same value tend to fght

but complement when dierent (below).This is why you want to eyedropper dark,

medium and light values o each color.

Complement/analogous

This mixed palette is the same as the

split complement but with more color.

Its added range yields sot, rich har-

mony on the warm side and sharp, icy

contrast on the cold side, an intenseand exciting combination.

Opposite colors,

same value

Opposite colors,

different values


10/25



XiBAmagazine.com UPerfect color 10of 16

Mfall scheduleschool of business adMinistration

All businessBlue is everyones favorite color. Whats

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 its time to make color choices. How to pick? The key is to thinkmessage.Weigh each against the original purpose by asking, which colors meet the goal?*

*Review the design goal on page 2


11/25




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



12/25




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



13/25

Before&After




CasualAnalogous to the bluea step toward greenis

teal, a beautiful color not in the photo. Its difference adds

depth and vibrancy and relaxes the message somewhat; its

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.


14/25





PrettyOne 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).


15/25

Before&After Perfect color 15of16


XiBAmagazine.com UPerfect color 15of16

MitnerFALL SCHEDULESCHOOLOFBUSINESSADMINISTRATION

Typefaces

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

2 Trajan Regular | 18 pt

Images

3 Rubberball.com

Article resources

Colors

C0 M40 Y60 K0

C100 M60 Y0 K45

C0 M40 Y100 K0

C0 M90 Y80 K45

C0 M25 Y60 K0

C60 M0 Y20 K15

C30 M0 Y12 K0

C100 M90 Y0 K25

C60 M50 Y0 K15

4

5

6

7

8

9

3

4

5

1a

10

11

MitnerFALL SCHEDULESCHOOL OF BUSINESS ADMINISTRATION

MitnerFALL SCHEDULESCHOOL OF BUSINESS ADMINISTRATION



2

1b

5

7

8

6

7

10

11

9

4

12

4

12


16/25

Before&After

16of16 | Printing formats

Perect color 16of16

Perfect color 0453

XiBAmagazine.com UPerect color 16of 16

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 director

Gaye McWade Associate publisher

Vincent Pascual Senior designerDexter Mark Abellera Senior designer

Editorial board Gwen Amos, Carl Winther

Before & After magazine

323 Lincoln Street, Roseville, CA 95678

Telephone 916-784-3880

Fax 916-784-3995

E-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 & After

Subscribe to Beore & Ater, and become a

more capable, confdent designer or pennies

per article. To learn more, go to

http://www.bamagazine.com/Subscribe

E-mail this articleTo pass along a ree copy o this article to

others, click here.

Join our e-list

To be notifed by e-mail o new articles as

they become available, go to

http://www.bamagazine.com/email
http://www.bamag.com/email/9r7uVo/http://www.bamag.com/email/9r7uVo/http://www.bamagazine.com/Articles.asp?ID=106http://www.bamagazine.com/Articles.asp?ID=106http://www.bamag.com/email/9r7uVo/


17/25

Beore&Ater

Back | Paper-saver format

XiBAmagazine.com U

For paper-saver ormatPrint: (Specify pages 1825)

For presentation ormatPrint: (Specify pages 116)

Beore & Ater is made to ft your binder

Before & 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

Save

Presentation format or

Paper-saver format


18/25

Beore&Ater|www.ba

magazine.com

1of8

Howtofndperec

tcolor0453

0453Howtofndperectcolor

N

osinglevisualelement

has

m

oreeffectonaviewerthan

c

olor.Colorgetsattention,

s

etsamood,sendsamessage.

B

utwhatcolorsaretheright

o

nes?Thekeyisthatcoloris

re

lational.Colorsdontexistin

a

vacuumbutarealways

seen

w

ithothercolors.Becauseof

this,youcandesignacolor-

c

oordinateddocumentb

ased

o

nthecolorsinanyelem

ent

o

nthepage.Hereshow.

Heresthesitua

tion:Wehave

anacademicscheduleora

womenscollegetodesign,

andoraphoto

wehavethis

no-nonsense,reckle-aced

model.Thegoalistolook

resh,aliveandpersonal(no

buildingsandg

roundsshots)

whileconvey

ingthesense

thattheprogramisserious

andbusine

sslike.Anote

otrendinesswillbegood.

Colorisinvolvedinalloit.

Howtofndt

he

t

Gettin

gthatjust-right

color

ispartart,p

artscience.

Wellshowyou.

ec

per

c

olo

r


19/25

Beore&Ater|www.ba

magazine.com

2of8

Howtofndperec

tcolor0453


Lookclose,closer,closest

Everyphotohasan

aturalcolorpalette.Firststepistofnditandorganizeit.Zoom

inonyourphoto,andyoullbeastonishedbyhowmanycolorsyou

see.

Atnormalv

iewingdistance

(let)wese

eaewdozen

colors:skin

tones,redhair,

blueeyes,b

luejacket,but

zoomclose

r,andweseemil-

lions!First

stepistoreduceall

thosecolor

stoamanageable

ew;youwant16,32,64tops.

InPhotosho

p,frstduplicate

thephotolayer(soyoudont

losetheori

ginal),thenselect

Filter>Pixelate>Mosaic(right).

AlargeCell

Sizegivesyouvery

ewcolors;

iyouneedmore,

reducethe

size.

Hair

Jacket

S

hadowside

Lightside

H

air

Face

Pulloutthecolors

Nowextractcolorswiththeeyedroppertoo

l.Workromthebiggest

color(theoneyousee

mosto)tothesma

llest.Forcontrast,pickupdark,mediumandlightpixelsoeach.

Workfr

stonthebigcolors.Theseare

the

onesyouseeataglance;herskinand

hair

colorsa

ndbluejacket.Thendothesm

all

colors

hereyes,lips,thehighlightsin

herhair

andsotshadows.Youcanse

ein

thisima

gealightsideandashadowside;

itssubt

le,butpayattention.Finisheach

areabeoremovingon.Sortyourresu

lts

bycolor

,theneachcolorbyvalue(lightto

dark).Discardlookalikes.Youllbethr

illed

bywhatyoufnd.


20/25

Beore&Ater|www.ba

magazine.com

3of8

Howtofndperec

tcolor0453


Tryeachoneon

Pla

cethe

ph

otoon

aswatchof

each

color.T

here

sults

are

pre

tty,arent

the

y?Wh

atsfun

isthatthiswill

alw

a

yslook

good,becausethecolors

youre

usin

gar

ealreadythere.

Warmcolors

Thesearethewarmcolors

pinks,salmons,sepias,

brownsofthered-haired

model.Thewarmercolors

makeherlooksofterand

morefeminine.Thesecolors

wouldbegoodforacos-

meticmessageoracaring

message.

Coolcolors

Thecoolcolorsblues,

mainlymakeforamore

serious,businesslikerela-

tionshipandconveyadirect,

to-the-pointmessage.Note

thatasthevaluesgetdarker,

herfacegetsperceptually

brighterandappearstorise

offthepagetowardyou.

Addtothecolors

Th

en

ext

step

istoaddm

ore

colors.

Sele

cta

nyof

thecolors,an

dlo

cateit

on

thecolorwh

ee

l.

Th

epurp

oseof

aco

lorwh

eelis

toshow

you

acolorsrela

tion

ship

to

other

colors.

Pickanyothephotoscolors

letsusethisblueandfndits

generalvicinity*onthecolor

wheel.Wellcallthisthebase

color.Wealreadyknowthatthe

basecolorgoeswiththepho

to.

Ourjobnowistofndcolors

thatgowiththebasecolor.

Keepinmindthatitypeor

othergraphicisinvolved(pre

tty

typical),youllneedbothdark

andlightcolorsorcontrast.

*Becausethewheelisdeliberately

basic,youwillrarelymakeanexact

match.Itsonlyaguide.


21/25

Beore&Ater|www.ba

magazine.com

4of8

Howtofndperec

tcolor

04

53

04

53Howtofndper

ectcolor

Createcolorpalettes

Fromyourbasecolor,youcannowcreatea

nexcitingrangeofcoordinatedcolorpalettes.

Valuescanmix.For

example,mediumblue

workswithlighttealanddarkviolet.

Analogo

us

Onecolorstepeithersideofthebase

colorare

itsanalogouscolors.Analogous

colorsshareundertones(here,blue-

green,blue,andblue-violet),which

createbe

autiful,low-contrastharmony.

Analogou

spalettesarerichandalways

easytow

orkwith.

Monochromatic

Firstarethedark,m

ediumandlight

valuesofthebasec

olor.Thisisa

monochromaticpalette.Ithasnocolor

depth,butitprovide

sthecontrastof

dark,mediumandlightthatsso

importanttogoodd

esign.

Splitcomplement

Onestep

eitherwayarethecomple-

mentsownanalogouscolors.This

paletteis

calledasplitcomplement.Its

strengthisinthelow-contrastbeauty

ofanalog

ouscolors,plustheadded

punctuationofanoppositecolor.In

thiscase,thebluewouldmostlikely

beusedastheaccent.

Complement

Directlyoppositethebasecolorisits

complementinthiscase,theorange

range.Whatthecom

plementbringsis

contrast.Acoloranditscomplement

conveyenergy,vigorandexcitement.

Typically,thecomple

mentisusedina

smalleramountasa

naccent;aspotof

orangeonabluefield,asshownabove.

0


22/25

Beore&Ater|www.ba

magazine.com

5o8

Howtofndperec

tcolor0453

0453Howtofndper

ectcolor

Analogo

us/complement

Colorsan

alogoustoourbasecolormake

coolharm

onypunctuatedbyahotspoto

complementarycolor.Keepinmindthat

opposites

othesamevaluetendtofght

butcomp

lementwhendierent(below).

Thisiswh

yyouwanttoeyedropperdark,

mediuma

ndlightvaluesoeachcolor.

Complement/analogous

Thismixedpaletteis

thesameasthe

splitcomplementbu

twithmorecolor.

Itsaddedrangeyield

ssot,richhar-

monyonthewarms

ideandsharp,icy

contrastonthecold

side,anintense

andexcitingcombination.

Oppositecolors,

sameva

lue

Oppositecolors,

dierentvalues

M

falls

chedule

schoolofbusinessadMinistration

AllbusinessBlueiseveryones

avoritecolor.Whats

interestinghereisthatblueandor

angearenativeto

thephoto,givingitexcellentnaturalcontrast.Theblue

backgroundswallowsherjacket,a

llowingherintensegaze

tolitrightothepage.Handsome

andbusinesslike.

Editandapply

Designthepage,an

dnowitstimetomake

colorchoices.Howtopick?Thekeyistothink

message.Weigheachagainsttheoriginalpu

rposebyasking,whichcolorsmeetthegoal?*

*

Reviewthedesigngoalonpage1

0


23/25

Beore&Ater|www.bamagazine.com

6of8

Howtofndperec

tcolor0453

0453Howtofndper

ectcolor

SeriousThispalettebeganinthedeepredofherhair,

a

ndforanaccenttooktwostepstowardyellow.Hereyes

a

ndjacket,whichonbluereceded

intothebackground,

n

owstandincontrast.Notethatth

eredinherhairisa

m

erehighlight,butfillingthepage

itacquiresrealweight.

S

erious,warm,drawsthereaderin

.

M

falls

chedule


IntenseThehighlightsinherhai

rcarrythispage;the

b

lueaccentlendscontrastanddep

th.Anunexpected

p

ointofinterestistheyellowhead

line,whichseemscut

o

utofthephoto.Dimensionallyflat,thismixisintenseand

e

ngaging(andwouldwinthedesig

ncontest),butittakes

a

daringclienttochooseit.

M

falls

chedule


0


24/25

Beore&Ater|www.ba

magazine.com

7of8

Howtofndperectcolor0453


M

falls

chedule


CasualAnalogoustotheblueasteptowardgreenis

teal,abeautifulcolornotintheph

oto.Itsdifferenceadds

depthandvibrancyandrelaxesthemessagesomewhat;its

trendiernow,moreapproachable.

Hereyes,whichagainst

bluelookedblue,nowlookgreen.Typecolor,stilllight

orange,isasoftcontrast.

Reminder:Valuesmix.Youcan

alwaysusedark,mediumand

lightoanycolor.Notehereboth

mediumandlightteal.

M

falls

chedule


PrettyOnesteptheotherwayisblue-violet,another

colornotinthephoto.Blue-violetisashifttowardred;the

resultisaslightlyflatterimage,becauseface,hairandback-

groundarenowmorealike.Blue-violetisacoolcolornor-

mallyassociatedwithsoftness,fem

ininity,andspringtime

(withundertonesoffreshness).

0


25/25

Beore&Ater|www.bamagazine.com

8of8

Howtofndperectcolor0453


Typ

eaces

1(a

b)TrajanBold|a)36pt,b)8pt

2TrajanRegular|18pt

Ima

ges

3Ru

bberball.com

Articleresources

Colors

C0M40Y60K0

C100M60Y0K45

C0M40Y100K0

C0M90Y80K45

C0M25Y60K0

C60M0Y20K15

C30M0Y12K0

C100M90Y0K25

C60M50Y0K15

4567891011

12

Beore&Atermaga

zine

Before&Afterhasbeensharingitspracticalapproach

tographicdesignsince

1990.Becauseourmodernworld

hasmadedesignersof

usall(readyornot),Before&

Afterisdedicatedtom

akinggraphicdesignunderstand-

able,usefulandevenfunforeveryone.

JohnMcWadePublish

erandcreativedirector

GayeMcWadeAssociatepublisher

VincentPascualSeniordesigner

DexterMarkAbelleraSeniordesigner

EditorialboardGwen

Amos,CarlWinther

Beore&Atermaga

zine

323LincolnStreet,Roseville,CA95678

Telephone916-784-38

80

Fax916-784-3995

[email protected]

wwwhttp://www.bam

agazine.com

Copyright2005Beore&Atermagazine,ISSN

1049-0035.Allrights

reserved

Youmaypassthisartic

learound,butyoumaynotalter

it,andyoumaynotcha

rgeforit.Youmayquotebrief

sectionsforreview.Ify

oudothis,pleasecreditBefore

&Aftermagazine,andletusknow.Tofeaturefree

Before&Afterarticles

onyourWebsite,pleasecontact

us.Forpermissiontoin

cludeallorpartofthisarticlein

anotherwork,pleasecontactus.

SubscribetoBeore

&Ater

Didyouenjoythisarticle?Subscribe,and

becomeamorecapable

,confdentdesigner

orpenniesperarticle.Tolearnmore,goto

http://www.bamagazin

e.com/Subscribe

E-mailthisarticle

Topassalongareecop

yothisarticleto

others,clickhere.

Joinoure-list

Tobenotifedbye-mailonewarticlesas

theybecomeavailable,

goto

http://www.bamagazin

e.com/email

M

fallschedule


3

45

1a

M

fallschedule


M

fallschedule


M

fallschedule


M

fallschedule


21b

57 8

67

10

11 94

12 4

Documents

Color Perfecto