Before and After 0472

7/29/2019 Before and After 0472

1/19

Before&After XiBAmagazine.com U

Continued How to cool a hot photo 0472

Continued

How to cool

a hot photoWhen your photo cant be changed,surround it with cool color.


2/19

2of12


How to cool a hot photo 0472

How to cool a hot photoWhen your photo cant be changed, surround it with cool color

The color wheel is anartificial device thats

good but not perfect

colors in nature arent

so evenly distributed

whose purpose is to

show color relationships.

Also on the wheel are

values (dark-light) and

temperature.

Whew! You can almost feel the heat. Reds,

oranges, yellows and golds radiate from

every molecule; even the water is hot. San

Diego, that famously balmy city, never looked

like this in real life. But our assignment is

to create a brochure cover for an upcoming

conference (or for any event in which the city

itself is part of the attraction), and this hot,monotone skyline is the photo they want.

So the challenge is, how do we cool it off, so

visitors wont come expecting to swelter? The

answer is found on the color wheel between

ice blue and yellow, in the turquoise blues

and verdant greens of springtime. Watch.

HotCold

Cool Warm


3/19

Before&After XiBAmagazine.com UHow to cool a hot photo 3of12

3of12 How to cool a hot photo 0472

First step: Find the color palette in your photo

Every photo has a natural color palette; first step is to find it and organize it. Zoom inon your photo, and youll be astonished by how many colors you see.

First, reduce the photo to amanageable number of colors;

the easiest way is to create

a mosaic using Photoshops

Mosaic filter(Filter>Pixelate>

Mosaic).Working from the big-

gest areas (sky, skyline, water)

to the smallest, extract colors

with the eyedropper tool. For

contrast, pick up dark, medium

and light pixels of each color.

Thenthis is importantsort

your selections by color and

each color by value (dark to

light). This lets you see every

color in relation to the others.

Its obvious just by looking that

this palette is very narrow.

Skyline dark

Skyline light

Water

Sky


4/19



Locate your colors on the wheel

To find compatible colors, we first need to know the relationship of our colors toothers on the wheel. Working by eye (the wheels not exact, remember), locate your

swatches by hue (color) and value.

All the colors in this image are in the yellow-

orange, orange-red range, quite unusual. The sky

is somewhat yellower, some shades are darker

than our chart, but this is the zone.

Shade

Hue

Tint


5/19



A color in common

Adding yellow to blue yields the cool range; these

are the colors of water, new growth, springtime.

They are peaceful colors, tranquil and refreshing.

As with a monochromatic palette, all hues that share

a colorblue, in this case coordinate naturally. Any

color in this range will work with any other.

Tints and shades

Color is made darker or lighter by adding black (a shade)

or white (a tint). Because they are color neutral, black and

white do not change the hue. As a result, any one color

plus its own tints and shades always coordinate naturally.

Such a palette is calledmonochromatic. Blue and orange

are opposites, orcomplements, as shown above.

What we know

Our photo is full of colors in the orange range, andverywarm. Oranges oppositeor complementis blue, the coldest color. Lets start there.


6/19



Color the brochure

Its time to take that hot photo and submerge it in cool colors. For depth, coolness andbeauty, two colors are better than one, and three colors are better than two.

Ice All blue monochromatic palette is very cold and has very

high value contrast with yellow-orange. Blue and orange have

no color in common and therefore have high color contrast, too.High contrast normally equals high energy, but here the conser-

vative dark blue (think winter) mitigates that somewhat.

CITIPLAN

2006SANDIEGO

Conference Guide

Convention of CityPlannersAugust 1518, 2006www.cp06.org

Share the love!

E-mail this article!


7/19



CITIPLAN

2006SANDIEGO

Conference Guide


Cold Moving toward yellow is a cool mix of blues and

greens; the greens share warm yellows with the photo, while

the blues provide the ice. Blue dominates, keeping the overalleffect cold. The colors shown here have similar value and

therefore low contrast.


8/19



CITIPLAN

2006SANDIEGO

Conference Guide


Cool Closer to yellow, the palette is warmer still. These are

the colors of springtime, cool and refreshingbut with sun in

the sky! Green dominates. Green has a lot of yellow in common

with the photo, yet the aqua blue keeps the effect cool.


9/19



CITIPLAN

2006SANDIEGO

Conference Guide


Warm Here, all the colors are yellow-green, a mono-

chromatic palette that has the most color in common with

the photo and yields the warmest image; it doesnt really

cool the skyline very much.

Theres a lot more to

Before & After! Subscribe.


10/19



How to cool a hot photo 10of 12

CITIPLAN

2006SANDIEGO

Conference Guide

Conventionof CityPlannersAugust 1518, 2006www.cp06.org

CITIPLAN

2006SANDIEGO

Conference Guide


CITIPLAN

