before and after 0641

7/29/2019 Before and After 0641

1/16

Continued

Before&After XiBAmagazine.com U

Pix Trix 2 0641

Web graphics

PixTrix2How to design great-lookingads in tiny spacesContinued


2/16

Before&After

2of9

XiBAmagazine.com U

Pix Trix 2 0641

A typical advertisement is full of images and text. Yet the

standard Web ad is 120 x 90 pixels at 72 dpi. Thats tiny. So

how do you shoehorn, say, the city of New York into that

speck of real estate? The key when working on the Web

is to not tryquite. The space is so small, the resolution

so low, and the typical Web page so cluttered with other

messages that your microscopic cityscape will be lost.

Instead, thinksimple, boldandbrief. Use not the entire

city but an icon that represents itthe Statue of Liberty,

Empire State Building; you get the idea.

Look for an iconic image, a simple shape, a bold color,

a bold angle, high contrastor, best, all of it.

Step one: Use a simple photo

Think simple, bold and brief The goal is to convey your message with the least amount of visual information. Think icons, symbols

and objects. New York City: Statue of Liberty; health care: doctor in a lab coat; kitchen products: stack of bowls, and so on.

120 x 90 px

432 x 288 px

Designing in a tiny space has unique requirements. Start by looking for an image that says a lot with a little.

Pix Trix 2 2of9


3/16

Before&After

3of9

XiBAmagazine.com U

Pix Trix 2 0641

Step two: Make a simple layout

REGISTER

FOR FALL

CLASSESWeber University

REGISTER

FOR FALL


Add the words

. . . but when the words

are added, it works just

fine. White words tie to the

white mouse; university

name in gold stands apart.

Use an iconic object with

a simple, familiar shape, and

set it against a high-contrast

(black) field. Note that by

itself the mouse does not

convey class registration . . .

Use as few words as possible, and arrange your material simply.

Simplify

Keep the layout as simple as

you can; note above that aligning

the two objects turns them into

one block and that the spaces

between objects (below) are all

the same. As a rule, the fewer

differences, the better.

REGISTER

FOR FALL


Online class registration

involves a lot of hard-

ware, but dont show it

all. Instead . . .

Pix Trix 2 3of9


4/16

Before&After

4of9

XiBAmagazine.com U

Pix Trix 2 0641

Use cropping as a design tool

You can control the effect of your ad by changing the size of the

photo, its angle and the way its cropped. With so little material to

work with, its important to make every nuance count.

Centeris the stable position.

Her gaze is direct, deliberate,

engaging.

Angle the image, and her

look turns coy. Shes atten-

tive, but for how long?

Scale Extremely close up and

her eyes become the message.

Intense and arresting.

Be dramatic (Far left) Its a beautiful original that will say

different things depending on how you handle it. Cropped in half

(left), it gains intensity and mysteryand space for words. Ultra-

light typeface retains the high-key (light on light) theme.

Off-centerunbalances the

space, creating a light sense

of tension.

All contacts

Save10%

All contacts

Save10%

Pix Trix 2 4of9


5/16

Before&After

5of9

XiBAmagazine.com U

Pix Trix 2 0641

Use text to frame your image

Panorama Definitely not

simple, incomparable ElCapitan is a case where an

entire mountain of gran-

ite is the focal point. We

could crop, but this image

benefits from its distant

vantage point, scale and

surrounding detail. Adding

the green bar separates

image from text, limiting

the complexity.

Monument With tighter

cropping, the mountainbecomes more vertical

than horizontal, an effect

heightened by its deep

shadows. Extremely con-

densed typeface in mighty

uppercase amplifies the

effect, welding words

and image into a single,

powerful message read-

able at a glance.

Postcard style Designed

in the style of an Ansel-Adams print, this treatment

is quieter, more gallery-

likealthough the photo

hasnt changed! Gray type

on white recedes yet is

readable at a glance. Wide

spacing makes the space

appear horizontal. White

page floats above the gray

field as a single unit.

In such close quarters, text and photos must work together, not

separately. In fact, the two must form virtually one message. Like a

photo, type is graphical, so you can use its style, case, shape, weight

and color to complement and strengthen the image.

