Before and After 0663

7/29/2019 Before and After 0663

1/15

Beore&Ater XiBAmagazine.com U

Continued Picture your group 0663

Continued

Pictureyour groupALUMNI

ASSOCIATION

BOARD

LINCOLNSTATE UNIVERSITY

Connect. Motivate. Have Fun.


2/15

Before&After

2of9

XiBAmagazine.com U

Picture your group 0663

Picture your groupHave a dozen or more mug shots? A grid of squares gets that

gang of yours looking goodtogether.

Equal divisionsyield page-

shaped felds. This has two

assets: 1) The photos have a

amiliar, portrait shape, and

2) every shape including the

page is identical. Downside:

Letter-shape proportions are

visually ambiguous.

Divide the page into a grid. Two types:

Square divisions are sym-

metrical, simple (all our sides

are the same) and unambigu-

ous. This imparts an unusually

sharp, intentionally designed

look. Downside: Square mugs

are harder to crop.

We people are social creatures. We

congregate.We work together, attend

school together, form clubs together.

We network. We rub elbows. Were

reaching out to touch someone, it

seems, all the time. And yet for all

our similarities, we look plenty differ-

ent. We have different faces, hairstyles,

body builds, clothing. Put us together on apage, and we can make a motley herd.

So how do we picture a group of us? The

key to a great design is to get uniform. Get

the scale, cropping and backgrounds of your

photos as similar as possible, then arrange

the results on a neat grid. A few ideas:

81/2

11


3/15

Beore&Ater Picture your group 3of9

3of9

XiBAmagazine.com U


Scale and crop or uniormity

The frst step is to get your photos looking as similar as possible. Heads should bethe same size, eyes at the same level, backgrounds smooth as possible.

AterStart with the most closely cropped original (above, let), then scale and crop the others to match. Centereach ace in its rame, and put everyones eyes on the same level. Male and emale adult heads should be pretty

much the same size. Head shape, hairstyle and tilt aect the perceived size, so make small adjustments by eye.

Except or your school pictures, a group o photos is rarely

taken under uniorm conditions and so will benet rom

post-production work. Lighting is key; adjust it as well as you

can. The things to avoid (let, let to right) are heavy shadows

(the kind a fash makes against a wall), washed out highlights (oten rom a fash), odd color casts and blurry

images. Similarly, a dark photo in a eld o light ones, or vice-versa, will draw unwanted attention.

Beore Well-lit photostaken at dierent view-

ing distances.

Start with the image that has the least cropping

room, and make the others match.


4/15

Before&After Picture your group 4of9

4of9

XiBAmagazine.com U


Faces inward (mostly) Distribute by value Soten with color

Place your photos

Place your photos on the grid, facing the perimeter photos inward (mostly)and distributing the dark-light values as evenly as you can.

Adding a dark feld will lower

the contrast, which sotens

the message. The dark also

makes a canvas out o which

to reverse our name (let).

Snap your photos to the grid. Face the perimeter photos

inward or straight ahead. Where possible, distribute the dark-

light values evenly (note the lighter images are highlighted

above). Once grouped, look or things you missed earlieror

example, are all the aces centered, and are they reallythe

same size? Make small scale and cropping adjustments.ALUMNI

ASSOCIATION

BOARD



Note the alignment.Centered.


5/15


5of9

XiBAmagazine.com U


ALUMNI

ASSOCIATION

BOARD



Variation 1 Big images

One or two big images in a feld o small ones can add emphasis or context.Be sure to maintain the visual balance o the layout.

A mug shot enlarged

One mug shot bigger than

the others will draw special

attention. Square ormat is

retained.

Offset

Similar-but-dierent image

will broaden the story and

lessen the impact o the frst

image. Dierent proportions

and absence o alignment

help it remain dierent.

A different kind of image

Completely dierent images

give the mug shots context.

The page now conveys sev-

eral stories in one.ALUMNIASSOCIATION

BOARD



ALUMNI

ASSOCIATION

BOARD



ALUMNI

ASSOCIATION

BOARD




6/15

Beore&Ater Picture your group 6of9

6of9

XiBAmagazine.com U


Variation 2 Add words

Replace some photos with colored squares, which can function as a table ofcontents, highlights or links. Centered words mimic the centered faces.

ALUMNI

ASSOCIATION

BOARD


ClassmateSearch

SponsoredEvents

AlumniGroups

CareerServices

Reunions &Societies

MembershipServices

StudentPrograms


Center ocusThe strength o a square is its

natural pull into the center.

Centered aces and text take

advantage o that and yield

a sharp, repetitive design

o real clarity. Note the tiny

shadow behind the text.

eunionsSocieties

Reunions &Societies

