Before and After 0650

7/29/2019 Before and After 0650

1/15

Continued

Before&After XiBAmagazine.com U

Design talk 0650

FiveDesignIdeas

DesignTalk9

A Site ofSquares Photo Name

Fun Lines High-Style Multi-Caption

Picture-Frame Cover

YES, IM

INTERESTED

NATIONAL PARKSVISITOR PROJECTION 07


2/15

Before&After

2of9 Design talk 0650

XiBAmagazine.com U

Different strokes

Find an object with a good

profile, trace it with the Pen

tool (left), and apply a stroke.

You can combine parts of dif-

ferent photos. Even easier is

to stroke letters, numbers and

dingbats, which require no

tracing. Strokes can be thin,

wide, dotted, colored and soon (below). Super-fine lines

are sublime. Be artistic!

Bathroom Restoration

9 1 6 . 5 5 5 . 4 6 8 7

ww w. Ba t h ro o m Re s t o ra t i o n. co m

design > remodel > restore

Image A line is fine

Artwork drawn with a single line (technically, a stroke) can convey looks from sublime to electric.

It can simplify a busy image and add interest to a plain one. Its a great way to salvage weak photos,

and on the Web it makes extremely efficient use of bandwidth.

Outline

Wide line

Dotted line

Overlap

Center it

Classy cover ismade with soft

color, small

type and plenty

of open space.

Line widths,

including the

border, are all

the same.

Design talk 2of9


3/15

Before&After


XiBAmagazine.com U

Below, make your photos the same size, then arrange in rows, columns

or groups symmetrically toward the center (stable, placid) or asymmetri-

cally to one side (tense, exciting). Above, keep the type small, alignedwith an edge or centered.

Cover Make a picture-frame cover

Been to the art store lately? Picture frames with multiple-image mats are hot! The clean, gridlike

presentation looks as good on your wall as it does on your page. Designers have been using grids

forever, so lets borrow back the idea for our next cover:

Multiple-image

mats have neatly

replaced those

cockeyed arrange-

ments hanging on

our walls, and work

equally well on our

pages. Note, right,

the depth created

by dark and light

accents on the

neutral-value field.

One Two Three Five Six


Design talk 3of9


4/15

Before&After


XiBAmagazine.com U

Lip Gloss

ROSE MIST by Marc Philips

Elesara and order is fay of alm.

A card wh int not oogum orbont. Pretty simple, glead and

tarm. Leam restart that cant

prebast its tope.

$25.00 USD

MarcPhilips.com

Layout Multiple captions in high style

Awhile back in DesignTalk 0638, we told you we love

this multiple-caption technique, in which a photo

is given several captions, not just one. We like it

for its big-picture, sound-bite value, and especially

because every image has so many stories to tell.

Heres a high-style take on it:

Eye Shadow

PERIWINKLE by Jann Haan

Texture and flasp net exatingend mist of it snooling. Spaff

forl isn t cubular but quastic,

leam restart that cant prebast.Its tope this fluant chasible.

Silk, shast, lape and behastthe thin chack. Spaff forl i sntcubular but quastic.

$18.00 USD

JannHaanCosmetics.com

Sheer translucency

Glamour is about image, so start

by making your photo wall-to-wall

BIG, then set your captions atop it.

Use fine lines, a simple typeface and

translucent fills, which yield a kind of

airy, weightless quality. To make the

rectangles translucent, fill with light

gray set to Multiply.

Design talk 4of9


5/15

Before&After


XiBAmagazine.com U

Signature Put a photo in your name

Sometimes a name and a product go together well. The product can be pictured with the name

or as part of the name. Try it. Words and pictures together can be stronger than words alone.

Use it as a character Its rare that your product not only

fits your name but is the shape of a letter like the h shown

above! Below, balls and other round objects are more com-

mon. Also, try replacing partof a letter like a crossbar.

Use it as an interrupterThe Bonsai tree is a

visually descriptive, easy-to-read photo that inter-

rupts the IKKO name. Below, treat the photo like you

would a letter, and space it evenly.

c erryik ko

ik ko T YS!S U N R I S E

F U N A T T H E S U N R I S E G A L L E R I A

Design talk 5of9


6/15

Before&After


XiBAmagazine.com U

Web site A site of squares

Small squares, big squares

(Left) Five small squares form the navigation

bar, and a big square headlines the page. In each

square, white text aligns to the lower left corner,

creating pattern-making similarity. Above, clicking

a navigational square turns it white and

moves its color to the headline square,

which is also applied to the smaller

heads on the page below it. In contrast

to all the straight edges, the organic

