easy designcover patterns - · pdf filea ratio of 1:4 is just about right. c annual meeting b...

Continued

Before&After ®

Easy cover patterns 0606

XiBAmagazine.com U

patternseasy cover

Design

Using this step-and-repeat technique, you can make artistic covers in no time! Continued

http://www.bamagazine.com

http://www.bamagazine.com/email/ba3atR



Before&After

2 of 11

®


XiBAmagazine.com U

Design easy cover patternsUsing this step-and-repeat technique, you can make artistic covers in no time

The look of a cover sets the tone, conveys the character and clues the reader to the value (or not) of what’s behind it. Here’s a way to make cover designs out of nothing except a pen and rectangle (or ellipse) tool and some type. The technique is called step and repeat; you create one object such as a circle, repeat it across your page until it becomes a pattern, then add your words. The variations? Endless. You’ll see.

Annual Meeting Sperry Equipment CorporationAgenda and program notes

May 17, 2005Johnston Hall

2005Your Guide to ServicesGarbageGreen wasteRecyclingNeighborhood cleanup

City of Citrus HeightsWaste Collection & Recycling

Sofia’sCafe

On the Mall

NATURAL HISTORYDavid Klinckner, Ph.D., Lecturer

T Th • 7 p.m.– 9 p.m.





Before&After

3 of 11

®


Easy cover patterns 3 of 11 XiBAmagazine.com U

Fill a field with circles that just touch. Group.

Copy the left column, and move the copy a half-col-umn to the right. Recolor. Set the opacity to, say, 50%, then step and repeat across the field. Group.

Repeat from the top down, different color, 50% opacity. Group.

Remove the corner circles. Draw a white, translucent circle for the title pane, and just like that, you have a harmonious pattern made entirely of circles.

Fun with circlesCreate a decorative pattern by overlapping translucent circles. Circles make especially good patterns because of their smooth curves and seamless interaction.





Before&After

4 of 11

®



ColorOpposite colors create striking patterns, while similar colors harmonize softly. The amount of opacity, or translucency, determines how much the colors mingle.

Sofia’sCafe

On the Mall

Translucency creates the interaction between circles. By modifying even one setting, you can get very different looks from the same shapes.

C90M10Y90K40

C0M65

Y100K0

C80M100

Y0K0

50% opacity

40% opacity

40% opacity

C0M65

Y100K0

50%Differentcolor, sameopacity

Same color, more opacity

90%50%





Before&After

5 of 11

®



Same circles, different lookTurn those flowery, see-through circles into a conservative, low-key texture. Delete the color fill, add a white stroke, then fill the background with a muted hue.

Start with your circle pattern, add a perimeter of cir-cles that bleeds beyond the page edge, Select All, and delete the color fills. To the circles apply a white stroke, opacity 30%. Finish with a muted background color.

While a circular title pane harmonizes with the circles, here, the rectangular pane har-monizes with the page. Together, their large, squarish shapes domi-nate the small, busy circles and push them into the background where we want them. Set the rectangle at 70% opacity, which allows a hint of pat-tern to show through and glues the title pane to the page.





Before&After

6 of 11

®



Focal pointAdd your text, then embellish the result with a photographic object. Its depth and realism make an arresting focal point atop the flat, artificial field.


T Th • 7 p.m.– 9 p.m. NATURAL HISTORYDavid Klinckner, Ph.D., Lecturer

T Th • 7 p.m.– 9 p.m.

Low-key and conservative means no motion, which you will achieve by centering your type. Set the title in a bold, condensed face—nothing decorative—above small, supporting copy. Note the UPPER-CASE title block forms a rectangle atop a rectangle; its centered position is symmetrical and static, which gives the cover a feeling of permanence and importance.

1

2

Now add the zing with a photographic interrupter. Different from the field in every way, the photo is realistic, dimensional, organic and off center. Its one similarity is its shape. By straddling the title pane, the photo interrupts the line and links the fields together. Cool stuff.





