Star Wars Miniature Packaging Gets a New Look

Client:
Wizards of the Coast www.wizards.com

Before

Wizards of the Coast LLC, a subsidiary of Hasbro, Inc., is considered the global leader in hobby gaming. Based in Renton, Washington, the company employs more than 300 people. Originally founded in 1990 by Peter Adkison, Wizards rose to prominence in the hobby games market on the strength of the innovative and revolutionary trading card game Magic: The Gathering.

Wizards is the current license holder and publisher of the Star Wars Roleplaying Game (RPG) and Star Wars Miniatures. The first Star Wars RPG product was released in 2000 and the Star Wars Miniatures game started in 2004. A new edition of the Star Wars RPG rules, Saga Edition, was released in June of 2007.

According to Paul Hebron, Art Director for Star Wars Miniatures, most of their products had fallen into the trap of “same carton, just re-skin the graphics.” Everything started to look the same and lacked shelf visibility. With the advent of The Clone Wars animated feature and TV series, Wizard’s Brand team requested a redesign of the packaging for a fresh look. The timing couldn’t have been better, as a full line of new products was being introduced based on The Clone Wars—boosters, a starter set, map packs, and a scenario pack. Objectives for the new packaging included:

• Reduce size of package while maintaining visual size of illustration and logo
• Consider unique packaging shapes to drive visibility
• Improve readability and message hierarchy by placement and color choices
• Show more miniatures on the package
• Create a distinct look for application to Star Wars Miniatures SKUs.

After

DESIGNERS: PAUL HEBRON AND LEON CORTEZ

We invited our Brand and Sales teams to go with us on several market walks to view our original packaging in a real-world environment. We considered placement, package condition, and visibility on the shelf against competitive products. I always try to be on the same page with the team before putting pen to paper, and retail is the best place to begin the process.

For inspiration, we explored beyond toys, games, and hobby items by looking at anything that might stand out. Because of our tight schedule, we chose to eliminate some concepts at the sketch phase. Leon and I tossed ideas back and forth until we developed a concept that resonated with both of us. From there, I provided volume and scale information based on contents, factoring in our sustainable package goals (smaller package).

Leon used Adobe Illustrator to create a die-line to scale. After several paper mock-ups and making adjustments to the die, we passed the information to our vendor for cost estimates and pack-out feasibility. While this was in process, Leon applied graphics to our preliminary design using Illustrator, Photoshop, and InDesign. We used these mock-ups to present to Lucas Licensing and our internal teams for concept approval.

The new booster pack design reduced materials and shipping by 20%. This design also translated successfully for all subsequent Star Wars Miniatures products, including boosters, a starter set, map packs, and a scenario pack. Star Wars Miniatures: The Clone Wars was announced as the best miniatures line at the 35th Annual Origins Awards in June 2009. The packaging illustrations for this series, by Terese Nielsen, were selected for Spectrum 15 and 16 as among the best in contemporary fantastic art.

ABOUT THE DESIGNERS

Paul Hebron Art Director
Paul Hebron started working at Wizards in mid-2003 shortly after moving from Los Angeles. Paul says, “I wanted greener grass and Seattle truly is the Emerald City. Sometimes I miss Los Angeles. There was something insanely comforting about being able to see the air I breathe and the challenge of successfully navigating a 15-mile route in less than an hour through midday traffic.”

In Los Angeles, Paul owned a design studio for nine years specializing in entertainment-related design. His clients included Fox Entertainment, Paramount International, Saban, and Warner Brothers. Prior to establishing his studio, he was Director of Creative Services at Live Entertainment (which later became Artisan Entertainment and was purchased by Lionsgate). Since 2003, he has worked on Star Sisterz, a collectable charm game for girls; Code Name Kids Next Door TCG; D20 Modern RPG books; and of course Star Wars Miniatures.