2006SANDIEGO

Conference Guide


CITIPLAN

2006SANDIEGO

Conference Guide


Analogous (side by side) tints with

very low contrast are soft and

touchable. Think baby products.

Photo stands out against light

tints, which recede. Yellow city

color connects head to photo.

Dusty, dark-light monochrome is

handsome; identical opposite cor-

ners act as a frame.

Low-contrast green-blue and light

blue harmonize; light green and

white cool the headline.

Tone down the color

Less saturated colors (more black or white and less hue) yield quieter, more professionalpalettes. Quantity matters; the more of a color, the greater its influence.


11/19



How to cool a hot photo 11of12

7 17 18 9 1619 9 14 13

Typefaces

1 (ac) Helvetica Neue 25 Ultra Light

a) 41 pt, b) 72 pt, c) 33 pt

2 Helvetica Neue 75 Bold | 8/8.5 pt

3 Helvetica Neue 35 Thin | 8/8.5 pt

Color

14

15

16

Article resources

C65 M40 Y0 K0

C60 M0 Y55 K0

C60 M0 Y25 K0

C12 M0 Y20 K0

C25 M0 Y10 K0

C3 M31 Y80 K0

1a

4 5 6

4

5

6

7

8

9

10

11

12

13

C100 M60 Y0 K45

C100 M60 Y0 K25

C30 M15 Y0 K0

C100 M0 Y40 K0

C100 M0 Y90 K0

C100 M0 Y40 K45

C60 M0 Y100 K10

C60 M0 Y100 K45

C60 M0 Y100 K0

C35 M0 Y60 K0

17

18

1b

2

1c

11 12 13

CITIPLAN

2006SANDIEGO

ConferenceGuideConventionofCityPlanners

August1518, 2006www.cp06.org

CITIPLAN

2006SANDIEGO



5 7 8 9 10 7

CITIPLAN

2006SANDIEGO

ConferenceGuideConvent ionofCityPlanners


CITIPLAN

2006SANDIEGO

ConferenceGuideConvent ionofCityPlanners


CITIPLAN

2006SANDIEGO



CITIPLAN

2006SANDIEGO



14 15 16

CITIPLAN

2006SANDIEGO

ConferenceGuide

Convent ionofCityPlannersAugust1518, 2006www.cp06.org

CITIPLAN

2006SANDIEGO

Conference Guide


3

19

Color wheel

Before & Afters color

wheel is an abbreviated

version of the model

in Bride M. Whelans

book, Color Harmony 2,

a digest-size reference

work that also includes a brief intro-

duction to color theory and plenty of

color examples with CMYK mixes. Its

strength is its brevity. Very handy.


12/19

Before&After

12of12 | Printing formats

XiBAmagazine.com U

How to cool a hot photo 0472

How to cool a hot photo 12of12How to cool a hot photo 12of12

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 Staff designerDexter Mark Abellera Staff designer

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 2006 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 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-list

To be notified by e-mail of new articles as

they become available, go to

http://www.bamagazine.com/email


13/19

Before&After

Back | Paper-saver format

XiBAmagazine.com U

For paper-saver formatPrint: (Specify pages 1419)

For presentation formatPrint: (Specify pages 112)

Before & After is made to fit 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


14/19

Before&After|www.bamagazine.com

1of6

How

tocoolahotphoto0472

0472How

tocoolahotphoto

H

ow

tocool

ahotpho

to

Whenyourphotocantbechan

ged,

surroundit

withcoolcolor.

Thecolorwhee

lisan

artificialdeviceth

ats

goodbutnotperfect

colorsinnaturea

rent

soevenlydistribu

ted

whosepurposeisto

showcolorrelationships.

Alsoonthewhee

lare

values(dark-light

)and

temperature.

Whew!Youcanalmostfeeltheheat.Reds,

orange

s,yellowsandgoldsradiatefrom

everym

olecule;eventhewaterishot.San

Diego,

thatfamouslybalmycit

y,neverlooked

likethisinreallife.Butourassignmentis

tocrea

teabrochurecoverfora

nupcoming

conference(orforanyeventin

whichthecity

itselfis

partoftheattraction),andthishot,

monot

oneskylineisthephoto

theywant.

Sothe

challengeis,howdowe

coolitoff,so

visitorswontcomeexpectingt

oswelter?The

answerisfoundonthecolorw

heelbetween

iceblueandyellow,intheturq

uoiseblues

andverdantgreensofspringtime.Watch.

Hot

Cold

Cool

Warm


15/19


2of6

Howtocoolahotphoto0472

0472Howtocoolah

otphoto

Firststep:Findth

ecolorpaletteinyour

photo

Everyphotohasanaturalcolorpalette;firs

tstepistofinditandor

ganizeit.Zoomin

onyourphoto,and

youllbeastonishedby

howmanycolorsyousee.