logo is a leafy interrupter.

Whenever you repeat an element, color or arrangement at visible intervals, you create a pattern. If the

repetition is prominent, it can be used as a theme. A theme is easy to read and memorable. To illustrate,

note how Parc Rittenhouse uses squares and springtime colors as the theme of its site:

www.parcrittenhouse.com

Design talk 6of9


7/15

Before&After


XiBAmagazine.com U

Bathroom Restoration

9 1 6 . 5 5 5 . 4 6 8 7

ww w.B at hro om Res tor at io n. com

design > remodel > restore


1

1

1

1

6a

6b

6c

6d

6e

Eye Shadow

PERIWINKLE by Jann Haan

Texture and flasp ne t exating

end mist of it snooling. Spaffforl isnt cubul ar but quastic,

leam restart that cant prebast.Its tope this fluant chasible.Silk, shast, lape and behast

the thin chac k. Spaff f orl isntcubular but quastic.

$18.00 USD


6f

5

4

Typefaces

1 Adobe Garamond Regular

2 Adobe Jenson Pro Light

3 Myriad Pro Semibold

4 Helvetica Neue 73 Bold Ext

5 Helvetica Neue 45 Light Ext

Images

6 (af) iStockphoto.com

a b c d e f

Article resources

Colors

C50 M19 Y37 K0

C45 M55 Y70 K65

C29 M36 Y45 K42

C25 M30 Y37 K0

7

8

9

2

9

8

3

7 10

10

Design talk 7of9


8/15

Before&After


XiBAmagazine.com U

ik ko

c erry

T YS!S U N R I S E

F U N A T T H E S U N R I S E G A L L E R I A

Typefaces

1 Trajan Regular | 65 pt

2 Zapfino One | 15 pt

3 Helvetica Neue 35 Thin | 97 pt

4 Helvetica Neue 45 Light | 11.5 pt

5 (ab) Myriad Pro Bold

a) 12 pt, +350 letterspacingb) 6 pt, +185 letterspacing

6 Griffith Gothic Ultra Cond | 52 pt

Images

7 (ac) iStockphoto.com | a b c

Article resources

Colors

C20 M75 Y70 K158

8

7a

1

2

7b

7c

3

4

5a

6

5b

8

Design talk 8of9


9/15

9of9 | Printing formats Design talk 0650

Before&After XiBAmagazine.com UDesign talk 9of9

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 2007 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


10/15

Before&After

Back | Paper-saver format

XiBAmagazine.com U

For paper-saver formatPrint: (Specify pages 1115)

For presentation formatPrint: (Specify pages 19)

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


11/15

Before&After

|www.b

am

agazin

e.c

om

1of

5

DesignTalk9:FiveDesig

nIdeas0650

0650DesignTalk9:FiveDesignIdeas

FiveDe

signIde

as

DesignTalk9

ASiteof

Squares

PhotoName

FunLines

High-S

tyleMulti-C

aption

P

icture-Fram

eCover

YES,IM

INTERESTED

NATIONALPARKS

VISITORPROJECTION07

Differentstrokes

Findanobjectwithag

ood

profile,traceitwiththePen

tool(left),andapplyastroke.

Youcancombineparts

ofdif-

ferentphotos.Evenea

sieris

tostrokeletters,numb

ersand

dingbats,whichrequireno

tracing.Strokescanbe

thin,

wide,dotted,coloredandso

on(below).Super-fine

lines

aresublime.Beartistic!

BathroomResto

ration

916.555.4687

www.BathroomRestora

tion.com

design>remodel>r

estore

ImageA

lineisfine

Artworkdrawnwithasingleline(technically,astro

ke)canconveylooksfromsublimetoelectric.

Itcansimplifyabusyi

mageandaddinteresttoaplainone.Itsagreatwaytosalvageweakphotos,

andontheWebitmak

esextremelyefficientuseofbandwidth.

Outline

Wideline

Dottedline

Overlap

Centerit

Classycoveris

madewithso

ft

color,small

typeandplen

ty

ofopenspace.

Linewidths,

includingthe

border,areall

thesame.


12/15

Before&After

|www.b

am

agazin

e.c

om

2of

5


nIdeas0650

0650DesignTalk9:FiveDesignIdeas

Belo

w,m

ak

eyour

ph

otosthesam

esiz

e,then

arran

geinrow

s,column

s

or

g

roupssymm

etrically

tow

ard

thecenter

(stable

,pla

cid

)or

asymm

etri-

cally

toon

esid

e(ten

se,ex

citin

g).A

bo

ve,k

eepthetypesm

all,

align

ed