A single color fattens thepage (Let) Distributing photos

yields an interesting checker-

board pattern, but same-color

squares atten the design

note how they connect and

orm a single feld.

(Right) Bring the design to lie

by eyedroppering rom the

photos a palette o desaturated

colors (below). Note how the

squares no longer connect but

orm a vibrant tapestry.

Beore

Ater


7/15


7of9

XiBAmagazine.com U


Variation 3 Subtract

Its the same grid, but here the white feld shapes the design. Its now ull o dynamicorces that move the eye let, right, up and down, ull o energy, very modern.

Put the focal point on the

axis Who says white space

is passive? Here, its incred-

ibly active, pressing in on all

our sides and defning the

central shape, which radiates

out rom the center logo like

a pinwheel.

LINCOLNCOMMUNITY COLLEGE

ALUMNI

ASSOCIATION

BOARD



Hard and soft edges The higher the

contrasts, the more energy a design

has. (Above, let) Against white, the

photos hard edges actively move the

eye let, right, up and down. (Above,

right) Dark feld has sot edges, and

what a dierence! Its the same layout,

but the page is much quieter.

ALUMNI

ASSOCIATION

BOARD

LINCOLN


ALUMNI

ASSOCIATION

BOARD

LINCOLN



8/15

Before&After

8of9

XiBAmagazine.com U


Picture your group 8of9

ALUMNI

ASSOCIATION

BOARD



Typefaces

1 (ab) ITC New Baskerville Italic

a) 18/18 pt, b) 16 pt

2 ITC New Baskerville Bold

28/28 pt

Images

3 (aj) iStockphoto.com | a b c d

e f g h i j k

All others are from www.rubberball.com

Article resources

Colors

C50 M45 Y70 K20

C65 M55 Y55 K30

C58 M55 Y78 K50

C50

M55

Y75

K40

C42 M52 Y82 K25

C36 M78 Y100 K45

C65 M60 Y70 K55

C45 M40 Y70 K40

C0 M25 Y100 K5

4

5

6

7

8

9

10

11

122

3g

3h

3f

3e

1b

3i

1a 3a 3b 3c 3d

4 6 85 7 9 10 11 12

ALUMNI

ASSOCIATION

BOARD


ClassmateSearch

SponsoredEvents

AlumniGroups

CareerServices

Reunions &Societies

MembershipServices

StudentPrograms


3k

3j


9/15

Beore&Ater

9of9 | Printing formats

XiBAmagazine.com U


Picture your group 9of9Picture your group 9of9

Beore & Ater magazine

Beore & Ater has been sharing its practical approach

to graphic design since 1990. Because our modern world

has made designers o us all (ready or not), Beore &

Ater is dedicated to making graphic design understand-

able, useul and even un or everyone.

John McWade Publisher and creative director

Gaye McWade Associate publisher

Dexter Mark Abellera Sta designer

Beore & Ater 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 2007 Beore & Ater magazine

ISSN 1049-0035. All rights reservedYou may pass along a ree copy o this article to others

by clicking here. You may not alter this article, and you

may not charge or it. You may quote brie sections

or review; please credit Beore & Ater magazine, and

let us know. To link Beore & Ater magazine to your

Web site, use this URL: http://www.bamagazine.com.

For all other permissions, please contact us.

Subscribe to Beore & Ater

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


10/15

Beore&Ater

Back | Paper-saver format

XiBAmagazine.com U

For paper-saver ormatPrint: (Speciy pages 1115)

For presentation ormatPrint: (Speciy pages 19)

Print

Format: Landscape

Page Size: Fit to Page

Save

Presentation ormat or

Paper-saver ormat

Beore & Ater is made to ft your binder

Beore & Ater articles are intended or permanent reerence. All are titled and numbered.

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

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


11/15

Beore&Ater|www.b

amagazine.com

1o5

Pictureyou

rgroup0663

0663Pictureyourgr

oup

Picture

yo

urgrou

p

ALUMNI

ASSOCIATION

BOARD

LINCOLN

STATEUNIVERSITY

Connect.Motivate.HaveFun.

Equaldivisionsyie

ldpage-

shapedelds.Thisha

stwo

assets:1)Thephotos

havea

amiliar,portraitshap

e,and

2)everyshapeinclud

ingthe

pageisidentical.Downside:

Letter-shapeproportionsare

visuallyambiguous.

Dividethepagein

toagrid.Twotypes:

Squaredivisionsaresym-

metrical,simple(all

oursides

arethesame)andunambigu-

ous.Thisimpartsan

unusually

sharp,intentionallydesigned

look.Downside:Squ

aremugs

arehardertocrop.

Wepeoplearesocialcreatures.We

congregate.

