Design Solution: Indie Coffeeshop Corporate ID

Design-Solution-indie-coffeeshop-id-header

Design Solution: we give an imaginary project at the Go Media designers, and ask them to give us an overview of how they would approach the project. Not so much a tutorial on how to create the artwork, but rather how to tackle all of the logistical details. This installment features Go Media’s Adam Wagner.

The Project:

The indie coffee shop liked your WordPress design so much that they have asked you to design their corporate identity. They don’t have a huge budget, but are interested in experimenting with different printing techniques and on different papers. They’re also going to use this logo on their site.

The Solution:

When designing an identity for a business, I usually do not start on any of the print or web based material until the system is established. However, this situation is somewhat unique in that I would have already designed collateral material, the WordPress design, before I created the identity system.

• Do your research

Under normal circumstances, my first step would be to have a consultation with the client about their business. I would find out as much as I could about how the business functions and what their business does, who their customers are, who are their competitors, what their future plans for the business were, and why their business matters. In general I would just collect as much information as possible about the company. In this instance, a lot of this information would probably have already been collected in preparation for the WordPress site design.

• Concepts

Next, I would brainstorm and try to come up with some interesting concepts for the identity. These could be informed by the way the company operates, what their name is, or their specific industry as well as numerous other aspects of their business. I would narrow the ideas down until I had one to three directions to explore further.

• Sketches

The next step would be to start doing some rough sketches of the various logo concepts. I typically like to set up a page with multiple boxes and in each box I sketch a unique mark based on the concept. The most important thing when sketching logos is to never erase. Even if you make a huge mistake, just move to the next box or section of page and keep sketching. This process helps you get as many ideas out on the page and lets you weed through the bad ones and refine the good ones until you have a few really solid directions. Sometimes I find something interesting in forty sketches and sometimes it takes many more to hit on something interesting.

• Refine your sketches digitally

When I have my sketches narrowed down, I then scan the pages into Illustrator and begin roughing out the shapes. At this point I may have a more developed idea in my head as to how the mark is going to come together, or it may come together naturally as I am working on it. I also start thinking about pairing faces for the mark if I haven’t drawn a custom treatment for the logo.

• Present logo to the client

Once I have the mark to a point that I am satisfied with, I would propose the concept to the client. We would begin the revision process, if necessary, and refine the mark until we are both satisfied with the outcome. In this case the end result would probably be a one color logo, because the client has a tight budget and needs something that will work both on the web and in print.

• Expand the identity

With the logo being finished, I would then move on to the creation of all the collateral material. In this case it would probably involve menus, table top cards, cup sleeves, cups, parchment paper, take away bags, and environmental graphics. The most important thing to remember when designing these items is that they are all part of the system and should relate to the feel and tone of the branding and the logo. Since a lot of waste is involved in the daily functioning of a coffee shop, from an environmental standpoint, I would seek out sustainable materials and eco-friendly inks to use in printing. I would go through the entire design and review process with the client until all the materials were completed and approved.

• Double check everything

Before I sent anything to print, I would review the website and make sure that it is totally integrated with the system I created for the rest of the store’s branding and graphics. If there were any inconsistencies, I would correct them before there was a costly printing mistake. After everything looked great, I would pass the final proofs by the client for approval. If everything went well, I would send it all to print. Don’t forget to ask the printer for proofs, and check them carefully to make sure there are no mistakes or things that need to be changed. When the project is done being printed, make sure to ask for samples to add to your portfolio.

• Send files

After all the printing was complete and the project was fully paid off, I would send the client all the final files for everything in the identity system. It never hurts to send a thank you note as well to let them know that you appreciate the opportunity to work on their project.

Print Technique: Reflecting on Strike-Through Varnish

reflecting stricke-through varnish

When most of us want to add additional flair to our print project, we automatically look for elaborate finishing processes to help us accomplish this, forgetting that a well-designed spot varnish can really take the perception of quality and design up a few notches. Unfortunately, most people look to spot UV to hit this mark, since it’s immediately recognizable based on its high-gloss, wet-look appearance.

Spot UV’s Dirty Little Secret

While spot UV truly does produce a beautiful product, it’s sort of like the Las Vegas of the print world…..all the glamor and glitz, with lots of dirty little secrets. First, it’s a petroleum-based product, and the last thing any of us need is for your postcards, business cards, or annual report to further our dependency on foreign oil. Second, spot UV can be very expensive and typically runs off-line, as an additional process.

So, why bring it up if I’m only going to talk you out of using it? Because I can offer you a comparable, but much greener process!

Go Greener with a Strike-Through Varnish

Here’s how it works: The contrasting glossy vs. matte effects are accomplished using our water-based coatings and a strike-through varnish, printed as an ink, inline on our presses. First, the dull/matte strike-through varnish is put down with a traditional printing plate in the areas that are to stay matte. At the end of our presses, an overall flood of our gloss aqueous coating is applied.

As it cures, the gloss coating is dulled down in the areas where the strike-through matte varnish had been applied. Also, since we’re using a traditional printing plate in a standard print unit on our press, we can achieve as much detail as we want. Otherwise, you have to cut a coating blanket specifically for the areas where you want glossy, and that blanket can only be used for that press run or project.

Strike-through varnish

When designing for this, remember that, because it’s a water-based setup, the contrast is not as dramatic as the petroleum-based UV. However, keeping the varnish design on a darker, solid-color background will ensure you get the maximum amount of visual appeal out of this process.

Get The Guides

For more info on how to setup your spot varnish files, download the PDF of your preference:

‘Weapons of Mass Creation’ Art Campaign Kick-Off Party

weapons-mass-creation-photoshoot-header

The ‘Weapons of Mass Creation’ Art Campaign Kick-Off Party

Saturday, September 19th, 2009 • Go Media Studios, Cleveland Ohio

IMG_0014

