Before&After ®
Continued
XiBAmagazine.com U
Design a beautiful Web header 0645
Golden Valleycountry inn
NEWS • EVENTS • DINING • ACCOMMODATION • FACILITIES • THINGS TO SEE • LINKS • DIRECTIONS • CONTACT US
Design a beautiful
Create an effective header the easy way. Just think in sections. Continued
Web header
Before&After ®
2 of 10
XiBAmagazine.com U
Design a beautiful Web header 0645
Golden Valleycountry inn
NEWS • EVENTS • DINING • ACCOMMODATION • FACILITIES • THINGS TO SEE • LINKS • DIRECTIONS • CONTACT US
Design a beautiful Web headerDesign an effective header the easy way. Just think in sections
The header of a simple Web page is its most important visual element. On many blogs, it’s the only visual element. So it has a big job to do! It must identify the site and set its visual tone. It must convey at a glance what kind of site it is and what is its attitude. The header must also provide easy navigation. All of this is easy to do by building three sections, one for each function, and unifying them with visual similarities. Here’s how to put that together.
Welcome to Golden ValleyThe Golden Valley Country Inn offers a tranquil experience consisting of
comfortable accommodation, excellent food, friendly atmosphere and a
wide range of activities. Quatum dolut praessed magnisis niamet, quam
quamet iurem acipit iurer autem dolor si enim ipisl etuer sum dolorperat
la augiam duissim dolore.
Texture and flasp net exating end mist of it snooling. Spaff forl isn’t
cubular but quastic, leam restart that can’t prebast. It’s tope, this fluant
chasible. Silk, shast, lape and behast the thin chack. “It has larch to say
fan.” Why? Elesara and order is fay of alm.
A card whint not oogum or bont. Pretty simple, glead and tarm. Texture
and flasp net exating end mist of it snooling. Spaff forl isn’t cubular but
quastic, leam restart that can’t prebast. It’s tope, this fluant chasible.
Silk, shast, lape and behast the thin chack. “It has larch to say fan.”
Why? Elesara and order is fay of alm. A card whint not oogum or bont.
Spaff forl isn’t cubular but quastic, leam restart that can’t prebast.
Texture and flasp
Net exating end mist of it
snooling. Spaff forl isn’t
cubular but quastic, leam
restart that can’t prebast.
It’s tope, this fluant chasible.
Silk, shast, lape and behast
the thin chack. “It has larch
to say fan.” Why? Elesara and
order is fay of alm.
A card whint not oogum or
bont. Pretty simple, glead
and tarm. Texture and flasp
net exating end mist of it
snooling. Spaff forl isn’t
cubular but quastic, leam
restart that can’t prebast.
It’s tope, this fluant chasible.
Silk, shast, lape and behast
Golden Valleycountry inn
NEWS • EVENTS • DINING • ACCOMMODATION • FACILITIES • THINGS TO SEE • LINKS • DIRECTIONS • CONTACT US
Big job, shallow space The header spans the page and is
often the only non-text visual element.
Before&After ®
3 of 10
XiBAmagazine.com U
Design a beautiful Web header 0645
Start by divvying up the spaceA Web header spans the page and is extremely shallow. Divide it into three sections: name, image and navigation links. Work on each one separately.
How big? As a rule, the name goes in the upper left and the navigation at the bottom.
Don’t lose sleep over exact divisions; the sizes of the sections will depend on your name (short or long) and image. However, avoid splitting the
top space exactly in half, which tends to draw attention to the sections rather than to the content; asymmetrical divisions are better.
3) Navigation
2) Image1) Name
Not ideal: Halves
Better:Asymmetrical
NEWS • EVENTS • DINING • ACCOMMODATION • FACILITIES • THINGS TO SEE • LINKS • DIRECTIONS • CONTACT US
Golden Valleycountry inn
Design a beautiful Web header 3 of 10
Before&After ®
4 of 10
XiBAmagazine.com U
Design a beautiful Web header 0645
Find an expressive photoA beautiful photo is key to a beautiful header. Look for an image that conveys its information in just a sliver. The surprise is how easy this can be to find.
Capture as much information as you can (Right) The pastoral scene has trees, grass,
mountains and sunlight—and look, all of it is in one sliver! That’s what you want, a little of everything. What’s interesting is how little it takes to convey meaning—a branch, a blade of grass, a bit of sky.
Look especially for depth, which is often expressed with dark-light values (far right) ; in this image you
can see foreground, midground and background.
Design a beautiful Web header 4 of 10
Before&After ®
5 of 10
XiBAmagazine.com U
Design a beautiful Web header 0645
Color the sectionsSample a range of colors from the photo, sort from dark to light, then apply a color to each section. Pay attention to contrasts.
High contrast is high energy A common color palette unifies the three
sections. Because all the colors exist in the photo, the sections will work together
(usually) regardless of how you mix and match. The higher the contrast between sec-
tions, the higher the energy; low contrasts are more peaceful (but usually less memorable).
LightDark
Dark to light
DarkLight
MediumDark
High contrast separates
Low contrast unites
Design a beautiful Web header 5 of 10
Before&After ®
6 of 10
XiBAmagazine.com U
Design a beautiful Web header 0645
Set the name and navigationIf you have a choice, set your type in a face that complements your photo: Busy photo/quiet type; classy photo/classy type; plain photo/showy type.
Keep the setting simple (1) A very long name must be set in two or more lines. With
no ascenders or descenders to collide, upper-case type is ideal for this. In this case, a quiet,
elegant typeface is a good complement for the beautiful, painterly image. (2) Avoid enter-
taining but scene-stealing typefaces and (3) typefaces with good but incompatible styles.
Alternating colors—green type on gold and gold type on green— help unify the sections. Golden Valley
country inn
Golden Valleycountry inn
GOLDEN VALLEY
NEWS • EVENTS • DINING • ACCOMMODATION • FACILITIES • THINGS TO SEE • LINKS • DIRECTIONS • CONTACT US
1
2
3
Design a beautiful Web header 6 of 10
Before&After ®
7 of 10
XiBAmagazine.com U
Design a beautiful Web header 0645
Use the opposite colorHere, a semi-abstract photo conveys D&T’s style of architecture, but its blue/gray colors are too subdued for the logo. The solution is to use the opposite color.
D&TA R C H I T E C T S
PORTFOLIO • CURRENT PROJECTS • AWARDS • REVIEWS • CONTACT US
High-energy opposites The photo is full of cold, corporate blues that don’t convey the energetic character of the young design firm. The solution: Retain blue’s influence by using its opposite, or complement, for the logo. Locate blue on the color wheel, then move straight across (left). Complementary colors have no undertones in common (unlike, for example, green and orange, which share yel-low) and therefore have very high contrast and energy. Violet and yellow have the highest value (dark-light) contrast on the color wheel.
D&TA R C H I T E C T S
PORTFOLIO • CURRENT PROJECTS • AWARDS • REVIEWS • CONTACT US
Dark to light
Blue from the photo looks correct but doesn’t convey the right character.
Design a beautiful Web header 7 of 10
Before&After ®
8 of 10
XiBAmagazine.com U
Design a beautiful Web header 0645
Fancy borders in InDesign(1) Draw a rectangle and apply a stroke the total width that you want the double line to be; here it’s two points. (2) In the Stroke> Type pulldown (right), select Thin–Thin (in this case), which . . .
. . . converts the single line to double. (3) In the Object>Corner Effects dia-log, select Inverse Rounded, specify a Size (here 0p9) and click OK.
1 2 3
Design to the logo or other graphicFairweather Downs has used its logo more or less unchanged for five decades. That’s a classic! The best thing to do in this case is design not to the photo but to the logo.
VISIT THE TRACK | RACING INFORMATION | SPECIAL DAYS | NEWS | EVENTS | INSIDER | SHOPPING
DOWNS
Borrow the logo’s characteristics Double-line borders and scalloped cor-ners of the logo are easy to transfer to the other sections and make a classic look. Because the logo determines the look, photos can come and go. Note the wide contrast of typestyle between Fairweather and DOWNS—script/Roman, small/large, lowercase/upper-case, yet similar line weights and excel-lent craftsmanship combine beautifully.
Green and beige are secondary colors, one cool, one warm.
Design a beautiful Web header 8 of 10
Before&After ®
9 of 10
XiBAmagazine.com U
Design a beautiful Web header 0645
Design a beautiful Web header 9 of 10
Typefaces
1 (a–b) Centaur SC & OsF a) 28.25 pt, b) 19.5 pt
2 Vectora 55 Roman | 6.5 pt
3 Blackcurrant
4 ITC Bauhaus Bold
5 Helvetica Neue 85 Heavy | 38 pt
6 Helvetica Condensed Light | 8.25 pt
7 Sloop ScriptOne | 22.5 pt
8 Goudy Old Style | 32.5 pt
9 Clarendon Light | 8.5 pt
Images
10 (a–c) iStockphoto.com | a b c
Article resources
Colors
C5 M15 Y55 K0
C50 M40 Y65 K50
C0 M35 Y100 K0
C0 M0 Y0 K100
C100 M0 Y100 K70
C15 M20 Y45 K0
11
12
Golden Valleycountry inn
NEWS • EVENTS • DINING • ACCOMMODATION • FACILITIES • THINGS TO SEE • LINKS • DIRECTIONS • CONTACT US
D&TA R C H I T E C T S
PORTFOLIO • CURRENT PROJECTS • AWARDS • REVIEWS • CONTACT US
VISIT THE TRACK | RACING INFORMATION | SPECIAL DAYS | NEWS | EVENTS | INSIDER | SHOPPING
DOWNS
1a
2
1b
GOLDEN VALLEY3 4
6
11 12
13 14
15 1614
5
7
8
9
10c
16
15
14
13
6
10b
10a
Before&After ®
10 of 10 | Printing formats
XiBAmagazine.com U
Design a beautiful Web header 0645
Design a beautiful Web header 10 of 10
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 publisherVincent Pascual Staff designerDexter Mark Abellera Staff designer 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 ©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 article
To 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
Before&After ®
Back | Paper-saver format
XiBAmagazine.com U
For paper-saver format Print: (Specify pages 12–16)
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
SavePresentation format or
Paper-saver format
For presentation format Print: (Specify pages 1–10)
Be
fore
&A
fter | w
ww
.bamagazine.com
1 of 5
De
sign
a b
ea
utifu
l We
b h
ea
de
r 06450645
De
sign
a b
ea
utifu
l We
b h
ea
de
r
Golden Valley
country innN
EWS
• EVEN
TS • D
ININ
G
• AC
CO
MM
OD
ATIO
N
• FAC
ILITIES • TH
ING
S TO SEE
• LINK
S • D
IREC
TION
S • C
ON
TAC
T US
Design a beautiful
Create an
effective head
er the easy w
ay. Ju
st thin
k in section
s.
Web header
Golden Valley
country innN
EWS
• EVEN
TS • D
ININ
G
• AC
CO
MM
OD
ATIO
N
• FAC
ILITIES • TH
ING
S TO SEE
• LINK
S • D
IREC
TION
S • C
ON
TAC
T US
Th
e head
er of a sim
ple W
eb p
age is its mo
st imp
ortan
t visual
elemen
t. On
man
y blo
gs, it’s the on
ly visual elem
ent. So
it has a
big jo
b to
do
! It mu
st iden
tify the site an
d set its visu
al ton
e. It mu
st co
nvey at a glan
ce wh
at kind
of site it is an
d w
hat is its attitu
de.
Th
e head
er mu
st also p
rovide easy n
avigation
. All o
f this is easy to
d
o b
y bu
ildin
g three sectio
ns, o
ne fo
r each fu
nctio
n, an
d u
nifyin
g th
em w
ith visu
al similarities. H
ere’s how
to p
ut th
at togeth
er.
We
lcom
e to
Go
lde
n V
alle
yThe G
old
en V
alley Country In
n o
ffers a tranquil exp
erience co
nsistin
g o
f
com
fortab
le accom
modatio
n, excellen
t food, frien
dly atm
osp
here an
d a
wid
e range o
f activities. Quatu
m d
olu
t praessed
mag
nisis n
iamet, q
uam
quam
et iurem
acipit iu
rer autem
dolo
r si enim
ipisl etu
er sum
dolo
rperat
la augiam
duissim
dolo
re.
Texture an
d fl
asp n
et exating en
d m
ist of it sn
oolin
g. S
paff fo
rl isn’t
cubular b
ut q
uastic, leam
restart that can
’t preb
ast. It’s tope, th
is fluan
t
chasib
le. Silk, sh
ast, lape an
d b
ehast th
e thin
chack. “It h
as larch to
say
fan.” W
hy? E
lesara and o
rder is fay o
f alm.
A card
whin
t not o
ogum
or b
ont. Pretty sim
ple, g
lead an
d tarm
. Texture
and fl
asp n
et exating en
d m
ist of it sn
oolin
g. S
paff fo
rl isn’t cu
bular b
ut
quastic, leam
restart that can
’t preb
ast. It’s tope, th
is fluan
t chasib
le.
Silk, sh
ast, lape an
d b
ehast th
e thin
chack. “It h
as larch to
say fan.”
Why? E
lesara and o
rder is fay o
f alm. A
card w
hin
t not o
ogum
or b
ont.
Spaff fo
rl isn’t cu
bular b
ut q
uastic, leam
restart that can
’t preb
ast.
Textu
re a
nd
flasp
Net exatin
g en
d m
ist of it
snoolin
g. S
paff fo
rl isn’t
cubular b
ut q
uastic, leam
restart that can
’t preb
ast.
It’s tope, th
is fluan
t chasib
le.
Silk, sh
ast, lape an
d b
ehast
the th
in ch
ack. “It has larch
to say fan
.” Why? E
lesara and
ord
er is fay of alm
.
A card
whin
t not o
ogum
or
bont. Pretty sim
ple, g
lead
and tarm
. Texture an
d fl
asp
net exatin
g en
d m
ist of it
snoolin
g. S
paff fo
rl isn’t
cubular b
ut q
uastic, leam
restart that can
’t preb
ast.
It’s tope, th
is fluan
t chasib
le.
Silk, sh
ast, lape an
d b
ehast
Golden Valley
country innN
EWS
• EVEN
TS • D
ININ
G
• AC
CO
MM
OD
ATIO
N
• FAC
ILITIES • TH
ING
S TO SEE
• LINK
S • D
IREC
TION
S • C
ON
TAC
T US
Big
job
, shallo
w sp
ace
The header spans the page and is often the only non-text visual elem
ent.
Find
an e
xp
ressive
ph
oto
A b
eautifu
l ph
oto
is key to a b
eautifu
l head
er. Loo
k for an
image th
at con
veys its in
form
ation
in ju
st a sliver. Th
e surp
rise is how
easy this can
be to
fin
d.
Cap
ture
as mu
ch in
form
ation
as you
can
(Right) The pastoral scene has trees, grass, m
ountains and sunlight—and look, all of it is in one
sliver! That’s what you w
ant, a little of everything. W
hat’s interesting is how little it takes to convey
meaning—
a branch, a blade of grass, a bit of sky. Look especially for depth, w
hich is often expressed w
ith dark-light values (far right); in this image you
can see foreground, midground and background.
Be
fore
&A
fter | w
ww
.bamagazine.com
2 of 5
De
sign
a b
ea
utifu
l We
b h
ea
de
r 06450645
De
sign
a b
ea
utifu
l We
b h
ea
de
r
Start b
y divvyin
g u
p th
e sp
aceA
Web
head
er span
s the p
age and
is extremely sh
allow. D
ivide it in
to th
ree sectio
ns: n
ame, im
age and
navigatio
n lin
ks. Wo
rk on
each o
ne sep
arately.
Ho
w b
ig? A
s a rule, the name goes in the
upper left and the navigation at the bottom.
Don’t lose sleep over exact divisions; the sizes
of the sections will depend on your nam
e (short or long) and im
age. How
ever, avoid splitting the top space exactly in half, w
hich tends to draw
attention to the sections rather than to the content; asym
metrical divisions are better.
3) Navig
ation
2) Imag
e1) N
ame
No
t ide
al:
Halves
Be
tter:
Asym
metrical
NEW
S • EV
ENTS
• DIN
ING
• A
CC
OM
MO
DA
TION
• FA
CILITIES
• THIN
GS TO
SEE • LIN
KS
• DIR
ECTIO
NS
• CO
NTA
CT U
S
Golden Valley
country inn
Be
fore
&A
fter | w
ww
.bamagazine.com
3 of 5
De
sign
a b
ea
utifu
l We
b h
ea
de
r 06450645
De
sign
a b
ea
utifu
l We
b h
ea
de
r
Co
lor th
e se
ction
sSam
ple a ran
ge of co
lors fro
m th
e ph
oto, so
rt from
dark to
light, th
en ap
ply a co
lor
to each
section
. Pay attentio
n to
con
trasts.
Hig
h co
ntrast is h
igh
en
erg
y A
comm
on color palette unifies the three sections. B
ecause all the colors exist in the photo, the sections w
ill work together
(usually) regardless of how you m
ix and m
atch. The higher the contrast between sec-
tions, the higher the energy; low contrasts are
more peaceful (but usually less m
emorable).
LightD
ark
Dark to light
Dark
Light
Medium
Dark
High contrast separates
Low contrast unites
Se
t the
nam
e an
d n
avigatio
nIf yo
u h
ave a cho
ice, set you
r type in
a face that co
mp
lemen
ts you
r ph
oto
: Bu
sy p
ho
to/q
uiet typ
e; classy ph
oto
/classy type; p
lain p
ho
to/sh
owy typ
e.
Ke
ep
the
settin
g sim
ple
(1) A
very long nam
e must be set in tw
o or more lines. W
ith no ascenders or descenders to collide, upper-case type is ideal for this. In this case, a quiet,
elegant typeface is a good complem
ent for the beautiful, painterly im
age. (2) A
void enter-taining but scene-stealing typefaces and (3
) typefaces w
ith good but incompatible styles.
Alternating colors—
green type on gold and gold type on green—
help unify the sections.
Golden Valley
country inn
Golden Valley
country inn
GO
LDEN
VALLEY
NEW
S • EV
ENTS
• DIN
ING
• A
CC
OM
MO
DA
TION
• FA
CILITIES
• THIN
GS TO
SEE • LIN
KS
• DIR
ECTIO
NS
• CO
NTA
CT U
S
123
Be
fore
&A
fter | w
ww
.bamagazine.com
4 of 5
De
sign
a b
ea
utifu
l We
b h
ea
de
r 06450645
De
sign
a b
ea
utifu
l We
b h
ea
de
r
Use
the
op
po
site co
lor
Here, a sem
i-abstract p
ho
to co
nveys D
&T
’s style of arch
itecture, b
ut its b
lue/gray
colo
rs are too
sub
du
ed fo
r the lo
go. Th
e solu
tion
is to u
se the o
pp
osite co
lor.
D&T
AR
CH
ITE
CT
S
PORTFO
LIO
•
CU
RRENT
PROJEC
TS •
AW
ARDS
•
REVIEWS
•
CO
NTAC
TU
S
Hig
h-e
ne
rgy o
pp
osite
s The photo is full of cold, corporate blues that don’t convey the energetic character of the young design firm
. The solution: Retain blue’s influence by using its
opposite, or complem
ent, for the logo. Locate blue on the color w
heel, then move straight across (left).
Com
plementary colors have no undertones in com
mon
(unlike, for example, green and orange, w
hich share yel-low
) and therefore have very high contrast and energy. V
iolet and yellow have the highest value (dark-light)
contrast on the color wheel.
D&T
AR
CH
ITE
CT
S
PORTFO
LIO
•
CU
RRENT
PROJEC
TS •
AW
ARDS
•
REVIEWS
•
CO
NTAC
TU
S
Dark to light
Blue from
the photo looks correct but doesn’t convey the right character.
Fancy b
ord
ers in
InD
esig
n(1) D
raw a rectangle and apply
a stroke the total width that you
want the double line to be; here
it’s two points. (2
) In the Stroke>
Type pulldown (right), select Thin–
Thin (in this case), which . . .
. . . converts the single line to double. (3) In the O
bject>C
orner Effects dia-log, select Inverse Rounded, specify a Size (here 0p9) and click O
K.
12
3
De
sign
to th
e lo
go
or o
the
r grap
hic
Fairweath
er Dow
ns h
as used
its logo
mo
re or less u
nch
anged
for fi
ve decad
es. Th
at’s a classic! T
he b
est thin
g to d
o in
this case is d
esign n
ot to
the p
ho
to b
ut to
the lo
go.
VIS
IT T
HE
TR
AC
K | R
AC
ING
INF
OR
MA
TIO
N | S
PE
CIA
L D
AY
S | N
EW
S | E
VE
NT
S | IN
SID
ER
| SH
OP
PIN
G
DO
WN
S
Bo
rrow
the
log
o’s ch
aracteristics
Double-line borders and scalloped cor-
ners of the logo are easy to transfer to the other sections and m
ake a classic look. B
ecause the logo determines the
look, photos can come and go. N
ote the w
ide contrast of typestyle between
Fairweather and D
OW
NS—
script/R
oman, sm
all/large, lowercase/upper-
case, yet similar line w
eights and excel-lent craftsm
anship combine beautifully.
Green and beige are secondary colors, one cool, one w
arm.
Be
fore
&A
fter | w
ww
.bamagazine.com
5 of 5
De
sign
a b
ea
utifu
l We
b h
ea
de
r 06450645
De
sign
a b
ea
utifu
l We
b h
ea
de
r
Article
reso
urce
s
Co
lors
C5 M
15 Y55 K0
C50 M
40 Y65 K50
C0 M
35 Y100 K0
C0 M
0 Y0 K100
C100 M
0 Y100 K70
C15 M
20 Y45 K0
11
12
Golden Valley
country innN
EWS
• EVEN
TS • D
ININ
G
• AC
CO
MM
OD
ATIO
N
• FAC
ILITIES • TH
ING
S TO SEE
• LINK
S • D
IREC
TION
S • C
ON
TAC
T US
D&T
AR
CH
ITE
CT
S
PORTFO
LIO
•
CU
RRENT
PROJEC
TS •
AW
ARDS
•
REVIEWS
•
CO
NTAC
TU
S
VIS
IT T
HE
TR
AC
K | R
AC
ING
INF
OR
MA
TIO
N | S
PE
CIA
L D
AY
S | N
EW
S | E
VE
NT
S | IN
SID
ER
| SH
OP
PIN
G
DO
WN
S
1a2 1b
GO
LDEN
VALLEY3
4
6
1112
1314
1516
14
5789
10 c
16 15 14 13
6 10b
10a
Type
face
s
1 (a–b
) Centaur SC
& O
sF a) 28.25 pt, b) 19.5 pt
2 Vectora 55 Rom
an | 6.5 pt
3 Blackcurrant
4 ITC B
auhaus Bold
5 Helvetica N
eue 85 Heavy | 38 pt
6 Helvetica C
ondensed Light | 8.25 pt
7 Sloop ScriptOne | 22.5 pt
8 Goudy O
ld Style | 32.5 pt
9 Clarendon Light | 8.5 pt
Ima
ge
s
10 (a–c) iStockphoto.com
| a b c
Be
fore
& A
fter m
ag
azin
e
Befo
re & A
fter has b
een sh
aring its p
ractical app
roach
to
graph
ic design
since 1990. B
ecause o
ur m
od
ern w
orld
h
as mad
e design
ers of u
s all (ready o
r no
t), Befo
re &
After is d
edicated
to m
aking grap
hic d
esign u
nd
erstand
-ab
le, usefu
l and
even fu
n fo
r everyon
e.
Joh
n M
cWa
de
Pu
blish
er and
creative directo
rG
ay
e M
cWa
de
Asso
ciate pu
blish
erV
ince
nt P
ascu
al Staff d
esigner
De
xte
r Ma
rk A
be
llera
Staff design
er
Design
adviso
r Gw
en
Am
os
Be
fore
& A
fter m
ag
azin
e323 Lin
coln
Street, Ro
seville, CA
95678 Te
lep
ho
ne
916-784-3880 Fax 916-784-3995E
-mail m
ailbo
x@b
amagazin
e.com
w
ww
http
://ww
w.b
amagazin
e.com
Co
py
righ
t ©2
00
6 B
efo
re &
Afte
r ma
ga
zine
IS
SN
10
49
-00
35
. All rig
hts re
serv
ed
.
You
may p
ass alon
g a free cop
y of th
is article to o
thers
by clickin
g here. Yo
u m
ay no
t alter this article, an
d yo
u
may n
ot ch
arge for it. Yo
u m
ay qu
ote b
rief section
s fo
r review; p
lease credit B
efore &
After m
agazine, an
d
let us kn
ow
. To lin
k Befo
re & A
fter magazin
e to yo
ur
Web
site, use th
is UR
L: http
://ww
w.b
amagazin
e.com
. Fo
r all oth
er perm
ission
s, please co
ntact u
s.
Su
bscrib
e to
Be
fore
& A
fter
Did
you
learn fro
m th
is article? Sub
scribe, an
d
beco
me a m
ore cap
able, co
nfi
den
t design
er
for p
enn
ies per article. To
learn m
ore, go
to
http
://ww
w.b
amagazin
e.com
/Sub
scribe
E-m
ail this article
To p
ass alon
g a free cop
y of th
is article to
oth
ers, click here.
Join
ou
r e-list
To b
e no
tified
by e-m
ail of n
ew articles as
they b
ecom
e available, go
to
http
://ww
w.b
amagazin
e.com