Weworktogether,atten

d

schoolto

gether,ormclubstoget

her.

Wenetwo

rk.Werubelbows.Were

reachingouttotouchsomeone,it

seems,all

thetime.Andyetorall

oursimilarities,welookplentydier-

ent.Wehav

edierentaces,hairsty

les,

bodybuilds,cloth

ing.Putustogetherona

page,andwecanmakeamotleyherd.

Sohowdowep

ictureagroupous?Th

e

keytoagreatdesi

gnistogetuniorm.Get

thescale,croppin

gandbackgroundsoyour

photosassimilaraspossible,thenarrange

theresultsonane

atgrid.Aewideas:

81/2

11


12/15

Beore&Ater|www.b

amagazine.com

2o5

Pictureyou

rgroup0663

0663Pictureyourgr

oup

Scaleandcropo

runiormity

Thefrststepistogetyourphotoslooking

assimilaraspossible.H

eadsshouldbe

thesamesize,eyes

atthesamelevel,backgroundssmoothaspossible.

AterStartwit

hthemostcloselycroppedoriginal(above,let),thenscaleandcrop

theotherstomatch.Center

eachaceinits

rame,andputeveryoneseyesonthesamelevel.Maleandemale

adultheadsshouldbepretty

muchthesame

size.Headshape,hairstyleandtiltaecttheperceivedsize,somak

esmalladjustmentsbyeye.

Exceptoryourschoolpictures,agroupophotosisrarely

takenunderuniormconditionsandsowillbenetrom

post-productionwork.Lighting

iskey;adjustitaswellas

youcan.Thethingstoavoid(le

t,lettoright)areheavy

shadows(thek

indafashmakesagainstawall),washedouthighlights(otenromafash),oddcolorcastsand

blurryimages.Similarly,adarkphotoinaeldo

lightones,orvice-versa,willdraw

unwantedattention.

BeoreWell-litphotos

takenatdierentview-

ingdistanc

es.

Startwiththeimagethath

astheleastcropping

room,andmaketheothersmatch.

Facesinward(mostly)

Distributebyva

lue

Sotenwithcolor

Placeyourphotos

Placeyourphotosonthegrid,acingtheperimeterphotosinward

(mostly)

anddistributingth

edark-lightvaluesasev

enlyasyoucan.

Addingadarkeldw

illlower

thecontrast,whichsotens

themessage.Thedar

kalso

makesacanvasouto

which

toreverseourname(let).

Snapyourpho

tostothegrid.Facetheperimeterphotos

inwardorstraightahead.Wherepossible,distributethedark-

lightvaluesevenly(notethelighterimagesareh

ighlighted

above).Onceg

rouped,lookorthingsyoumissedearlieror

example,arealltheacescentered,andarethey

reallythe

samesize?Ma

kesmallscaleandcroppingadjus

tments.

ALUMNI

ASSOCIATIO

N

BOARD

LINCOLN

STATEUNIVERSITY

Connect.Motivate.HaveFu

n.

Notethealign

ment.

Centered.


13/15

Variation2Addwo

rds

Replacesomephotoswithcoloredsquares

,whichcanunctionas

atableo

contents,highlightsorlinks.Centeredwor

dsmimicthecenteredaces.

ALUMNI

ASSOCIATIO

N

BOARD

LINCOLN

STATEUNIVERSITY

Cla

ssmate

Search

Sponsored

Events

A

lumni

G

roups

Career

Services

Reu

nions&

Societies

Membership

Services

Student

Programs


Centerocus

Thestrengthoasqu

areisits

naturalpullintothecenter.

Centeredacesandtexttake

advantageothatan

dyield

asharp,repetitivede

sign

orealclarity.Notethetiny

shadowbehindthet

ext.

eunions

Societies

Reun

ions&

Societies

Asinglecolor

fattensthe

page(Let)Distributingphotos

yieldsaninteres

tingchecker-

boardpattern,b

utsame-color

squaresfattenthedesign

notehowthey

connectand

ormasinglee

ld.

(Right)Bringthe

designtolie

byeyedropperin

gromthe

photosapalette

odesatu-

ratedcolors(below).Notehow

thesquaresnolongerconnect

butormavibra

nttapestry.

Beore

Ater

Beore&Ater|www.bamagazine.com

3o5

Pictureyou

rgroup0663

0663Pictureyourgr

oup

ALUMNI

ASSOCIATION

BOARD

LINCOLN


Variation1Bigima

ges

Oneortwobigima

gesinafeldosmallon

escanaddemphasisorcontext.

Besuretomaintainthevisualbalanceothelayout.

Amugshote

nlarged

Onemugshot

biggerthan

theotherswill

drawspecial

