color perfecto
TRANSCRIPT
-
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
-
8/14/2019 Color Perfecto
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.
-
8/14/2019 Color Perfecto
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.
-
8/14/2019 Color Perfecto
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.
-
8/14/2019 Color Perfecto
5/25
Before&After Perfect color 5of 16
5of16 Perfect color 0453
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.
-
8/14/2019 Color Perfecto
6/25
Before&After Perfect color 6of 16
6of16 Perfect color 0453
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.
-
8/14/2019 Color Perfecto
7/25
Before&After Perfect color 7of16
7of16 Perfect color 0453
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/14/2019 Color Perfecto
8/25
Before&After Perfect color 8of 16
8of16 Perfect color 0453
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.
-
8/14/2019 Color Perfecto
9/25
Before&After Perfect color 9of 16
9of16 Perfect color 0453
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
-
8/14/2019 Color Perfecto
10/25
Before&After Perfect color 10of 16
10of16 Perfect color 0453
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
-
8/14/2019 Color Perfecto
11/25
Before&After Perfect color 11of 16
11of16 Perfect color 0453
XiBAmagazine.com UPerfect color 11of 16
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.
Mfall scheduleschool of business adMinistration
-
8/14/2019 Color Perfecto
12/25
Before&After Perfect color 12of 16
12of16 Perfect color 0453
XiBAmagazine.com UPerfect color 12of 16
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.
Mfall scheduleschool of business adMinistration
-
8/14/2019 Color Perfecto
13/25
Before&After
13of16 Perfect color 0453
XiBAmagazine.com UPerfect color 13of 16
Mfall scheduleschool of business adMinistration
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.
-
8/14/2019 Color Perfecto
14/25
Before&After Perfect color 14of 16
14of16 Perfect color 0453
XiBAmagazine.com UPerfect color 14of 16
Mfall scheduleschool of business adMinistration
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).
-
8/14/2019 Color Perfecto
15/25
Before&After Perfect color 15of16
15of16 Perfect color 0453
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
MitnerFALL SCHEDULESCHOOLOFBUSINESSADMINISTRATION
MitnerFALL SCHEDULESCHOOLOFBUSINESSADMINISTRATION
2
1b
5
7
8
6
7
10
11
9
4
12
4
12
-
8/14/2019 Color Perfecto
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/ -
8/14/2019 Color Perfecto
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
-
8/14/2019 Color Perfecto
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
-
8/14/2019 Color Perfecto
19/25
Beore&Ater|www.ba
magazine.com
2of8
Howtofndperec
tcolor0453
0453Howtofndperectcolor
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.
-
8/14/2019 Color Perfecto
20/25
Beore&Ater|www.ba
magazine.com
3of8
Howtofndperec
tcolor0453
0453Howtofndperectcolor
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.
-
8/14/2019 Color Perfecto
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
-
8/14/2019 Color Perfecto
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
-
8/14/2019 Color Perfecto
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
schoolofbusinessadMinistration
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
schoolofbusinessadMinistration
0
-
8/14/2019 Color Perfecto
24/25
Beore&Ater|www.ba
magazine.com
7of8
Howtofndperectcolor0453
0453Howtofndperectcolor
M
falls
chedule
schoolofbusinessadMinistration
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
schoolofbusinessadMinistration
PrettyOnesteptheotherwayisblue-violet,another
colornotinthephoto.Blue-violetisashifttowardred;the
resultisaslightlyflatterimage,becauseface,hairandback-
groundarenowmorealike.Blue-violetisacoolcolornor-
mallyassociatedwithsoftness,fem
ininity,andspringtime
(withundertonesoffreshness).
0
-
8/14/2019 Color Perfecto
25/25
Beore&Ater|www.bamagazine.com
8of8
Howtofndperectcolor0453
453Howtofndperectcolor
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
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
schoolofbusinessadMinistration
3
45
1a
M
fallschedule
schoolofbusinessadMinistration
M
fallschedule
schoolofbusinessadMinistration
M
fallschedule
schoolofbusinessadMinistration
M
fallschedule
schoolofbusinessadMinistration
21b
57 8
67
10
11 94
12 4