First,reducethephotot

oa

manageablenumberofc

olors;

theeasiestwayistocre

ate

amosaicusingPhotosho

ps

Mosaicfilter(Filter>Pixe

late>

Mosaic).Workingfromthebig-

gestareas(sky,skyline,water)

tothesmallest,extractcolors

withtheeyedroppertoo

l.For

contrast,pickupdark,m

edium

andlightpixelsofeachcolor.

Thenthisisimportant

sort

yourselectionsbycolor

and

eachcolorbyvalue(darkto

light).Thisletsyouseee

very

colorinrelationtotheo

thers.

Itsobviousjustbylooki

ngthat

thispaletteisverynarro

w.

Skylinedark

Skylinelight

Water

Sky

Locateyourcolorsonthewheel

Tofindcompatible

colors,wefirstneedtoknowtherelationshipofourcolorsto

othersonthewhee

l.Workingbyeye(thew

heelsnotexact,remember),locateyour

swatchesbyhue(color)andvalue.

Allthecolorsinthisimageareintheyellow-

orange,orange-redrange

,quiteunusual.Thesky

issomewhatyellower,someshadesaredarker

thanourchart,butthisisthezone.

Shade

Hue

Tint


16/19

Before&After|www.ba

magazine.com

3of6

How

tocoolahotphoto0472

0472How

tocoolah

otphoto

Acolorincommon

Addingyellow

to

blueyieldsthecoolrange;the

se

arethecolorsofw

ater,new

growth,springtime.

Theyarepeacefulcolors,tranquilandrefreshin

g.

Aswithamonoch

romaticpalette,allhuesthat

share

acolorblue,inthiscasecoordinatenaturally.Any

colorinthisrange

willworkwithanyother.

Tintsandshades

Colorismadedarkerorl

ighterbyaddingblack(ashad

e)

orwhite(atint).Because

theyarecolorneutral,black

and

whitedonotchangethe

hue.Asaresult,anyonecolor

plusitsowntintsandsh

adesalwayscoordinatenatur

ally.

Suchapaletteiscalledm

onochromatic.Blueandorange

areopposites,orcomplements,asshownabove.

Whatweknow

Ourphotoisfullof

colorsintheorangeran

ge,andverywarm.Orangesopposite

orcomplementisblue,thecoldestcolor.

Letsstartthere.

Colorthebrochur

e

Itstimetotaketha

thotphotoandsubmer

geitincoolcolors.Ford

epth,coolnessand

beauty,twocolorsarebetterthanone,and

threecolorsarebettert

hantwo.

IceAllbluemonochromaticpalett

eisverycoldandhasvery

h

ighvaluecontrastwithyellow-ora

nge.Blueandorangehave

n

ocolorincommonandthereforehavehighcolorcontrast,too.

H

ighcontrastnormallyequalshigh

energy,butheretheconser-

v

ativedarkblue(thinkwinter)mitig

atesthatsomewhat.

CITIP

LAN

20

06

SAND

IEGO

ConferenceGuide

ConventionofCityPlanners

August1518,2006

www.cp06.org


17/19


4of6

How

tocoolahotphoto0472

0472How

tocoolah

otphoto

CITIP

LAN

2006

SAND

IEGO

ConferenceGuide


August1518,2006

www.cp06.org

ColdMovingtowardyellowisacoolmixofbluesand

greens;thegreenssharewarmyellowswiththephoto,while

thebluesprovidetheice.Bluedom

inates,keepingtheoverall

effectcold.Thecolorsshownhere

havesimilarvalueand

thereforelowcontrast.

CITIP

LAN

2006

SAND

IEGO

ConferenceGuide


August1518,2006

www.cp06.org

C

ool

Closertoyellow,thepalette

iswarmerstill.Theseare

thecolorsofspringtime,coolandrefreshingbutwithsunin

thesky!Greendominates.Greenh

asalotofyellowincommon

withthephoto,yettheaquabluek

eepstheeffectcool.


18/19

Before&After

|www.b

a

magazin

e.c

om

5of

6

How

tocoolahotphoto0472

0472How

tocoolah

otphoto

CITIP

LAN

2006

SAND

IEGO

ConferenceGuide

ConventionofCityPlanner

s

August1518,2006

www.cp06.org

W

arm

Here

,all

thecolors

are

yello

w-gre

en

,am

on

o-

c

hrom

aticpale

ttethath

asthem

os

tcolorin

comm

onwith

theph

otoan

dyield

sthew

arm

estim

age;it

doesntre

ally

c

oolthesk

ylin

ev

erym

uch.

CITIPLAN

2006

SANDIEGO

ConferenceGuide


August1518,2006

www.cp06.org

CITIPLAN

2006

SANDIEGO

ConferenceGuide


August1518,2006

www.cp06.org

CITIPLAN