Leon Cortez Senior Designer
After graduating cum laude from the University of Southern Colorado with a Bachelor of Science; Major in Art degree, Leon Cortez spent the next several years in the apparel industry designing T-shirts and graphics for Tyvek jackets. In 1998, he started at one of the top merchandising agencies on the West Coast as a Senior Designer for their Consumer Products Division designing toy packaging. Working for this fast-paced agency, Leon gained a lot of solid experience, which has allowed him to excel in his current position as Senior Designer for Wizards of the Coast since 2004. According to Leon, “Working at a game company is a dream job. I get to work with a team of top designers, which keeps me learning and attaining new skills. The best part of my job is getting to play all day. I still enjoy being a graphic designer as much as I did fifteen years ago when I started.”

BY PETER BAUER

PRINTING PANTONE
You want to use a specific Pantone color in your artwork, but you’ll be outputting to an inkjet printer, so you can’t actually print that spot color. What to do? Click on your Foreground color swatch to open the Color Picker, then click on the Color Libraries button, select your spot color, and click OK. Photoshop automatically selects the nearest RGB (or CMYK or Lab) equivalent of that Pantone color, and you can paint, fill, or stroke using the new Foreground color. Already have a spot channel? Click on it in the Channels panel and then select Merge Spot Channel from the Channels panel’s flyout menu.

CUSTOMIZED GRADIENT MAP
Image>Adjustments>Gradient Map is a great way to create interesting images. The color to the left is mapped to the image’s shadows and the one to the right is mapped to the highlights. But wait, there’s more! Click on the sample gradient to open the Gradient Editor and add additional color stops that will be mapped to tonal ranges between the shadows and highlights. You could even use a black-to-white gradient with a series of gray color stops to fine-tune a grayscale representation of your image.

ADOBE ILLUSTRATOR CS4

BY DAVID CREAMER

ARTBOARD RULERS
If you show the standard rulers in a multiple artboard document, you’ll notice that the rulers extend over all the artboards, making them fairly useless on a per-artboard basis. Also, the standard rulers always measure from the lower-left corner of the first artboard. By selecting View>Show Artboard Rulers, each artboard can have its own ruler, starting in the upper-left corner of the artboard. Unfortunately, the X/Y coordinates reflect the global artboard ruler, not the individual artboard rulers.

WORKING WITH TEXT BOXES
If you have paragraph-based text, you can Place (rather than copy-and-paste) Microsoft Word files, which gives you the option of including the Word formatting and styles. After you place it, you can color the background of the text box by carefully selecting the text box path with the Direct Selection tool (the white arrow). Finally, you can use Type>Area Type Options to inset the text from the edges of the text box. Note: this doesn’t work with point type.

ADOBE INDESIGN CS4

BY DAVID CREAMER

WRAP IT UP
If you use clipping paths to knock out backgrounds and then turn on text wrap in InDesign, the text automatically wraps around the image using the clipping path; however, sometimes the text wraps into areas of the image you don’t want. If you want more control over the text wrap, in Photoshop create a selection from the path in the Paths panel, save the selection (Select>Save Selection), deselect, make Alpha 1 channel visible then active in the Channels panel, use the Brush/Eraser tool to modify the channel, and save the file. When in InDesign, you can change the text wrap to use the Alpha Channel (your saved selection) in the Type drop-down menu in the Contour Options section of the Text Wrap panel.

BUTTON IT UP
If you’re creating an interactive PDF or SWF file, be sure to check out the Sample Buttons library, available from the Buttons panel menu (Window>Interactive>Buttons, then click on the menu icon at top right and choose Sample Buttons). If you have buttons that you want on every page, such as Next Page or Previous Page, put them on a master page. If you put them on the topmost layer, the buttons will remain on top of all other objects.

ADOBE ACROBAT 9 PRO

BY DAVID CREAMER

LARGER COMMENTS
If the comments are looking a little smaller since your last birthday, you can increase their size in Preferences (Acrobat [PC: Edit]>Preferences). Click on Commenting (the first Category in the list) and you’ll see the first drop-down menu: Font Size. The only choices in the menu are Small, Medium, and Large, and if Large doesn’t cut it, you might have to get a bigger monitor!

DELETE THE FIRST CHARACTER LAST
I recently had the “good fortune” to take a PDF form in English and create five PDFs in different languages. Now if you’ve ever had to edit an entire line of type, you might notice that the type will sometimes wrap up to the line above. This problem depends on how the PDF was created, but it’s a fairly frequent problem. The easiest solution is to select all of the text except for the first character, type your new text, then go back and delete the first character.