Y O S EM I T EYOSEMITEEl CapitanYosemite National Park

Pix Trix 2 5of9


6/16

Before&After

6of9

XiBAmagazine.com U

Pix Trix 2 0641

Use the full image Reduce (1) a standard-size image to 120 pixels wide, which leaves it

shallower than 90 pixels (2). Fill the remaining spaceplus a littlewith a solid field of color

eyedroppered from the image (3), then add your type (4). This photo-above-field technique

simplifies the space; it is an excellent choice when your image is complex or detailed.

YOSEMITE YOSEMITEUse part of the image Crop the image to emphasize (or create) a focal point. Then find

a typeface that complements or amplifies an attribute of the image. Here, a tall, condensed

typeface spanning the page amplifies the mountains monumental presence. A slight over-

lap of mountain and the type above it adds depth, pushing the granite wall forward.

El CapitanYosemite National Park

YOSEMITE

90 px

?

120 px

1 2

3

4

Pix Trix 2 6of9


7/16

Before&After

7of9

XiBAmagazine.com U

Pix Trix 2 0641

Pix Trix 2 7of9

Here, an exciting image is weakened by excessive contrast, a monochromatic

color cast, lack of focal point and a busy background. Rescue it by using type

to supplement the picture:

INTERVIEWTONYPEREZ

SKAT E MA G

2

3

1

Focal point first Crop tightly to give the skateboarder

as much presence as possible (1 ). Note the textured

background is busy but visually interesting. You can

amplify its effect by using a similarly textured typeface(2). The result is artistic but not easy to read. To remedy

this, replace the background with high-contrast black (3)

while retaining the textured type. To retain the improved

visibility and the background texture, use the texture to

fill the distressed typeface (4).

Use text to supplement an image

4


8/16

Before&After

8of9

XiBAmagazine.com U

Pix Trix 2 0641

Pix Trix 2 8of9

All contacts

Save10%

INTERVIEW

TONYPEREZ

SKA TE MAG

REGISTER

FOR FALL


Y O S EM I T EYOSEMITE

Typefaces

1 (ab) Trajan Pro Regular | a) 13.5/16 pt

b) 7.5 pt

2 (ac) Sabotage | a) 17 pt, b) 31/11 pt

c) 11 pt

3 (ab) Helvetica Neue Std Ultra Light

a) 31/26.5 pt, b) 15 pt4 Clarendon Bold | 15 pt

5 Clarendon Light | 8 pt

6 (ab) ITC Cheltenham Bold Cond

a) 37 pt, b) 12 pt

7 ITC Cheltenham Book | 18 pt

Images

8 (ak) iStockphoto.com | a b c de f g h i j k

Article resources

9

Colors

C30 M50 Y90 K0

C25 M35 Y95 K20

C10 M40 Y53 K40

C50

M30

Y70

K30

C0 M0 Y0 K45

9

El CapitanYosemite National Forest

12

10

Image row8ej (left to right)

11

12

13

54 6a8d 6b

8a 1b

1a 2a

11

13

2c10

2b 3a

3b 8c

7

8b

8k


9/16

Before&After

9of9 | Printing formats

XiBAmagazine.com U

Pix Trix 2 0641

Pix Trix 2 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 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


10/16

XiBAmagazine.com UBefore&After

Back | Paper-saver format

Theres more Before & After!Learn more. Design better. Browse and shop a complete list of articles at www.iStockphoto.com


11/16

XiBAmagazine.com UBefore&After

Back | Paper-saver format

For paper-saver formatPrint: (Specify pages 1216)

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


12/16

Before&After|www.bamagazine.com

1of5

PixTrix2:Webg

raphics0641

0641PixTrix2:Web

graphics

W

ebgra

phics

PixTrix

2

How

todesigngreat-lookin

g

ads

intinyspac

es

Atypicaladvertisementis

fullofimagesandtext.Yett

he

standardWebadis120x90pixelsat72dpi.Thatstiny.So

howdoyoushoehorn,say,thecityofNewYorkintoth

at

speckofrealestate?Thek

eywhenworkingontheWe

b

istonottryquite.Thespaceissosmall,theresolution

solow,andthetypicalWe

