For this project, I had to create several new buildings, a few additions to the existing museums, and a baseball park. As source material, I was given architectural renderings and city plans, but in some cases I wasn’t given much at all. There were a couple of buildings in which the extent of the information was “a building about 10 to 12 stories”—period!

Needless to say, I spent many hours at the City Planning Department looking for anything useful. The best part of the research required me to fly over the city of San Jose in a tiny, four-seat plane that was specially altered so that I could hang out the window and shoot pictures of the city. I never knew that even on a hot day it’s freezing when you’re dangling from a plane at 6,000 feet. Figure 1 shows one of the original shots before I started adding the future.

Fig. 1

Under consideration

There are many things to consider when adding elements to an existing image: first, the affect of the new object on the existing environment around it, and second, the affect of the environment on the new object itself. For example, the lighting and shadows must match the original source, and the focus and grain must also match. These points can be clearly demonstrated in this case where a building complex needs to be added in the current site of a parking lot in Figure 2. The strong shadows evident in the scene are necessary to match. More important is the fact that the existing building across the street has a facade made of glass. When the new building is added in front of it, the new building should be reflected in that glass.
The finished rendering (Figure 3) shows the new building in front casting a shadow across the street and onto the front of the existing building. The new building is also visible as a reflection in the windows of the existing building.

Fig. 2

Fig. 3

Put it in perspective

The actual creation of the buildings requires many steps to ensure that they fit into the scene as if they were there in the original photograph. One of the most important considerations is perspective. Proper perspective is crucial so the buildings will fit accurately in the three-dimensional space of the cityscape. To achieve proper perspective, the vanishing point must be established on the horizon in order to set up guides for the construction of the various structures.

Photoshop has a filter called Vanishing Point. Unfortunately, it’s not very useful in this situation. For one thing, to get the necessary detail you would have to work much bigger than the existing image—so using the filter within the image is not an option. Another factor is that the sides of many of the buildings are rounded and Vanishing Point moves objects within flat planes.

The concept behind the Vanishing Point filter is based on the basic laws of perspective. Figure 4 shows a diagram that explains how perspective works. At the horizon (eye level) there are vanishing points. All parallel lines meet at those vanishing points. If you were to draw lines that follow the angles of all the objects in a scene, these lines would be called vanishing lines and they would converge at the vanishing points on the horizon.

Fig. 4

In Figure 5 we see a close-up of an area of downtown. (To draw your attention to a point of interest, take a look at the large, grayish complex just below center right—it’s Adobe headquarters.) In Figure 6 we see the way that same area will look in the future. Three buildings have been added in this scene. The building on the bottom left is a proposed second tower to an existing structure. You would think that all you’d have to do is copy the existing building over; however, there’s additional work, such as creating the reflection of the rooftop at the very bottom of the image into the new tower.

Fig. 5

Fig. 6

The blue glass tower that appears above the Adobe complex in Figure 6 is a tall tower with a rounded left side. The first thing that needs to be established for this building before it can be created is the correct perspective. The section of this scene needs to be copied and enlarged by at least 400% to get detail. The file is then placed in an Illustrator file, and lines are drawn on a separate layer that follow the angles of the windows, the tops of the buildings, and the streets, where visible. All these lines have to eventually meet at the horizon line (Figure 7). Once the vanishing point is established, all the guidelines can be drawn for the construction of the new building (Figure 8).

Fig. 7

Fig. 8

When the building is complete in Illustrator, the document is imported into Photoshop as individual layers, as we see in Figure 9. In Photoshop, add all the details necessary to make the building look realistic, such as shadows and reflections.

Fig. 9

The final building is merged into a single layer and reduced in size to 25% to fit the final composite of the entire cityscape. The details are then rasterized to the new size. Once placed in the composite file, the tower is blurred to match the focus of the rest of the buildings in that area. Noise is added with the Add Noise filter to match the grain of the original shot. The top of the brown building in front of the new tower needs to be copied to a layer and placed in front of the new building to give the new building its proper location in the scene.

The digital tools at our disposal have opened the door to let our imaginations run wild. We must, however, still conform to certain laws of nature to make things look believable. It’s not as hard as it sounds; it’s simply a matter of experiencing life with our eyes open. Study how the world works—how light bathes a scene, how shadows dance on the surfaces they encounter, and how materials react to the lights and shadows and the other objects around them. Keeping your eyes open and taking it all in will help you make better images—it will also help you from bumping into things.

The completed futuristic view of San Jose

BEFORE

Client: Great American Publishers — www.greatamericanpublishers.com