We invited top artists, illustrators, print designers, and web designers from all over the country to come to our studio in Cleveland to participate in a photo shoot for the upcoming art campaign “Weapons of Mass Creation”. The purpose of the campaign is to give artists and designers we respect the opportunity to showcase their own work and send a positive, unified message to the community. The final ad will appear with an incredible shot of the designer standing in front of his or her own work next to the headline “I am a Weapon of Mass Creation”.

IMG_0062

To kick off the campaign, we hosted a photo shoot with rock ‘n roll photographer Chris Casella. Chris is a great photographer known for his photo shoots with Slash, Slipknot, Disturbed, and a whole load of other mainstream bands – and he made us look like rock star designers!

IMG_0059

When not getting the rock star treatment in front of the lens, designers were trading merch & business cards, eating pizza, filming video interviews with Go Media information architect Liz Hunt, or playing Wii bowling. It was a great time, and we really hope to host a sequel with an even larger crowd!

IMG_0056

Here’s a list of attendees:

IMG_0052IMG_0050IMG_0049IMG_0045IMG_0038IMG_0033IMG_0026IMG_0019

Blank Canvas: What’s Your Digital Design Setup?

blank-canvas-header

We’re starting a new feature on the Go Media ‘Zine to give our readers a chance to voice their thoughts and opinions. We’re naming it “Blank Canvas”. And if you readers have any topics you’d like to see covered, please let us know in the comments and we’ll choose from the best and use for future “Blank Canvas” posts.

To kick things off, this week’s topic is “What’s Your Digital Design Setup?” and we’d like to hear from readers about your setup for creating.

The Questions:

  • Mac, PC or other? What kind of machine?
  • What software/version do you create with?
  • Any extra hardware gadgets or tools?
  • Reference books/media nearby?
  • Inspiration?
  • What kind of desk & chair?

To get this ball rolling, here’s my personal setup:

2008 Mac Pro with 14 GB RAM. Most of my work is done Using the Adobe Creative Suite CS4, primarily Illustrator and Photoshop, but InDesign gets it’s fair share of attention. I rarely use my mouse, almost all of my interaction with the Mac is via my Wacom Inutos4 medium-size graphics tablet. Keyboard and mouse are stock from Apple. I have a basic scanner, a Canon LIDE 90. I have a dual-monitor setup, my main monitor is a 24″ Samsung SyncMaster 245T and my secondary is my former main monitor, a 20″ ViewSonic a Samsung SyncMaster 2243BWX 22″ monitor. Main monitor is calibrated using a Pantone Huey. A bunch of external hard drives, mostly for backups and more backups.

I also have a webcam set up, primarily for the microphone. Of course I have a set of external speakers hooked up. All my main computer equipment runs through a battery backup/surge suppressor in case of power glitches or outages. I also have an EyeTV which lets me watch & record TV on the Mac while I am working.

My desk is always cluttered, I have a small bookshelf nearby with various drawing and design reference books. I have a nice rolling taboret for all my drawing and art tools, including all my Pantone swatch books and color reference books. The desk I sort of built myself, it was a DIY IKEA 60″x30″ tabletop and leg setup. Lots of paper and sketchbooks nearby, I primarily sketch on laser paper sheets as they are easiest to scan afterwards. Chair is a basic drafting table chair.

There’s a drawing table next to my main computer desk, but mostly it gets used for stacking paperwork and other random stuff. I usually draw and sketch on a small drawing board sitting in front of the computer.

A tiki sculpture and an Easter Island bobble head keep me company, along with a posable wooden reference hand as well as a posable mini wooden reference manikin.

Design Process: “Sick” Metal Band T-Shirt

design-process-sick-tshirt-headerThis is the first in a new series we’re going to run on Go Media ‘Zine: Design Process. We’re going to throw an imaginary project at the Go Media designers, and ask them to give us an overview of how they would approach the project. Not so much a tutorial on how to create the artwork, but rather how to tackle all of the logistical details. We’re hoping you all enjoy. We’re going to kick things off with none other than Go Media’s Jeff Finley.

The Project:

You’re hired to create a “sick” t-shirt design for a major label Metal band. Their fans also listen to Metallica, Slayer, Slipknot, and Mushroomhead. Describe how you would make something that would appeal to those fans and sell at stores like Hot Topic or Spencers and what software you would use to create it. (Keep in mind the look of those bands merch and how you would create something similar).

The Process:

1. Familiarize Yourself

The first step is to get acquainted with the project and familiarize myself with the bands, fans, and the merch referenced in the brief. I’m don’t need to be a fan of the band I’m designing for, nor do I really have to be a fan of any of the others. But I like to at least listen to the band, maybe check out some lyrics, and their previous merch to see what has been done before.

2. Determine Style

Determine the design style. My main responsibility is to understand the vibe and aesthetic. This entire process really only takes less than 5 minutes because I’m already familiar with the bands and know exactly what style I’m to design in. In this case, I know I’ll be drawing something. What am I going to draw? My instinct tells me it’s going to be dark, demonic, and scary on a black t-shirt. But I shouldn’t be so quick to assume that, maybe the band wants something different. I better go back and reread their brief. Brb…

3. Read the Brief

OK, just read the brief and it turns out they want nothing new. OK, just like I thought. The brief says “We’re not trying to reinvent the wheel here. We just want something sick, that will appeal to people are into metal. You know, skulls, roses, blood, blades, etc.”

4. Assess The Budget

Talk to the client and assess budget. At this point, I would normally talk to the client about what subject matter they want in the tee and propose some ideas. Once I have a good idea of what they want and how much they can afford, I’ll get to the sketch phase. I suggest that maybe we use some of their lyrics about collecting dead birds and how it relates to a broken heart. I don’t need to REALLY understand it, but I can use some of those images in my sketch. Client likes the idea, so I move on.