bpagesoclutteredwithoth

er

messagesthatyourmicro

scopiccityscapewillbelost

.

Instead,thinksimple,boldandbrief.Usenottheentire

citybutaniconthatrepre

sentsittheStatueofLiberty,

EmpireStateBuilding;yougettheidea.

Lookforaniconicima

ge,asimpleshape,aboldcolor,

aboldangle,highcontras

tor,best,allofit.

Stepone:Usea

simplephoto

Thinks

imple,boldandbriefThegoalistoconveyyourmessagewiththeleastamountofvisualinformatio

n.Thinkicons,symbols

andobje

cts.NewYorkCity:StatueofLiberty;healthcare:doctorinalabcoat;kitchenproducts:stackofbowls

,andsoon.

120x90px

432x2

88px

Designinginatinyspacehasuniquerequirements.Startbylookingforanimagethatsaysalotwithalittle.


13/16


2of5

PixTrix2:Webg

raphics0641

0641PixTrix2:Web

graphics

Steptwo:Make

asimplelayout

REGISTER

FORFALL

CLASSES

WeberUniversity

REGISTER

FORFALL

CLASSES

WeberUniversity

Addthewords

.

.

.butwhenthewords

areadded,itworksjust

fine.Whitewordstietothe

whitemouse;university

nameingoldstandsapart.

Useaniconicobjectwith

asimple,familiarshape,and

setitagainstahigh-contrast

(black)field.Notethatby

itselfthemousedoesnot

conveyclassregistration...

Useasfewwordsaspo

ssible,andarrangeyourma

terialsimply.

Simplify

Keepthelayoutassimpleas

youcan;noteabovethataligning

thetwoobjectsturnstheminto

oneblockandthatthespaces

betweenobjects(below)areall

thesame.Asarule,thefewer

differences,thebetter.

REGISTER

FORFALL

CLASSES

WeberUniversity

Onlineclassregistration

involvesalotofhard-

ware,butdontshowit

all.Instead...

Usecroppinga

sadesigntool

Youcancontroltheeffectofyouradbychangingthesizeofthe

photo,itsangleandthewayitscropped.W

ithsolittlematerialto

workwith,its

importanttomakeeverynu

ancecount.

Centeristhestableposition.

Hergaze

isdirect,deliberate,

engaging

.

Angletheimage,andher

lookturnscoy.Shesatten-

tive,butforhowlong?

ScaleExtremelycloseupand

h

eyes

Intenseandarresting.

Bedramatic(Farleft)Itsabeautifuloriginalthatwillsay

differentthingsdependingonhow

youhandleit.Croppedinhalf

(left),itgainsintensityandmysteryandspaceforwords.Ultra-

lighttypefaceretainsthehigh-key

(lightonlight)theme.

Off

-centerunbalancesthe

spa

ce,creatingalightsense

oft

ension.

Allcontacts

Save10%

Allcontacts

Save

10%


14/16


3of5

PixTrix2:Webgraphics0641

0641PixTrix2:Web

graphics

Usetexttoframeyourimage

MonumentWithtighter

cropping,themounta

in

becomesmorevertic

al

thanhorizontal,anef

fect

heightenedbyitsdee

p

shadows.Extremelycon-

densedtypefaceinm

ighty

uppercaseamplifiesthe

effect,weldingwords

andimageintoasing

le,

powerfulmessageread-

ableataglance.

PostcardstyleDesigne

d

inthestyleofanAnsel-

Adamsprint,thistreatment

isquieter,moregallery-

likealthoughthephoto

hasntchanged!Graytyp

e

onwhiterecedesyetis

readableataglance.Wid

e

spacingmakesthespace

appearhorizontal.White

pagefloatsabovethegray

fieldasasingleunit.

Insuchcloseq

uarters,textandphotosmu

stworktogether,not

separately.Infact,thetwomustformvirtu

allyonemessage.Likea

photo,typeisgraphical,soyoucanuseits

style,case,shape,weight

andcolortocomplementandstrengthentheimage.Y

OS

EM

ITE

YOSE

MITE

Usethefullimage

Reduce(1)astandard-sizeimage

to120pixelswide,whichleavesit