REPLACE PAGES
If you like to use the thumbnail-drag technique to replace old pages with new ones, you may have noticed in Acrobat 9 that clicking-and-draging from one document’s Pages navigation panel to the other document’s Pages navigation panel doesn’t work any more. Now, you’ll need to hold down the Command-Option (PC: Ctrl-Alt) keys to replace pages.

ADOBE DREAMWEAVER CS4

BY RAFAEL “RC” CONCEPCION

ELIMINATE “CLASSITIS”
When you start working with CSS on a website, your first impulse will be to create classes for every single element that needs to be styled on a page, creating a condition commonly known as “classitis.” Instead, use the Compound type under the Selector Type drop-down menu in the New CSS Rule dialog to create grouped selectors. By grouping selectors that will share the same styles, you’ll dramatically reduce the amount of CSS code you have to keep up with, making editing much simpler.

USE TAB INDEX
When creating a form with multiple fields, keep in mind that many people will fill out this form using the keyboard alone—filling in one of the fields and immediately hitting the Tab key to move to the following field. By giving the fields a specific Tab Index number, you can control which form fields you start with and where the Tab key will guide the user, creating a more efficient data-entry experience. When entering numbers, simply start with number 1, and assign numbers to the fields as you want them to appear in the list.

ADOBE FLASH CS4 PROFESSIONAL

BY CYNDY CASHMAN, PH.D.

PREVIEW FRAME CONTENT
Have you ever wanted to see the content of several frames in the Timeline at the same time? Then simply choose Preview from the Timeline menu (click on the icon at the top right of the Timeline to open the menu). Now you can view thumbnail previews of each keyframe’s content.

SPRAY DOTS
Why not use the Spray Brush tool to spray patterns of dots? Select the Spray Brush tool (it’s under the Brush tool in the Toolbar). In the Property inspector, make sure that the Default Shape box is checked, and check Random Scaling if you want to spray different-sized dots. Click the arrow next to Brush to expand the panel (if it’s not already) and enter a pixel value in the Width and Height fields to set the diameter of the brush. Then, just click-and-drag the Brush on the Stage to spray a pattern of dots.

Before

Most craftsmen can make an awesome-looking product, but marketing’s where many run into problems.

Crone’s Custom Woodworking of Fair Grove, Missouri, didn’t start out as a frame shop. Tom Crone started the business in 1982 as a builder of wooden accessories for limousines—the wet bar in the back seat, for example. On the company’s website, Tom claims to have built more than 2,000 limousine consoles over the years.

Tom’s son, Mike, joined the business in 1999 and the two branched out into the home furniture market. In 2004, the two men started making round and oval picture frames as a spin-off of the furniture business. “We just kind of fell into it,” says Mike.

The two tried to market the new business locally, but it didn’t attract much interest. At one point, however, they uploaded some sample photos to eBay, “just to have something to show people,” Mike says. And the orders started to roll in.

Unfortunately, that source of business started to weaken as well, so the two decided to try direct marketing over the Web. They launched www.cronescustomwoodworking.com in 2007 and now attract customers from all over the U.S. and even from Canada and overseas. Mike maintains the site and he’s happy with its success on search engines. “Our SEO [search engine optimization] is pretty decent,” he says. “A search for ‘picture frames’ on Google won’t find us, but one for ‘oval picture frames’ or ‘round picture frames’ will put us on the first page.”

He’s not as pleased with the look of the site, however. “Most craftsmen can make an awesome-looking product, but marketing’s where many run into problems.” He thinks the site is poorly organized and doesn’t really like the flyout menus at the left for the different frame subtypes.

The Crones want a site that communicates the custom, handcrafted nature of their wares. Mike says their competition is the “stamped-out factory stuff.” He’s also sensitive to the needs of their dial-up customers: He likes the fact that the current site is quick to load and that customers don’t have to hunt around for the pricing. At the same time, he points out that they don’t have, and don’t want, a shopping cart area. “All we do is custom,” he says. And nobody places an order without communicating with them directly by phone or email.

We asked three designers to build the Crones a new, custom website.

After