5. Concept Sketches

Sketch up my concept. I’ll flesh out my approved concept on paper and I’ll show the client. This way they can give me feedback on overall composition, the meaning, the subject matter, etc. Just for sake of this article, my sketch might be a dead bird lying on its back autopsy style with a beating heart inside. Around the design I might add embellishments like graphical spikes, flourishes, grunge, etc.

6. Go Digital

Digitally ink, color, etc. I like to move to the computer after the client has approved my sketch. In this stage, I will likely use my Wacom tablet to digitally ink my sketches. I’ll gather reference material for the subject matter I am creating (in this case birds and hearts). My linework usually is black and I limit my color palette to about 3-4 colors. I’ll might use some stock vector elements from the Arsenal if I’m adding in decorative vector ornaments, flourishes, tribals, etc.

7. Proofs

Post proofs and mockups: Once I have a design finished how I like it under the budget they have given me, I’ll mock up the shirts on our photo-realistic t-shirt templates so the client can better see how the design will look on a shirt. I’ve found the more realistic you can present their idea in the real world, the more approvals you’ll win.

8. Revisions

Turns out the client liked the design, but they just want some color changes. So I’ll go back and make those changes, log my time spent on them and show the client new revised proofs. If they hate the design (unlikely, because they already approved the sketch and concept) then we reassess the budget and how much they can afford to start over. This rarely happens.

9. Final design

They give me a final approval on the design, then we send the invoice for the remaining hours. Once they’re all paid up, I prepare the final files for print. Usually that just means organizing the PSD or AI files, saving out flattened high res versions, etc. I don’t typically do color separations for tees, we save that job for the printer.

10. Send the files

At Go Media we like to burn everything on a disc and mail the final files to the client. We also send them online via YouSendIt. Both ways to make sure they get the file. We also send out a mini survey so they can give us feedback on how we did. Most of the time it’s 9’s and 10’s but occasionally we’ll get a 7 or 8 :)

Wacom Bamboo Touch Revealed Early

bamboo-touch-early-header

Seems Wacom has a new product to be released, and the beans were spilled early by retailer Best Buy, who put the product out on the shelves before the official release date. In fact Wacom has no information on their site about the new device. Wacom’s new Bamboo Touch is a USB trackpad incorporating multi-touch, giving users an iPhone-like experience on their Mac or PC. Early reports on the pricing are around $70 USD for this model.

The model featured here is finger input only, but there’s been speculation across the web that there are going to be multiple models of the device, some which support a pen/stylus in addition to the finger gesture input. And extrapolating from Wacom’s current product lines, it’s reasonable to deduce that there may be an Intuos Touch, perhaps incorporating advanced features, and perhaps the models that include a stylus.

Any graphics tablet user who has experience with both Wacom’s Bamboo products and their Intuos products knows that there is a huge difference between the two lines (which is also reflected in the prices). It’s fair to assume that if an Intuos Touch is in the pipeline, it will be far more fully-featured than the Bamboo version of the same product.

Many might dismiss the device, thinking that drawing or sketching would be far less intuitive than working with a pen/stylus, and I tend to agree. My interest in the device isn’t for drawing, rather for rotating, zooming/scaling and moving the canvas around in Photoshop and Illustrator. A far more intuitive method for those actions other than hunting down the keyboard shortcuts every time.

Here’s a brief intro video by a YouTube user who picked up a Bamboo Touch:

Here’s the text from the box:

Smart
Gain all the benefits of Multi-Touch. Use Bamboo with all standard operating systems and applications. Custimize your Bamboo, too. Flexible and versatile, Bamboo is the smart choice.

Engaging
Engage with your computer in an all-new way from the very first touch. Multi-Touch makes complex commands as easy as a gesture, while Bamboo’s ample tablet space lets you get in touch with your work.

Natural
Make your every gesture count! Scroll, zoom, rotate or flip through photos and documents. Everything at your fingertips.

  • Multi-Touch input for intuitive and direct control
  • Use a single finger to navigate and multiple fingers for gestures and clicks
  • Use finger gestures to scroll, zoom, rotate, go backward or forward
  • Spacious touch area for all gestures
  • Four user-defined ExpressKeys for shortcuts or clicks
  • Easy USB connection
  • Interactive tutorial helps you make the most of your Bamboo
  • Overall tablet size: 8.2 x 5.4 x 0.3 in (208 x 138 x 7.5 mm)
  • Wide-format active area size: 4.9 x 3.4 in (125 x 85 mm)

PC: Windows 7, Vista or XP with Service Pack 2
Macintosh: Mac OS X (10.4.8 or higher), Intel or PowerPC Processor

wacom-bamboo-touch-box-back

All you Wacom users out there: what’s your take on this product? Something you’re interested in or not? How can you envision using muti-touch gestures in your creative workflow?

Faking Depth of Field in Photoshop (w/Ps action)

faking-depth-of-field-header

Here’s a quick technique that I use to fake depth of field in Photoshop and add realism to my images. I’ve seen this technique mentioned in various tutorials I’ve read, so it’s really nothing new. But it’s a good trick that I feel you should know.

1. Create a new Channel

2. With that Channel selected, add a reflected gradient at about 80 degrees. Black in the center and white around the edges.

3. Select your RGB channel and go back to your layers.

4. Filter > Lens Blur

5. Select your new alpha channel as your “depth map” source

6. Adjust the radius to your liking, don’t overdo it. Be gentle.

spraypaint-beforespraypaint-afterspraypaint-light

See example images for before and after. Try adding lighting effects or other subtleties to make the effect more cohesive and realistic. Or better yet, work off a 3D render or image already in perspective for more accurate and convincing results.

3drender-before

3drender-after

What’s that you say? This would make a great Photoshop action? Indeed it would. You can download the [download id=”45″] right here!

Quick Global Swatches In Adobe Illustrator