Before&After

7 of 11

®



Extreme, top-of-the-page headline puts tension onto an otherwise placid page. Common spacing and points of alignment make this design work. (A) Page margins are defined by the x-height of the headline. (B) Small type fits within large. (C) Vertical alignment ties text to the pattern beneath.

High-tech circles

A field of small, low-contrast circles creates a geometric pattern with cold, high-tech overtones. Minimalist type in high-contrast white draws the eye immediately.



1/4

Spacing is key to a good pattern—too little and the circles clump; too much and they drift apart. A ratio of 1:4 is just about right.

C

BAnnual Meeting

A

AA

A

Sperry Equipment CorporationAgenda and program notes






Before&After

8 of 11

®



Pinstripes divide the page

Vertical pinstripes convey quiet dignity, and they’re very easy to make. This simple pattern shrinks the field from a full page to a half, which is easier to design.

Repeating vertical lines divide the space in half, neatly pushing the text into one, easy-to-read column. Set your type straight down that column, one item after another, aligned left, differ-entiating elements only by size and color.



Big

Medium

Small







Before&After

9 of 11

®



Sofia’sCafe

On the Mall


T Th • 7 p.m.– 9 p.m.

Layout

We relate to a page the same way we relate to a face; our eyes rest at eye level, which is a natural place for a headline or title plate.



Did you ever notice that the human head is the same size* and proportions as a letter-size page? It’s why on a printed page we’re more comfortable with portrait orientation than with landscape and why we look first at eye level.

*No, not everyone’s head, but they’re close enough that it governs everyone’s perception.





Before&After

10 of 11

®


XiBAmagazine.com UEasy cover patterns 10 of 11




T Th • 7 p.m.– 9 p.m.

Sofia’sCafe

On the Mall

6Typefaces

1 Kon Tiki Enchanted | 90/70 pt

2 Trajan Regular | 18 pt

3 Cheltenham FB Bold Condensed | 65 pt

4 ITC Cheltenham Light | 17/22 pt

5 Helvetica Neue Bold | 24 pt

6 Helvetica Neue Roman | 9/13 pt

7 (a-d) Adobe Garamond Regular a) 66 pt, b) 36/36 pt, c)19/23 pt, d) 24/28 pt

Images

8 Photos.com

Article resources



1

2

5

7a34

8

Colors

9

10

11

14

13

14

C0 M65 Y100 K0

C80 M100 Y0 K0

C90 M10 Y90 K40

C100 M50 Y0 K0

C30 M25 Y55 K10

C0 M100 Y100 K4012

9

10

11

12

13

14

7b

7c

7d




http://www.photos.com/en/search/close-up?oid=2838332&hoid=926e3e79817ef98167a70369a1955d6b&from_pd=Y

http://www.veer.com/products/typedetail.aspx?image=JBT0000027

http://store.adobe.com/type/browser/F/TRAJ/F_TRAJ-10005000.html

http://www.fontbureau.com/fonts/CheltenhamFB

http://store.adobe.com/type/browser/F/CHTQ/F_CHTQ-10003000.html

http://store.adobe.com/type/browser/F/HLNQ/F_HLNQ-10075000.html

http://store.adobe.com/type/browser/F/HLNQ/F_HLNQ-10055000.html

http://store.adobe.com/type/browser/F/GARA/F_GARA-10005000.html


Before&After

11 of 11 | Printing formats

®


XiBAmagazine.com UEasy cover patterns 11 of 11

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 directorGaye McWade Associate publisherVincent Pascual Staff designerDexter Mark Abellera Staff designer

Editorial board Gwen Amos, Carl Winther

Before & After magazine323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995E-mail [email protected] www http://www.bamagazine.com

Copyright ©2005 Before & After magazine, ISSN 1049-0035. All rights reserved