Sheila Simmons worked for 20 years as an assistant publisher at another company before finally deciding to launch her own publishing operation. Great American Publishers (GAP) got underway in the summer of 2006, specializing in niche or regional cookbooks. Simmons is quick to note that GAP is a traditional publisher, not a vanity press or a print-on-demand service: Authors approach the company with a manuscript or a proposal. If it’s accepted, GAP takes on all the development tasks (and expenses), handling the editorial and design end themselves.

GAP’s books are sold in standard bookstores, but they do most of their business through gift shops catering to tourists. What better souvenir than a cookbook reflecting the cuisine of the place you’re visiting? Simmons sends out seasonal brochures to her retail customers highlighting the new line of books that are available. But she’d like to see a few improvements in the way her brochures look.

When asked what kind of look she wants, the first word she says is “professional,” followed quickly by “fun” and “interesting.” And when she says “professional,” she doesn’t mean slick or squared off. She wants to maintain the down-home feel that goes with the cookbooks themselves, but she thinks the brochure needs a more cohesive look—“to look as though it’s designed as one piece,” in her words.

The main thing she likes about the current brochure is the copy—it’s friendly and inviting. She especially points out the way it includes a recipe: “Recipes sell cookbooks,” she says. So we asked three designers to come up with a “down-home professional” brochure that would tighten up GAP’s image without buttoning it down.

AFTER

Designer: Richard Hanley — www.hanleydesign.com

“Down-home professional” made me think of country gravy, and that stuck in my mind throughout the entire design process. When I looked at the original, I wasn’t quite sure which page was the front and which was the back—what was on the inside and what was on the outside—and my eyes were going nuts trying to find somewhere to start. So I set one major rule for my redesign: break it into sections (with country gravy).

I started by creating a new logo, based on the brace symbol (}) turned on its side to look like an open book. The brace symbol became a motif for the entire design, dividing the two sections of the cover flap and setting off the contact information on the bottom of the back panel. Blown up very large, it also provided the curved shapes that define the areas on the inside of the brochure.

Besides organizing the content, I wanted to simplify the colors as well. While trying to pick a color that said “publishing,” my Eyedropper tool drifted down to the Dock and picked up the purple from the InDesign icon. Playing around with the Hue slider led me to the red and orange, which brought in the fun aspect. The third color is a variety of browns, and the final design uses tints and shades of those three.

Last, I wanted to find fonts that could be used in any design material the company needed. I chose ITC Goudy Sans for titles and headers and ITC Cheltenham Std for the body copy. With all the weights and styles in both of these font families, the company could use them for just about any material. They’re also both OpenType fonts—the possibilities are endless!

ABOUT THE DESIGNER: RICHARD HANLEY

Born and raised in Baton Rouge, Louisiana, Richard has been pursuing design since he could pick up a crayon. He originally studied programming in college, little knowing what was ahead. He took a couple of classes in Web design and found his passion. With help from Lynda.com and several Kelby, White, and Kloskowski books, before he knew it he was an art director for a design firm, working on websites, logos, the whole nine yards.

Currently working as an interactive designer for Graham Group (www.graham-group.com) in Baton Rouge—a company he has always admired—he continues to expand his knowledge in animation with Flash and After Effects. He also does freelance work on the side, including publishing a magazine from start to finish. “I’m not intent on being the biggest thing out there, I simply strive to be the best,” he says.

APPLICATIONS USED: Adobe InDesign CS3, Adobe Photoshop CS3, and Adobe Illustrator CS3

AFTER

Designer: Caryn Leschen — www.auntviolet.com

The first thing I noticed about the original brochure was that the folds didn’t match up, and the space was divided without any relationship to the folding pattern. The result was that the real estate was distributed unevenly: areas were either overused or underused. Overall, I thought the brochure needed to reflect the fun of cooking.

I started by playing with different folded pieces of paper in various sizes until I came up with something that felt right, inspired partly by the Mad fold-in. Then I blocked out the areas on the folded paper with colored pencils. I decided it should open with the cake recipe, so that’s the brochure’s entire front image (when folded).

When you open the brochure, the folds define the space, and the two edges of the cake image become dividers. As you proceed to unfold the brochure, new “pages” organize the large amount of copy into sections that can be easily digested. The scalloped border along the bottom also helps unify the space as well as lending a “kitchen curtain” effect.

The original’s colors are all over the spectrum, while the dominant cream color is tedious rather than unifying. I picked a color scheme based on old-fashioned cooking brochures and on good-old-American red, white, and blue. I used large dot screens and colored drop shadows to suggest off-register printing and further give the flavor of old-fashioned pamphlets (and by extension, traditional foods).