quick-global-swatches-header

Global swatches in Adobe Illustrator: they’re awesome. If you’re not aware of the power that is a global swatch, they are special color swatches that are applied like regular swatches, but when the swatch is changed, all vector objects using that swatch are also updated. Similar to Symbols in Illustrator, or Instances for you Flash users. Like I said, awesome.

Global swatches come in very handy when tweaking colors in an illustration or design. Obviously you’re keeping your color palette tight, limited and harmonious so using global color swatches is the ideal method for ensuring all your elements are using the exact same color throughout the illustration or design.

Of course, this is only handy if you’re using global swatches from the go. Otherwise you need to go back, select one object using a color, go to Select > Same > Fill Color and then create a global swatch, and then apply that global swatch. Sheesh! But what if I told you you could create global swatches in one fell swoop, and convert all your existing art to the global swatches, and group them all into a color group in one step? I thought you might be interested. Read on for the how-to…

Open Your Image

Open_Your_Image.jpg

Open up your .ai file. Obviously (or not so obviously) this technique will only work with vector objects. Here I am using a cool little punk rock alien cartoon character playing bass guitar, which I recently created for a client project.

Select Your Artwork

Select_Your_Artwork.jpg

Select all the artwork for which you want to create global swatches. Here I just used the Selection tool and dragged around the chosen vector art objects.

Create The Color Group

Create_The_Color_Group.jpg

Click the “Create Color Group” button in the Swatches palette/panel. It’s the little folder icon with a plus sign superimposed upon it.

Create The Global Swatches

Create_The_Global_Swatches.jpg

After clicking the “Create Color Group” button, you’ll be presented with this dialog box. Be sure to click the “Selected Artwork” radio button as well as the “Convert Process To Global” checkbox.

Behold Your New Color Group!

Behold_Your_New_Color_group_.jpg

Voila! You now have a new color group with all the selected object colors, and you can see by the white triangle in the corner that they are all indeed Global swatches. Illustrator also handily has converted the colors in your selected artwork to these new global versions of the swatches.

Aged Type Effect in Photoshop (w/Ps Action)

aged-type-header

While working on the poster for DIT Fest last week I managed to create an impressive text effect that I will likely reuse for awhile. It’s very subtle and does not look like a filter. I’m simply adding a slightly aged, worn, or screen-printed look to any typeface. You can even apply this effect to any solid color shape or vector graphic for a hand-made screen-printed look—all done in Photoshop.

Aged-Type

  • Create your type as you normally would
  • Rasterize the type
  • Add noise, around 25%. Be sure the check the ‘Monochromatic’ checkbox.
  • Adjust the Input Levels, bring the black level up to about 70
  • Run a very slight Gaussian Blur on your type – like 1 or 2 px
  • Run Smart Sharpen to remove the blur but keep some of the organic distressing / softening that occurs. Like 200% for the amount and about 15 for the radius.
  • Adjust Levels again – bring black up to about 50 and white down to 69.

Or just download the  and never have to remember how to do it again.

If you want to take it further:

Buy our Stamp Effect actionmore info

See example images:

ditfest-postermockup2ditfest-postermockupditfest-poster-fullditfest-poster-detail2ditfest-poster-detail1awesome-example

Living In A Die-Cut World

die-cut-world-01-header

I spot die-cut

Assuming you’re in the print or design community, I’m sure you can appreciate my hyper-awareness to the massive amounts of die-cut materials sprinkled throughout our every day lives.  Scattered around my kitchen, I’m seeing cereal boxes, pizza cartons, even the regular mail is filled with standard #10 envelopes that had to be die-cut before they could be glued and converted into plain old envelopes.  So much engineering and craftsmanship in such a neglected and undervalued piece of paper.  Right in front of me, I’m looking at an iPhone, beautifully constructed of round-cornered components, all masterfully die-cut and stamped parts.  Next to that sits my wallet, stuffed with die-cut credit cards, gift cards, my health insurance card, drivers license, various permits, and even my Blockbuster card has round corners.  Whether it’s for aesthetic value, functionality, or even the protection of the piece, it serves a purpose.

So, why is it then that when most clients look to design or print marketing materials, they don’t all choose to customize their project with some fancy die-cutting?

The bottom line is usually the bottom line, right?  Cost.  Especially in this economic climate, if every company, large or small, had it’s own “trending topic” Twitter list, cost consciousness would always sit at the top.  While many clients surely see die-cutting as an added, unnecessary expense, I think few truly understand the real value that it brings to the table.  Typically, it’s more cost effective than you think, especially when you think about the big picture.  With the amount of time, energy, and money you spend to acquire leads, prospects, or clients, shouldn’t you seize that opportunity to communicate with them as effectively as possible?  Of course you should!  Think about how much printing you see every day and then realize what it really takes for something to really jump out at you.  It takes more than a rectangle and some stock photography.  So, like I said…die-cut it.

Let’s walk through the process of die-cutting and then we’ll discuss how to setup your file.

1. Die-creation

This starts with a dieline, which most of the time starts with you.  Once the dieline is submitted, it’s converted into a .dwg (AutoCAD) file for the die to be engineered.  Typically, a blank sample is cut to ensure that the piece works.  This is especially important if the die-cutting provides functionality.  Many times, for cartons and other packaging, numerous samples are made with the exact paper being used for the job, until it’s perfect.  Once the dieline is good to go, a large automated table cutter uses various tool attachments to drill and carve an incredibly precise copy of the dieline into a 3/4″ thick pine board.  Once the board is cut, the die rule is cut and formed to fit the curves of the die, so that it can be inserted into the carved slots and then pounded in securely and perfectly even for cutting.

Die-cutting rule being shaped/formed
Rule being secured into place
Die board with half the rule inserted

