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


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


3/13

Before&After


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


Vertical strokes align

Crossbars hang

Curves hang

Punctuation hangs


4/13

Before&After



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


5/13

Before&After



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.


6/13

Before&After



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/13

Before&After



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



8/13

Before&After

8of8 | Printing formats

Design talk 0647


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


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


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


11/13

Before&After

|www.b

amagazin

e.c

om

2of4


nIdeas0647


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


12/13

Before&After|www.b

amagazine.com

3of4


nIdeas0647


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


13/13

Before&After|www.bamagazine.com

4of4


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

before and after 0647

Documents