Download - Before and After 0647
-
7/29/2019 Before and After 0647
1/13
Continued
Before&After XiBAmagazine.com U
Design talk 0647
FiveDesignIdeasSelfRollovers Old Tabs, Modern SheenOptical Alignment BabyCard
EmptySpace Embattledand isolated, CEODonna Andersongrappleswiththefalloutoffailedacquisitionsanda boardthatscallingfor her head.ALONE AT THE TO P
DesignTalk8
-
7/29/2019 Before and After 0647
2/13
Before&After
2of8 Design talk 0647
XiBAmagazine.com U
Web Self rollovers inform without clicking
A brief summary without having to click
Alienskin.coms product page (left) is set up
neatly in a grid. Each product has a standalone
page that provides the customer additional
details. By using a self rollover, the customer
gets a brief overview of the product (above,
right) without having to commit to a click and
be taken to a different page.
Normal state Over state
Self rollovers in Adobe GoLive
Rollovers require a separate image for
each rollover state: Normal, Over, Down,
Click, Up, and Out. All images must have
the same dimensions. Give your normal-
state image a name say,product1.gif
then name the remaining images based on
their state (product1_over.gif, product1_
down.gif, etc.). Put them all in one folder.
Drag the normal-state image to your Go-
Live page, and GoLive will automatically
place and arrange the other states on the
Rollovers & Actions palette (above).
Alien Skin Software displays a lot of products yet keeps their site beautifully uncluttered. To do this they
use self rolloversgraphics that change to descriptive text when merely touched by the cursor.
Design talk 2of8
-
7/29/2019 Before and After 0647
3/13
Before&After
3of8 Design talk 0647
XiBAmagazine.com UDesign talk 3of8
Type Straighten that wiggly edge
Have you sometimes noticed that type aligned vertically doesnt look that way? Thats because while
your margin is straight, the alphabet isnt, and its curves, crossbars and punctuation marks can create
the appearance of misalignment. InDesigns Optical Margin Alignmentwill fix that:
After optical alignment
With the text cursor active anywhere in a story, select
Type>Story>Optical Margin Alignment (left), and watch
what happensall those idiosyncratic bits get hung over
the edge. Whats interesting is that the margin is now
misaligned, yet it looks straight. The number you specify
in the dialog governs the amount of adjustment; gener-
ally it should match the point size.
Before optical alignment
Your computer says the margins
aligned, but your eyes tell you some-
thing different. Letters and punctua-
tion marks have funny shapes that
make the edge appear wiggly.
ListeningtalkingOpeningQuotes
ListeningtalkingOpeningQuotes
Vertical strokes align
Crossbars hang
Curves hang
Punctuation hangs
-
7/29/2019 Before and After 0647
4/13
Before&After
4of8 Design talk 0647
XiBAmagazine.com UDesign talk 4of8
Photo cropping Size and placement tell a story
The size and placement of your image can have a dramatic effect on its impact. Here, placing a small
portrait at the bottom of an empty field is all it takes to create a layout that perfectly illustrates its words.
The power of empty space
This layout makes it easy to see that
empty space isnt empty but has mass,
volume and real power. The huge black
field ungulfs our unfortunate CEO and
creates a sense of heaviness, isolation
and distance. What makes this happen
is her small size, extremely low place-ment and faraway gaze. Her dark suit is
a bonus, fading into the background and
leaving her somber expression in sharp
contrast. Headline and text styles must
be plain and in a neutral position (no
tension) to not steal attention.
Embattled and isolated, CEO Donna Anderson
grapples with the fallout of failed acquisitions and
a board thats calling for her head.
ALONE AT THE TOP
-
7/29/2019 Before and After 0647
5/13
Before&After
5of8 Design talk 0647
XiBAmagazine.com UDesign talk 5of8
No scissors required!
The scraps look pasted on, but thats a
computerized illusionthis announce-
ment is printed in one piece right
on your desktop. Write some playful
words, scan your paper, then in Photo-
shop cut it to pieces, apply drop shad-
ows, move each piece to its own layer,
arrange and print. Try it!
Fill and apply a shadow.
Create a selection.
Write and scan the words.
Design A card made of scraps
To announce the birth of their son Drew, our friends Dawn and Michael wanted to send an engaging,
personal cardand whats more personal than your own handwriting? We like what they made:
Front Inside
Handwritten love subs as a signature.
-
7/29/2019 Before and After 0647
6/13
Before&After
6of8 Design talk 0647
XiBAmagazine.com UDesign talk 6of8
Draw three rectangles with the Rounded Rect-
angle tool (left). In the Layers palette, double-click
Layer 1 and rename it Tabs. Edit>Copy all three
tabs. Next, apply a drop shadow: Go to Effect>Stylize>Drop Shadow, activate Preview, enter:
Mode: Multiply; Opacity 50%; X Offset 0; Y Offset
0p2; Blur: 0p2; Color Black. Click OK. Lock this
layer. Next, click on the Create New Layer icon
(inset), and name it Highlight. Go to Edit>Paste
in Front. Finally, create
a Type layer, set your
type, and move this
layer below the High-
light layer.
Adobe Illustrator Old-fashioned tabs with a modern sheen
BMWs Web banner (right) tells a clever pricing story
using animated cash-register popups. We like its
juxtaposition of stylesthe old mechanical device, old
typeface and antique color but drawn with a modern,
plasticized sheen. Heres how to duplicate it:
Create the curve for the highlight We need
to draw a line that will bisect the three tabs.
Select the Highlight layer. Using the Pen Tool,
draw a smooth curve (above). Press the Shift key,select the curve and all three tabs, and go to
Window>Pathfinder. Click Divide (below) to divide
the shapes into six segments.
Reveal the figures With the segments still
selected, change their Fill color to white. Next,
use the Direct Selection Tool (hollow arrow) to
select the bottom segments, and press Delete.Finally, select the top segments and lower their
opacity in the Window>Transparency dialog box.
Here, we specified an opacity of 60%.
BMW Web advertising banner
-
7/29/2019 Before and After 0647
7/13
Before&After
7of8 Design talk 0647
XiBAmagazine.com UDesign talk 7of8
Embattled and isolated, CEO Donna Anderson
grapples with the fallout of failed acquisitions and
a board thats calling for her head.
ALONE AT THE TO P
8
9
Typefaces
1 Helvetica Neue 35 Thin
2 Bureau Grot Extra Compressed Black
3 Georgia Regular
4 New Century Schoolbook Roman
Images
5 iStockphoto.com
6 Courtesy of Dawn & Michael Watanabe
Article resources
Colors
C72 M70 Y64 K87
C9 M7 Y16 K0
C0 M0 Y0 K100
C20 M7 Y6 K0
7
82
1
7
6
10
3
5
4
9
10
ListeningtalkingOpeningQuotes
-
7/29/2019 Before and After 0647
8/13
Before&After
8of8 | Printing formats
Design talk 0647
XiBAmagazine.com UDesign talk 8of8
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 designer
Dexter 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 magazineISSN 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
-
7/29/2019 Before and After 0647
9/13
XiBAmagazine.com UBefore&After
Back | Paper-saver format
For paper-saver formatPrint: (Specify pages 1013)
For presentation formatPrint: (Specify pages 18)
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
-
7/29/2019 Before and After 0647
10/13
Before&After|www.b
amagazine.com
1of4
DesignTalk8:FiveDesig
nIdeas0647
0647DesignTalk8:FiveDesignIdeas
WebSelfrollov
ersinformwithout
clicking
Abriefsummarywitho
uthavingtoclick
Alienskin.comsproductpage(left)issetup
neatlyinagrid.Eachproducthasastandalone
pagethatprovidesthecus
tomeradditional
details.Byusingaselfrollover,thecustomer
getsabriefoverviewoftheproduct(above,
right)withouthavingtoco
mmittoaclickand
betakentoadifferentpag
e.
Normalstate
O
verstate
Selfr
olloversinAdobeGoLive
Rollov
ersrequireaseparateimagefor
eachrolloverstate:Normal,Over,Down,
Click,Up,andOut.Allimagesmusthave
thesa
medimensions.Giveyournormal-
stateimageanamesay,product1.gif
thenn
ametheremainingimagesbased
on
theirs
tate(product1_over.gif,product1_
down.gif,etc.).Putthemallinonefolder
.
Dragt
henormal-stateimagetoyourGo-
Livepage,andGoLivewillautomatically
place
andarrangetheotherstatesonth
e
Rollov
ers&Actionspalette(above).
AlienSkinSoftwaredisplaysalotofproductsyetk
eepstheirsitebeautifullyuncluttered.Todothisthey
useselfrolloversgra
phicsthatchangetodescrip
tivetextwhenmerelytouch
edbythecursor.
FiveDe
signIde
as
SelfRollovers
Old
Tabs,Mode
rnSheen
OpticalAlignment
Baby
Card
EmptySpace
Embattledandisolated,CEODonnaAnderson
grappleswiththefalloutoffailedacquisitions
andaboardthatscallingforherhead.
ALONEAT
THETOP
DesignTalk8
-
7/29/2019 Before and After 0647
11/13
Before&After
|www.b
amagazin
e.c
om
2of4
DesignTalk8:FiveDesig
nIdeas0647
0647DesignTalk8:FiveDesignIdeas
TypeStraightenthatwigglyedge
Haveyousometimesn
oticedthattypealignedverticallydoesntlookthatway?Thatsbecausewhile
yourmarginisstraight
,thealphabetisnt,anditsc
urves,crossbarsandpunctu
ationmarkscancreate
theappearanceofmisalignment.InDesignsOpticalMarginAlignmentwillfix
that:
Afteropticalalig
nment
With
thetex
tcurso
ractivean
ywh
erein
astory,
sele
c
t
Type>Story
>Optica
lMarginAlignm
en
t(left),
an
dw
atc
h
wh
ath
appen
sall
thoseidio
syn
cra
ticbits
geth
un
gover
theedge.Wh
atsin
terestingis
thatthem
arginisn
ow
misalign
ed,yetitlo
oksstraigh
t.Th
en
um
ber
youspecify
inthedialo
ggovern
stheam
oun
tof
adjustmen
t;gen
er-
allyit
shouldm
atch
thepoin
tsize.
Beforeopticalalignment
Your
com
puter
saysthem
ar
gins
align
ed,butyour
eyestell
yousom
e-
thin
gdifferen
t.Le
tters
an
dpunctua-
tionm
ark
sh
av
efunn
yshapesthat
mak
etheedgeappearwig
g
ly.
Listen
ing
talking
Open
ing
Quote
s
Listenin
g
talking
Openin
g
Quotes
Vertic
al
strok
esali
gn
Cro
ssbarsh
a
ng
Curv
esh
a
ng
Pun
ctuationh
an
gs
Photocropping
Sizeandplacemen
ttellastory
Thesizeandplacemen
tofyourimagecanhavead
ramaticeffectonitsimpact.Here,placingasmall
portraitatthebottomofanemptyfieldisallittakestocreatealayoutthatper
fectlyillustratesitswords.
Thepo
werofemptyspace
Thisla
youtm
ak
esit
easytoseethat
em
ptys
paceisnt
em
ptybuth
asm
ass,
volum
e
andre
al
pow
er.Th
eh
ugebla
ck
field
un
gulfsour
unfortun
ateCE
Oan
d
cre
ates
asen
seofh
eavin
ess,isola
tion
an
ddist
ance.Wh
atm
ak
esthish
appen
ish
er
smallsize,ex
trem
elylow
pla
ce-
men
tan
dfaraw
aygaze.H
er
dark
suitis
abon
us
,fadin
gin
totheback
gro
un
dan
d
leavin
g
hersom
ber
ex
pre
ssionin
sharp
con
trast.H
eadlin
ean
dtex
tstyle
sm
ust
beplain
andin
an
eutral
position
(no
ten
sion
)ton
otsteal
atten
tion.
Embattledandisolated,CEODonnaAnd
erson
grappleswiththefalloutoffailedacquisi
tionsand
aboardthatscallingforherhead.
ALONEATTHETOP
-
7/29/2019 Before and After 0647
12/13
Before&After|www.b
amagazine.com
3of4
DesignTalk8:FiveDesig
nIdeas0647
0647DesignTalk8:FiveDesignIdeas
Noscisso
rsrequired!
Thescraps
lookpastedon,butthatsa
computerizedillusionthisannounce-
mentisprintedinonepieceright
onyourde
sktop.Writesomeplayful
words,sca
nyourpaper,theninPhoto-
shopcutittopieces,applydropshad-
ows,move
eachpiecetoitsownlayer,
arrangean
dprint.Tryit!
Fill
andapplyashadow.
Createaselection.
Writeandscanthewords.
Design
Acardmadeofscraps
Toannouncethebirth
oftheirsonDrew,ourfriendsDawnandMichaelwante
dtosendanengaging,
personalcardandwhatsmorepersonalthanyourownhandwriting?Welikewhattheymade:
Front
Inside
Han
dwrittenlovesubsasasignature.
Draw
threerectangleswiththeRoundedRect
-
angletool(left).IntheLayerspalette,double-click
Layer1andren
ameitTabs.Edit>Copyallthree
tabs.Next,applyadropshadow:GotoEffect>
Stylize>DropSh
adow,activatePreview,enter:
Mode:Multiply;Opacity50%;XOffset0;YOffset
0p2;Blur:0p2;ColorBlack.ClickOK.Lockthis
layer.Next,clic
kontheCreateNewLayericon
(inset),andnam
eitHighlight.GotoEdit>Paste
inFront.Finally
,create
aTypelayer,setyour
type,andmove
this
layerbelowthe
High-
lightlayer.
AdobeIllustrator
Old-fashionedtab
swithamodernsheen
Createthecurveforthe
highlightWeneed
todrawalinethatwillbisectthethreetabs.
SelecttheHighlightlayer.
UsingthePenTool,
drawasmoothcurve(abov
e).PresstheShiftkey,
selectthecurveandallthreetabs,andgoto
Window>Pathfinder.ClickD
ivide(below)todivide
theshapesintosixsegmen
ts.
Reve
althefiguresWiththesegment
sstill
selected,changetheirFillcolortowhite.Next,
usetheDirectSelectionTool(hollowarrow)to
selectthebottomsegments,andpress
Delete.
Finally,selectthetopsegmentsandlow
ertheir
opacityintheWindow>Transparencydialogbox.
Here,
wespecifiedanopacityof60%.
BMWsWebbanner(right)tellsacleverpricingsto
ry
usinganimatedcash-registerpopups.Welikeits
juxtapositionofstyles
theoldmechanicaldevice,old
typefaceandantiquecolorbutdrawnwithamodern,
plasticizedsheen.Hereshowtoduplicateit:
BMWWebadvertising
banner
-
7/29/2019 Before and After 0647
13/13
Before&After|www.bamagazine.com
4of4
DesignTalk8:FiveDesig
nIdeas0647
0647DesignTalk8:F
iveDesignIdeas
Embattledandis
olated,CEODonnaAnderson
grappleswiththe
falloutoffailedacquisitionsand
aboardthatscallingforherhead.
ALONEAT
THETOP
Before&Aftermag
azine
Before&Afterhasbeensharingitspracticalapproach
tographicdesignsinc
e1990.Becauseourmodernwor
ld
hasmadedesignerso
fusall(readyornot),Before&
Afterisdedicatedtom
akinggraphicdesignunderstand
-
able,usefulandevenfunforeveryone.
JohnMcWadePublis
herandcreativedirector
GayeMcWadeAssociatepublisher
VincentPascualSta
ffdesigner
DexterMarkAbelle
raStaffdesigner
DesignadvisorGwen
Amos
Before&Aftermag
azine
323LincolnStreet,Roseville,CA95678
Telephone916-784-3880
Fax916-784-3995
E-mailmailbox@bama
gazine.com
wwwhttp://www.bam
agazine.com
Copyright2006Before&Aftermagazine
ISSN1049-0035.All
rightsreserved.
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
Didyoulearnfromthisarticle?Subscribe,and
becomeamorecapable,confidentdesigner
forpenniesperarticle.Tolearnmore,goto
http://www.bamagazine.com/Subscribe
E-mailthisarticle
Topassalongafreecopyofthisarticleto
others,clickhere.
Joinoure-list
Tobenotifiedbye-ma
ilofnewarticlesas
theybecomeavailable,goto
http://www.bamagazine.com/email
89
Typefaces
1H
elveticaNeue35Thin
2B
ureauGrotExtraCompressedBlack
3G
eorgiaRegular
4N
ewCenturySchoolbookRoman
Im
ages
5iStockphoto.com
6C
ourtesyofDawn&MichaelWatanabe
Articleresources
Colors
C72M70Y64K87
C9M7Y16K0
C0M0Y0K100
C20M7Y6K0
78
2 17610354
910
Listening
talking
Opening
Quotes