If you reorder the same piece later, this process only happens once. Assuming no changes need to be made to the die, then your die cost is a one-time expense and this die will be re-used.

2. Die-cutting

The die is setup on the machine and locked into place.  The machine is sheet fed, so individual sheets feed into the press and are pressed against the die with a precise amount of pressure.  The operator must pay constant attention to the  pressure being used and the registration of the cut to the crop marks and printed piece.  If this job is a piece of packaging or has other folding, conversion or functionality, the operator will strip the piece out and certify that it completes properly before running the full quantity of the job.

Stock entering the feeder of the press
Die entering the press

3.  Stripping

Once the job is finished die-cutting, it’s still in full-sheet form.  You may be a little confused at this point, but this is because, if the machine cut the piece completely out, you’d have odd shaped die-cut paper pieces flying around loose in your machine.  Not a wise move when you’ve got sheets cranking through that press by the thousands.  There are larger presses that can handle stripping on press, but they’re much more expensive, so, as you’d expect, they’re used for larger jobs.  Smaller jobs are hand stripped, which can leave small “nicks” on the printed piece, from the tiny strands of paper that kept them fastened to the rest of the sheet for delivering out the back of the press and stacking neatly.

4.  Additional Finishing

After this, if there is additional finishing to be performed, it will commence.  Typical examples are folding, gluing, applying fugitive (booger) glue and gift cards or promotional coupons, tipping (inserting) in product samples, bindery, etc.  If none of these processes apply, the job is packed and shipped.

5. Setting Up Your File

Now you know more than the average joe about die-cut techniques – now put them into practice! Watch this short video to learn how to set up an Illustrator file that’s ready for die-cut production.

Retro Modernist Poster Design with 3D Typography

retromodernist540

What you will learn

In this tutorial, you’re going to learn how to create a vintage, retro-modernist poster in Photoshop. You’ll also learn some vintage coloring techniques, retro photo effects, and some cool 3d typographic effects. You’ll also need Adobe Illustrator to create vector paths that will then be imported into 3ds max. This won’t be a typical step by step tutorial, but more of a walkthrough of how I created this poster for a real client.

finaldesign

The design brief

The poster is for North Coast 99, an annual recognition program that honors 99 great workplaces for top talent in Northeast Ohio. Every year they have a unique design that is used as a poster and magazine cover for Inside Business magazine.

The concept behind this year’s design was to honor businesses in Northeast Ohio who were able to grow even during the recession. Themes that the client provided were the words “Pioneer & Persevere”, a plummeting line graph to symbolize the recession, and green/nature elements to symbolize the environmentally conscious.

Preliminary sketches

I am a firm believer in sketching out some ideas on paper before you start. This helps get your mind going and the pressure is off. Here’s a list of things to make sure you think about when sketching your ideas.

  • Does your sketch include the themes or subject matter provided by the client?
  • Is your sketch the right proportions of the final design?
  • Does your sketch properly convey the meaning behind the design?

1_sketch

Create your type in Illustrator

The first step is to use Adobe Illustrator to create your type. Choose your fonts wisely. How do you know what font to use? In this particular case, I used Fritz Quadrata because it is classy and has a slight flare-serif characteristic of many retro typefaces made popular in 80’s movie posters.

2_typepaths

But you can use your favorite font, as long as it helps you achieve the vibe you’re going for. Other fonts great for vintage and retro design are Serif Gothic, Kaptiva, Garamond Ultra, Windsor, Korinna, Liberty, Tango, Flange, Springfield, Seagull, Legothic, or Scentogram to name a few. Lay out your type and go to Type > Create Outlines. Save your document in AI 8.0 format. This is key! You must save as AI 8.0 in order to import your paths into 3ds Max, otherwise, you’ll get an error.

Set up your scene in 3ds Max

Open up 3ds Max (if you don’t have this, Cinema 4d will do the trick as well). I use 3ds Max simply because I learned it in college and am more comfortable with it. I can get results I want quickly.

3a_rendersettings

What is the final output size of the poster? In this case it’s 11” wide by 14” tall. Or 3300×4200 pixels at 300 dpi. Eventually you’ll need to set your render settings to this, but for now, let’s just lock that aspect ratio and make it 500×636. This is good for speedy renders while working.

Then create a camera and set it up at the proper angle. One shortcut I like to do is manipulate my perspective view to get my desired angle and then create a camera in top view. Then select my perspective viewport and press Ctrl+C to automatically position my camera to the same view. Cool huh! Now I can switch to camera view and keep the angle I originally had in the perspective viewport.

Then right click on “Camera1” in the upper left of the viewport and select “Show Safe Frame” and this will give you the correct proportions for your poster.

Import your paths into 3ds Max

Go to File > Import > Paths and select your .ai file that you just saved. You’ll be presented with a dialogue box that asks if you want replace the scene or merge with current. Just click OK to merge objects within the current scene. It will ask if you want to import your paths as single or multiple objects. In this case, just select single object because you’re not going to need to edit these letters individually.

3_importpaths

3b_importpaths

3c_pathimported

Once they’re imported, you’ll see they came into your document very small. I usually like to scale my letters up some with the scale tool. After you’ve done that, proceed to the next step.

3d_scale

Extrude and Bevel your type

Apply a Bevel Modifier to your type and use my settings as reference. You can tweak them to your liking to get a deeper bevel or a more rounded bevel.

4_bevel

4b_bevel

I prefer the subtle bevel that’s barely noticeable but it helps add realism. Why? Because a standard extrude with no beveled edges has a hard time looking realistic. In reality, every single object has some sort of corner to it, not matter how subtle. With a simple extrude, you don’t get any corner. It’s an exact 90 degree angle from one side to the other. You need that subtle beveled edge to catch light that gives your letters that sexy specular highlight along the edges for added realism.

4c_bevel

Once your bevel is set up to your liking, rotate your text 90 degrees so it’s on its side reading from bottom to top.