You may pass this article around, but you may not alter it, and you may not charge for it. You may quote brief sections for review. If you do this, please credit Before & After magazine, and let us know. To feature free Before & After articles on your Web site, please contact us. For permission to include all or part of this article in another work, please contact us.

Subscribe to Before & After

Did you enjoy this article? Subscribe, and

become a more capable, confident designer

for pennies per article. To learn more, go to

http://www.bamagazine.com/Subscribe

E-mail this article

To 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




http://www.bamagazine.com/Subscribe


mailto:[email protected]

http://www.bamagazine.com/email







Before&After ®

Back | Paper-saver format

XiBAmagazine.com U

For paper-saver format Print: (Specify pages 13–18)

For presentation format Print: (Specify pages 1–11)

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

SavePresentation format or

Paper-saver format




http://www.bamagazine.com/TOC


Be

fore

&A

fter | w

ww

.bamagazine.com

1 of 6

Ea

sy cove

r pa

ttern

s 06060606

Ea

sy cove

r pa

ttern

s

patternseasy cover

Design

Usin

g this step

-and

-repeat

techn

iqu

e, you can

make artistic

covers in n

o time!

Th

e loo

k of a cover sets th

e ton

e, con

veys the ch

aracter and

clues th

e reader to

the

value (o

r no

t) of w

hat’s b

ehin

d it. H

ere’s a way to

make cover d

esigns o

ut o

f no

thin

g excep

t a pen

and

rectangle (o

r ellipse) to

ol an

d so

me typ

e. Th

e techn

iqu

e is called

step an

d rep

eat; you

create on

e ob

ject such

as a circle, repeat it acro

ss you

r page u

ntil

it beco

mes a p

attern, th

en ad

d yo

ur w

ord

s. Th

e variation

s? En

dless. Yo

u’ll see.

An

nu

al Meetin

gS

perry E

qu

ipm

ent C

orp

oratio

nA

genda and

program

notes

May 17, 2005

Johnston Hall

2005Your G

uide to ServicesG

arbageG

reen waste

Recycling

Neighborhood cleanup

City of

Citrus H

eightsW

aste Collection

& R

ecycling

Sofia’s

Cafe

On

th

e Ma

ll

NATURAL HISTORYD

avid K

linckner, Ph.D., Lecturer

T Th • 7 p.m.–

9 p.m.

Be

fore

&A

fter | w

ww

.bamagazine.com

2 of 6

Ea

sy cove

r pa

ttern

s 06060606

Ea

sy cove

r pa

ttern

s Fill a

fie

ld w

ith circle

s th

at ju

st tou

ch. G

rou

p.

Co

py th

e le

ft colu

mn

, an

d

mo

ve th

e co

py a

ha

lf-col-

um

n to

the

righ

t. Re

colo

r. S

et th

e o

pa

city to, say,

50%, th

en

step

an

d re

pe

at

acro

ss the

fie

ld. G

rou

p.

Re

pe

at fro

m th

e to

p

do

wn

, diffe

ren

t colo

r, 50%

op

acity. G

rou

p.

Re

mo

ve th

e co

rne

r circles.

Dra

w a

wh

ite, tran

sluce

nt

circle fo

r the

title p

an

e, a

nd

just lik

e th

at, yo

u

ha

ve a

ha

rmo

nio

us p

atte

rn

ma

de

en

tirely o

f circles.

Fun

with

circles

Create a d

ecorative p

attern b

y overlapp

ing tran

slucen

t circles. Circles m

ake especial-

ly goo

d p

atterns b

ecause o

f their sm

oo

th cu

rves and

seamless in

teraction

.

Co

lor

Op

po

site colo

rs create striking p

atterns, w

hile sim

ilar colo

rs harm

on

ize softly.

Th

e amo

un

t of o

pacity, o

r translu

cency, d

etermin

es how

mu

ch th

e colo

rs min

gle.

Sofia’s

Cafe

On

th

e Ma

ll

Tran

sluce