I chose warm, deep browns to give the site a weathered and cozy feeling, like that of a workshop with a rich history.

DESIGNER: Joe Akers http://brainchildcollective.com

The current Crone’s site contains great examples of their custom woodwork, but it lacks the kind of information architecture that’s important for any website, especially one that sells a product. I set out with the goal of providing a clean, organized site that the visitor could easily navigate, view images of the products, get an appreciation of their craftsmanship, obtain pricing, and start the process of placing an order.

Simplifying the navigation scheme down to the most essential elements was crucial. I consolidated the original’s column of 11 buttons (two of which had submenus) to six straightforward choices to provide a more streamlined user experience.

I chose Helvetica Bold for the navigation buttons and the body copy to maintain a clean and subdued appearance. Knowing that the owner wanted to keep the cross-sections of the frames as a visual aid, I turned them into clickable icons that would allow the customer to choose a frame profile and wood finish as part of the custom order inquiry. Because the owner follows up every inquiry with a phone call, I felt this simplification wouldn’t compromise the user experience.

To convey the handcrafted quality of Crone’s woodwork through both the feel of the site and the color palette, I chose warm, deep browns to give the site a weathered and cozy feeling, like that of a workshop with a rich history. I added a texture to the background color to continue the hand-rubbed, worn look throughout and to add depth to the design.

While the original’s concept of a carved wood logo makes sense for the subject matter, the logo itself is difficult to read. I designed a new logo that’s simple and legible and adds more character. The Adobe’s ITC Garamond Handtooled typeface gives it a raised and dimensional appearance. And I chose Creative Alliance’s Conga Brava Standard for the logo’s subline because its chunky serifs lend a “carved” appearance. Simple line work finishes the design and suggests its containment in a plaque that might be handcrafted and displayed in the Crones’ workshop.

ABOUT THE DESIGNER
Joe Akers http://brainchildcollective.com

As a former musician and trained chef, Joe has always embraced his innate creativity, and enjoyed sharing his talents with others. But after spending 10 years working on his feet in various kitchens, it was time for him to find another outlet for his creativity.

In 2007, Joe co-founded Brainchild Collective in Richmond, Virginia, as a way to bring together the cumulative talents of several friends to create awesome multimedia projects for a variety of clients. The idea behind Brainchild was to provide small-to-medium-size businesses a singular solution for graphic design, Web design, photography, and video. By offering all of these services in one studio, Joe and his fellow collective members can better control the integrity of the brand and the quality of the designs and materials they produce for clients.

Finally out of the kitchen, Joe is happy to be behind the desk and the lens full time. He’s also glad his wife is a wonderful cook.

APPLICATIONS USED: Adobe Illustrator CS4 and Adobe Photoshop CS4

After

A white frame (or mat) lifts the site from the deep-brown background and a thin wooden trim (or molding) separates the header from the side panel.

DESIGNER: Stephen Chachere www.solaramedia.com

My first step when designing a website is to inventory and arrange the content in a coherent structure using Microsoft Word. For Crone’s Custom Woodworking, I was able to identify the text and images I wanted to highlight and, more importantly, I knew what the site navigation was going to look like before I considered the colors, logo, or layout.

For my second step, I work with the colors and logo, the elements that establish the feel of the site. In this case, I used Illustrator to set the company name in Bitstream’s Century 731, a bold italic, serif typeface; I framed the “C” to convey both the delicate curves and strong nature of the frames; and for readability, I used TheSans from LucasFonts for the navigational elements. I limited myself to three earthtone colors—brown, green, and beige—in addition to white, to complement the colors of the wood. I chose muted colors because I didn’t want to divert attention from the frames.

And my third step is to design the layout. Here, I used a combination of Illustrator and Photoshop to sketch out various formulas before deciding on left-side navigation. For the header and side panel, I created textured green panels with Photoshop lighting effects to quietly highlight the logo, title, and navigation bar. A white frame (or mat) lifts the site from the deep-brown background and a thin wooden trim (or molding) separates the header from the side panel. I wanted these elements to be subtle and elegant—the wall on which Crones’ frames would hang.