Create the line graph

5_linegraph

Go back into Illustrator and create a line graph similar to the one I have shown here. In this case, you see the graph goes down and then steadily rises to the right. This is supposed to symbolize the businesses that overcame the recession.

Once you are happy with your line graph, expand your strokes and save your file in AI 8.0 format and import into 3ds Max. Just like we did before.

5b_linegraph-import

This is where it can get tricky. I wanted my line graph to come in from the left side of my type, wrap around the letters, then exit on the right side. It’s more of an abstract representation of the line graph rather than making it so literal. It makes the image interesting.

5c_manipulatepoints

You’ll need to rotate around your scene to make sure you don’t accidentally intersect the line with your letters. It’s not hard, but it just takes some time.

5e_extrude

Add an extrude modifier on this line and check the settings below.

5d_extrude

Once you’re satisfied with the result, we’ll create the ground that the type is sitting on.

Create the ground / hill

6_hill-creategeosphere

Create a new geosphere and positioned it under your letters. Adjust the size to your liking. Crank up the number of polygons to make sure you get a pretty round edge. You don’t want to be seeing any blocky edges that scream “hey, I’m CG!”

Apply Textures / Materials

7c_hill-matteshadow

With your hill still selected, you can go ahead and apply a new material to it. Instead of “standard”, select Matte Shadow. This will essentially make the hill render ONLY the shadows cast by the light and NOT the hill itself. This is going to be useful later when compositing the scene together in Photoshop.

7d_hill-matteshadow2

For the type, apply just a standard blinn material to it. Adjust the diffuse color to white and you’re set. You could play around with the specular highlights and glossiness if you want as well.

7_texture-type

For the line graph, just apply another standard blinn material but make it red. Check the box that says “2 sided texture” because otherwise, the backside of your “ribbon” will be invisible. Again, you could adjust specular and glossiness to your liking. Remember, specular is how much light is reflected on the surface and glossiness is the size of the highlight. The higher the number, the smaller and more precise the highlights.

7b_texture-line

Set up your lights

First create a skylight in the top viewport. Adjust the intensity to something like 0.8. You don’t want it too bright, because we’re going to be adding more lights next.

8-lightingsetup

Add a targeted direct light next. AIM it from behind the letters as if it’s about 3pm in the afternoon. In my initial concept, I wanted to have the sun behind the letters so I could give it a glowy feel. Later, we’ll be compositing a real sun photo to get a more realistic look. Turn on cast shadows.

8b_light-settings1

And lastly, clone your direct light and turn off the cast shadows. Position this light more in front and lower the intensity to something like 0.4 for a subtle effect. This light will act as a fill light so it’s not so dark in the front. Typically if you take a photo of a subject with the primary light source behind them, they come out silhouetted. We don’t really want that so much in this case. This fill light helps. Feel free to adjust the settings to your liking.

Environment and Render Settings

9_environmentsettings

Go to Rendering > Environment and give your scene a light blue background color. This is only for the render, not the final scene. In Photoshop, you’ll be adding a new background later.

8c_advlighting

Turn on Advanced Lighting – Rendering > Advanced Lighting and select Light Tracer from the drop down menu. If you’ve got a fast computer and some extra time, feel free to turn up the bounces to 1 or 2. I usually stick with 0 or 1 bounce because I cannot wait for the extra render time. This gives me results that I like just fine.

If you’ve been rendering as you go at the smaller size we mentioned in step 3 and you’re ready to do the final render, then follow these steps. If you’re still not happy with your result, keep tweaking and making changes as you see fit. Once your happy, set your render output size to be 3300×4200. This is 11×14 at 300 dpi.

Render and Save as a .tga file with Alpha Channel

9_rendersettings

Render your image. This may take a while so grab a cup of coffee or take a break. Once it’s finished rendering, save the file as a TGA w/ Alpha Channel. These are typically your default settings for TGA files so I just let them be. TGA files are uncompressed and we can use the Alpha Channel to remove the background seamlessly. It’s brilliant!!

10_renderoutput

10a-tga-settings

Setup a new document in Photoshop

Create an new document in Photoshop. 11” wide by 14” tall, 300 DPI, and RGB color. Even though this will be a printed piece, I like to work in RGB sometimes and then convert my colors later. Sometimes the effects I apply might look funny or not at all in CMYK mode. So start in RGB in this case.

11_newdocument

Open your rendered .tga file

12_pastedrenderintoPSD

Open your .tga file that you just rendered. Check out the channels tab and Ctrl+click on the Alpha Channel to make a selection around it. Go back to your layer, copy and paste the art into your new document that you created in step 12. Now you’re officially ready to start the post-production editing in Photoshop. This part gets fun.

Create a retro stylized grassy hill

To design the retro looking hill, first just create a single ellipse as your ground plane. Remember how your original geosphere looked in 3ds Max? Try to make it exactly the same. Line it up with your letters and shadows so it looks real.

Then apply a gradient overlay from green to red to purple. Tweak to your liking.

Then duplicate the layer and scale it vertically from the top down ever so slightly. Duplicate it again and do the same. Each time scaling it down from the top. Once you do it 3 or 4 times, you’ll see it gives the ground a more rounded, three dimensional look that also has this retro faded gradient effect.

13_hill

Add Clouds and a Glowing Sun

Go outside and snap a photo of the sky, with a good bright sun. If you’re not inclined to do this yourself, you can find plenty of good sky photos on stock photo sites. I chose one that has some clouds, but it’s most got a bright sun with nice rays shooting off.

13_sky

Once I had my sky photo in there, the sun was not as big as I had envisioned. So I made a selection around it and copied and pasted it on top and made it bigger. Much bigger. I faded the edges with a soft eraser brush to get rid of the hard edge.

13d_bigsun

13_sky2

Add birds in the sky

