print issue 07

7/27/2019 Print Issue 07

1/16

W.GER

MANY

LINK

SHAN

D

LEFTHA

NDED

HOW TO DRAW THE STEELY LOOKOF BRUSHED METALHOW TO DESIGN A FLYER THATSELLS A PRODUCT

NEW HOT LOOKS! LINES, CIRCLES,SQUIGGLES AND DOTS ENERGIZEALMOST ANY DESIGN!HOW TO MAKE A TRANSPARENTBACKGROUND SHADOWMUCH MORE, AS USUAL!

Illustration by Andy Markley

Vol. 2 No. 1 1

How to design cool stuff


2/16

TM2

THE MAILBOX

THATS A MOIR!Just received Vol. 1, No. 6 today and ap-preciate it exceedingly. However, in thearticle titled How do you say Peignot?,why didnt you mention the famous songby Tony Bennett and other artists:

When the screens go awry,And the plaid hits the eye,Thats a moir . . .

Carl ParsonsGreensboro, NC

I loved your type pronunciation guidenow I dont have to mumble when I sayBenguiatbut you left out Goudy!

John SisemoreMinneapolis, MN

Frederic Goudy, who created such facesas Goudy Oldstyle and CopperplateGothic, pronounced his name GOW-dee.

READERS FIRSTMy agency is doing a promotional news-

ity]and progress toward a new client.Indulge in self-absorbed chit-chat and thetime you waste will be your own.)

Then you can think about design.The best design is one which imparts

the same visual energy and excitement asthe words.

But thats for later; get the heart andsoul first; then youll have something towork with.

COLOR IN A BLACK-AND-WHITE WORLDI love Before & Afterbut you publish somuch color stuff! How about some arti-cles for us little people working in blackand white?

Bruce JohnstonHot Springs, AR

I publish in color for vibrancy and clarity.

letter. In it, well talk about our desktoppublishing capabilities and other note-worthy things about our business. Whatshould we look for in a design? Does onekind of design offer more for our efforts?

Donna MerrillTerre Haute, IN

Stop!Before you even think about design,

understand that an unsolicited newslet-ter which does not address itself directlyto the recipients interests for the recipi-ents (obvious) benefit will not be read,no matter how it looks.

First things first: To interest othersin your business, you must first be (very)interested in theirs. Who are they? Whatdo they need? What do they care about?If youre serious about this, youll find itsthe nature of yourreaders business, notyours, that determines the tone, styleand content of your newsletter.