2006

SANDIEGO

Con

ferenceGuide


August1518,2006

www

.cp06.org

CITIPLAN

2

006

SANDIEGO

ConferenceGuide


August1518,2

006

www.cp06.org

Analogous(sid

ebyside)tintswith

verylowcontrastaresoftand

touchable.Thin

kbabyproducts.

Photostandsoutagainstlight

tints,wh

ichrecede.Yellowcity

colorco

nnectsheadtophoto.

D

usty,dark-lightmonochromeis

handsome;identicaloppositecor-

nersactasaframe.

Low-contrastgreen-blueand

light

blueharmonize;lightgreena

nd

whitecooltheheadline.

Tonedowntheco

lor

Lesssaturatedcolo

rs(moreblackorwhiteandlesshue)yieldquieter,moreprofessional

palettes.Quantitym

atters;themoreofaco

lor,thegreateritsinflue

nce.


19/19


6of6

How

tocoolahotphoto0472

0472How

tocoolah

otphoto

Before&Aftermagazine

Before&Afterhasbeensharingitspracticalapproach

tographicdesignsince1990.Becauseourmodernworld

hasmadedesignersofusall(readyornot),Before&

Afterisdedicatedtom

akinggraphicdesignunderstand

-

able,usefulandevenfunforeveryone.

JohnMcWadePublis

herandcreativedirector

GayeMcWadeAssoc

iatepublisher

VincentPascualSta

ffdesigner

DexterMarkAbelle

raStaffdesigner

Before&Aftermagazine

323LincolnStreet,Roseville,CA95678

Telephone916-784-3880

Fax916-784-3995

E-mailmailbox@bama

gazine.com

wwwhttp://www.bam

agazine.com

Copyright2006Be

fore&Aftermagazine

ISSN1049-0035.Allrightsreserved

Youmaypassalonga

freecopyofthisarticletoothers

byclickinghere.Youm

aynotalterthisarticle,andyou

maynotchargeforit.

Youmayquotebriefsections

forreview;pleasecreditBefore&Aftermagazine,and

letusknow.TolinkBe

fore&Aftermagazinetoyour

Website,usethisURL:http://www.bamagazine.com.

Forallotherpermissio

ns,pleasecontactus.

SubscribetoBefore

&After

SubscribetoBefore&A

fter,andbecomea

morecapable,confidentdesignerforpennies

perarticle.Tolearnmo

re,goto

http://www.bamagazine.com/Subscribe

E-mailthisarticle

Topassalongafreecopyofthisarticleto

others,clickhere.

Joinoure-list

Tobenotifiedbye-mailofnewarticlesas

theybecomeavailable,goto

http://www.bamagazine.com/email

7

17

18

9

16

19

9

14

13

Typ

efaces

1(a

c)HelveticaNeue25UltraLight

a

)41pt,b)72pt,c)33pt

2H

elveticaNeue75Bold|8/8.5pt

3H

elveticaNeue35Thin|8/8.5pt

Color

14

15

16

Articleresources

C65M40Y0K0

C60M0Y55K0

C60M0Y25K0

C12M0Y20K0

C25M0Y10K0

C3M31Y80K0

1a

4

5

6

45678910111213

C100M60Y0K45

C100M60Y0K25

C30M15Y0K0

C100M0Y40K0

C100M0Y90K0

C100M0Y40K45

C60M0Y100K10

C60M0Y100K45

C60M0Y100K0

C35M0Y60K0

17

18

1b2

1c

11

12

13

CITIPL

AN

20

06

SANDIE

GO

ConferenceGuide


August1518,2006

www.cp06.org

CITIPL

AN

20

06

SANDIE

GO

ConferenceGuide


August1518,2006

www.cp06.org

5

7

8

9

10

7

CITIPLAN

2006

SANDIEGO

ConferenceGuide


August1518,2006

www.cp06.org

CITIPLAN

2006

SANDIEGO

ConferenceGuide


August1518,2006

www.cp06.org

CITIPL

AN

20

06

SANDIE

GO

ConferenceGuide


August1518,2006

www.cp06.org

CITIPLAN

2006

SANDIEGO

ConferenceGuide


August1518,2006

www.cp06.org

14

15

16

CITIPLAN

2006

SANDIEGO

ConferenceGuide


August1518,2006

www.cp06.org

CITIPLAN

2006

SA

NDIEGO

ConferenceGuide


August1518,

2006

www.cp06.org

3

19

Colorwheel

Before&Afterscolor

wheelisan

abbreviated

versionofthemodel

inBrideM.Whelans

book,Color

Harmony2,

adigest-sizereference

workthatalsoincludesabriefintro-

ductiontocolortheoryand

plentyof

colorexampleswithCMYK

mixes.Its

strengthisitsbrevity.Veryhandy.

Documents

Before and After 0472