Before after printissue32

8 9 0
  • Loading ...
1/8 trang

Thông tin tài liệu

Ngày đăng: 04/12/2018, 10:08

Before&After ® How to design cool stuff! Great desktop projects | By Chuck Green Cell pages This pocket-sized phone book offers a simple, inexpensive way to keep your name in front of prospects The first and last panels on side one are the back and front covers, and the first panel of side two provides space for a greeting The remaining panels provide space for jotting down names and numbers in alphabetical order Repeat your contact information throughout, and enter it as one of the listings Have a commercial printer reproduce it in black and one color on 70-lb uncoated text stock, and score and fold it accordion style DIMENSIONS Single panel: x inches; Overall: 16 x 4; TYPEFACES • PHONEBOOK: RALEIGH GOTHIC; SUBHEAD: MYRIAD BOLD CONDENSED; TEXT: MYRIAD CONDENSED | ALL ADOBE.COM ILLUSTRATIONS: IMAGE CLUB ARTROOM TRANSPORTATION | eyewire.com Need a quick, “custom” illustration? Layer a few simple clip art images one over the other and apply a different tint of the same color to each Message wrap Need to make a big impression on a small budget? Send your prospect an object wrapped in a message The trick is to find an item that helps you make your point Choose a single word that represents the idea and use it as the headline Then compose a paragraph of text that explains the link between the word and the object (see the text examples below) The ideal object is attractive, useful, affordable, and/ or edible None of the items pictured cost more than five dollars Wrap it and pack the finished product in a box of shipping peanuts so that it arrives in perfect form The ultimate goal? Create something someone will carry to the next room, show a colleague and say, “Hey, look at this!” TYPEFACES • DESIRE: INTERSTATE ULTRA BLACK | fontbureau.com | SCRUTINY: BASE 12 SERIF BOLD | emigre.com | SIT: MONA LISA SOLID | itcfonts.com Tool card A smart business card gives your contact a reason to keep your card within reach—it adds function to form For example (left to right): a bike shop proprietor incorporates a metric conversion table; a guitar teacher, chord diagrams; and a trust board member, a list of local help line phone numbers For your version, use information specific to your field of interest—something that reminds the recipient of your area of expertise each time they use it: a list, a conversion chart, measurements, industry terminology, and so on TYPEFACES: GRIFFITH GOTHIC REGULAR AND ULTRA | fontbureau.com ILLUSTRATIONS: IMAGECLUB ARTROOM | eyewire.com Chuck Green is a longtime contributor to Before & After He is the host of ideabook.com and the author of several very useful design books, including Design It Yourself: Logos, Letterheads, & Business Cards ($25, Rockport Publishers, ISBN 1-56496-768-9) Before&After Issue 32 www.bamagazine.com Design clips 80 years separate these two On our left is a 1920’s ad for French skin powder; highly crafted, richly textured, incredibly detailed (If you’re in college today, that’s your great grandmother admiring her slinky young self.) Far right is the logo for a modern dance-exercise video; it’s simple— almost primitive—and bold They look very different, but they have a lot in common IT WORKS FOR ME! OUT BEHIND THE MALL ONE DAY back in the quiet where the Dumpsters are, along the unmarked walls, I saw glowing silently in an unmarked window this simple sign A tooth on a square That’s all Maybe two feet by two Not a word in sight It wasn’t even facing the crowds Maybe for that reason, it was mesmerizing I was out of the car and back into the mall just to learn who the dentist was Talk about understatement! That’s design! Most immediately striking about this ad is its oval shape Similarly unusual is its powerful black vertical This is deliberate design; the artist has consciously not filled space but created a composition Visually, why does the sign work? I count six factors: 1) A square is a perfect stage that naturally pulls the eye to its center.* 2) The tooth is in the center 3) The square is black, the most powerful color 5) The white tooth on black has the greatest contrast 4) The tooth is the only image; there is nothing more to see 6) The tooth is much bigger than real life; huge scale is always arresting —jmc What was hot in the 1920s? Coco Chanel Modernism Art Deco Futura type Design as a commercial art was new Ads were often made entirely by hand None of our sissy computer stuff, this type was “set” with a fountain pen in unerasable ink (This would focus one’s attention, which may explain the intense detail.) There were fewer Watch the relationships that make this work The thick-thin of the ad is proportionally identical to the form of the type, drawn in the classroom style of the day Note in the ad the thin line isn’t drawn, but is formed by the left edge of the text Look again, and you’ll see the same From the book, Design Connoisseur, An Eclectic Collection of Imagery and Type, by Steven Heller and Louise Fili ALLWORTH.COM/CATALOG/GD175.HTM Logos and labels Design a name *How? The center of any visual field exerts the greatest pull, and a square has an extremely strong center That’s because its corners are equidistant, and all four axes— horizontal, vertical and two diagonals— cross in the center You can think of axes as meridian lines; they have force, and in a square, all of it converges on the center An object in the center, therefore, is reinforced, while an object slightly off center has unusually high visual tension—a disruptive imbalance THE Here’s how to create a good look out of nothing— just a name on a shape—but there’s a secret Who needs fancy artwork? Good design is the happy result of words, shapes, colors and other basic elements in harmony Simple shapes—rectangles, ovals, polygons —have real, expressive presence A rectangle, sharpedged and pointy-cornered, says something that a circle, round and soft, does not So it’s easy to create a good look out of nothing—or at least what seems like nothing: Set a word, add a shape behind it, then color! Or start with the shape Or the color The secret is to get all three elements saying the same thing Here’s how: MAPAKADOS MEDITERRANEAN GRILL RECTANGLES A rectangle is the most stable shape—flat, firmly on the ground, motionless A rectangle is the shape of structure—the walls of a building or monument, for example Dark, substantial colors are full of black, and feel solid, connected, dependable Uppercase type is stately The overlap adds a light counterpoint appropriate for a restaurant TYPEFACE WADE SANS LIGHT How big? Same as the duck’s body Tail Color change Head Layout Design by duck! Headline (ha ha) Head MUSEUM-QUALITY DECOYS Neckline Body mass What to when your grid won’t work Here’s a common problem Your client sells objects—say, museum-quality duck decoys—and has a favorite she wants used everywhere How you work with this elegant image and not lose its shape? Instead of a straightline grid—the kind used to lay out pages—you make a grid of your own based on the lines and proportions of the duck Here’s how DECOY’S CALL Hand car ved, hand painted wood Before&After Issue 32 www.bamagazine.com It is believed that decoys were the natural result of our ancestors’ experience as they saw immense flocks gathering in marshes, fens, and basins They developed many forms of decoys as clever devices to lure the waterfowl to where gatherers waited to capture them Many methods of driving and trapping ducks Neck EVERY IMAGE HAS NATURAL LINES First step is to simply have a look It might help to draw some lines Pay attention mainly to shapes and edges Look first at the big shapes—the duck’s body, head and neck (Go by mass, not the absolute edge [left].) Small shapes include tail triangles, cheek circle, and the curve of the breast color Edges are between colors—for example, where the duck ends and the white page begins They have flow; they curve The duck has a lot of edges How many can you see? CREATE VISUAL CONNECTIONS The most pleasing designs are made by working with the sizes, colors and lines that are in front of you; don’t pull stuff out of thin air Watch Here, the headline follows the line of the duck’s back, and is roughly the size of the duck’s body (left) This gives it a voice equal to the image It’s also the same color These similarities create a connection between head and body The subhead curves beneath, and is colored lighter to match the breast, another connection Text block occupies the body mass; note how similar its texture is to the duck’s breast We also see a hierarchy of scale—big, medium, small—that makes a good design TYPEFACES ABOVE THE DUCK: MALSTOCK ITC, BELOW: ADOBE CASLON REGULAR How far away? Try this Margin width equals line spacing images, but look at what they have in common! But while style and rhythm have changed, the structure of design—the part you make— has not In fact, it cannot A circle in 2003 is a circle in 1923—or 1923 B.C Green today is green then Their relationships are the same, too, whether in a video or your great grandmother’s La Poudre C’est Moi, and relationships are what we’re interested in here: ads, too, no TV, no CNN, no Internet; life was slower—at least, that’s what they say—and with less to read, readers had time to soak it up, enjoy the nuances It couldn’t be more different today Billions of images swirl about Clutter is everywhere It’s frenetic Detail? No time Make your point with a circle, a stroke, in the blink of an eye Zumba is a dance-exercise video program based in South Beach Miami, and advertised on infomercial television with one of those “not available in stores” offers Zumba is energetic, exuberant, sexy, fun But who watches infomercials except channel surfers, and how you get their attention? By conveying energy instantly Aurally, this is done with its driving Latin sound Visually, it’s done with motion, vivid colors and one very simple line Three strokes from one brush capture with real clarity the energy and movement of Zumba Much easier to see than the powder ad, note the same brush has drawn the lettering, too Result: Image and words form a cohesive visual message, clear, inviting, bold This is the simplicity you want; anything more—a line of set type, for example—would add complexity and weaken the image Clothing colors (inset) complete the connection whose oval shape (and decorative pattern) brings us back to the original oval, which can also be seen in the model’s head and overhead mirror These relationships are not random, but deliberately connect every key focal point thick-thins in the model and the white highlights on her back, legs and forearm Also, the line of her pose is a curving S, the same curve that can be seen in both typefaces and the top of the tin K I N P O W D E Parts combined, resized and rotated, the similarities are obvious SEMINAR Jaselle S ZUMBAFITNESS.COM R WORKSHOP APRIL 7–8 TRIANGLES Party down! Angles are the most exciting lines, full of energy, motion, and totally unstable, which is why you see them on skateboards not on corporate stationery Amp up the volume with an angular typeface Riotous colors—bright secondaries, mainly—are seen in nature in flowers, tropical birds and fish B&A recommends: Our colors are from Pantone’s Guide to Communicating with Color by Leatrice Eiseman—two dozen palettes in 28 themes (earthy, romantic, muted and so on) with extremely good, real-world examples Beautiful and quick starting, this book will increase your color vision immediately TYPEFACE HELVETICA NEUE ULTRA LIGHT TYPEFACES COGITO: ROXY, WORKSHOP AND DATE: ATLAS PANTONE.COM D CIRCLES Light, delicate pastel colors are full of white, and convey fragility and vulnerability, even infancy Pointy-cornered (ouch!) rectangles won’t here; what’s needed are oval shapes that are gentle The type, too, should whisper—lowercase, ultra light, and white, which recedes L L A C S ’ Y CE O HAND CARVED, HAND PAINTED WOOD DECOY’S CALL Hand carved, hand painted wood Brown This playful variation turns the title into a visual sound Type follows the curve of the duck’s back, but is then rotated into its new position relative to the throat and cheek Mid-range brown color allows the title to cross the black of the duck’s head and the white of the page Note how the words end neatly at the color-change line Subhead across the body starts at the vertical neckline, and changes color when the duck changes color, pulling title and subhead together Type colors can all be found in the duck Clever TYPEFACES DECOY’S CALL: GILL SANS CONDENSED, DESCRIPTION: FRUTIGER 87 EXTRA BLACK CONDENSED This treatment downplays the title, and adds a wave of typographic whimsy! Note how the title flows neatly between the underside curve and the feather score One typeface— Goudy extra bold—appears throughout; its thicks and thins echo the curving lines of the duck (left) Note the blue wave isn’t bright, but is muted like the photo It’s almost straight across the color wheel from brown Complementary colors like these harmonize well DECOY’S CALL Hand carved, hand painted wood Although they have little in common with the lines and shapes of the duck, they have a lot in common with real life; here, the words pretend to be marsh grass coyly concealing the decoy! Visual connections matter: Words are twice as high as the duck’s body (a rational amount), and subhead is title length, colored to match the duck Because legibility is low, this technique can be used only with an audience familiar with your product Fun TYPEFACES BIG: EMPIRE, SMALL: ADOBE CASLON REGULAR TYPEFACE GOUDY EXTRA BOLD Before&After Issue 32 www.bamagazine.com AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp db qp Type, the visible voice ® Frutiger Roman at headline size Open arms 2-story a Flat apex 1-story g Wide aperture Wide crossbar db are mirror images Short tails Pointed junctions Vertical axis Vertical sides No spur qp are mirro IT’S HIGHLY VISIBLE AND PLAYFULLY SIMPLE Frutiger is crystal clear PLAYFUL ORGANIC FORMS Type was not the only thin perimented broadly with f with the relationships bet tive and positive spaces H at left is amazingly hard to every curve is deliberately which requires managing tive (white) shapes at the continuously variable curv no radius, and no symmetr fect circle) Yet taken as a part—the image is balance Its cheerful forms appea well; not at first sight, but we pull apart the shapes a spaces (right) The alphabe toon strip Have a look: From store receipts to computer screens to the Olympic Games, this go-everywhere sans-serif redefines versatile Frutiger is airy, easy to read, and feels like fun Let’s see why Low-res Frutiger, Apple Web site The qualities that make Frutiger so readable on signage are also what make it excellent at low resolution Basically, it’s a typeface without fine detail in either positive or negative spaces Adrian Frutiger is one of the most influential type designers of our time He designed Univers in the 1950s, early in his career Univers has been called the most significant typeface of the 20th century It was upon Univers that Helvetica—one of the most widely used of all fonts—was based Mr Frutiger was interested in the forms of nature His drawings and type designs explore the dynamic relationships between the interiors and exteriors of forms, the interaction between negative and positive spaces, blacks and whites He was commissioned in the 1960s to design the signage system for the new Charles de Gaulle airport in Paris It was commonly thought he would use his famous Univers typeface for the job However, he knew that signage must be visible under adverse conditions, at long distances, and is rarely viewed face on; it must be legible from any angle Univers, he felt, was too rounded and “closed” for this (right); at a glance, a c could be mistaken for an o So he designed a new typeface that was simpler still, and open (right) He endowed its letters with the faintest touch of whimsy The result became Frutiger, a warm, sans-serif typeface with no fine detail, and unusual clarity Its simple qualities proved robust Frutiger is beautifully legible under literally every condition—at super scale, tiny sizes, funny angles, low resolutions And— no surprise—it’s as readable negative as positive Frutiger is pleasant to read, too, and has, over 30 years, become the world’s most popular sans-serif typeface HORIZONTAL FLOWS This stroke leads out and across, not downward FAST CURVE SLOW CURVE HORIZONTAL FLOWS This slow, broad curve also tends to make a horizontal flow—it’s not sharply rounded and downward flowing HORIZONT This junctio perpendicu the horizon SLOW CURVE FAST CURVE ARTISTIC DETAILS An incredibly subtle curve adds grace to this terminal stem Frutiger signage at Charles de Gaulle airport, Paris; light and dark on a neutral field Superscale Frutiger at the XIX Olympic Winter Games, readable from an extreme angle Adobe Photoshop PHOTOGRAPH BY CHAD HOLDER, COURTESY INFINITE SCALE DESIGN GROUP ® ® FRUTIGER EVERYWHERE! Y almost everywhere you look, fi and utilitarian roles Frutiger is utility At left, from the Photos an instructional booklet for a monitor; below, a Canon came the legibility that utility deman cheeriness gives cold data a h Left, a Brookstone store cash register receipt Right, a directional sign Note that even in low-contrast colors and with the clutter of multiple shadow lines, Frutiger comes through pQqRrSsTtUuVvWwXxYyZz1234567890 V p Horizontal terminal Straight leg Flat curve Wide apertures Wide crossbar Wide arms Flat apex Almost no crossover Wide stance Short tail Wide arms Flat Bubbles Wide apertures or images ng Adrian Frutiger drew He exforms from nature, and played tween curves and lines, negaHis whimsical drawing shown o do; what makes it so is that y different from every other, both positive (green) and negasame time Every edge has a ve There is no apparent center, ry (except—surprise!—one perwhole—and this is the hard ed, pleasing, at rest ar in Frutiger the typeface as t they become apparent when and start exploring the internal et becomes as playful as a car- CARTOONS INSIDE! Pulling apart the shapes reveals Frutiger’s internal forms; out of context they are whimsical, lively, organic, animated The liveliness comes from subtle juxtapositions of fast and slow curves, resulting in plump, asymmetrical bodies and highly sophisticated corner points Teardrop in the a Nose in the s Smile Olive in the b Eyelid in the e Hourglass in the negative space Very 50s Frutiger in text Frutiger in text (below) is smooth even by sans-serif standards That’s because it lacks the fussiness of tiny spaces In its lighter weights, a body of Frutiger is full of air, or white, and what’s interesting is that it cannot be made dense Tight letterspacing, the normal way to add density, merely looks fitful, in part Tightened, the because the tiny spaces that result bespaces between tween letters are smaller than those in letters become the letters themselves This unusual trait smaller than means that Frutiger, well set, looks basithose in the letters themselves cally the same wherever it appears uti aaaaa eeeee sssss Frutiger Roman, 7/8.5 Concern for man himself and his fate must always form the chief interest of all technical endeavors, concern for the great unsolved problems of the organization of labor and the distribution of goods—in order that the creations of our mind shall be a blessing and not a curse to mankind Never forget this in the midst of your diagrams and equations Albert Einstein TAL FLOWS on is nearly lar, speeding tal flow Frutiger Black, 6.5/8.5 Concern for man himself and his fate must always form the chief interest of all technical endeavors, concern for the great unsolved problems of the organization of labor and the distribution of goods —in order that the creations of our mind shall be a blessing and not a curse to mankind Never forget this in the midst of your diagrams and equations —Albert Einstein You will find Frutiger filling both decorative s especially good at shop start-up screen, Pulsar heart-rate era CD Frutiger has nds, but its inherent uman touch Frutiger in closeup IT’S NARROW Uppercase is barely wider than lower, an unusual attribute that contributes to Frutiger’s airiness R is one of Frutiger’s most distinctive uppercase letters; its leg curves sharply out of the crossbar, then abruptly goes straight The leg has a slight flair ULTRA BLACK, BLACK, BOLD, ROMAN, LIGHT Frutiger Light, 8.5/11 Concern for man himself and his fate must always form the chief interest of all technical endeavors, concern for the great unsolved problems of the organization of labor and the distribution of goods—in order that the creations of our mind shall be a blessing and not a curse to mankind Never forget this in the midst of your diagrams and equations —Albert Einstein Frutiger Bold, 8.5/11 Frutiger in contrast Part of Frutiger’s versatility comes from its wide range of weights, from ultra black to light (above) One benefit: you can create texture and emphasis in a body of text solely by alternating text weights Left, a black-weight word leading a body of light weight text has such high contrast that you can run subheads in, as shown here, rather than resort to a blank line between paragraphs Very smooth Concern for man himself and his fate must always form the chief interest of all technical endeavors, concern for the great unsolved problems of the organization of labor and the distribution of goods—in order that the creations of our mind shall be a blessing and not a curse to mankind Never forget this in the midst of your diagrams and equations —Albert Einstein IT’S BRIEF Key to Frutiger is that there’s basically less of it Outlined atop the c below are three major typefaces—Helvetica (violet), Univers (black) and Futura (orange)—whose curves keep curving after Frutiger’s stop The continuing curves close the white space to a narrow gap, which reduces legibility (c can be mistaken for o, or S for 8) Frutiger has many strokes that remain similarly “open.” Note the distinctive s, whose abbreviated curves are so open the white flows freely in FAST SLOW IT’S SIMPLE Two basic shapes, a stick and a v, form the k Converging at a single point activates three inward-pointing white triangles (look again) that give the k its simplicity and clarity Like the R, the lower diagonal is slightly flaired IT’S HAPPY Like lopsided grins, the open counters of lowercase e and g characterize the playfulness that underlies Frutiger’s legibility The arms, instead of curving upward, thrust the eye outward Note that the g’s oval bowl is narrow on the right, wide on the left, and likewise moves the eye outward Before&After Similarly playful, the lowercase n looks ordinary only at a glance, but draw lines between curve points, and its slow-to-fast curves and cockeyed angles become apparent Issue 32 www.bamagazine.com Page layout Business card design The invisible square Design a handsome card in this surprising space There’s a lot riding on your business card And what a challenge it is to design! It’s a tiny space of fixed proportions that carries important (your company!) but uninteresting (fax number) information that must be clearly visible (your name!) and easily accessible (your phone!), all while making a good visual impression, which means it must be organized simply and presented boldly (Get that done before lunch!) You’ll love this format It’s so versatile! It’s built on an invisible square; you put your text on that side in a single, neat column, put your image on this side, and let your image the talking It’s flexible and fun! Watch: A stand-alone photo How could anyone resist? If you have a good photo, you can’t present yourself with more impact than this It’s engaging, entertaining, and clear as a bell A background distracts more often than not, so as a rule just get rid of it Emphasize one text point by using a distinctive type size and weight Below, if your subject lends itself to a series, why not have more than one card? It’s fun for you and customers, too Same information 3.5” 2” 2” The U.S standard business card is 31⁄2” x 2”, horizontal format Measure in two inches, set your type, and look at what results: a lovely white square This is your stage Sandy Williams DOG TRAINER 757-891-5487 cell 757-624-6383 phone 2280 Hekin Terrace Way Norfolk, VA 23504 dogtrainer@attbi.com www.sandythetrainer.com Where the important words go? Along important lines in the picture; here Sandy’s DOG TRAINER title matches her dog’s eyes in size, weight and color Less obvious is the gap beneath the title, but it’s the same as the gap between eyes and nose You’ll never see this consciously, but it’s why the spacing looks right TYPEFACES DOG TRAINER: FLYER BLACK CONDENSED ALL ELSE: FRUTIGER LIGHT CONDENSED IMAGE FROM ANIMAL ATTRACTION CD | PHOTODISC | photodisc.com Fresh from the foto booth Hey, what works for our pets will work for us If you’re comfortable in front of a camera, this is an extremely appealing way to make an impression, leave an impression, and jog a memory Your smiling face is so real, so personal, there’s no way you’ll be just another number To really connect, smile straight into the camera An above-it-all, off-in-the-distance portrait pose will totally defeat the effect A common mistake is to retain a background, which looks like an ordinary snapshot Pure white has unusual clarity, and leaves all the attention on you LaDon Trent System Analyst Quexe 12 Northgate Drive Rocklin, CA 95677 800-444-2330 phone x23 328.555.4328 cell ltrent@quexe.com www.quexe.com LaDon Trent System Analyst LaDon Trent System Analyst Quexe 12 Northgate Drive Rocklin, CA 95677 Quexe 12 Northgate Drive Rocklin, CA 95677 800-444-2330 phone x23 328.555.4328 cell ltrent@quexe.com www.quexe.com 800-444-2330 phone x23 328.555.4328 cell ltrent@quexe.com www.quexe.com Very low key, the text is set in a single size of a single face; his name and company name are set apart only by bold type The entire text block is light gray (60%) Subtle and handsome The quieter the type, the more attention the photo gets Note that his shoulder laps across the vertical edge; this looks more natural than artificially scissoring it off, and it keeps his face centered in the square It’s a detail, but pay attention; stuff like this can mysteriously mess up an otherwise good design TYPEFACE: GLYPHA ROMAN AND BLACK IMAGE FROM YOUR MESSAGE HERE CD | RUBBERBALL | rubberball.com Full-page photo Photos with very quiet backgrounds can be left intact; in this case, the radiant light of the background adds an appealing depth This is a staged shot dramatically cropped; the idea was to find the least amount of image that would convey the most information When looking for an image like this, think theater; the visual suggestion of person, place, business, whatever, has dramatic impact that is often more appealing than coldly seeing it The deep blue sea This beautiful image is visually opposite the one above; the background is similarly quiet, full of radiant light, but it’s all dark The beautiful solution: just reverse the type The text draws attention to both store name and manager, yet keeps the visual hierarchy intact To this, two techniques are involved: BAJA TROPICALS set in a large, stylish typeface conveys the image, while the manager’s name is the plain text face set in bold caps Nice Yasha Rubin, owner 328-555-5328 Yasha’s On the mezzanine Yasha Rubin, owner 328-555-5328 Yasha’s On the mezzanine 452 Benning Avenue La Cresta, California 90082 www.yashas.com 452 Benning Avenue La Cresta, California 90082 www.yashas.com TYPEFACES YASHA’S: SLOOP SCRIPT ONE, TEXT: BEMBO 328.555.4321 BAJA TROPICALS 7471 Mariposa Street Dalton, California 90002 328.555.4322 fax www.bajatropicals.com The full-page image easily masks the fact we’re working with a square, but it’s still here Note the fish—almost square, too— is framed fairly evenly in the space DOUG BAKER manager 328.555.4328 cell Primary text focal point corresponds to the primary visual focal point Before&After Issue 32 www.bamagazine.com Why is the name down here? Because those kissy lips are pointing right toward it Actually, the whole fish* is pointing down here; watch for similar lines of sight What’s great is that the reader never notices; your name just silently gets attention *It’s a surgeonfish, not that you asked TYPEFACES BAJA TROPICALS: LITHOS REGULAR, TEXT: FRANKLIN GOTHIC CONDENSED AND BOOK CONDENSED IMAGE FROM PHOTODISC | gettyimages.com Yasha’s focal point is a beautiful script that corresponds in size, position and color to the red cherry Picking a matching color is easy; just eyedropper it out of the photo Note the orange glass is centered in the invisible square; the swashy Y crosses the vertical edge In practice, the type will be ragged, like this Key is to have a strong vertical edge To this, set one topic per line—name on one line, title on the next, phone on the third, so on You can flip the layout If you this, the text must now align right— somewhat slower to read—to maintain the edge TA R I N D A D R A K E S T U D I O TA R I N D A D R A K E 328.555.4328 CELL 328.555.4328 CELL 328-555-4333 PHONE STUDIODRAKE 328-555-4333 PHONE 452 BENNING 452 BENNING L A C R E S TA L A C R E S TA CALIFORNIA CALIFORNIA 90082 90082 STUDIODRAKE.COM STUDIODRAKE.COM D R A K E L A C R E S TA CALIFORNIA 90082 Set the type all caps, all one size, slightly S-P-A-C-E-D, then pull the name across the invisible square (left) Note DRAKE remains aligned Gray the type (here 30%) so that the name in white stands out STUDIODRAKE.COM TYPEFACES: AVENIR LIGHT AND BLACK 673 Green Street SanFransisco, Ca 94121 ph.(415)751-9119 fx.(415)751-3721 www.sgbooks.com Solace-Graber A NT I Q U E B O O K S Center a homemade logo It looks at a glance like illustration is involved, but this handsome logo consists only of letters atop a square Its visual complexity, however—the fancy typeface, the square, the name, title, big type, small type, uppercase, lowercase, and so on—gave us some compositional problems to solve Solace-Graber A NT I Q U E B O O K S 328-555-4333 PHONE 328.555.4328 CELL 452 BENNING Power black White on black is severe, powerful, and always gets attention In addition to its popular, high-tech look, this minimalist design has another advantage: It’s as cheap as ordinary black & white TA R I N D A D R A K E Karen Patterson S T U D I O D R A K E Black-red-white combination is handsome, aggressive and almost literally arresting With red as the middle value, black & white words have the most contrast and depth More raw power for the buck than any other two colors 673 Green Street SanFransisco, Ca 94121 ph.(415)751-9119 fx.(415)751-3721 www.sgbooks.com Solace-Graber Solace-Graber A NT I Q U E B O O K S A NT I Q U E B O O K S Center the entire logo in the square Evident even without the dashed line, note the square “air” framing the image Karen Patterson kpatterson@sgbooks.com Small adjustments in size and spacing align the text Large white S above the line is okay; its visual weight is trivial kpatterson@sgbooks.com 673 Green Street SanFransisco, Ca 94121 ph.(415)751-9119 fx.(415)751-3721 www.sgbooks.com Solace-Graber A NT I Q U E B O O K S Karen Patterson kpatterson@sgbooks.com Name and logo in a common color connect visually, and set both apart Karen’s name is larger than its adjacent text, but in recessive white it draws attention quietly TYPEFACE: NUPTIAL SCRIPT Make your own clip-art Here’s a useful way to stretch your photo library “Transitional living for homeless families” suggests a family-type picture, but the happy gang below is too, well, not homeless Solution? Cast them in silhouette Roseville HomeStart A transitional living service for homeless families with children Susanna Kent, caseworker 410 Riverside Avenue Roseville, CA 95678 916-782-6667 phone 916-771-5146 fax IMAGE FROM SILHOUETTES OF FAMILIES CD RUBBERBALL | rubberball.com Roseville HomeStart A transitional living service for homeless families with children Roseville HomeStart Susan 410 R A transitional living service for homeless families with children Susanna Kent, caseworker 410 Riverside Avenue Roseville, CA 95678 916-782-6667 phone 916-771-5146 fax Informal typeface lightens a serious subject As a counterpoint, note the bulk of the text aligns with the bulk of the image, putting the center of gravity firmly on the bottom, and silently conveying stability Susan Stone, caseworker 410 Riverside Avenue Roseville, CA 95678 916-782-6667 phone 916-771-5146 fax Black, white and gray yield three levels of visual depth: recessive white in back, black in front, gray between This is a sophisticated way to distinguish one line from the next without adding complexity by changing typeface, style or size TYPEFACE: KHAKI TWO, SUBTITLE: CENTURY EXPANDED ITALIC The no-longer invisible square Whimsical appointment card makes the square visible, and in doing so, makes the white rectangle visible, too Because both sides are now clearly defined, it is no longer necessary for the text to maintain the edge Note that “Hair design by ” offsets Ralena’s curlicue signature, a composition not possible on the other cards 916-721-7722 916-721-7724 Hair design by Have a design question? TYPEFACES RALENA: HAIRSPRAY BRUNETTE, TEXT: FUTURA BOOK AND BOLD at London Hair Faire What typeface goes with that?! How I get my newsletter out of the 80s? How I make my logo better? We love questions! Ask us online at bamagazine.com 12417 Fair Oaks Blvd., #200 Fair Oaks, CA 95628 CSA IMAGES MOOD RING CD | IMAGE CAI0750219 | VEER | veer.com Before&After Issue 32 www.bamagazine.com John McWade Before&After Issue 32 January 2003 www.bamagazine.com ® How to design cool stuff! A text edge WHERE DO YOU PUT THE WORDS? Simplify I have a plan—it’s more of an observation, really—to improve our designs and save the world at the same time I’m not entirely kidding The clue is in the image above, which looks like an ad, but that’s not why it’s here We were visiting recently with Tim Poole, B&A’s printer Dome is a stateof-the-art shop with an efficient, totally electronic workflow It has won significant awards, in which design has played an important role In the course of our chat, Tim lamented what he’s perceived in recent years as a decline in the overall quality of graphic design “We’re seeing a lot of junk,” he said, not overstating it That led the conversation to possible causes The biggest two, we decided, are the Web and the economy Each has had a different impact The Web has created an expectation of right now Nothing waits Its volume—billions of pages—is stupefying And resolution is low, for which craftsmanship is not a priority The economic cause is obvious When money is tight, corners get cut Result: An unprecedented number of no-time, no-budget “designs” swirl about us in unrelieved clutter Work under such stress has infiltrated print, too It has become normal Now what? Web resolution will eventually improve The economy will improve, too, if this cycle is like the others The clutter, however, the bazillion unrelated flashy blinky in-your-face images that fly at us from everywhere; the clutter is probably ours to keep Which gets me to saving the world How as designers we make our messages seen and heard above the noise? We TALK LOUDER Wetalkfaster We wave—yoohoo! Typically But there’s a better way Do what Apple does Erase the noise Don’t outshout it; just get rid of it Look again at the space above Wherever you encounter Apple, it’s in a beautiful sea of white No song, no dance Just a message It’s easy on the eyes, easy on the nerves, and easy to grasp Best, it focuses on the product Why is so simple The product is the only thing there The surprise is how hard simple is to Our tendency is to add stuff If one thing is good, two must be better Type seem plain? Add a shadow One line blah? Draw two How many weak designs have you tried to correct by adding something? Each addition subtracts Instead, distill your message to its essence An image A word A thought It’s true for speaking, it’s true for writing, and it’s true for design Simplify Color matches the duck Body width A change of color Time to renew your subscription? ® How to design cool stuff John McWade Creative director Gaye McWade Editor Gwen Amos Design editor Contributing designers Chuck Green, Laura Lamar JMS Publishing LLC John McWade CEO Michael Solomon Chairman (Check the label above) Editorial offices Before & After magazine 2007 Opportunity Drive, Suite 10 Roseville, CA 95678 Telephone 916-784-3880 Fax 916 -784-3995 E-mail mailbox@bamagazine.com www.bamagazine.com Do business with us online! At bamagazine.com you can subscribe, cancel, renew, order back issues, change address, whatever, quickly, conveniently and securely Subscription rate $60 per year (6 issues) Canadian subscribers please add $9 and remit in U.S funds; overseas subscribers add $21 Before & After, How to design cool stuff (ISSN 1049-0035) is published bimonthly (January, March, May, July, September, November) by JMS Publishing LLC, 2007 Opportunity Drive, Suite 10, Roseville, CA 95678 Periodicals-class postage paid at Roseville and additional mailing offices Postmaster: Please send address change to: Before & After, 2007 Opportunity Drive, Suite 10, Roseville, CA 95678 Issue 32, January, 2003 Copyright 2003, JMS Publishing LLC All rights reserved Not just anywhere! Every image has natural lines, shapes, colors and textures that tell you where things go You’ll see A PRODUCTION NOTES WILL RETURN NEXT ISSUE Before&After The page’s eye level Save 10% by renewing online! It’s easy! Go to bamagazine.com Plus: Who needs fancy artwork? Create a logo from ordinary squares and circles A business card layout so versatile you’ll use it again and again Frutiger is fresh, light, and showing up everywhere See why More! Colors match the logo L I N E O F S I G H T ... 95628 CSA IMAGES MOOD RING CD | IMAGE CAI0750219 | VEER | veer.com Before& After Issue 32 www.bamagazine.com John McWade Before& After Issue 32 January 2003 www.bamagazine.com ® How to design cool... your product Fun TYPEFACES BIG: EMPIRE, SMALL: ADOBE CASLON REGULAR TYPEFACE GOUDY EXTRA BOLD Before& After Issue 32 www.bamagazine.com AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp db qp Type, the visible voice... the g’s oval bowl is narrow on the right, wide on the left, and likewise moves the eye outward Before& After Similarly playful, the lowercase n looks ordinary only at a glance, but draw lines between
- Xem thêm -

Xem thêm: Before after printissue32, Before after printissue32

Gợi ý tài liệu liên quan cho bạn

Nhận lời giải ngay chưa đến 10 phút Đăng bài tập ngay