attention.Squareormatis

retained.

Oset

Similar-but-die

rentimage

willbroadenthestoryand

lessentheimpa

ctotherst

image.Dierentproportions

andabsenceo

alignment

helpitremaind

ierent.

Adierentkindo

image

Completelydierent

images

givethemugshotsco

ntext.

Thepagenowconveyssev-

eralstoriesinone.

ALUMNI

ASSOCIATIO

N

BOARD

LINCOLN

STATEUNIVERSITY


ALUMNI

ASSOCIATION

BOARD

LINCOLN


ALUMNI

ASSOCIA

TION

BOARD

LINCOLN

Connect.Motivate.H

aveFun.


14/15

Before&After|www.bamagazine.com

4o5

Pictureyourgroup0663

0663Pictureyourgroup

Variation3Subtrac

t

Itsthesamegrid,b

utherethewhitefeldsh

apesthedesign.Itsnow

ullodynamic

orcesthatmoveth

eeyelet,right,upanddown,ulloenergy,ver

ymodern.

Putthefocalpointonth

e

axisWhosayswhitespace

ispassive?Here,itsincred-

iblyactive,pressinginonall

oursidesanddefningthe

centralshape,whichradiate

s

outromthecenterlogolike

apinwheel.

LINCOLN

ALUMNI

ASSOCIATION

BOARD

LINC

OLN

STATEUNIVERSITY


HardandsoftedgesThehigherthe

contrasts,themoreenergyadesign

has.(Above,let)Againstwhite,the

photoshardedgesactivelymov

ethe

eyelet,right,upanddown.(Above,

right)Darkfeldhassotedges,a

nd

whatadierence!Itsthesame

layout,

butthepageismuchquieter.

ALUMNI

ASSOCIATION

BOARD

LINCOLN


ALUMNI

ASSOCIATION

BOARD

LINCOLN


ALUMNI

ASSOCIATION

BOARD

L

INCOLN

STA

TEUNIVERSITY


Typefaces

1(ab)ITCNewBaskervilleItalic

a

)18/18pt,b)16pt

2ITCNewBaskervilleBold

2

8/28pt

Im

ages

3(aj)iStockphoto.com|

a

b

c

d

e

g

h

ijk

All

othersareromwww.rubberball.com

Articleresources

Colors

C50M45Y70K20

C65M55Y55K30

C58M55Y78K50

C50M55Y75K40

C42M52Y82K25

C36M78Y100K45

C65M60Y70K55

C45M40Y70K40

C0M25Y100K5

4567891011

12

2 3g

3h

3f

3e

1b

3i

1a

3a

3b

3c

3d

4

6

8

5

7

9

10

11

12

ALUMNI

ASSOCIATION

BOARD

LINCOLN

STATEUNIVERSITY

Classmate

Search

Sponsored

Events

Alumni

Grou

ps

Career

Services

Reunions&

Societies

Membership

Services

Student

Programs


3k

3

j


15/15

Beore&Ater|www.bamagazine.com

5o5

Pictureyourgroup0663

0663Pictureyourgroup

Beore&Atermag

azine

Beore&Aterhasbeensharingitspracticalapproach

tographicdesignsinc

e1990.Becauseourmodernwor

ld

hasmadedesignerso

usall(readyornot),Beore&

Aterisdedicatedtom

akinggraphicdesignunderstand

-

able,useulandeven

unoreveryone.

JohnMcWadePublisherandcreativedirector

GayeMcWadeAssociatepublisher

DexterMarkAbelle

raStadesigner

Beore&Atermag

azine

323LincolnStreet,Ro

seville,CA95678

Telephone916-784-3880

Fax916-784-3995

[email protected]

wwwhttp://www.bam

agazine.com

Copyright2007Be

ore&Atermagazine

ISSN1049-0035.All

rightsreserved

Youmaypassalonga

reecopyothisarticletoothers

byclickinghere.Youm

aynotalterthisarticle,andyou

maynotchargeorit.

Youmayquotebriesections

orreview;pleasecreditBeore&Atermagazine,and

letusknow.TolinkBe

ore&Atermagazinetoyour

Website,usethisURL

:http://www.bamagazine.com.

Forallotherpermissions,pleasecontactus.

SubscribetoBeore

&Ater

SubscribetoBeore&Ater,andbecomea

morecapable,confdentdesignerorpennies

perarticle.Tolearnmore,goto

http://www.bamagazine.com/Subscribe

E-mailthisarticle

Topassalongareeco

pyothisarticleto

others,clickhere.

Joinoure-list

Tobenotifedbye-ma

ilonewarticlesas

theybecomeavailable,goto

http://www.bamagazine.com/email

Documents

Before and After 0663