The script font is Confection—a font that, appropriately, looks like cake writing. The recipe and book descriptions are in American Typewriter Regular, which evokes old-fashioned recipe cards, while the catalog info is set in Times New Roman for its invisibility. Last, I used the Art Deco font Lionel Classic for the all-caps headings.

ABOUT THE DESIGNER: CARYN LESCHEN

As a child, Caryn Leschen made paper dolls and her own private renderings of Seventeen magazine. She graduated from the California College of Art in Illustration, and blossomed into a famous cartoonist who changed the world with her bodice-ripping stories in Wimmin’s Comix and Twisted Sisters, and her nationally syndicated cartoon advice column, Ask Aunt Violet.

Around 1996, she was selected to write scripts and design characters for the Web, and began specializing in e-greetings and witty Web copy. As the dust settled on dotcomland, Caryn added print design to her repertoire as Aunt Violet Productions. Passionate about obliterating the line between “fine” and graphic art, she’s lectured widely on visual communications and taught at UC Berkeley and other colleges. Caryn looks forward to leading brainstorming sessions internationally with her new venture, CreativeJumpstart.com. She’s also working on her first graphic novel, Mandelbread.

APPLICATIONS USED: Adobe InDesign CS2, Adobe Photoshop CS2, and Adobe Illustrator CS2

AFTER

Designer: Hannah Schrag — www.hannahschragdesign.com

The original brochure had an unclear hierarchy, which created confusion and a sense of disorganization; no apparent brand identity; and a lack of uniformity. My objective for the new brochure was to attract the reader’s attention, generate interest and desire, inform, and ultimately compel the reader to action. But first, the photos, illustrations, type, and white space needed to be arranged and designed in an effective and unified manner. This would set the tone of the brochure and create a favorable impression of the company and the products it offers.



I started by re-creating the company logo. The new logo uses a traditional typeface (Adobe Garamond Pro) to avoid trendy fonts that could become outdated. Adobe Garamond is also the primary text face, while Myriad Pro is used as a secondary typeface for titles and headlines. Only two font families are used throughout the entire brochure to keep a clean appearance.



A color palette of warm, happy, and inviting reds and yellows makes an ideal choice for this friendly design. The outer panels of the brochure use dark, light, and medium tones to visually differentiate them from each other. Each panel serves a different function. The cover panel incorporates close-cropped imagery of open books on a counter to catch the reader’s attention. The back panel provides a quick, at-a-glance summary of the company’s products, along with ordering information.



Floral embellishments and curves are incorporated into the brochure design to keep the layout from looking too “boxy” or rectangular and maintain a warm, inviting appearance. I also included some close-up photos of food to support the brochure text.

ABOUT THE DESIGNER: HANNAH SCHRAG

Hannah currently resides in Tulsa, Oklahoma, where she’s a graphic designer at The Williams Companies, a Fortune 500 energy company. She specializes in interactive, identity, and print design. As a designer with more than six years’ experience in art direction and graphic design, she has worked with both formal and informal institutions. She enjoys thinking strategically to go beyond what’s expected to meet the clients’ needs.



As an advertising student, her future aspirations include helping clients in the execution and management of marketing and public relations campaigns. She finds photography and international travel to be instrumental in her personal outlook as well as her business perspective. Her interests outside of design include music, psychology, and a passion for any animal in need of rescue.






APPLICATIONS USED: Adobe InDesign, Adobe Photoshop, and Adobe Illustrator

Whenever you set a tab in InDesign or Illustrator, you can choose to fill the void between the preceding text and the tabbed text with a leader. To do this, open the Tabs panel, select one of the tab stops on the ruler, and just type any sequence of up to eight characters in the Leader field in the Tabs panel. (You can find the Tabs panel either under the Type menu or by pressing Shift-Command-T [PC: Shift-Ctrl-T].) Eight may seem like a lot but among other options, this allows you to alter the spacing between leader characters by adding spaces between them.

Leaders can be creative
The possibilities for leader patterns are endless. Remember that everyday characters and symbols can become quite abstract when used in series. The samples shown here start with a simple series of Snell Roundhand lower case s’s, range through oddities from the Wingdings and Symbol fonts, and end with commonplace double-daggers and guillemets (a.k.a. angle quotes) from Times Roman. Tightening tracking to create a continuous ligature can often disguise familiar symbols.

To change the formatting of the tab leader, select it in the document (not the Tabs panel) and then use either the Character panel or the Type menu. You can also use your Glyphs panel (Type>Glyphs) to help you locate characters and symbols you would like to use. Just double-click a character in the Glyphs panel to place it in your document, and then copy and paste it into the Leader field of your Tabs panel.