(This is an all-or-nothing proposition,too: Add real value to the readers busi-ness and youll earn respect [and author-

FREEHAND STEP-BY-STEP

1. DRAW THE FOUNDATION

Open FreeHand and turn on Snapto grid. Atop the object you wishto fill, draw several rectangles ofdifferent widths that touch eachother but do not overlap. Save.

Mr. Markley lives on a farm in Elizabeth, Indiana and works as a free-lance designer, illustrator and consultant for clients from San Francisco to Brussels. Hehandles much of his work via fax and modemjust me, the farm and an uplink, says he. He faxed his scissors unsolicited; next day they were on our cover.

This rich-looking, versatile effect simulatesthe sheen of brushed metal; I thought of it, infact, while cooking pasta and looking at thesurface of my stainless steel range. UseFreeHands graduated fills and Paste insidefunctions to master it easily:

Text and illustrations by Andy Markley

However, except for the articles specifi-cally about color (there have been two),the artwork in Before & Afteris com-pletely at home in black and whitejustsubstitute shades of gray for the colors!


3/16

TM

Ti Ti Ti

Ti Ti Ti

THE INDISCERNIBLE DIFFERENCES

It seems to my amateur eyes that thedistinctions between some typefaces areso slight it could make no practical differ-ence which one is used. Do you agree, oram I missing something important?

Lorraine JarvisLima, OH

I agree. I once asked a cabinetmaker tomake a laminated countertop white.I

was astonished to be presented with twodozen choices of white! Types like that.

TWO COLORS? YOU SURE?

Ive just become editor of the newsletterfor our office employees. I think it can beimproved; Im considering a budget in-crease for two-color printing. What othertips can you suggest?

Carla OrindaAzusa, CA

I dont think two-color printing is a goodway to spend in-house money; the extraink can seem to employees like an expen-sive frill. Unless your company is sharingits loot, its better to look like business.

Stick to black and white, or black onan attractive, textured paper. Publishpictures ofeveryonetheyll go fartherthan any design. Spell names correctly.Publish information that cannot be foundon the office grapevine. And stay attunedto the response. Many newsletters arebeing published unnecessarily.

HOT STUDENTS

I teach at a local community college andmy students are avid desktop publishers,even though they use older equipment.

The designs these kids turn out arevery impressivebetter, in my opinion,than a lot of professional work Ive seen.This has given rise to rather vigorous de-bate: How does one define professional?

Jerry DonovanLos Angeles, CA

A professional designer is someone whogets paid for it; it doesnt mean the workis very good. As you see, enthusiasm,perceptiveness, resilience and a playfulspirit go a long, long way.

To be fair, the professional faces hur-dles that a student does not: He must col-laborate with a real client in a real com-pany with a real deadline for real money,and it is the clients taste he must satisfy,not his own. This affects the product.

I mean, were talkingsubtle.Is one of these classic typefaces more influen-tial in a shopping decision? No more than thatnecktie or those earrings youre wearing.

THE MAILBOX includes letters, faxes and telephoneconversations. Address John McWade, Before & Af-ter, 331 J Street, Suite 150, Sacramento, CA 95814.

CASLON 540 JANSON TEXT BEMBO

ADOBE GARAMOND SABON GALLIARD

BEFORE & AFTER, HOW TO DESIGN COOL STUFF (ISSN 1049-0035), Vol. 2, No. 1, Feb. 1991. Before & After is a magazine of design and page layout for desktop publishers. It is published bimonthly by PageLab,Inc., 331 J Street, Suite 150, Sacramento, CA 95814-9671. Telephone 916-443-4890. Copyright 1991, PageLab, Inc. All rights reserved. Second-class postage paid at Sacramento, CA.

POSTMASTER: Send address change to: Before & After, How to design cool stuff, 331 J Street, Suite 150, Sacramento, CA 95814-9671. Subscription rate: $36 per year (6 issues). Canadian subscribersplease add $4 and remit in U.S. funds; overseas subscribers please add $18. Back issues: $10 each.Bulk subscriptions: 510: $33 each; 1120, $30 each; 2135, $27 each; 36 or more, $24 each. Bulksubscriptions will be entered under one name and mailed to a single address. The terms Before & After, How to design cool stuff, Xamplex and Type: The visible voice have trademarks pending.

2. MAKE TWO GRADUATED FILLSGraduate the first from White to60% gray, angle 0;name it Re-flect Up. Graduate the secondfrom 60% gray to White, angle0; name it Reflect Down.

3. MAKE THE METAL EFFECTFill your rectangles, left to right,alternating between Reflect Upand Reflect Down. When youvefilled them all, delete any outlinesyou may have. Groupand save.

5. PASTE INSIDESelect your original object andPaste inside. Cool, huh? Try thiseffect on a drop cap using Free-Hand 3.0s new Convert to pathstype function: instant metal lookin any typeface! Also try usingother angles and process colors.

4. ROTATERotate the group (here, 45). Ad-

just its position atop your originalobject, then Cutthe group . . .

White to 60% gray, angle 0

60% gray to White, angle 0


4/16

TM4

B&AADVERTISINGCLINIC

to put an advertisers message on paperwhen theres no time and no money.

But its allure can be quite deceptive.Why? Because its so easy to think cheapand miss whats obvious to others: thatbasking on that rickety, ten-cent page isnothing less than your companys expen-sive, irreplaceable image.

There is no assignment in graphic designmore discombobulating than the one tocreate a coherent, appealing advertise-

Mr. Mortensen was late for thehome show, and busy. Therewere trucks to rent, contractsto sign, furniture to arrange.

The new lines hadnt arrived.Was the flyer done yet? At least the

flyer would be easy: He had a beautifulproduct, one location, a simple message;what could go wrong?

Lots.The common, throwaway flyer is ad-

vertisings low man; it is most often used

AFTER Focused on the product

LOOK FAMILIAR?

Whats for sale here? A gazebo? A more?Furniture? A rental? Its hard totell, isnt it? The problem with this flyer isnt that its ugly (ugly ads can bevery effective salesmen, which drives designers nuts) but that the prod-uctthe item actually for saleis lost in the visual chatter. The retailerscrupulously avoided hype and carefully provided his stores location,phone number and even a map, but forgot that the product must comefirst!Once the reader decides he likes the product, hell find your store.

Whether you spend a little or a lot, the key to an advertisementthat sells is simple: Keep all eyes on the product.

How to design a low-budget

flyer that sells a product

ment. Nowhere else are so many differ-ent talents called for. Nowhere else arewords, pictures andpurposequite so in-terdependent. And nowhere else can theresults of your work be measured(gulp)in cold cash.

Thats a serious challenge!But nowhere else, either, will your

clear thinking, good planning and carefulwork pay off so very tangibly!

What follows are the fundamentalsthat every advertiser should know.

BEFORE Whats for sale here?


5/16

TM

,

,

Before you begin . . .

IN REAL LIFE . . .

If you walked into Mr. Mortensens store, this is what youd see: a line of beautiful, fiberglassfurniture that looks like wicker.

Neat, isnt it? Surrounded by such nice stuff, its easy to understand how, in his mindseye, Mr. Mortensens readers could see the product as clearly as he.

But to an ad designer, reality, incredibly, can be misleading! How? Because while you cansee and touch the product, the reader experiences nothing except whats on paper.Your goal,therefore, is, through words, pictures and composition, to make your product speak for itself.

how obvious its qualities are to you (theJoneses dont own everything!) and noth-ing shreds money faster than trying tochange their minds. The way to profits isto lavish your attention on those who aremost likely to be interested.

Maintain your poise. We share a trou-blesome tendency to weigh our negativesmore heavily than our positives (its be-cause were people). But comparing our-selves to others usually results in overre-

action, which typically takes the form ofTALKING LOUDER or talkingfasterand-crowdingmorein.Maintain your poise.Mr. Mortensens furniture is excellent;we can sell that. A shopper isnt lookingfor a store; hes looking for a product.

Be cool. Your audience is just like youintelligent and preoccupied. Visualize abusiness meeting: Dress well. Be pre-pared. Be clear. Make your point. Beconcise. Dont waste their time. Watch:

Advertising would be the same as anyother kind of design except for two es-pecially distorting influences: self-im-age (we tend to see ourselves whileshoppers see a product) and the moneyat stake. It will pay to consider:

No one shops everywhere. Many peo-ple will never buy your product, no matter


6/16

TM6

1. Start by setting a stage

If you think of your sheet of paper as astagelike a theater stageyoull be inthe right frame of mind. Why? Becausea good advertisement is theater:You in-tend to draw all eyes to your product.

Because our product was photographedon a black background, the stage hasbeen darkened to match. This isnt nec-essary but I wanted a sense of drama,and black is a zero-cost way to get it.

2. Place your product

front and center

a b c

Place your product on the page inthe same way that youd show it offto your friends at a backyard bar-becue: Set it smack on the patiowhere it can be seen and touched.

Help! In making an ad you are giving a public performance, and a vast audience canbe frightening (and destabilizing) to contemplate. You may find it helpful to visualize

your best friends and imagine showing your product to them. Why? Because thatsjust who we are!that faceless audience, really, is made of neighbors just like youand me. (Complainers arent invited; your friends dont like them either.) A good saleis a cheery, win-win transaction; think of your advertising in this way.

Below: It is tempting to play witha design in an effort to add onesunique signature. Resist! In prod-uct advertising, the product is

the show. Dont tilt the picture or distort itin any way. Dont add ruffles and flourishes.Dont make it tiny, thinking a shopper wouldprefer to read about it. And dont crop it likean art poster; a shopper will ignore it (or

worse, believe you have something to hide).

No!

No!

Picture your product clearly!To do this properly, you need a photograph.The factory is often able to furnish a goodpicture (thats where this one came from);call them. Failing that, you may hire a pho-tographer who specializes in products(check the Yellow Pages). (You may enjoy

attending a real photo shoot; a productphotographer is very skilled in lightingafascinating artand can usually bid a jobquite accurately.)

Remember, if a shopper cannot seeyour product clearly, he will not buy it.

B&A ADVERTISING CLINIC

A hairline border frames the stage (thinkof it as the curtain) and directs the read-ers eye inward. Such a border shouldbe subtle; a fat or bright border will drawattention to itself, away from the stage.


7/16

TM

3. Add a headline . . .

Rule of thumb #1: A short headline ispreferable to a long one.

In oral conversation we yak on and on withtwenty words when one or two would do. Aslisteners, however, we are bored quickly.Shoppers want to like your productbut theycant tolerate much blather. English is a rich,descriptive language; theres usually a perfectword. Finding it will pay off.

Rule of thumb #2: Avoid catchy slogans.Why?1) You wont be able to think one up.2) If you do, it will be corny.3) Slogans do not sell products. Would you

buy an Oldsmobile because its part of thenew generation? Silly. Youd buy an Olds be-

cause it looks good, its built well, its pricedright andespeciallyit suits your needs.

Elucidate! Once your product is onstage, add words to reveal detail andnuance and direct the reader to virtuesor usesof the product that are notevident just by looking at it.

Shoppers enjoyseeing and experiencing newproducts. (We like to be thrilled, basically.)Youll write your best headlines if you think ofyour readers as eager listeners.

Think: What is the first thing I would tell mybest friends about this product?I suggest youbegin with the feature you find the most excit-ing. In this case, its that although the furniturelooks like wicker, it is actually made of durablefiberglass. If your product is more ordinaryascrewdriver, perhaps, or a set of white bath

towelsthink: What do I like most about thisproduct? Why would I buy it?Explain that.

4. . . . then your text

As you write your text, bear in mindthat a shopper will read it ifbut onlyifthe product and its headline haveinterested him sufficiently. As you com-pose it, therefore, have confidence thatthis reader is interested. Keep your eyeon the product. Enrich his knowledge.Add detail. Remind him of benefits.Suggest cool uses. Close with a call foraction; we tend to procrastinate.

What typestyles?

Always appropriate: The classicsUnderstatementa classic mark of confidence

allows the product to shine. Match headlineand text in a font designed for text (the head-line should be kerned to tighten it). Some ofthe best: Times, Century, Garamond, Caslon.

Not so good: DecorativesBauhaus is a heavily styled typefacepart of

a class called decorativeswhose vigorouspresence is a scene-stealer. This diverts thereader from your product. Decoratives are bet-ter for posters than product ads.

Cool: Styles that express their wordsHere, beautiful typestyles reflect their words.

This technique is best in understatement; itwill fail if the connection is obvious (likeliest tooccur if the type is bold or very stylized). Re-member, the goal is to reinforce the product.

Rule of thumb #3: Be kind.It is the reader, not you, who is in the driversseat. No matter how big you are, nothing willhappen unless the reader wants it to happen(youll be dismissed with the turn of a page).Respect that. A proper advertisement is a dig-nified product presentation, not a stick-up.

It is an American fantasy to think a shoppercan be compelled to buy a product. As shop-pers, we actually sell ourselves.

SNELL ROUNDHAND, FUTURA HEAVYBAUHAUS HEAVYBAUHAUS HEAVYTIMES

Wicker beautiful.Fiberglass strong.

WICKER BEAUTIFUL.

FIBERGLASS STRONG.


8/16

TM8

5. Add your logo

B&A ADVERTISING CLINIC

Present yourself lastand small. Tworeasons: You are the last link in the sale(remember, we shop for products, notstores), and small says confident.

Right: If you lack a logo, a good alternative isto set your name in a style matching (or similarto) the headline. This low-key treatment makesan implicit connection between the store andthis productand is most appropriate for thosebusinesses with narrow product lines: jewelers,florists, specialty boutiques and so forth.

A logo (far right) sets a somewhat differenttone: It serves as a label and implies that thisproduct is one of a variety carried by the store.

Note how the finished flyer is divided intofour, easily digested piecesheadline, photo,

text and store nameeach of which interact tomake a coherent, overall statement.

Before: A mapmade of sticksThis map is the kindone would sketchwith a pencil. Biggestproblem? Thin blacklines, boxes andlarge type all lookalike and clamor for attention; a readermust spend time just disciphering thesymbols! Poor craftsmanship and incon-sistent typesetting amplify the noise.

After: Gray back-ground, white streets

This way is betterandeasier. Rotate north up.Make background 50%

gray; set movement corri-dors in white and build-ings in blackthis cre-ates high visual contrastbetween where youregoingand how you getthere. Fat streets couldbe traveled on: Typesetnames in uppercase (why? no ascenders or descenders) withinthem; streets and their names now function as single units.And delete Elk Grove Park; except in extreme cases, the onlypoint on a simple map should be the destination. If not for theangled type, this map could be built in PageMaker.

A map is an underused asset. Especially thoughtfulof shoppers are maps of labyrinthine parking gar-ages, one-way streets, off-the-beaten-path entry-ways, things like that. In Mr. Mortensens case, justfinding his small store calls for a map:

Can they find you?How to make a text-only logo

In a hurry? Heres a way to make a logo in PageMaker:

Another option: Take advantageof the computers ability to gener-ate shades of gray. Type is nowbolder; note how ampersand re-mains a high-contrast focal point.

Typed in Helvetica plain, the name looks . . . well . . . plain.

Stacking the type producesa compact look which will fitreadily into more layouts.Note that type leadingthe space between linesis extremely tight.

Changing the typeface to American Typewriter (note elaborateampersand) adds zestappropriate for a breezy, summer store.

Kern tightly (letters almost touching); remove word spaces asideampersand; reverse type out of a box and it looks like an emblem! x

HWY. 99To StocktonTo Sacramen

Elk Grove

Park

ELK GROVE-FLORIN RD.

E

W

S N

ElkG

roveBlvd.

ELK GROVE BLVD

ELKGRO

VEFLORIN

RD

TOSTO

CKTO

N

TOSA

CRAMEN

TO N

99

Gazebos & More!

Gazebos&More!

Gazebos&More!

Gazebos&More!

Gazebos&More!


9/16

TM

HOTLOOKS!

By Susan Hull

Lines, circles,squiggles anddots!

By Susan HullWhat makes a placespecial and memorable? In Venice, it isthe texture and color of crumbling walls,the quality of the light reflecting off thewater and the buildings, smells of foodcooking and the beautiful sound of thelanguage. It is youremotional responseto these things.

What makesyour designs specialand memorable arenot just making thepieces of the puzzlethe correct size andin proper relation-ship to one another.Its also about imbu-ing these designs

with their own sense of placea look, afeel, an emotion. The look to some extentcontrols someones perceptions of yourdesign. And it can make your communica-tion more memorable.

You can give something a look basedon a specific time from thepast, like the 1950s; a specificplace, perhaps Paris; an artmovement, such as Art Deco,or even a certain emotion.

The look on these pagesis more of an emotional, con-temporary statement, eventhough its roots are in the past(which is probably true of ev-erything). This look is friendly,approachable, upbeat, positive,vibrant, playful and engaging.

Todays hippest look is especially well-suited to the computer: Basic geometricshapes are combined with easy-to-mixcolors and sent directly to a film outputdevice (I use a Linotronic) for color sep-aration. In caveman times, such a jobrequired stacks of colored felt pens (alot like kindergarten), hours of tediousoverlay- and mask-cutting, and expen-sive, pre-press stripping. With luck, it

would come out right the first time.

Todays most vibrant look iseverywhere, energizingbrochures, stationery, logos,even report covers! Heres

how to make it.

2Tim

e

for

you

to

join

SS E A

S P A

G o l f

w i t h

t h e

b e s t

LI V I N G L I G H T


10/16

TM10

HOTLOOKS!

combined in a relatively infi-nite way. Ive included twocolor palettes of differing in-tensities. They can be com-bined, but for the time beingcontain your designs to onepalette or the other. PaletteA is made up of more pri-mary, intense colors. PaletteB is a series of bright pastels.

From a few shapes and colors, you can mix and match a d

Palette A Primary, intense colors

PMS 123 PMS 137 PMS 165 PMS 185

PMS 239 PMS Purple PMS 2665 PMS 286

PMS 3135 PMS 3272 PMS Green PMS 354

Assorted shapes!

2

Choose a shapeChoose one of the shapes andanother of the colors and layer this

shape on top of your background

color. You might consider this yoursecondary shape; it will need to be

large enough to dominate anything

added to your piece afterwards.

1Choose a backgroundcolorFirst, choose a color to be the main

background color (for now, stay

with one palette or the other; theseexamples are from palette A).

o begin, you first needa visual vernaculara series of colors andshapes that can beT

Right: PMS numbers refer to thePantone matching system, whichyoull find in both PageMaker andFreeHand color dialogs. Colorsshown are simulations onlytheyre what you get when you askthe software to convert Pantonespecs to processcolors: Some arequite accurate; others are not so.For the real McCoys, consulta Pantone swatch book.


11/16

TM

Palette B Bright pastels

nt for almost any occasion . . .

3Add a second shapeNext you may want to add texture

in the form of smaller bits and

piecesa checked border, a wavyline, a grid of squares, a series of

dots. That may be enough; you dontwant the design to be too busy.

PMS 135 PMS 150 PMS 164 PMS 184

PMS 211 PMS 245 PMS 2567 PMS 272

PMS 2995 PMS 3125 PMS 3262 PMS 3395

4

Add the wordsLast, you need to add type. Tryusing condensed faces such asFutura, Helvetica or Univers Bold

and Light Condensed or BauerBodoni Bold Condensed. The con-

densed type conveys a certain ten-

sion or intensity because of itscompressed design.

FRANKLIN GOTHIC HEAVY / COCHIN FUTURA CONDENSED LIGHT BAUER BODONI BOLD CONDENSED

BankOne

Trust Accounts

A N N I E S

S I D E W A L K

C A F E

C R O L L

E L E C T R O N I C S


12/16

TM12

HOTLOOKS!

A N N I E S

S I D E W A L K

C A F E

4. Duplicate(commandD) for as many dots asyou want. Delete the circle; Groupthe dots.

3. Position your cursor in the center of the circle, pressthe optionkey and click. In the dialog box, enter anyanglehere, its 20 (for degrees counterclockwise).Check Mouse location. Click OK. (Note: For a fullcircle like this one, make sure your number dividesevenly into 360.)

2. Draw and color a dot (a filled circle) top dead center.Clone. While the clone is still active . . .

10%

20%

30%

40%

50%

60%

70%

80%

90%

Black

How to space dots evenly around a circle:

1. Crisscross two ruler guides anywhere. Turnon Snap to guides;press option+ shiftkeys to draw a circle from the center out.

There are several ways to do this. This is my favorite:

How to make a wave:

1. Open FreeHand. Turn on Snap to grid. Space ruler guides evenly as shown . . .

Dont forget theblack & white!

Mix a palette of nineshades (10%90%black in 10% incre-ments) and blendthem freely fordepth and stylish-ness on the cheap!

Click!

Click!

Click!

Click!

Click!

Click!

Click!

Click!

Click!

CowabunStart here Click!

3

1

2. Select the Curvetool:

3. Click from corner to corner:


13/16

TM

How to make two-tonetype atop a shape

Readers Lisa Pike and Ester Prezwrite: We use FreeHand and want to

place text over a shaded shape. Wewant the text to be white within theshape and black outside the shape.

Is this possible?Sure!

FREEHAND STEP-BY-STEP

Set your word atop a shape . . .

send it to the back . . .

Clonethe word (the clone pops to the front) . . .

change the clone to white . . .

Cutthe clone (it disappears); select the shape . . .

and Paste inside!

FONT: ERAS

O O TT

By Richard MooreThe design andcreation of a typeface is a centuries-old art which demands careful study

and sensitivity, and extreme patienceand precision. A type designer willspend countless hours achieving the

subtle balances of weight and propor-tion that give a face its unique qualityand character. Our software, however,

will cheerfully undo that painstakinglabor in seconds, disturbing the graceand beauty of any typeface:

Futura is a sans-serif typeface of elegant simplicityeach stroke has the same weight, and there is ageometric balance to its proportions. But changing the set-width alters only one dimension, not both.

Owie.

Horizontal strokessame thickness

Vertical strokeballoons!

Sides taper to anunflattering thinness

Top of letter keepsoriginal thickness

Futura BoldSet width: Normal

Futura BoldSet width: 200%

Futura BoldSet width: 50%

Futura BoldSet width: Normal

434Subscript size: 60% of point sizeSubscript position: 0% of point size

Superscript size: 60% of point sizeSuperscript position: 28% of point size

Fraction slash aligns (at least its supposedto) with baseline and ascenders.

No space

or hyphenbetweennumbers

PageMaker is a littleslow at fractions, but it can be set tomake themperfectly. Heres how:

With no type selected, open the Type specsdialog,

clickOptionsand enter the following values:

Super/subscript size: 60% of point sizeSuperscript position: 28% of point sizeSubscript position: 0% of point size

Click OK. These settings yield the fraction shown,whose numbers align with baseline and ascendersin almost every typeface (the number likeliest toneed adjustment is the superscript position). When

typing, use a fraction slash rather than a regularbackslash, and set no space between numbers. If

your job requires a lot of fractions, youll be betteroff with a utility that makes them for you.

PAGEMAKER 4.0

How to set a nice fraction

The best ones are sized and aligned just so.

TYPE: THE VISIBLE VOICE

Are you sureyou want to squeezeorstretch that type?

XRaya

XRay

XRayXRay

XRayXRay

XRayXRayXRayXRay


14/16

TM14

Note the fading shadow iscast across both the coasterand the table top!

Coaster is colored 60%magenta and 60% yellow.

Shadow fades from60% black . . .

. . . to 15% black.

FREEHANDSTEP-BY-STEP

Hard Soft

Its how you makea shadow look real.

By Deke McClelland

Hold a pencil upright on yourdesk and note the shadow itcasts. Its soft, isnt it? Thosegently fading edges are the re-

sult of ambient light; that is, light which is diffusedrather than beamed from a single source. Note, too,

that as the shadow falls across an object of an-other color, it acquires that color in addi-tion to its own! Heres how to duplicatethis natural effect in FreeHand:

2. Fill the shadow

Color the shadow with agraduated fill(here, from60% blackto15% black,similar to room light). Set the taperangleto match the angle of the shadowhere, its 330so it fades naturallyaway from the object.

Whats wrong hereUh-oh. When a coaster isadded beneath the mug, theopaque shadow overprints ithiding it from view!

Rotate the clone 15.Skew the clone 45.

Reflect the clone across thehorizontal axis.

Move theshadow intoplace behind

the object.

1. Make ashadow . . .

Draw your objectand clone thepart that willbe casting theshadow.

(Note: In FreeHand, anglesrun counterclockwise from0 at 3 oclock.)

How to cast a

across a background object

0

330


15/16

TM

Mr. McClelland is a free-lance writer based in Boulder, Colorado. Deke haswritten and designed more than 15 books about personal computers anddesktop publishing, including Encyclopedia Macintosh (Sybex, 1-800-227-2346),Drawing on the Macintosh, Drawing on the PC, and the newly released Mastering

4. Clone and fillThis step is key: Clonethe shadow.Fillby adding the color of the coaster

to both ends of the new shadow:

Fill this end of the shadowwith 60% black (the shadowcolor) plusthe coastercolor (60% magentaand 60% yellow) . . .

. . . and fill this end of theshadow 15% black (the shad-ow color) plusthe coaster color(60% magenta and 60% yellow).

3. Send to backThe shadow no longer obscures

the coasternow thecoaster obscures theshadow! To solve this . . .

Color from:

Cyan 0%

Magenta 60%

Yellow 60%

Black 60%

Color to:

Cyan 0%

Magenta 60%

Yellow 60%

Black 15%

6. Clone and fillClonethe shadow again. This time,add the color of the coasters edge

to both ends of the clone.

The coasters edge is colored60% magenta, 60% yellow and

25% black. Therefore:

Color from:

Cyan 0%

Magenta 60%

Yellow 60%

Black 85%

Color to:

Cyan 0%

Magenta 60%

Yellow 60%

Black 40%

7. Cut, thenPaste inside

Cutthe shadow. Select thecoasters edge, Paste in-sideand youre done.

5. Cut, thenpaste inside

Cutthe new shadow. Selectthe top of the coaster andPaste inside. See how

the shadow nowappears transparent?

Note the edge of thecoaster still obscures

the shadow. If the edgeis a filled shape (ratherthan a line), you can

shade it, too:

1. Cover the oval asshown with a circle about twice its diameter(easiest if you draw it from the center out).Fillthe circle with a radialgradation fromdark (nearest the light source) tolight.

The top of ourmug is an oval:

2. Cutthe big circle; select the ovPaste inside. 3. Set it in place!

A radial fill adds shading to a concave surface

PS: Working in black and white?this procedure worksjust as well! If when you add a shadow percent (say, 60)to the background percent (say, also 60) the sum isgreater than 100, use solid black.

VERSATILE SHADING TECHNIQUE:

Aldus FreeHand, Macintosh Version 3.0(Business One Irwin, 1-800-448-3343).He also contributes articles to Publish, PC World, and MacWorldmagazines.


16/16

Aface reflections and embossing, and askedme how to draw a medallion. You meanlike a coin? I asked. Yes, it would re-semble a coin: round, metallic, with aridge and embossed features.

I paused, wondering silently why hewas asking me this.

You say youve read our piece onembossing? I repeated. Yes, it was veryinteresting. How about the article onsurface reflections? Hed read that, too,and liked it.

I couldnt tell what he needed.How do I draw a medallion? he

asked again, plainly enough.I was stumped. Here was a profes-

sional designer, facile with the computer.If he knew how to make a shape, a shad-ow, an emboss and a reflection, I knew hecould draw the medallion. What was left?

So have you taken a coin from your

pocket and put it on the table and lookedat it? I asked.No, he hadnt thought of that.I was more surprised than I sounded.When you look at the coin, I began,

evenly, youll see that it consists of lightareas and dark areas. Youll see thatsome areas have a hard edge, where thelight changes abruptly, and others havea soft edge, where the light fades gentlyfrom one shade to another. A coin hasmostly soft edges.

FreeHand, like most drawing pro-grams, has the tools to make both kinds.A hard edge is made by filling a shape

with a solid tone. A soft edge is made byblending a shade into its adjacent shade.

Your job is simply to look at the coinvery closely and draw whats in front ofyour eyes.

He seemed to be satisfied with thisand said goodbye.

Last week I related the story to afellow publisher. I think my real job, Isaid, is to draw the readers attention tothe world around him. I mean, one fellowneeds to draw a medallion. Another

cy phoned awhile back, havingread our articles on shadows, sur-

reader from an advertising agen-

JOHN McWADE

TM

Editorial and subscription offices

331 J Street, Suite 150, Sacramento, CA 95814967

Telephone 916-443-4890 Fax 916-443-7431

For postal, copyright, subscription and back issue

information, please see the bottom of page 3.

Publisher and creative director:John McWade

Associate publisher and editor: Gaye McWadeSubscriber services: Robbin Jellison

Circulation and marketing: Don Jellison

Look again

PRODUCTION NOTESBefore & Afteris totally desktop-published inAldus PageMaker 4.01 and FreeHand 3.0; itspages and everything on them can be built us-ing the most basic equipment upon which thesoftware will run, whether Macintosh or PC.My hardware: Apple Macintosh IIfx computerwith 8mb RAM, 13" Apple RGB monitor withApples 8-24 GC video card (16 million colors,accelerated. This card is extremely fast but itsaccelerator is incompatible with the combina-tion of PageMaker 4.0 and Adobe Type Man-ager); MicroNet 644mb hard disk and NuPort

card (unusually fast access); MicroNet 45mbhard disk with removable Syquest cartridges(for transfer and backup). Laser printer: QMSPS800II. B&W scanner: Agfa Focus II. For colorproofing: QMS ColorScript 100. Plate-readyfilm: Linotronic 300 (RIP 4), 2540 dpi (usu-ally), 150-line screen. Typefonts are fromAdobe. Our service bureau is Lithographics inSacramento. Before & Afteris printed by W.W. Hobbs on a manually adjusted Harris four-color press. Colors are all kiss-fit (no traps).

ABOUT THE PUBLISHERJohn McWade is the founder and voice ofBefore & After, and its chief designer andwriter. Mr. McWade has been an award-winning publication designer for 21 years.He founded PageLab, the worlds first desktop publishingstudio, in March 1985 and has since written and lec-tured exhaustively on this new industry. Clients includeApple, Adobe and Aldus, for whom he created two Portfo-liotemplate packages. He often answers his own phonebecause hed just as soon chat with readers as work.

wants to draw a paper clip. A third needsto draw a barn. Yet each object is reallythe same; a matter of light and shade,hard and soft. If you can work the tools,thats half. The important half is to seewhat youre looking at.

You should say that, he said.I have been, I replied. I talk about

it all the time.Maybe you should say it again, he

suggested.There are two kinds of designers in

the world: the skilled and the trulygifted. The gifted have a calling straightfrom heaven: Their work is humbling,awe-inspiring; it leaves us dumbstruck.But the rest of usand this, of course, isalmost everyone, including melearn artand design as one learns any craft: lineby line, part by part, like working yarninto a sweater or wood into furniture.

There exists a common misconcep-tion that non-artists have about artists:that their work is like magic. But there is

nopresto! way to make art, no buttonthat says medallion. Instead, we studythe object we wish to draw, its lines andangles and shades, and build them care-fully, one at a time, until the drawing isdone. The magic is in seeing our worktake shape, a real object emerge from acollection of parts.

What the computer has done is makesuch work possible. It has given every-one the tools that heretofore even pro-fessionals didnt have.

The tools that make Time and Voguemagazines now sit on your desk. Studythose magazines. Ten thousand packages

line your supermarket shelves, many ofthem extremely well designed. The com-puter in front of you can duplicate all ofthem and make tens of thousands more.

Classic books, maps, theater posters,the best stuff in the world is within thereach of your electric genie.

Look around.Look again. Do not limit yourself;

study what you see and youll learn fromthe best. Then practice.

The opportunity is priceless.

How to design cool stuff

print issue 07

Documents