ncy cre

ate

s th

e in

tera

ction

be

twe

en

circle

s. By m

od

ifying

eve

n

on

e se

tting

, you

can

ge

t ve

ry diffe

ren

t loo

ks fro

m

the

sam

e sh

ap

es.

C90

M10

Y90K40

C0

M65

Y100K0

C80

M100Y0K0

50% o

pa

city

40% o

pa

city

40% o

pa

city

C0

M65

Y100K0

50%D

iffere

nt

colo

r, sam

eo

pa

city

Sa

me

colo

r, m

ore

op

acity

90%50%

Be

fore

&A

fter | w

ww

.bamagazine.com

3 of 6

Ea

sy cove

r pa

ttern

s 06060606

Ea

sy cove

r pa

ttern

s Sam

e circle

s, diffe

ren

t loo

kTu

rn th

ose fl

owery, see-th

rou

gh circles in

to a co

nservative, low

-key texture. D

elete the

colo

r fill, ad

d a w

hite stro

ke, then

fill th

e backgro

un

d w

ith a m

uted

hu

e.

Sta

rt with

you

r circle p

atte

rn, a

dd

a p

erim

ete

r of cir-

cles th

at b

lee

ds b

eyo

nd

the

pa

ge

ed

ge, S

ele

ct All, a

nd

d

ele

te th

e co

lor fi

lls. To th

e circle

s ap

ply a

wh

ite stro

ke,

op

acity 30%

. Fin

ish w

ith a

mu

ted

ba

ckg

rou

nd

colo

r.

Wh

ile a

circula

r title

pa

ne

ha

rmo

nize

s with

th

e circle

s, he

re, the

re

ctan

gu

lar p

an

e h

ar-

mo

nize

s with

the

pa

ge.

Tog

eth

er, th

eir la

rge,

squ

arish

sha

pe

s do

mi-

na

te th

e sm

all, b

usy

circles a

nd

pu

sh th

em

in

to th

e b

ack

gro

un

d

wh

ere

we

wa

nt th

em

. S

et th

e re

ctan

gle

at

70% o

pa

city, wh

ich

allo

ws a

hin

t of p

at-

tern

to sh

ow

thro

ug

h

an

d g

lue

s the

title

pa

ne

to th

e p

ag

e.

Focal p

oin

tA

dd

you

r text, then

emb

ellish th

e result w

ith a p

ho

tograp

hic o

bject. Its d

epth

and

realism

make an

arresting fo

cal po

int ato

p th

e flat, artifi

cial field

.

NATURAL HISTORYD

avid K


T Th • 7 p.m.–

9 p.m.

NATURAL HISTORYD

avid K


T Th • 7 p.m.–

9 p.m.

Low

-ke

y an

d co

nse

rvative

me

an

s n

o m

otio

n, w

hich

you

will a

chie

ve

by ce

nte

ring

you

r type. S

et th

e

title in

a b

old

, con

de

nse

d fa

ce—

no

thin

g d

eco

rative

—a

bo

ve sm

all,

sup

po

rting

cop

y. No

te th

e U

PP

ER

-C

AS

E title

blo

ck fo

rms a

recta

ng

le

ato

p a

recta

ng

le; its ce

nte

red

p

ositio

n is sym

me

trical a

nd

static,

wh

ich g

ives th

e co

ver a

fee

ling

of

pe

rma

ne

nce

an

d im

po

rtan

ce.

12

No

w a

dd

the

zing

with

a

ph

oto

gra

ph

ic inte

rrup

ter .

Diffe

ren

t from

the

fie

ld

in e

very w

ay, th

e p

ho

to

is rea

listic, dim

en

sion

al,

org

an

ic an

d o

ff cen

ter. Its

on

e sim

ilarity is its sh

ap

e. B

y strad

dlin

g th

e title

p

an

e, the

ph

oto

inte

rrup

ts th

e lin

e a

nd

link

