Articles by Month: December 2011
Whenever I’m hungry to look at some great typography, hand-crafted or otherwise, I frequently find myself returning to www.youngjerks.com. Young Jerks is the moniker for the Brooklyn based (yet frequently traveling) designer Dan Cassaro. Though Dan is obviously fantastic at everything from motion design to illustration, it’s his typography work that captivates me most. Often somewhere between computer rendered and hand done, and methodically organized to flowing and organic; Dan knows how to throw-down some letters. That being said I was all the more excited to see his talk and briefly meet him at WMC Fest.
Heres What Happened:
Dan took the stage briefly explaining Young Jerks as being a design shop run by just him, “just one jerk”, and telling of his excitement to be speaking at WMC in Cleveland, further explaining most of the people in Williamsburgh Brooklyn, where he lives, are from Ohio (a statement I can relate to being from Florida). This Midwestern saturation was the impetus for his God Bless The Midwest journal set, which was inspired by his friend’s mantra and love for Ohio.
“I put it on my website, but I had always felt sort of fraudulent about it because I had never been here. And I’d get written up on blogs about it and they’d be like Yeah Dan Cassaro! Midwest pride! It became really clear that I had never been there when I showed her this one and she said Dan you know there are no mountains in Ohio right?”
Dan then began the rest of his talk by speaking about how he became a designer. Early on he went to school for “communication” not full knowing what that even meant. Then realized he belonged in an art school all along. “I loved graphic design immediately because it touched everything and was influenced by everything. It was so open ended; I could try anything. I could draw, or paint, or try animating. I eventually settled into typography and illustration. It was a really good chance for me to figure out what my place was in the commercial art world”. Dan had figured out what type of designer he was, and developed his own test for people to know what kind of designer they were as well. Taking his cues from a book that said you can find out people’s personality types from their favorite member of the Beatles, Dan decided that most designers are either John Lennons or Paul McCartneys. Here’s how he broke it down:
If you’re a John Lennon, you are creating work that is message driven, serious, it has an agenda, it’s emotional. But it might come across as pretentious or a little naïve.
If you’re a Paul McCartney, you’d be creating this meticulously crafted, beautiful graphic ‘pop’ design. It would be heavy on style but sometimes it’d be light on content.
Dan continued by saying that either of these approaches can be successful in their own right but when you have the opportunity to utilize both in harmony is when you can create your best work. However, Dan confessed he is more in the Paul McCartney camp, in design and just general loving of his music.
“I’m a huge McCartney fan, I love his music, I love his early Wings albums, all that stuff. I named a typeface after him called McCartney, in Paul and Linda weights.”
Dan began to speak about Paul McCartney’s music in a way that stripped it down to its very creative essence. In that sense you could really relate his music to any creative medium, like graphic design. McCartney’s music is a vessel in which you can conform or expand your own experiences without too much personal detail getting in the way. When artists leave room for the audience to expand themselves into their work it became a much more personal experience. Dan related this to being in love and just needing a song to sing about it, not someone to tell you that you are. This in turn relates to your client work. You have the message its your job to get people excited about it through utilization of appealing style.
Dan began to talk about his own work and his theories behind expressive typography. Expressive typography brings together two forms of expression. Written word which is used to explain what we can’t say with pictures and visual art which shows things we can’t say with words. In a basic way, expressive type bridges this gap. Expressive typography can also serve to refine phrases, writing, poetry and lyrics into a visual art form. In this way Dan feels that it can revive written words in a way that makes you have the same feeling you did the first time you listened to Stairway to Heaven.
Dan then showed slides of his intricate, illustrative, and beautiful dad-rock influenced typography work. Every slide proving his utter obsession with music and how it influences his work. His passion however is how he drives himself to make rewarding personal projects, like his project named Springstreets.
“I can be a really obsessive person but it works to my advantage as a designer sometimes. At least for my personal projects. About a year ago I was listening to a lot of Bruce Springsteen, and thinking about what a visual lyricist he is. How he writes his songs like he’s reading them off this imaginary map of New Jersey in his brain. So I thought I should make an imaginary map of New Jersey based off his lyrics. I was just going to do it for Thunder Road, but I wanted to plot the exact distance “of the long walk from your front porch to my seat”. It was sort of cute and fun and I was just doing it for myself, and then I did a couple more songs and then it got totally out of hand.”
Encompassing Bruce Springsteen’s first seven albums and exclusively using direct references from his songs, Dan created a 23×30 inch poster that became a huge success with Springsteen’s equally obsessive fans to which he sold out his first 500 immediately. “It proved to me that when we’re making personal work we should be making this work for ourselves, and trying to please ourselves. We shouldn’t be trying to please this imaginary audience out there because they don’t exist. If we’re making something and we’re really into it, people are not that different so they are going to respond to it.”
Another rewarding project of Dan’s is his ’50 and 50 project’. Initially, it began as a personal project to illustrate every state’s motto. Dan decided this was way too much work to handle alone. So, instead of doing all of it himself, he added another dimension to the project by inviting one designer from each state to illustrate their state’s motto.
“I think people got really excited about the opportunity to represent their home state. They turned out really great.” The collection of type treatments was completed with very little art directing from Dan other than size and color scheme.
Dan finished up his talk, discussing his plans to take his designing on the road. Dan was tired of sitting at a desk with the same view all the time. He realized aside from a few people much of the communication he has with the design community and people is through the internet. And since the internet is everywhere now, he wondered why shouldn’t he be everywhere. Hatching this plan in partnership with his girlfriend who is a scientist needing to travel as well for her research; Dan set out this summer in a mobile camper turned design studio. This notion said a great many things to me. Design doesn’t have to be a boring sheltered process, design doesn’t have to take place in a stationary building or city, design can be a traveling adventure. In a matter of twenty minutes Dan had me inspired to get out there. Seeing his talk provided the proof that Dan walks his talk, lives for adventure, and is born to run.
Listen to the Talk
As I watched every talk, I kept Garage Band open on my MacBook and recorded everything I could. The quality of the mp3 below may not be the best, but you can get an idea of what it was like from my perspective in the front row. Bootleg version!
Hey Go Media faithful! As Go Media has evolved over the years, we’ve learned that collaboration with other artists and designers can be a very powerful tool when trying to deliver the very best product to your client. Different designers have different skill sets. When Go Media assembles a team to work on a project some of those people may be in our firm and others may not. I recently had an amazing experience collaborating with a good friend of mine; Steve Knerem on an illustration for Cage Spawn Clothing. This article will be kind of a hybrid – half tutorial and half discussion on the idea of collaborating.
The design brief for this t-shirt design was fairly simple: “Make a sick looking Samurai t-shirt.” I’ve been working with Preston Bennet of Cage Spawn for a while, so he has total faith in my abilities. It’s nice to work with clients that throw you a simple concept and some ideas, and then just let you go to town. As with any illustration, I started by drawing some horrifically rough poses.
Preston selected pose #2. He liked the way the arms crossed, and thought we could frame up the CageSpawn type treatment between the tips of the swords. Here is the type treatment Jeff Finley did for Cage Spawn. It was actually a design “refresh.” We wanted to fix up their existing type treatment, which we thought could be improved upon. The existing one was just too straight and rigid. We needed to infuse it with some flow. I think Jeff did an amazing job.
Once I knew the pose that Preston wanted, I sat right down and tried to translate my uber rough sketch into a tight pencil drawing. I had plenty of Samurai images tacked up around my drawing table, was excited about the pose, and put in several hours trying to make the pose work. Unfortunately, sometimes the really rough sketches include some physical impossibilities. The exact positioning of the arms in this case were simply not working. In lieu of driving myself crazy, I decided to grab my camera and do a quick model shot. These photos don’t need to be anything fancy. I was just trying to get the pose clear in my head. I had a few tubes to use as the swords and here are the images I shot:
From those photos I was able to work out the following pose sketches:
I posted those for Preston to make a decision about which hand-position looked best to him. We agreed that it was #1.
In many regards, this is the most difficult part of the illustration process. Once I have the pose in place with the right perspective drawing all the armor and the mask/helmet goes fairly quickly. I made decisions about what the armor and helmet looked like through looking at reference photos of actual Samurai armor, and then making some of it up as I went along. Here is the illustration at about 80% complete.
Once I had the illustration this far along I planned on filling in the remaining 20% of the art while I was inking. But before I started the inking I went on vacation. And while I was on vacation I badly injured my neck and upper back. I was in so much pain that I didn’t sleep for three straight days. When I got back to the office, I knew there was no way I could spend 8+ hours hunched over a drawing board inking this piece. But Go Media had a deadline (in this case we were already way past our deadline.) I knew my injury wouldn’t go away anytime soon.
The Collaboration Starts.
Although, in this case the collaboration was born of necessity, Steve and I had been talking about collaborating on an illustration for months before this. I knew he was the guy to take over and get the drawing finished. Check out Steve’s work here: steveknerem.com Once the ink was done, I could get it into the computer and take over the coloring and design. I already had great respect for Steve’s work, so I really didn’t give him too much direction. I wasn’t completely sure what I wanted to do with the bottom of the Samurai, the armor was incomplete and the flames were incomplete. I pointed all that out but basically said: “make it look sweet.” As I handed him my art I really felt like I was just giving him an inking job. But Steve decided to finish the pencils and get my thumbs up before he started inking.
When Steve brought me the finished pencil drawing I almost fell over. I was completely blown away. He didn’t just finish what I had started, he added a LOT. I wasn’t expecting the masterpiece he showed me. This is a GREAT rule in business and in life. Give people more than they expect. “Under promise, and over deliver” we say at Go Media. It turns normal customers into fans and advocates.
Here is the final pencil illustration that Steve showed me:
Meanwhile, Preston had a friend that was studying Chinese/Japanese calligraphy. He thought some original calligraphy would make a sweet addition to the design. I agreed. Admittedly, I wasn’t sure how I was going to put together the growing list of design elements: Samurai Illustration, Japanese Sun, Cagespawn logotype and now calligraphy! But it was very exciting to have all these great elements to work with. Normally, I like to work out the entire design layout in advance before I start drawing, but what can I say – this project just evolved this way, and I was happy to go with the flow.
Steve Takes Over
I couldn’t have been happier to get the bullpen call from Bill. Unfortunately it was at the expense of Bill’s injury, but nonetheless our talks about a collaboration project gave birth. My part of the journey began when I was visiting some friends out of town. I read the email from Bill on my phone and I interrupted my wife who was talking with friends saying “Awesome, listen to this!” In my mind I had to fly home right away, meet with Bill and begin my part of the collab. Well once I calmed down I responded back of course accepting the job.
Here is a lesson learned when responding to an email: make sure they receive your email! After I sent my eager response, I heard nothing from Bill…uh oh. My mind was racing thinking he called in some other help, so I called a few people at the Go Media office on a Thursday afternoon, emailed Bill again and got him on the phone where I accepted the job and we set a time to meet. Whew!
I landed at 5:20pm in Cleveland on a Monday and got to Go Media an hour later. So my point with all this is don’t give up, fight for what you want. Show your clients you are eager and willing to do what has to be done. That day the hand of Crom was upon me!
So I meet Bill and we discuss the project. He showed me what Go Media already had done for Cagespawn which was out of control awesome. I felt honored to be a part of this circle of excellence. I felt at that point Bill really trusted me to finish the job. It was a very professional experience knowing I was trusted, respected and someone digs my work. So the lesson to learn is: be a professional, you never know when you will get a call. Make awesome work because you never know who is looking. Own your game because someone is always looking for originality.
The Pencil Stage
Finally I sat down and I looked over the project and thought of all the illustration I saw Bill do for the past 5 years. I’ve always loved Bill’s style and characters so the tricky part is to retain all of what he did and add my fireworks to it…no pressure. I can say I really felt confident. In the past year and a half this confidence grew on me because I owned my game. In return if I was in the same situation and had to hand a project to Bill, I know that he would reciprocate the same excellence and pride. Lesson to learn, build relationships. That’s what business and friendships are all about.
I did my research on samurai characters, garments, weapons and what the essence of a samurai warrior is. Right away I shifted into “insane detail mode” which is usually my only gear. I looked at Bill’s character as a strong foundation to build upon. I added blood, banners, costume design, smoke, flames, hair and a solid light source and that solidified my part of the pencil drawing.
Remember add your own twist to something in the pencil stage. The worst that could happen is the client won’t like a part. So what. Erase it and set it back to the original state. Lesson to learn: take initiative to present something above and beyond because it might just come to pass!
A quick example is the blood dripping from the mouth and the hand of the samurai and also the hair.
So I take this drawing to Bill. I’m a little nervous but confident. Bill was thrilled and it made me happy knowing I over delivered. Lesson learned: GO OVERBOARD!! I do recall a high five exchange between us.
The Inking Stage
The ink stage is very different. You can have a shaky hand with the pencil but this is where breathing, patience, discipline, skill, and decision making come into play. When I start a drawing I like to attack my fears head on, with the face. I keep it simple at first and outline the jaw line, eyes and nose.
I use Micron pens because they don’t bleed and they have good flow. They do dry up so keep a fresh stock. I noticed there is a lot of symmetry with the helmet so paying attention to proportions is vital. The swords, arm guards and back body armor need to look the same too. These are at different angles so there is a little leeway with symmetry but they still have to be consistent.
The good thing is you lay this out in the pencil stage. Just remember INKING IS NOT TRACING. You still have to think this through. Some parts will need a thick line and a thin line. This is what makes a dynamic piece.
Probably my biggest concern was retaining Bill’s precise hatch marks and style. Bill is very sharp and clean with his edges especially when he inks. With a collab you want it to look as consistent as possible but you can see each artist’s hand. It is a challenge and a lot of fun. I simply had to rest in my own abilities and keep telling myself to breathe, be confident in my own game and have fun. Lesson to learn: Never think that you are so good that you don’t need to stay disciplined. Personally every project I work on has its own challenges and I am always working to prove myself better than before. (It keeps your internal edge sharp!)
I wrapped up my part on time, on budget and Bill took over the color and design stages. Overall it was a great experience to work with Bill. Make those connections with other artists, build your pool of networks and always stay connected. Sometimes the element of surprise is the most rewarding.
Here is the final inked artwork I handed over to Bill:
Bill Takes over on color and design.
When I was a kid I loved to color. It was a fun, carefree activity. I can remember when the only real challenge was “staying inside the lines.” As an adult, it’s a very different story. I don’t think I am a particularly good colorist. I haven’t really spent enough time doing it. Also, I’ve been exposed to the best of the best comic book colorists – for years. On top of the belief that I’m just not a very good colorist, I have the added pressure of living up to the standards Steve set by doing such a phenomenal job finishing my illustration. So, when I considered my task at hand, I’ll admit, I did so with dread.
For better or worse, collaboration will push you to “up your game.” You have a respected peer that will be closely examining, working with and depending on what you produce. The pressure is on. Unfortunately, I’ve procrastinated as long as I can. I have to get started.
I color so infrequently that I don’t even have a good process down. I have some sense of what I need to do, but nothing concrete. For about three days leading up to getting started I kept debating about how to do it. I could put the art in Illustrator and create vector shapes for each color. I’ve done this before and been very happy with the results. But this can be a very labor intensive process. To create the illusion of a gradient I may need to draw 3-7 shapes for each gradient. Although it’s a tedious process, it’s this particular segmented look of those faux gradients that I really like. It’s almost like the coloring is part of the illustration; each color segment forms contour lines that help define the shape of the object. It’s awesome. Here is an example of a piece I did using that coloring technique:
But I chose not to do that. Instead I decided to go into Photoshop and “paint” the coloring into the drawing. I chose this route primarily because this samurai was covered in fire. Vector coloring would have forced me to define the fire in hard shapes. I just couldn’t imagine how I was even going to pull that off. It would have taken me a year. Also, Go Media happens to own a Wacom Cintiq. If you’re unfamiliar with the Cintiq – imagine a large monitor that tilts and spins and allows you to draw directly on the screen with a pressure sensitive pen. That’s right, it’s a high priced designer’s toy… er… I mean, critical piece of equipment.
A Tip to Getting Started on Something You’re Afraid of:
So, I knew I was going to “paint” the coloring in Photoshop, I knew I was going to use the Cintiq and I had the final art provided by Steve, but I was still in dread. I didn’t really know how I was going to combine all the design elements (Japanese calligraphy, Japanese sun, the illustration, CageSpawn logotype and CageSpawn mark – the cthulu). I didn’t know what colors to use. I didn’t know how to restrict the color palette so that the printer could manufacture this shirt using a max of 4 ink colors. I didn’t know how to prep my coloring so it could be easily separated. My mind was a whirlwind of questions and fears. When you’re focusing on all the what-ifs and concerns it can really be crippling. When I find myself in this situation of NEEDING to start, but being afraid of starting I employ a little technique. I focus on getting ready to start working instead of focusing on what I’m going to do once I do “get started.” For instance, I don’t know how I’m going to color this art, but I do know I’ll need to scan the final inked art into the computer. Great! I’ve done it. I’ve started! I know I’ll need to set up a layered Photoshop document where my art is on the top layer, I need to set that layer to multiply and lock it. I know it would be helpful if I created a mask of the samurai so I can fill him in easily without going “outside the lines.” Also, I’ll need to make my Japanese sun – which I choose to do in Illustrator so I have maximum flexibility later. Essentially, I get started on all the non-critical steps of the project. And what I’ve found is that most of any project is just non-critical steps. Even the coloring itself, when broken down into small pieces, are each really not so critical.
So, here are each of the not-so critical steps I took to color this artwork, and a sample image of each:
I made a Japanese sun in Illustrator using a flag image that I found on the internet. But I needed my rays to extend beyond the flag, so I just extended each line further out.
Once I finished the sun I dropped it along with the CageSpawn logotype into Photoshop to workout the layout. I thought the sun would look good positioned over the shoulder of my Samurai.
I wanted my sun’s rays to fade out, but in a kind of grungy way. So, I stared by air-brushing black around the tips of the rays just to make sure they wouldn’t end sharply. Then I used some of Go Media’s Destroy Vector Packs to grunge up the tips of the rays. Finally, I dropped in a black background. This reveals how the sun will look… pretty cool.
Now that I have the sun in place, I continue just working away on “non-critical” steps… like filling in my samurai. I’ll be able to use this shape as a base layer of art and also a mask.
I knew that the flames would require a painterly style with lots of gradients. So, I switch over to my airbrush, dial back the Flow to about 15% and start “painting.”
I thought now might be a good time to give you a look at how I have my Photoshop file layers set up. It continues to get more complex than this, but this should help you understand how I work. When I was young I tried to work in as few layers as possible, and generally didn’t appreciate the power they provide. So, if you’re new to working with Photoshop and Illustrator and you’re not paying close attention to the layers – (like locking, linking and setting visibility) START NOW!
For my flames I kind of stumbled upon this pointillism gradient that looked really good and matched nicely with the style Steve inked the piece.
Because I was working with a lot of flames and glowing, I thought this shirt would look amazing on a deep red shirt, so I swapped out my background color and sure enough – it looked great.
Since the flames were lapping up around the logotype, I decided to also make it flame-like. And that worked perfectly with the shapes of the lettering. It really came together beautifully in the end. Here is the final colored artwork.
Now of course, I’m a HUGE advocate of presenting your designs to your client in the very best way. So, I just had to mock up this design onto a t-shirt. I used one of our t-shirt templates, but you could also use ShirtMockup.com.
Almost done. I still had the calligraphy, and I wanted to use the CageSpawn mark that I had designed on a previous project. Sounds like I need to design a back to this t-shirt!
One last plug… to add the splattered yellow effects around the lettering, I used our Vector Set 17 which has a ton of grungy elements.
At some point while I was “getting started” my fears and concerns faded away and were replaced with fun. I’ll admit, I even forgot about how the printer was going to color separate this. Looking back now, I don’t even know why I was worried about that. That’s not my job. That’s the printer (color separator’s job! That’s why they get paid.)
One lesson I’ve learned in life, business and art is – you can’t let the unknown slow you down. Go Media is an incubator of sorts to several companies that work out of our building. We’re periodically (more frequently than I would prefer) asking ourselves questions like: “Will this get us arrested?” or “Will the fire marshal shut us down?” We don’t always know, but we press on. You can’t let your fears stop your progress. Even if you do something, and your fears come to fruition and all your hard work is for not – I still think the process of doing, learning and experiencing are better than sitting on your butt doing nothing. Fortunately, we have not been arrested for anything – yet.
AND! Last, but not least – if you would like to pre-order this shirt from CageSpawn, go here: CageSpawn Ronin T-shirt Pre-order.
Go Media president Bill Beachy sits down to give you some daily inspiration and advice. Bill shares his years of experience building Go Media into the company it is today. Topics in this video series include Getting Started, Happiness, Humility, Patience, Flow, Focus, Productivity, Business Systems, Courage, Eating Well, Obstacles, and Creativity.
For more information about Bill Beachy, check out his bio on gomedia.us. Bill is currently accepting opportunities to speak at your event, university, or business.
Sponsored by Prooflab
The Daily Inspiration video series is brought to you by Prooflab – a client and project management app built and used by Go Media for designers.
Hope you enjoy the video!
Or download the podcast
Before We Get Started
Hello dear readers!
Simon and Jon from Studio Ace of Spade here. Today, we have the chance to write a tutorial about one of the Studio’s recent projects, the poster we did for Lost and Taken. What’s great about this particular project is that it gives us the occasion to do a tutorial we’ve wanted to write for a long time: texture, texture and more texture.
We already had a writeup including some tips and tricks about textures published recently, but it was web oriented. Web is a world were subtlety is a key word, so we had to restrain ourselves quite a bit. This time, we can use the full extent of our texture repertoire on a print project.
Throughout this tutorial, we’d like you to keep in mind that we don’t want to give you a “recipe” that you’ll follow exactly and religiously, but rather a open-ended answer to a creative problem. It will give you room to adapt and improvise in your own ways. We want to nurture your creative process by sharing ours, not to kill it or to “dry it out.”
It’s hard to reconstruct the design process sometimes as for most designers it’s really organic and trial-and-error based. But, we’ll do our best. We’ll try to link to the resources we used as much as we can, and to reference other articles that might have been helpful in our process or that could expand your reflection.
If you have questions, want to share what you came up with while following this case study and tutorial, want to suggest different techniques, want to suggest ideas on how to make this better, please do so in the comments! Also, we’d like to precise there is a complimentary article to this tutorial posted on the Studio Ace of Spade blog that details much more the case study part. We decided to split the original post in half (-ish), as we thought 6000+ words would be a bit intense for people to go through.
Here’s a preview of what we’re going to be doing, beautifully mocked up:
With all of this said, let’s get started, shall we?
The Design Specifications
At the start of this project, here’s what we knew:
- The poster will be 18″ x 24″
- The focus should be on a strong type element
- There’s plenty of creative freedom
As this poster was being designed for Caleb of Lost and Taken fame, we were certain to keep him as involved in the project as possible. Through further discussion, we further defined our constraints:
- Utilize “nature,” green and forest scenes, or something similar
- Cut-out shapes are something he’s interested in
- Geometrical shapes should be inlcuded in the design.
As this poster was to promote Lost and Taken, we decided to use only L&T made textures. Here’s a list of the packs you’ll need for this tutorial:
- Vintage paper textures vol. 1 (published at Design Kindle)
- 42 vintage paper textures
- 15 vintage stained paper textures
- 19 block print textures
- Old film textures: color edition
- Black and white grunge vol. 2 (published at StockVault)
- Apple Rainbow inspired textures
- 10 experimental noise textures
- White grunge + snow textures
Download and install Massive Dynamite.
We’re also users of two Photoshop actions created by the good folks of Go Media. The actions age your artwork in two different manners.
To install Ps actions, read this quick tutorial written by Addicted to Design.
Lastly, download the color palette used for this project.
Note: this resource is provided “as-is.” It’s been made by us, for our own use. Learn how to install the color swatch via this About.com post.
Selecting a Font
Here’s where the tutorial part of this begins.
Start by selecting a typeface. To narrow down our font choices, we opened Illustrator and went through our font library to select the some which fit the ‘vibe’ of the project. This is something that we strongly encourage all of you to try as it’s a wonderful way to ‘feel’ your font choices.
We’d like to point out The Lost Type Co-op, Hydro74’s Legacy of Defeat, Dafont, Font Squirrel and Abduzeedo’s Friday Fresh Free Fonts as great starting spots to find interesting typefaces. Most of the time they are free and/or donationware, which means that if you like the font a lot you can show some financial support to its creator.
After we received feedback from Caleb on his font preferences, we narrowed our search down to slab-serif fonts, as well as vintage sans-serif fonts.
We finally settled on a font named Massive Dynamite, created by imagex.
You may notice that Massive Dynamite is pre-grunged – something that we don’t necessarily like. Let’s clean that up a bit.
Cleaning up Massive Dynamite
The next steps were clear:
- Write “LOST AND TAKEN” in Massive Dynamite
- Create outlines (right click on the type object > Create outlines) of the type, to convert it to fully editable vector objects
- Switch the font from solid black to a transparent object with a black stroke
- Then comes the tedious part. By using the direct selection tool (the white arrow, A on your keyboard), I selected the paths corresponding to the grunge elements and deleted them, thus creating a “clean” font
We made a quick video summarizing this process. You’ll see it’s really simple.
Creating the Type
Well, now that the font is cleaned up, let’s complete the typelock.
Step One: Create a new 18″x24″ document in Ai.
Step Two: Put some turn on the rules (CTRL/CMD + R) and put some guides in place to determine how big that typelock is going to be.
When we design in 18″x24″, we like to have guides at 1, 2, 9, 16 and 17 inches vertically and 1, 2, 12, 22 and 23 inches horizontally. Turn on “Snap to grid” (View > Snap to grid or CTRL/CMD + SHIFT + “) when placing the guides. Then, you’re sure they’ll be placed accurately.
Instead of locking the guides, lock the layer they’re on and rename it “guide“. As you’re designing, place the guides in the bottom layer. It’s a habit we developed after consistently moving guides by accident while designing.
Once the guides are placed, go back to our previous document with the type elements. They should still be one object. Copy and paste it (CTRL/CMD + C and CTRL/CMD + V) in the main document.
Step Three: Set line height and complete the type with geometrical shapes.
Select the type. Ungroup the object (right click on the selected type > ungroup), and then regroup the words separately. You just have to select the letters; use the CTRL/CMD + G keyboard shortcut to do so (or go to object > group). Once that’s done, move the three words closer together as shown.
On this image, you can see the type with its default settings, centered in document in black, and the typelock I used in the poster in gray.
At this point, what we’d suggest is for you to come up with your own typelock organization. Show your creative side! Our goal when creating this type object was to have something compact, bold, and impacting. We sized the type following that logic.
The rectangles have roughly the same height as the type they’re facing. To ensure this, we copied and pasted the values in the object size box.
The Final Step: Develop a ‘worn’ look for the geometric shapes we added to the type. In order to achieve the desired effect, use the roughen filter, in Effect > Distort and Transform > Roughen. Mad props to Simon Walker (he did a great post over at Method and Craft about that) and Dan Cassaro aka Young Jerks for tips and tricks when using this technique!
A point of advice: start by applying the effect to one shape, check if it matches the type you’re using, and then apply it to the remaining shapes. The appearance panel in Ai CS5 makes this a no-brainer. You can also use the Effect > Apply roughen menu (SHIFT + CTRL/CMD + E) to apply the effect with the same values to the remaining shapes.
Once that’s done, the type manipulations are done! Make sure the typelock is at least roughly placed as you will place it in the final poster, and preciously save that Ai file, just in case.
Choose a main image
We still hadn’t settled on the “base” image of the poster. We went to the Flickr Commons collection, and dug some images out. We were specifically targeting large files — big enough to be used at a print resolution (300 dpi).
These organizations have a policy to provide a relatively high resolution documents on Flickr. For instance, a train picture we used in a recent gig poster is available at a whopping 3000×2019 pixels. And sometimes, when following the permalink to the web collections of the LoC or the USNA, you can find ultra-high resolution .tiff scans of the originals (an example: 8000×7000 pixels @ 1800 dpi).
We chose a photo from the LoC collection over the other forest scenes because it was the biggest (6041×7839 pixels). The only downside was that we had to download a 135+ MB .tiff. But with an image chosen, it was finally time to switch to Photoshop for real!
Starting to manipulate the textures
This is where the fun begins! This is where we’ll work our texture magic on both the type and the background photo, blending them together in the best possible way. We’ll cover our main texturing technique, some tips and tricks, and additional goodness below.
The first step is easy. Let’s fire up Ps and create a new 18″x24″ document at 300 dpi.
“Print, you said? Then why the RGB colors? Isn’t print always in CMYK?” We’ll be using some effects and filters available only in RGB, so we’ll have to use RGB. The thing to know is that the CMYK spectrum is not as extended as the RGB one. It basically excludes some of the brighter and louder colors. As long as you keep this in mind while designing and you work with printers who know what they’re doing, you should be good.
You could also save your flattened PSD/PDF at the end in CMYK to be sure. But we would leave that to the professionals as they know what they’re doing with color. Once the document is created, you should also place the basic guides in it (we used the same measurements than when working on the typelock).
Open the forest picture along with your new document. You’ll notice that ours is a .jpg copy of the .tiff file as it’s a smaller file.
Place the source image. It features the frame of the slide it’s been scanned from, which we decided not to keep in our poster. First, slide the photo in your document. Then, once it’s in there, close the original.
Back to the poster. Before resizing the image, right click and convert it to a Smart Object. This allows to keep “access” to the original file, even though you’re going to resize it and/or apply filters to it. Beware, this state still has some limitations. Once it’s a smart object, place and resize it as you see fit.
After placing the image, sharpen it by using the high pass filter (Filter > Other > High Pass). Oliver Barrett explains the process for the unfamiliar. Use a value of 50 as it’s a big image, and put the high-passed layer’s blending mode on soft light.
Apply a black and white adjustment layer on the high-passed layer to increase contrast and depth.
Set the adjustment layer to Red filter. Group the black and white effect to the high passed layer by using CTRL/CMD + ALT + G.
Once this is in place, make sure your layers are properly named and group the original image, the high pass layer, and the black and white adjustment together in a group called “forest.”
We decided that just adding textures on top of the photo would be a bit bland. So, what could we do to spice it up? We remembered a book cover we designed which had a similar starting point: a forest view. We also remembered a photo manipulation from Luke Beard. We decided to try something in a similar spirit.
Step 4.1: Create a merged layer of our current poster (CTRL/CMD + SHIFT + ALT + E). Desaturate it (SHIFT + CTRL/CMD + U),and press CTRL/CMD + T to transform and rotate it 180°.
Step 4.2: Open Ai and created an 18″x24″ document. You can also use the one from the typelock as long as you hide or lock the type piece to be sure not to damage/lose it. In our new document we created the following pattern:
We’re displaying it in Ps, but you can see the little smart object icon on it showing it has been imported from Ai. To create the pattern, do something along these lines:
- Turn the grid on (CTRL/CMD + ‘)
- Draw a 1.25″ diameter circle
- Copy it 8 to 10 times to create a line of evenly spaced black circles (the align and distribute tools can be of great help here), that go across the width of the poster
- Group the line you just drew together (CTRL/CMD + G)
- Copy it and paste it in front (CTRL/CMD + F). Repeat until you form a grid covering the surface of the poster
- In order to bring some variety in, just offset each other line (cf. the pattern we drew)
Once the pattern is done, group it together and copy it. Paste it in front in Ps (SHIFT + CTRL/CMD + V) as a smart object. Pasting it in front (or “in place“, as they call it) ensures that it will be sensibly in the same place as in Ai. Pasting it as a smart object will enable you to resize the pattern at will without losing its vector state. You can still edit it in Ai by using right click on the pattern layer > Edit contents. The changes will transfer to Ps.
Once you’re happy with the pattern you created, use it as the content of the layer mask for the black and white forest image.
- In Ps, you should have the smart object of the pattern looking similar to what we show above. Turn off all the layers you have in the document except for the pattern layer
- Drag it at the bottom of your layer list
- CTRL/CMD + click the pattern layer. Doing this will select the content of the layer. Once it’s selected, copy it
- Let’s add a layer mask to the black and white forest layer
- Let’s ALT + click the layer mask we just created. This will switch you to view and edit the content of the layer mask, and not of the layer anymore (just click back on the layer to exit the mode)
- Just paste (or paste in front) the pattern in there! You can slightly adjust its placement if you feel like it. Note that the content of the layer isn’t a vector smart object anymore, so be careful about resizing it, you might loose sharpness and/or details
That’s the concept. You’ll notice the layer mask getting that ‘cross-hair’ focus icon when you’re in layer mask editing mode. We weren’t sold on the result shown above.
Go into the layer mask editing mode, and simply invert its content (CTRL/CMD + I).
Further tweak the content of that layer mask, notably by adding a worn aspect to it. In order to do so, here’s the first time where we’ll use these Aged actions. Go back to that layer mask content, and zoom in a little bit.
Open your action palette (ALT + F9), and play the Aged 1 action.
Aged 2 works along the same lines, but with different values which produces a different output. Our rule of thumb is to use Aged 1 on white and light objects, Aged 2 on dark and black ones. But we’ve also proved that rule wrong countless times.
This is what your layer mask will look like after the action has been played. Because we’re working on the content of a layer mask, you’ll also have to validate the levels panels. You could tweak the values, but I wouldn’t worry too much about that.
Now it’s a tad less sharp, less clean – much more organic. Let’s move onto a second pattern.
This one is built in Ai as well. Start with one black circle, and then start copying and pasting in front and increasing the size of each copy.
We applied the aged effect on it to make it look less perfect and digital.
And here’s the result! Time to texture that thing.
Background textures and coloring
Go back to that background: we’ll use the files paper41.jpg from the 42 vintage paper textures pack, vintage_stained_texture_5.jpg from the 15 vintage stained paper textures pack, and scan32.jpg from the Vintage Paper Vol. 1 pack.
The first one is used because of its beautiful paper grain. The second features some interesting dirt spots, speckles and intensity variations. The third has some folds and worn marks on it that will help to give the aged feel we’re looking for.
This is the current state of the poster, without the textures and the color overlay.
And here it is with them. So how do we do this? Rather simple actually.
- Open the texture file you’re interested in
- Drag it onto the poster
- Size and place it according to what you want to achieve
- Desaturate it (SHIFT + CTRL/CMD + U)
- Use the levels (CTRL/CMD + L or use a levels adjustment layer for non destructive editing, just think about using CTRL/CMD + ALT + G to make the adjustment layer apply only to the texture layer) to increase the contrasts and really bring the details you want to use out
- Sharpen the result a few times (x2 or x3), according to taste (Filter > Sharpen > Sharpen)
- Change blending mode according to taste
So where can you make the most impact in this process? The texture you’re choosing is important for sure, but also at steps 5 and 7.
Here’s a quick demonstration of how we use levels to bring out the texture goodness. We’re using scan32.jpg as the support for this example.
The values you see in the Levels dialogue box can be explained as such: the 100 on the left is the value of the dark tones, the 0.50 on the middle concerns the mid-tones (one of the most interesting ones to play with) and the 200 on the right impacts the light tones. You can also adjust visually with the little arrows under the diagram (black for dark tones, gray for mid-tones and white for light tones).
The Output levels section can also be useful. It defines the darkness of the darkest pixel and the lightness of the lightest pixel. It’s a good alternate for overall contrast control.
The blending modes
For a detailed blending mode explanation, we’ll invite you to go through this Visual guide to layer blending modes, done by Franz of FudgeGraphics’ fame.
These are the blending modes we settled on:
Let’s say it now: we are big fans of overlay and soft light. These 2 modes allow the details of the texture to translate on the design, without being overbearing (at least most of the time) or dampening color too greatly. When placing a texture in a design, we tend to go quickly through the full list of blending modes and choose the best.
Black and white textures
Using black and white textures utilizes the textures for the grain and detail they’ll bring without color correcting the piece all the time along the way. Sometimes, we won’t desaturate a texture, but it’s really rare and accomplishes a really specific purpose (the texture’s colors match or complement the color scheme of the project you’re currently working on).
This is actually why we have that color layer on top of our textures. Even if we felt the design was good with the contrast of the black forest, we wanted to bring at least a hint of color into these black spots.
The color overlay
Load the color swatch you installed earlier. Locate the Laurel green (#a7a761) on the swatch. Add a layer on the top of the textures, and fill it with color. Choose a blending mode for that layer to still be able to see the design underneath. We played with just the opacity of the color layer, Multiply, Overlay and Soft light.
It looks neat, but we lose a lot of contrast, and we want the background to be much more discernible.
This is what happens typically while using multiply: everything becomes darker. Not a fit for our goal either.
Here’s where the awesome happened. We were ready to switch to overlay, when we made a wrong click and the blending mode that got selected was darken. Admire the result:
Because of darken‘s properties, the color was applied to the black and white elements from our upside-down forest image, and the rest of the background stayed mostly untouched. Mistakes can show you the way. Also, if you haven’t grouped your layers into a bg group, now might be a good time to do so.
Texturing the type
Now that the background is done, add the type. You just have to copy your type in Ai, and paste it in place in Ps. Let’s look at the structure of the type layers:
You can see that there’s a bunch of typelock smart objects stacked together, with a Hue/Saturation adjustment layer and a layer mask. Let’s deconstruct how the effect works:
This is the type on overlay, with just one of the layers turned on. The nice thing about overlay is that it lets a lot of what’s behind show. But with just one layer, the type isn’t really readable. Let’s start by stacking copies, still on overlay…
As you can see, the type is getting sharper. There’s still too much background showing up. Let’s add some more.
After five copies on top of the original smart object, the type is legible enough. Now, as you can see, it’s overly saturated. Hence the Hue/Saturation adjustment layer:
Now, the type blends in way more, with a more natural “fall” color. Oh, before we forget: the original color we applied to the type in Ai was #faf9a6. The color is called “Crocus yellow” in that Chevy color swatch.
You’ll notice also that the adjustment layer is applied only to the type. To do that, we just CTRL/CMD + clicked one of the type layers to select its content before creating the adjustment layer, which creates the appropriate layer mask revealing only the selection you just made and hides the rest.
There’s also a layer mask with some grunge effect on the typelock’s group. Here’s a before/after shot:
Let’s look at the content of the layer mask:
Guess what will help you to accomplish this? The Aged actions, of course!
- Create a new layer mask for the typelock group
- Go into the layer mask content edition mode (ALT + click), and CTRL/CMD + click one of the type layers to get the outline of your type selected
- With the selection active, select the layer mask again
- Fill the selection with black (SHIFT + F5 > Black)
- Let’s play the Aged 1 action
- Now, you need to invert the result (CTRL/CMD + I). Make sure the selection is still active! The layer mask now simulate the edge of the type having received a lot of ink, while the center of the shape not so much (think ink trap)
- Let’s run Aged 2
Some screenshots of the process:
Experiment with levels and other contrast adjustments to make yours unique.
What, more textures?
Yup. This next step, while really fun, is also critical. The background texture manipulations set the “support” you want to emulate. The global texturing adds more grunge, but also the speckle, dust and other dirty effects. Lastly, it will help to give visual coherence and unity to it.
Let’s look at my global texturing group:
So, there are (from bottom to top): some block print textures, a film texture (it features a bunch of scratches and a frame), one of the black and white grunge vol. 2 texture, one of the rainbow grunge, some noise textures (think dust and speckles) and another white grunge + snow texture.
We followed the same process as when we textured the background. It’s a combination of carefully selected textures, desaturated, leveled, sharpened, patiently experimented blending modes that does the trick here. Let’s look at the details for the later:
As you can see, these are mostly on soft light. I played with the opacity as some of these textures were way too strong. Some notes per layer:
- The 2 block print textures are different ones, amongst the last ones in the texture pack
- Rainbow3 and Rainbow3 copy are the same texture. The one above has been rotated of 180°
- The first Experimental noise 6 has been inverted on top of being sharpened, the 2 following ones are just sharpened and the above one of the pair rotated of 180°
- Same scenario for the 2 top ones (same texture rotated)
Feel free to add more textures! Feel free to change the blending modes! Feel free to change the opacity! We decided to stop here, because we reached that “I think it’s complete” point. Also, as said in the beginning, this project was to showcase what’s possible to do uniquely with Lost and Taken’s textures. We have some sweets ones of old, dusty film, scratched metal and more we would have added (cf. this image).
Cropping the excess out
This is not mandatory, but will save you both time for the following steps and hard drive space. During the design process, you’re likely to have sized some elements beyond the limits of your canvas. You don’t see them, but each time you save the file, Ps remembers they’re here and includes them. Pretty useless. Also, when applying an effect, they’re taken into account too, which can make the effect take longer to be calculated.
What you have to do is simple: select your whole canvas (CTRL/CMD + A), and go to Image > Crop. Then, while it’s calculating, you might want to refill that coffee cup of yours for the last stretch of manipulations.
Creating a Comp and Aging It
If you’d look at our top layer group, called comp, here’s what you’d find:
We started to create comps because we were occasionally experiencing color shifts when saving without them. This seems to either solve it, or to show the shift on the comp layer, which you can then correct with adjustment layers. There’s a shortcut for it, it’s SHIFT + CTRL/CMD + ALT + E. This is an operation that will take a bit of time.
Once it’s done, place it in its group and create two copies of that comp layer. The bottom copy should get the action Aged 1 applied to it. The top copy should get Aged 2 applied to it. Switch the blending mode of both layers to soft light and their opacity to 25%.
The Halftone Effect
We perfected our halftone effect over time, after reading a couple tutorials that were including it (the main one being this one, written by Adam Levermore).
Create another comp. Right-click the new comp layer and convert it to a smart object. This is also going to take some time.
Once the layer is a smart object, let’s halftone it!
Press D to reset your color palette to black as foreground color and white as background color. We do this because your active foreground color will be used as the color of the dots of the halftone effect. Go to Filter > Sketch > Halftone pattern (make sure your layer is selected). This is what you’ll see:
A couple things about this screen:
- First thing first, look at the bottom left of the screen and switch the zoom level to “Fit in view.” Now you can see what you’re doing
- On the right side, “Pattern type” should be set to dots, as we’re trying to emulate that offset print effect
- “Size” and “Contrast” are to be played with to your liking. We used a minimum dot size quite big (8), since the poster is of decent size. We usually keep the contrast low enough to still have some dots in the whitest areas of the image
You should now see something close to this:
Let’s double click on the one that’s highlighted:
This opens a dialogue box that helps you to choose a blending mode for the halftone effect itself.
You should switch the blending mode to soft light via the drop-down menu, and hit OK.
Almost there…: Switch the blending mode of the layer. Change it to lighter. Lower the opacity some. We settled on 50%.
LAST STEP: SAVE YOUR HARD WORK. Tadaa, you’re done! You deserve a beer while the file saves. We suggest you save the poster as a PSB file (Photoshop Big), as it’s likely to be bigger than the 2 GB file size cap of the PSD format.
After seeing this, Caleb approved it. If you go back to the email conversations, you’ll realize that we’re fitting the scope we established at the beginning. We’re giving Caleb something that’s nature-themed, while still having our own stamp on it.
Well, it’s truly been a blast! We hope you enjoyed the post and that we could shine a little bit of light on how we do stuff.
Let us know if you have any suggestions, comments, or ideas on how to improve; or, you can send us love mail, hate mail, or ask us to design posters for you by letting us know in the comments below or just get in touch!
Simon H. and Jon Savage, Studio Ace of Spade and Editors of the Zine
Last week, we featured Jim LePage’s “Words” series on the Zine. We also announced that Jim was giving one of the prints away.
Today, we’re happy to announce that Andy Gattis, with comment number #7, wins the print!
We choose the winner by following a simple process: we grab the total number of comments (minus ours or any doubles), use a random number generator and taadaa!
Congratulations to Andy once again. If you didn’t win, stay tuned for more giveaways in the near future.