shallowerthan90pixels(2).Filltheremainingspacep

lusalittlewithasolidfieldofcolor

eyedropperedfromtheimage(3),thenaddyourtype(4

).Thisphoto-above-fieldtechnique

simplifiesthespace;

itisanexcellentchoicewhenyourimageiscomplexordetailed.

YOSE

M

ITE

YOSEMIT

E

Usepartoftheim

ageCroptheimagetoemphasize(orcreate)afocalpoint.Thenfind

atypefacethatcomplementsoramplifiesanattribute

oftheimage.Here,atall,condens

ed

typefacespanningth

epageamplifiesthemountainsm

onumentalpresence.Aslightove

r-

lapofmountainand

thetypeaboveitaddsdepth,pushingthegranitewallforward.

ElCapitan

YosemiteNationalPark

YOSE

MITE

90px

?

120px

1

2

3

4

ElCapitan

YosemiteNational

Park

PanoramaDefinitelynot

simple,incompara

bleEl

Capitanisacasewherean

entiremountaino

fgran-

iteisthefocalpoint.We

couldcrop,butthisimage

benefitsfromitsd

istant

vantagepoint,sca

leand

surroundingdetail.Adding

thegreenbarseparates

imagesfromtext,

limiting

thecomplexity.


15/16

Before&After|www.ba

magazine.com

4of5


0641PixTrix2:Web

graphics

Here,anexcitingimageisweakenedbyexcessivecontrast,amonochromatic

colorcast,lackoffocalp

ointandabusybackground

.Rescueitbyusingtype

tosupplementthepicture:

INTERVIEW

TONY

PEREZ

SKATEMAG

2

3

4

1

FocalpointfirstCroptightly

togivetheskateboarder

asmuchpresenceaspossible

(1).Notethetextured

backgroundisbusybutvisuallyinteresting.Youcan

amplifyitseffectbyusingasim

ilarlytexturedtypeface

(2).Theresultisartisticbutnoteasytoread.Toremedy

this,replacethebackgroundw

ithhigh-contrastblack(3)

whileretainingthetexturedtype.Toretaintheimproved

visibilityandthebackgroundte

xture,usethetextureto

fillthedistressedtypeface(4).

Usetexttosupp

lementanimage

Allcontacts

Save

10%

INTERVIEW

TONY

PEREZ

SKATEMAG

REGIST

ER

FORFA

LL

CLASSE

S

WeberUniversity

YOS

EM

ITE

YOSE

MITE

Typ

efaces

1(a

b)TrajanProRegular|a)13.5/16

pt

b)

7.5pt

2(a

c)Sabotage|a)17pt,b)31/11pt

c)

11pt

3(a

b)HelveticaNeueStdUltraLight

a)

31/26.5pt,b)15pt

4Cl

arendonBold|15pt

5ClarendonLight|8pt

6(a

b)ITCCheltenhamBoldCond

a)

37pt,b)12pt

7ITCCheltenhamBook|18pt

Images

8(a

k)iStockphoto.com|

a

b

c

d

e

f

g

h

i

j

k

Articleresources

9

Colors

C30M50Y90K0

C25M35Y95K20

C10M40Y53K40

C50M30Y70K30

C0M0Y0K45

9

ElCapitan

YosemiteNationalForest

12

10

Imagerow8ej(lefttoright)

11

12

13

5

4

6a

8d

6b

8a

1b

1a

2a

11

13

2c

10

2b

3a

3b

8c

7

8b

8k


16/16

Before&After|www.ba

magazine.com

5of5


0641PixTrix2:Web

graphics

Before&Aftermag

azine

Before&Afterhasbee

nsharingitspracticalapproach

tographicdesignsince1990.Becauseourmodernworld

hasmadedesignersofusall(readyornot),Before&

Afterisdedicatedtom

akinggraphicdesignunderstand

-

able,usefulandevenfunforeveryone.

JohnMcWadePublis

herandcreativedirector

GayeMcWadeAssoc

iatepublisher

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

Copyright2006Be

fore&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-mailofnewarticlesas

theybecomeavailable,goto

http://www.bamagazine.com/email

before and after 0641

Documents