s the

fi

eld

s tog

eth

er. C

oo

l stuff.

Be

fore

&A

fter | w

ww

.bamagazine.com

4 of 6

Ea

sy cove

r pa

ttern

s 06060606

Ea

sy cove

r pa

ttern

s

Extreme, top-of-the-page headline puts tension onto

an otherwise placid page. C

omm

on spacing and points of alignm

ent make this design w

ork. (A) Page m

argins are defined by the x-height of the headline. (B

) Small

type fits within large. (C

) Vertical alignment ties text to

the pattern beneath.

Hig

h-te

ch circle

s A

field

of sm

all, low-co

ntrast circles creates a geo

metric p

attern w

ith co

ld, h

igh-tech

overto

nes. M

inim

alist type in

high

-con

trast wh

ite draw

s the eye im

med

iately.

Annual M

eetingS

perry E

quip

ment C

orp

oratio

nA

genda and

program

notes

May 17, 2005

Johnston Hall

1/4

Sp

acin

g is k

ey to

a g

oo

d

pa

ttern

—to

o little

an

d th

e

circles clu

mp

; too

mu

ch

an

d th

ey d

rift ap

art. A

ratio

o

f 1:4 is just a

bo

ut rig

ht.

C

BA

nnual Meeting

A

AA

A

Sp

erry Eq

uipm

ent Co

rpo

ration

Agend

a and p

rogram notes

May 17, 2005

Johnston Hall

Pin

stripe

s divid

e th

e p

age

Vertical pin

stripes co

nvey q

uiet d

ignity, an

d th

ey’re very easy to m

ake. Th

is simp

le p

attern sh

rinks th

e field

from

a full p

age to a h

alf, wh

ich is easier to

design

.

Re

pe

atin

g ve

rtical lin

es d

ivide

the

spa

ce in

ha

lf, ne

atly p

ush

ing

th

e te

xt in

to o

ne, e

asy-to

-rea

d co

lum

n. S

et yo

ur typ

e stra

igh

t d

ow

n th

at co

lum

n, o

ne

item

afte

r an

oth

er, a

lign

ed

left, d

iffer-

en

tiatin

g e

lem

en

ts on

ly by size

an

d co

lor. 2004

Your Guide

to ServicesG

arbageG

reen waste

Recycling


City of

Citrus H

eightsW

aste Collection

& R

ecycling

Big

Me

diu

m

Sm

all

2005Your G

uide to ServicesG

arbageG

reen waste

Recycling


City of

Citrus H

eightsW

aste Collection

& R

ecycling

Be

fore

&A

fter | w

ww

.bamagazine.com

5 of 6

Ea

sy cove

r pa

ttern

s 06060606

Ea

sy cove

r pa

ttern

s

Sofia’s

Cafe

On

th

e Ma

ll

NATURAL HISTORYD

avid K


T Th • 7 p.m.–

9 p.m.

Layou

t W

e relate to a p

age the sam

e way w

e relate to a face; o

ur eyes rest at eye level,

wh

ich is a n

atural p

lace for a h

eadlin

e or title p

late.

2005Your G

uide to ServicesG

arbageG

reen waste

Recycling


City of

Citrus H

eightsW

aste Collection

& R

ecycling

Did

you

eve

r no

tice th

at th

e h

um

an

he

ad

is the

sam

e size

* an

d p

rop

ortio

ns

as a

lette

r-size p

ag

e? It’s w

hy o

n a

prin

ted

pa

ge

we

’re m

ore

com

forta

ble

with

p

ortra

it orie

nta

tion

tha

n w

ith la

nd

scap

e a

nd

wh

y we

loo

k fi

rst at e

ye le

vel.

*No, not everyone’s head, but they’re close enough that it governs everyone’s perception.

Annual M

eetingS

perry E

quip

ment C

orp

oratio

nA

genda and

program

notes

May 17, 2005

Johnston Hall