with

anedgeor

cen

tere

d.

CoverMakeap

icture-framecover

Beentotheartstorela

tely?Pictureframeswithmultiple-imagematsarehot!T

heclean,gridlike

presentationlooksasgoodon

yourwallasitdoesonyour

page.Designershavebeenusinggrids

forever,soletsborrow

backtheideaforournextcover:

Multiple-im

age

matsh

av

en

eatly

repla

cedthose

cock

eyedarran

ge

-

men

tsh

an

gin

gon

ourw

alls

,an

dw

ork

equallyw

ell

on

ou

r

pages.N

ote,righ

t,

thedepthcre

ated

bydark

an

dligh

t

accen

tson

the

neutral-v

alu

efi

eld

.

On

e

Tw

o

Thre

e

Fiv

e

Six

NATION

ALPARKS

VISITORPROJECTION07

LipGloss

ROSEMISTbyMarcPhilips

Elesaraandorderisfayof

alm.

Acardwhintnotoogumo

r

bont.Prettysimple,glead

and

tarm.Leamrestartthatca

nt

prebastitstope.

$25.00USD

MarcPhilips.com

LayoutMultipl

ecaptionsinhighs

tyle

AwhilebackinDesignTalk0638,wetold

youwelove

thismultiple-ca

ptiontechnique,inwhichaphoto

isgivenseveralca

ptions,notjustone.Welikeit

foritsbig-picture,sound-bitevalue,andespecially

becauseeveryimageh

assomanystoriestotell.

Heresahigh-styletakeonit:

Eye

Shadow

PERIWINKLEbyJannHaan

Textureandflaspnetexating

end

mistofitsnooling.Spaff

forlisntcubularbutquastic,

leam

restartthatcantprebast.

Itstopethisfluantchasible.

Silk,

shast,lapeandbehast

the

thinchack.Spaffforlisnt

cubularbutquastic.

$18

.00USD


Sheertranslucency

Glam

our

isaboutimage,sostart

bym

akin

g

your

ph

otow

all-to-w

all

BIG

,then

setyour

caption

satopit.

Usefin

elin

e

s,asim

ple

typefa

cean

d

tran

slu

cen

tfi

lls,which

yield

akin

dof

airy,w

eigh

tlessquality.T

om

ak

ethe

rectan

gle

stran

slu

cen

t,fillwithligh

t

gra

ysettoM

ultiply.


13/15

Before&After

|www.b

ama

gazin

e.c

om

3of

5


nIdeas0650

0650DesignTalk9:F

iveDesignIdeas

SignaturePuta

photoinyournam

e

Sometimesanamean

daproductgotogetherwell.Theproductcanbepicturedwiththename

oraspartofthename.Tryit.Wordsandpicturest

ogethercanbestron

gerthanwordsalone.

UseitasacharacterIt

srare

thatyour

pro

ductn

otonly

fitsyourn

am

ebutis

thesh

apeof

ale

tterlik

etheh

sh

own

abov

e!B

elow

,balls

an

dotherro

un

dobjectsarem

ore

com-

mon.Als

o,tryre

pla

cin

gpa

rtof

ale

tterlik

eacro

ssbar.

UseitasaninterrupterTheB

on

sai

treeis

a

vis

ually

descrip

tive,easy-to-

read

ph

otothatin

ter-

ruptstheIKK

On

am

e.B

elow

,treattheph

otolik

eyou

would

ale

tter,

an

dspaceit

evenly.

c

erry

ik

ko

ik

k

o

T

YS

!

S

U

N

R

IS

E

FU

N

ATTH

ESU

N

RISEG

A

LLERIA

WebsiteAsite

ofsquares

Smallsquares,bigsquares

(Left)Fiv

esm

all

square

sformth

en

avig

ation

bar,

an

d

abig

squareh

eadlin

esthepage.Ine

ach

square

,

white

tex

talign

stothelow

erleft

corner,

cre

ating

pattern-m

akin

gsimilarity.A

bov

e,clickin

g

an

avig

ation

al

square

turn

sitwh

itean

d

mov

esits

color

totheh

eadlin

esquare

,

whichis

als

oapplie

dtothesm

a

ller

headson

thepagebelowit.In

contra

st

toall

thestraigh

tedges,theorg

anic

logois

ale

afyin

terru

pter.

Whenever

yourepeatanelement,colororarran

ge

mentatvisibleintervals,yo

ucreateapattern.Ifthe

repetitionis

prominen

t,itcanbeusedasatheme.Athemeiseasytoreadandmemorable.Toillustrate,

notehowParcRittenhouseusessquaresandsprin