You can surf some stock photo sites for a nice flock of birds photo or grab one quickly from the Flock of Birds Vector Pack in the Arsenal. If you’re using a photo, make sure the sky behind the birds is white so you can set it to multiply to get rid of that background easily. The birds are there to show scale of the letters. It helps give the type that “monumental” look.

13f_birds

Now duplicate the bigger sun from earlier and put it on top of your text and birds. Set the blending mode to “screen” to give it a nice glowing effect. You might want to adjust the levels or softly erase the edges of the layer to suit your fancy.

13g_sunoverlay

Add some cloudy smoke textures

13-smoke

Any nice photo of smoke or clouds could do the trick, but we’ve prepared a special set of ready-to-use Smoke and Cloud textures. You can buy them here. I set the layer to “screen” to give my clouds a little extra oomph behind the text.

13e_smokeclouds

Add some Dust Textures

13i_dustpackt

We recently released an awesome new Dust and Particles Texture Pack that are perfect for this job. I pasted in one of the dust textures and set the layer to screen and it’s literally like a magic bullet for adding some subtle aged effects without looking grungy or too dirty.

13h_moredust

Boost Contrast and add a vignette and border

Increase the contrast by creating a new Levels adjustment layer on top and tweak the settings to get a little more contrast. Then Copy > Merged and paste a new layer on top. Duplicate that layer and apply a Filter > High Pass on it. Then set the opacity to something like 40%. This will give your image more contrast.

Next, create a nice subtle vignette on your image. But first, merge the high pass layer with the original. Then go to Filter > Distort > Lens Correction. Change the Vignette amount to -100 and press ok.

Achieve that vintage, worn, and analog look.

One major characteristic of retro and vintage photos is the grain. The easiest way to add some of that grain is to add noise, blur it, then sharpen it.

20-graindetail

To be more specific, Copy > Merged and then paste your image on top of all layers. Add some noise, roughly 25-30%. I find that this number can vary a lot depending on the size of your document. Select “Gaussian” and “monochromatic” and press ok.

Then you want to run a Gaussian Blur on it to tone down that fake looking noise. Simply adding noise is never enough, it always looks fake and too sharp. Blurring it with a radius of 1-3 pixels is key.

The last part is using the Smart Sharpen filter. Set the amount to somewhere between 100-140% and a radius somewhere between 10-35 pixels. This is really up to you. This will boost the contrast and give everything a slight glowing edge or halo between the lights and darks. I have found this is a tiny detail that you’ll see on truly aged and worn posters. If you look closely, especially at some letters on old movie posters, you’ll see there is some grainy noise in there, but also a slight halo around the edges. The higher your amounts here, the more contrast and more halo you’ll get. You don’t want to overdo it here, but do just enough to get the look you want.

beforetype

Add your copy and logos

The client wanted to make sure their logo and sponsor list were present on the poster. As well as a few other required lines of copy. I originally made these smaller, in the corners to further emphasize the massiveness of the type monument.

beforecolor

Use your judgment and eye for typography to place the copy in an aesthetically pleasing way. I avoided using drop shadows on my type, even if that sacrificed some of the readability somewhat. Sometimes drop shadows look tacky and fake.

Quick and Easy Retro Color Treatment

It gets even more fun. To truly achieve a retro, vintage look in Photoshop, we’ll need to treat the colors. We’ll make them look washed out, faded, and bleached by the sun. There are many ways to achieve this look digitally, but I’m going to show you one of the easiest and fastest tricks to get that retro, 70’s or 80’s look.

One characteristic of those photos is that the darks tend to be bluish and the lights tend to be yellow.

First thing is we’ll make a new layer on top of everything you’ve already done. Fill this layer with a pale yellow color and set to “multiply” and 50% opacity.

Make another layer on top of that and fill it with a deep purple. You can try leaning more on the red side or more on the blue side. Either one will work well. Set this layer to “lighten” and you could tweak the opacity to somewhere around 50-100%.

Final Poster

Here is the final poster. If you want, do a copy > merged and paste the new layer on top of everything. Then duplicate it, run a high pass filter, and set it to hard light. Adjust the opacity to your liking to achieve a cohesive fake HDR sharpening look.

finaldesign

Preparing InDesign Files for your Print Service

packaging-indesign-header

Often times when it comes to preparing files for a printer it can get really complicated really fast. Often times when I’m creating a design there are a lot of elements that I use in a file, most of which are images and fonts. It’s so complicated to remember EVERYTHING you put into a file so I discovered this cool trick you can use in InDesign to help package up all of your information for you! That way you don’t have to worry about missing anything. The function is called packaging. Here is how to package a file and what it does exactly.

*Note that this refers to InDesign CS4; CS3 refers to the “Packaging” feature as “Preflight”. Preflight has been expanded upon in CS4.

package-menu

To get the process started go to File > Package. Or if you love the keyboard shortcuts its: Alt + Shift + Ctrl + F (Mac: Option+Shift+Command+P). This will bring up a dialog box that gives you all the information about what is going to be packaged. What packaging does is put all your resources (links, fonts, Pantone colors, as well as a copy of the InDesign file) into one folder for the printer to easily access the files and information quickly. This way you don’t have to worry about a ticked-off printer coming back to you upset that your files weren’t all included with your submitted InDesign file.

package

You can go through the other sections below “Summary” to make sure everything is good to go. These tabs show everything that is going to be packaged into the document. Once you have reviewed this information click “Package”. This will take you to a Printing Instructions window. I always put my information in the document for the printer, one never knows if they may need to contact you. There is also an area for you to write specific instructions for the printer as well. This can come in quite handy if you want to use a special printing technique.

printing-instructions

After clicking “Continue”, a “Package Publication” window will pop up. Here you will choose a location on your computer to save a folder with all the InDesign file information and fonts and files used within the layout. Navigate to where you want the press ready folder saved and click “Package”. This will start the packaging process.