Repeating or alternating characters can create some snappy and surprising effects

Stroke with style
From a decorative leader, it’s just a short jump to decorated lines in general. The Stroke panels in InDesign and Illustrator offer a variety of options for setting what in “typographese” are called rules. Dotted, dashed, wavy, multiple (or Scotch) rules, they’re all there. And they’re all pretty dull. To create rules with more pep, don’t use the Stroke panel—use Type on a Path instead and build your rules using characters from your fonts. Or you can even use both the Stroke panel and Type on a Path together.

This is just how our sample menu was to make. We set the border of the text frame around the menu with a triple 6-point rule using the Stroke panel. Then, after selecting the frame, a second border treatment was added by setting a parade of characters on it using the Type on a Path tool (which is nested under the regular Type tool in the Toolbox). Just click on the stroke with the Type on a Path tool and either type your characters or use the Glyphs panel to add them.

The characters in question are lighthouses from Adobe’s Carta font of map symbols. To get them to sit tidily on the center rule, open the Type on a Path>Options dialog from the Type menu. In the dialog, select Baseline in the Align pop-up menu and Center in the To Path pop-up menu.

You can alter the spacing of such characters using the Tracking controls in the Control panel or Character panel. If you have a hard time getting the first character in the series aligned properly, set a word space before it and kern that first character backwards over the space to move it beyond its natural starting point (just place your cursor in between the space and the first character).

Creating the little creeping snail leaders was trickier. Because I had no mollusk fonts on hand, I used Macromedia Fontographer (any font editor would do) to add a piece of EPS clip art to one of my fonts, and voilà, Shift-S became a snail, or in this case, l’escargot.

Type on a Path and a triple frame stroke create an unusual border in this menu. The marching snail tab leader comes from a font customized using a font editor.

Matt Haley is a creative consultant and commercial illustrator who has most recently provided onscreen artwork for seasons one and two of Stan Lee’s Who Wants to Be a Superhero TV series for the SciFi Channel. He is also currently designing a video game IP for Atari.

How did you get your start as a comic book illustrator?
Honestly, I just kept drawing and drawing and sending my art around until somebody hired me. I started really young. I got my first gig drawing Star Trek for DC Comics when I was 20, so I learned a lot on the job, blew some deadlines, and realized I had to take this stuff seriously if I wanted to keep my career going.

I know you had the privilege of illustrating the comic book adaptation of Superman Returns in 2006. What was your creative process like? Were you given much creative latitude, or did you work within a pretty structured framework?
Oh, it was very structured. You’re basically being asked to adapt a film they won’t let you see, which is why most movie adaptations look pretty different from the final film. I had very little reference supplied by Warner Bros. Studios because they were worried about images from the film getting out before the film’s release. I did hire a couple of models to pose so I could get the clothing right—one of them had actually been cast for the role of Superman!

What responsibility do you carry for Stan Lee’s Who Wants to Be a Superhero television series? How has that challenged you as an illustrator?
In addition to consulting with the producers, I create all the comic art seen in the show: when our contestants first appear, when they get their new costumes, and when we cut to commercial. It helps to reinforce the notion that this show is about people who want to be real-life superheroes. The biggest challenge for me is trying to hit that middle ground between photographic likeness and comic-book dynamism.

Describe your workflow. Do you start with paper and scan your artwork in, or do you do everything digitally?
I generally only do pencil artwork when I do comics, but ever since I got a Cintiq tablet, I’m doing all of my commercial art digitally. The Intel Mac Pro is so powerful, there’s virtually no lag time between penstrokes, so I can generate digital art very quickly.

What software applications do you work with most? If you typically work with more than one, how does that usually play out?
My commercial work (like the art done for the show) is a combination of Corel Painter, Adobe Photoshop, and Adobe Illustrator. I use Painter for basic drawing because you can move files back and forth between it and Photoshop. Although if you have any paths in your file, they’ll be lost in the transfer to Painter, so be sure to save a duplicate version.

What advice would you give to talented artists looking to break into the creative arts industry?
I think the best thing to do is work hard to develop your own style, and realize you’ll never be an overnight success—there’s no such thing. Doing this for a living is a long, hard road, but it can be very rewarding. There’s no job like it. Additionally, don’t let anybody tell you you can’t do it, that you’ll never make a living, that you’re crazy for pursuing it. The more I heard that when I was younger, the more determined I was to succeed.

Check out more of Matt’s work:
www.matthaley.com
blackmatte.blogspot.com