NATURAL HISTORYD

avid Klinckner, Ph.D

., LecturerT Th • 7 p.m

.–9 p.m

.

Sofia’s

Cafe

On

th

e Ma

ll

6Typ

efa

ces

1 Kon Tiki Enchanted | 90/70 pt

2 Trajan Regular | 18 pt

3 Cheltenham

Bold C

ondensed | 65 pt

4 ITC C

heltenham Light | 17/22 pt

5 Helvetica N

eue Bold | 24 pt

6 Helvetica N

eue Rom

an | 9/13 pt

7 (a-d

) Adobe G

aramond R

egular a) 66 pt, b) 36/36 pt, c)19/23 pt, d) 24/28 pt

Ima

ge

s

8 Photos.com

Article

reso

urce

s

2005Your G

uide to ServicesG

arbageG

reen waste

Recycling


City of

Citrus H

eightsW

aste Collection

& R

ecycling

12

57a348

Co

lors

91011

1413

14

C0

M65

Y100

K0

C80

M100

Y0

K0

C90

M10

Y90

K40

C100

M50

Y0

K0

C30

M25

Y55

K10

C0

M100

Y100

K4012

91011121314

7b7c7d

Be

fore

&A

fter | w

ww

.bamagazine.com

6 of 6

Ea

sy cove

r pa

ttern

s 06060606

Ea

sy cove

r pa

ttern

s

Be

fore

& A

fter m

ag

azin

e

Befo

re & A

fter has b

een sh

aring its p

ractical app

roach

to

graph

ic design

since 1990. B

ecause o

ur m

od

ern w

orld

h

as mad

e design

ers of u

s all (ready o

r no

t), Befo

re &

After is d

edicated

to m

aking grap

hic d

esign u

nd

erstand

-ab

le, usefu

l and

even fu

n fo

r everyon

e.

Joh

n M

cWa

de

Pu

blish

er and

creative directo

rG

ay

e M

cWa

de

Asso

ciate pu

blish

erV

ince

nt P

ascu

al Staff d

esigner

De

xte

r Ma

rk A

be

llera

Staff design

er

Edito

rial bo

ard G

we

n A

mo

s, Ca

rl Win

the

r

Be

fore

& A

fter m

ag

azin

e323 Lin

coln

Street, Ro

seville, CA

95678 Te

lep

ho

ne

916-784-3880 Fax 916-784-3995E

-mail m

ailbo

x@b

amagazin

e.com

w

ww

http

://ww

w.b

amagazin

e.com

Co

py

righ

t ©2005 B

efo

re &

Afte

r ma

ga

zine, IS

SN

1049-0035. A

ll righ

ts rese

rve

d

You

may p

ass this article aro

un

d, b

ut yo

u m

ay no

t alter it, an

d yo

u m

ay no

t charge fo

r it. You

may q

uo

te brief

section

s for review

. If you

do

this, p

lease credit B

efore

& A

fter magazin

e, and

let us kn

ow

. To featu

re free B

efore &

After articles o

n yo

ur W

eb site, p

lease con

tact u

s. For p

ermissio

n to

inclu

de all o

r part o

f this article in

an

oth

er wo

rk, please co

ntact u

s.

Su

bscrib

e to

Be

fore

& A

fter

Did

you

enjoy th

is article? Sub

scribe, an

d

beco

me a m

ore cap

able, co

nfi

den

t design

er

for p

enn

ies per article. To

learn m

ore, go

to

http

://ww

w.b

amagazin

e.com

/Sub

scribe

E-m

ail this article

To p

ass alon

g a free cop

y of th

is article to

oth

ers, click here.

Join

ou

r e-list

To b

e no

tified

by e-m

ail of n

ew articles as

they b

ecom

e available, go

to

http

://ww

w.b

amagazin

e.com

/email

easy designcover patterns - · pdf filea ratio of 1:4 is just about right. c annual meeting b...

Documents