Post on 14-Apr-2018
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
7/29/2019 Before and After 0641
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
7/29/2019 Before and After 0641
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
CLASSESWeber University
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
CLASSESWeber University
Online class registration
involves a lot of hard-
ware, but dont show it
all. Instead . . .
Pix Trix 2 3of9
7/29/2019 Before and After 0641
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
7/29/2019 Before and After 0641
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
7/29/2019 Before and After 0641
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/29/2019 Before and After 0641
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
7/29/2019 Before and After 0641
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
CLASSESWeber University
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
7/29/2019 Before and After 0641
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 mailbox@bamagazine.com
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 0641
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
7/29/2019 Before and After 0641
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.
Format: Landscape
Page Size: Fit to Page
Save
Presentation format or
Paper-saver format
7/29/2019 Before and After 0641
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.
7/29/2019 Before and After 0641
13/16
Before&After|www.bamagazine.com
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%
7/29/2019 Before and After 0641
14/16
Before&After|www.bamagazine.com
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.
7/29/2019 Before and After 0641
15/16
Before&After|www.ba
magazine.com
4of5
PixTrix2:Webgraphics0641
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
7/29/2019 Before and After 0641
16/16
Before&After|www.ba
magazine.com
5of5
PixTrix2:Webgraphics0641
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