package-folder

Once the computer has finished saving your file, go ahead and navigate to the folder. If you look in the folder you’ll see your file is there with a separate folder for fonts and links.

preflight-folder-items

Can’t get much easier than that! Next time let your computer do all the heavy lifting.

Using Transform Again in Illustrator

TA_main

This shortcut will help you in many different instances in Illustrator when you need to repeat a transformation. I use it most when I am trying to repeat a shape over and over again at an even interval.

First create a shape or a stroke, and then transform it in some way. You can find the Transform menu under Object > Transform or you can simply right click on an object and go to the Transform menu. Make sure that you are either holding alt (if you are transforming freehand) when you transform the shape, or using the copy button in the transform menus so that you get it to copy your original shape.

TA_transform_menu

TA_transform_rotate

Then press Ctrl + D and the transformation will repeat itself and create a new shape.

This shortcut can be particularly helpful when creating Spirograph type shapes or a sunburst shape:

TA_spiral

I also use it when I am trying to create many copies of a shape for a clipping mask, or with the Transform Each function to create even more dynamic transformations.

Full Color Rollovers in Flash

header-image

In this tutorial, we will create a Flash file with a simple, yet eye-catching effect — a black & white photo with full-color rollovers. We will initially edit the photo in Photoshop, then import and complete the file in Flash. I wanna send a shout-out, and special thank you to the band Today the Moon, Tomorrow the Sun for the use of their photo.

Download the sample file [download id=”43″] and open in Photoshop.

band_photo jpeg

Save this document as band_photo.psd

Isolate The Figures

Using the pen tool, create a path around one of the band members
I’m making a selection just around the person, not the chair. The goal here is to create a selection of a band member. I’m using the pen tool, however you may use whatever selection tools you prefer.

Right-click or control-click on the path, and choose “Make Selection…

make_selection_menu

Click OK on the Make Selection dialog box that follows

make-selection-dialog

Create a layer via copy, CONTROL+J/COMMAND+J. This creates a layer from the
selection

Select the background layer, and then repeat this for each band member

Be sure to name each layer.
For simplicity, I named them band-1, band-2, etc, going from left to right

band-layers

Create The Grayscale Background

Select the background layer, press CONTROL+D/COMMAND+D to deselect everything.

Duplicate this layer via copy, CONTROL+J/COMMAND+J
Name this duplicate layer “black & white”

dup-layer-black-n-white

Next, create a new layer, CONTROL-SHIFT+N/COMMAND-SHIFT+N, Set this layer Mode to “Color“, click OK

new-layer-color

On the keyboard, press D to set default colors (black foreground/white
background).

Fill this layer with the foreground color, ALT+BACKSPACE/OPTION+DELETE

Merge this layer with the black & white layer, CONTROL+E/COMMAND+E

As an option, you can push this effect further by lightening the output levels on the black & white layer CONTROL+L/COMMAND+L
Set the Shadow output level anywhere from 25 to 50.

output-levels

At this point, it will be visually obvious if you have selected extra space around the band members. You may see color spots around them that should be black & white. Correct this via selecting the band member’s layer that needs fixing, and use the eraser tool to get rid of any overlap.

final_image

Toggle the visibility of the Background layer to off.

background-visibility

Save this document, CONTROL+S/COMMAND+S, and close it.

Import The .psd File Into Flash

You will need at least Flash CS to import a PSD

Open Flash. Create a new document, either AS2 or AS3 will work as this effect is not dependent on Actionscript.

Import the band_photo.psd, CONTROL+R/COMMAND+R

ps_layers_to_flash
Because we turned off the visibility of the background layer in Photoshop,
this layer is unchecked when importing into Flash.

Hold down the SHIFT key, then select each band member layer, as well as the
black & white layer.

Check the box “Create movie clips for these layers”

convert_layerd_to_movieclips

For Publish Settings, set the Compression to Lossless.

Follow these settings, Convert Layers to: Flash Layers, check the boxes Place layers at original position, and Set stage size to same…
Click OK.

layers-position-stage

Deselect All, CONTROL-SHIFT+A/COMMAND-SHIFT+A

Create The Buttons

Click once on one of the band members to select.

select-band-member

Convert this selection to a symbol, F8, follow these settings:
Name: band #+_btn
Type: Button
Click OK

f8-convert-to-symbol

Repeat the BUTTON SYMBOLS steps for each band member.

Edit The Buttons

Once you have converted each band member to a button, DOUBLE-CLICK on one of them, this will take you into edit mode, in the buttons timeline:

button_edit

Click-and-drag the Up frame to the Over frame

over-frame

Select the Hit frame, and insert a blank keyframe, F7

hit-frame

Select the brush tool and using the photo as a guide, paint a rough silhouette of the band member. The paint color does not matter, as the hit frame is not seen by the audience/end user, you are simply painting the active area of the button.

null

On the timeline, click the Scene 1 button, and you will see a aqua-colored overlay of the silhouette you just painted.

null

Repeat the BUTTON EDITING steps for each band member.

Here is a snapshot of the file with all 4 band member buttons edited. Though you can be as detailed or loose as you like when creating the silhouettes, do not overlap, as this can cause flickering between buttons.

Save, and test your movie CONTROL+ENTER/COMMAND+RETURN

And here is the final result:

Ask the Readers: Who is a current household name in design?

name a famous designer

LeBron James, Barack Obama, Terrell Owens, Britney Spears – names you all recognize I assume? For better or worse, I think that just about everybody in the United States would know these people by name.

So I wonder: Who are some current, active, living designers that you (or your younger sister) would know by name? At first glance it may seem that designers are under-appreciated by popular media, but I’m sure you can think of at least a few current headliners. I’m leaving this completely open, and I’m really curious. So don’t let me down – leave a comment!