For site production, my first choice is usually Flash, but for Crone’s I’d recommend a hybrid site combining Flash navigation with HTML that Mike Crone can continue to update himself. The samples in each category (organized by shape, wood type, finish, etc.) are presented as thumbnails that scroll across the page. Clicking on a thumbnail opens a new window with a larger view. Because the content of each page is presented within the area framed by the header and side panel, the site visitor won’t have to scroll down to view content, and the site navigation will always be onscreen.

ABOUT THE DESIGNER
Stephen Chachere www.solaramedia.com

Stephen is co-owner of Solara Media Inc., based in the Hudson Valley (just north of New York City). He was introduced to digital media in 1991 when completing his MFA in photography at the State University of New York at New Paltz. During the 1990s, Stephen worked as a media designer, providing graphics and presentation services to various Fortune 500 companies. At the same time, he was an instructor in art history and digital media at Marist College in Poughkeepsie.

Stephen founded Solara Media Inc. in 2000. From inception, the company’s emphasis was on interactive multimedia and a less-is-more philosophy of design. Macromedia Director was the preferred platform until a matured Flash came on the scene. Stephen creates custom interactive designs for clients in the medical, consumer products, and nonprofit sectors. His medical education applications have been particularly successful in securing awards for his clients. Stephen is also the videographer behind the original digital video featured in many Solara Media projects.

APPLICATIONS USED: Adobe Illustrator and Adobe Photoshop

After

…it made sense to somehow display their craft in the header so visitors would quickly get the idea of exactly what they do.

DESIGNER: Chris Pickey www.chrispickey.com

First, I created a workable logo for Crone’s: something simple and elegant, not too slick, but one that would scream, “We work with wood!” I pictured a logo in my head that used a silhouette of an Oak Tree along with “Crone’s” stacked on top of ”Custom Woodworking.” I tried a few combinations of that and finally decided the best had the tree on top, with “Crone’s” in a larger classic typeface and “Custom Woodworking” at the bottom. After twice going through my font library, I decided upon Castellar, a Microsoft font originally drawn for Monotype. There was something about its classic chiseled look that fit—it was strong and regal, yet organic.

With the logo taken care of, it was on to the overall look. Because Crone’s creates custom wooden frames, it made sense to somehow display their craft in the header so visitors would quickly get the idea of exactly what they do. Since I was working with pictures of frames, I decided to have them look like they were hanging on the wall.

I kept the left-side navigation, but made the categories more specific to shape—that way they wouldn’t need flyout menus. And instead of an Idea Page with just pictures, I created a fictional Create-A-Frame page. In the future, Crone’s might possibly allow users to start the design of their own frames through an online application.

I also wanted to give Crone’s an area to feature new offerings and special promotions, so I created a right-hand column for those; CSS would give the items a wooden-frame border with a slight drop shadow to carry through the “frames-on-a-wall” theme.

For the homepage, I focused on building the relationship between customer and company with a text explanation of what Crone’s Custom Woodworking is all about. Plus, the picture of the man holding the man-sized oval frame is priceless. On the product page, I kept the examples of their work but consolidated them into a slide show that people could flip through, which added more interactivity and helped to keep everything important above the fold.

ABOUT THE DESIGNER
Chris Pickey www.chrispickey.com

Pickey (that’s what he goes by) is one of those jack-of-all-trades; however, he does claim to be master of a few. He cut his design teeth in 2000 at the Daily News Journal in Murfreesboro, Tennessee, where he worked as a classified ad designer with no design degree. With the help of friends and hours of hard work, he quickly built up his knowledge, skill set, and experience.

In 2002, he and his wife moved to Indianapolis, Indiana. There he eventually became the graphic arts manager of Wild Birds Unlimited, the largest specialty retail franchise specializing in backyard bird feeding. At Wild Birds he got his hands dirty in every aspect of design: print, Web, audio, video, interactive, packaging, and so on.

After five years, Pickey left Wild Birds Unlimited to set up shop as a freelance designer. That not only freed up time for his family, it also enabled him to devote more time to his other primary pursuit: being the drummer for the Jake Brothers band (www.jakebrothersmusic.com).

APPLICATIONS USED: Adobe Illustrator CS3 and Adobe Photoshop CS3