gtimecolorsasthethemeo

fitssite:

w

ww.parcrittenhouse.com


14/15

Before&After

|www.b

ama

gazin

e.c

om

4of

5

DesignTalk9:FiveDesignIdeas0650

0650DesignTalk9:F

iveDesignIdeas

BathroomRestoration

916.555.4687

www.BathroomRestoration.com

design>remodel>restore

NATIONALPARKS

VISITORPROJECTION07

1111

6a

6b

6c

6d

6e

Ey

eShadow

PERIWINKLEbyJannHaan

Te

xtureandflaspnetexating

en

dmistofitsnooling.Spaff

forlisntcubularbutquastic,

lea

mrestartthatcantprebast.

Its

topethisfluantchasible.

Silk,shast,lapeandbehast

thethinchack.Spaffforlisnt

cu

bularbutquastic.

$18.00USD

Ja

nnHaanCosmetics.com

6f

5 4

Typefaces

1A

dobeGaram

on

dR

egular

2A

dobeJen

sonProLigh

t

3M

yriadPro

Semib

old

4H

elveticaN

eue7

3B

oldEx

t

5H

elveticaN

eue4

5Ligh

tEx

t

Im

ages

6(

af)iS

tock

ph

oto.c

om

a

b

c

d

e

f

Articleresources

Colors

C50M19Y37K0

C45M55Y70K65

C29M36Y45K42

C25M30Y37K0

78

9

2

9

8

3

7

10

10

ik

ko

c

e

rry

T

YS!

S

U

N

R

IS

E

FU

N

ATTH

ESU

N

RISEG

A

LLERIA

Typefaces

1Tr

ajanR

egular

|65pt

2Z

apfin

oOn

e|1

5pt

3H

elveticaN

eue35Thin

|97

pt

4H

elveticaN

eue4

5Ligh

t|11.5

pt

5(

ab)M

yria

dProB

old

a

)12pt,+

350le

tters

pacin

g

b

)6pt,+1

85le

tters

pacin

g

6G

riffithGothic

Ultra

Con

d|52

pt

Im

ages

7(

ac)iS

tock

ph

oto.c

om|

a

b

c

Articleresources

Colors

C20M75Y70K15

8

8

7a

12

7b

7c

345a

65b8


15/15

Before&After

|www.b

ama

gazin

e.c

om

5of

5

DesignTalk9:FiveDesignIdeas0650

0650DesignTalk9:F

iveDesignIdeas

Before&Aftermag

azine

Before

&Afterh

asbeensh

arin

gits

pra

ctical

appro

ach

togra

phic

design

sin

ce199

0.B

ecauseourm

odernw

orl

d

hasm

adedesign

ers

of

usall

(readyorn

ot),B

efore

&

Afteris

dedic

atedtom

akin

ggra

phic

design

un

ders

tan

d

-

able

,useful

an

dev

enf

unfor

ev

ery

on

e.

JohnMcWadeP

ublis

heran

dcre

ativedire

ctor

GayeMcWadeA

ssociate

publish

er

VincentPascual

Sta

ffdesign

er

DexterMarkAbelle

raStaff

design

er

Before&Aftermag

azine

32

3Lin

coln

Street,R

oseville

,CA9

567

8

Telephone91

6-7

84-3

880

Fax91

6-7

84-399

5

E-mailm

ailb

ox

@bam

a

gazin

e.c

om

wwwh

ttp://www.b

am

agazin

e.c

om

Copyright2007Be

fore&Aftermagazine

ISSN1049-0035.All

rightsreserved

Youm

aypassalon

ga

freecopyof

this

article

toothers

byclickin

gh

ere.Y

oum

ayn

otalter

this

article

,an

dyou

mayn

otch

arg

eforit.

Youm

ayquotebrief

section

s

forreview

;ple

asecre

ditB

efore

&Afterm

agazin

e,an

d

letuskn

ow.T

olinkB

e

fore&Afterm

agazin

etoyour

Website

,usethis

URL

:http://www.b

am

agazin

e.c

om.

For

all

other

permis

sio

ns,ple

asecon

tactus.

SubscribetoBefore

&After

SubscribetoBefore&After,andbecomea

morecapable,confidentdesignerfor

pennies

perarticle.Tolearnmo

re,goto

http://www.bamagazine.com/Subscribe

E-mailthisarticle

Topassalon

gafreecopyofthisarticleto

others,clickhere.

Joinoure-list

Tobenotifiedbye-mailofnewarticlesas

theybecomeavailable,

goto

http://www.bamagazine.com/email

Documents

Before and After 0650