Articles by Month: March 2012
After spending the latter half of my friday at Go Media helping set up for WMC, and seeing where everything was to take place, I was beyond excited. Later that Friday night the other interns and I went to the Happy Dog for the WMC Fest Mixer. Though the fest had not yet started, the creative co-mingling had taken full swing. While listening to the bands start up and enjoying a drink, I gazed over to a face I recognized from my research on the speakers. I had quickly become a huge fan of his style, and ability to skillfully execute incredible illustrations, and complex elegant designs. Beyond the crew at Go Media, I had yet to network face to face with any other professionals in my field. After taking the leap, I was immediately glad I did. Dan proved to be an incredibly humble, personable, and badass dude. I got to talk to him a while (at least until I decided to let him eat his hot dog) about what he’d be talking about and the creative process in general. Naturally after our introductions, and pre-WMC creative small talk, I was stoked to see Dan speak.
Here’s What Happened:
Dan dived into his talk right away speaking on how where he grew up, and lives influences his work so much. Also stating that Salt Lake City is a crazy place to live and grow up. How most of the far-fetched stories you hear about the area are actually pretty real.
“Most of you all probably know Salt Lake City from shows like Big Love, or Sister Wives…which is all pretty accurate.”
The first work Dan presented us was a series of Tarot Cards themed around SLC folk lore to promote AIGA’s next convention there. Each Tarot Card was meticulously researched and used Dan’s own stylized symbology to tell the story in a centralized piece. As he went through each of them explaining the insane SLC tales behind them, I realized the importance of being a good story teller. This was a core trait in Dan that he’d go on to discuss in his talk. Story telling, coupled with being able to talk about yourself has a creative or brand.
With that Dan started the main focus of his talk which he titled Flyer The Death Guild. Dan related an anecdote about being at a Big Cartel (where he works) meet up and overhearing a conversation in which someone was asking how they can promote their Big Cartel store. That question, and how to hustle your personal brand in general comes up a lot. Another person in the same area responded to them with the advice that they should “flyer the Death Guild”. In which Dan responded “Absolutely…you do that”. Admittedly at the time Dan did not understand that this girl was talking about a goth night club in San Francisco. The Death Guild’s lobby is always littered with flyers, and stickers promoting various DIY brands, so the connection to the advice became apparent. Its a great launch point for anyone to start their own brand or service.
“Once you decide to build a brand for yourself it has to come from an inner passion. The brands that work come from something that you would be doing if you didn’t have to make money. The stores that I see that make it [at] Big Cartel, whether they are selling or promoting; these kids live eat, and breathe, and drink, and sleep their brand. You have to develop this sense that you wear it as a second skin. You are constantly littering pieces of your brand out there, you are flyering every Death Guild you come to.”
This advice struck an immense chord with me, and ever since I’ve been trying to implement it into my life at at least 10% of the level Dan was talking about. It’s a hard thing to do, but I really do believe if you achieve this second skin, it can lead to success. This advice may seem targeted specifically to brands but in truth is easily adaptable to anyone who is running a creative service. Because once your brand is apart of you to such a large extent, it will come up in conversations with people who can push your career to the next level.
Dan then moved on to talking about his ideas on never sleeping. This has less to do with how many hours of sleep you get each night, and more to do with training your mind to always be alert. Alert in the sense that you are ready to receive inspiration from anything possible around you, and that you can store and catalog that inspiration inside your mind.
“Training your mind to hear stories, see visuals, and start to build this organized catalog of images and ideas in your head, that you can start putting together in unique ways. I had a professor when I was younger that just pushed us on that. That said ‘Soak up everything you can. You don’t want to be stuck in a creative rut and be referring to somebody else’s work. Or copy other people’s styles. You want to be better at learning stories from people, and remembering dreams, and studying history, and pulling your inspiration from real world experiences.’”
Dan gave an anecdote about one of his own experiences cataloging inspiration. While at an orchestra concert, Dan observed a child compulsively eating his own hair. The actions of the kid were so shocking and interesting to Dan that he had no choice but to go crazy researching it when he returned home. After discovering a condition known as Pica from his research Dan had obtained enough inspiration for months of work. A great example of how little instances in life can influence you.
The next aspect of advice Dan discussed was the idea of littering the world with your brand. The first way of accomplishing this is in the physical sense. Whether its stickers, or street art, or business cards, its always important to have something accessible to talk about. Dan referenced an artist named Travis Miller as a great example of legally and illegally covering wherever he went with his art. “He made a really good name for himself by just always putting himself out there.” Littering the world with your brand can only go so far in the real world however—its also very important to replicate the same actions online. It’s very easy these days to approach a blog, brand, or company with the work you are doing and try to get noticed. Dan had a great opportunity when he was starting out with his own t-shirt line. Dan at the time had been creating t-shirts with crests based on the stories of scientists and their discoveries. After creating these shirts and putting them online Dan began to email blogs every day with a link, and about his brand. However Dan never heard back from anyone, which is a lot of times the case when people who are busy. However because Dan provided some content for them to use, they eventually got around to his emails. Finally a blog posted about his store and for the next 48 hours Dan sold out of every shirt he had. Going to show persistence pays off.
Speaking up is one of the most important ways to be successful. “You don’t have to be that annoying kid that’s always in people’s face. But you have to be able to talk about your brand enough that when a conversation comes up it feels organic and you can talk about yourself and excite people about your brand.” This how Dan go involved at Big Cartel with his friend who founded it. Dan would have the courage to go around to various art shows and talk to people about whether or not they have their work selling online. And if they didn’t he would inform them about Big Cartel. After Dan said this I immediately thought back to Friday night when I had taken an opportunity to speak with him and how much I felt like it paid of that I did.
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!
Greetings & Salutations
My name is Wilson Revehl, Co-founder, CTO, and Vice-President of Go Media. When William Beachy and I founded the firm in 2003, merging our respective freelance businesses, I would not have imagined we’d become a publisher. And lord knows I haven’t done much to advance that cause. Jeff Finley, our first principle partner, deserves most of the credit for advancing our readership. The last time I wrote a Zine article was in 2007, about Flash, which has since become irrelevant.
With that said, this piece isn’t my prodigal son homecoming to the Zine. I didn’t carefully consider the topic in any painstaking manner. It simply came up during a recent project when I wanted to point out some things about homepages to the design team. A Google search on this topic produced less-than-satisfactory results. I was scheduled to produce something for the Zine anyway, so there ya have it – practically wrote itself! Usability for the modern web seems like common sense. On the other hand, I could write a brick of a book on the topic. Now that most of what we designers do faces the internet in some fashion and many of our readers haven’t been designing for the web as long as this old dog, it’s only fair we start with the basics.
Usability fundamentals of modern website design
Months after we launched a brand-new site design for our client, they returned. They wanted a new homepage. They were a market-savvy bunch who had tracked visitor click-through and retention. The idea was to alter the layout to rev up visitor engagement. I wholeheartedly endorsed the endeavor.
An organization who has the means and is willing to test differing user experiences will find that it offers constructive insight into their marketplace. However, most small businesses don’t have the budget to refresh their website design or layout whenever they want. That is why it’s crucial to design a thoughtful website user experience the first time.
Here, we’ll cover some usability basics for modern websites. The goal is to show you pragmatic dos & don’ts to ensure you’re taking advantage of best practices and conventions.
The Navigation System
No, we’re not talking about your GPS. But you might glean some perspective from the consumer products all around you. Long before the internet (or GPS) was mainstream, industrial designers had been honing and advancing user interfaces for manual operation. Whether it was the car stereo or the VCR, they recognized that comprehensive controls were pivotal in making their products viable. Things are starting to come full circle (who knew?!) with the advent of touchscreen and the desire to develop & design responsive websites for displays of various device types. The new norm will soon be conforming your site for display on car stereos! Until then, let’s focus on what you need to consider today to create a compelling website navigation system.
Use conventional placement
Why? Humans are creatures of habit. There is a reason you see top-of-the-screen navigation on the majority of websites. It is functional because people read from the top down. It is effective because it communicates a lot across a wide piece of real estate without hogging it up. Logically, you can’t go wrong with a menu at the screen’s top because people are looking for it up there by default.
No design works unless it embodies ideas that are held common by the people for whom the object is intended.
– Adrian Forty
The National Public Radio site does a superb job in demonstrating the top placement of the main menu in a clean, high contrast enclosure with cozy margins to add weight.
Starbucks pulls off a tasty top menu without the high contrast enclosure like that of npr. The lack of contrast has no negative impact on the usability but rather draws you into the slideshow below.
Conservation International, one of the largest environmental NGOs, has a great example of two-tier (dropdown) navigation. This is the ideal way to expand the reach of a top menu while keeping the interaction requirements down. Sites abundant in content can get visitors to their destination faster without much eye movement.
Skype’s top menu and subsequent overlay is oh so simple. And yet, they’re giving you direct access right out of the gate to their multifaceted offerings. Skype has usability fundamentals down to a science. You’ll see them mentioned again in this article.
All written languages (on Earth anyway) are read from the top down. The majority are also read left to right. The second most conventional navigation is a vertically stacked column aligned to the left. I don’t speak or read any Asian languages, but I would imagine this approach is the same but aligned right.
The Marussia F1 Racing site does a great job driving traffic to their navigation system racing down the left of the screen. Too much?
Go Media went all-in with a fixed position left navigation on the 2010 site. Although our new one (in the works) might deviate from this, it is still a very accessible approach.
Panodora’s new UX is a cool example of using left navigation when it really counts. Something like a playlist would not have worked in a dropdown nav from the top. Their vertically scrollable list stays easy and unobtrusive no matter the length of items.
Newegg carries an absolutely massive inventory of electronics. They manage to gracefully route customers from left navigation onto a clever multi-column overlay that will get visitors quickly into the right category. This style of expanded navigation is quickly becoming a user friendly convention for complex taxonomies.
Use it! No really, really use it!
Because it is the piece of real estate everyone who makes it to the bottom of the page will see. Most sites do not affix primary navigation to make it available all the time. If you’re ready to explore another part of a site after reading down through it, the shortest distance to that next click could be a friendly, even robust, footer. Often, you can make what would otherwise be secondary or tertiary sections available here. A thoughtful footer strategy can be more potent than third-tier menus or sitemaps.
The White House has a straight forward 6 column footer with an additional base line of ancillary links.
Rackspace has continued to deliver distinct, comprehensive website user experiences for what is typically the very complicated industry of server colocation. The way they lasso their offerings into clever, succinct categories allows them to be listed neatly in the footer.
Commonalities of a good navigation system
You’ll notice a few characteristics emerge when you step back and evaluate the previous examples.
- Clear & concise menus – Reduce your navigation hierarchy into a small amount of choices or categories. Present sub-categories in a way that feels logical. If it doesn’t make the cut as an important section or sub-section, maybe it can find a home in the footer or fringe menu.
- Base your color contrast on priorities. The font or background decisions you make will impact where the viewer’s eye travels.
- Allow room to breathe. Line-heights, padded enclosures and the margins between different elements help make navigation stand out as interactive.
- Establish styles that show state changes. These are effects like changing text or enclosure colors when a mouse hovers over or an active state to act as a visual reminder of what site section they’re in.
Focus – Keep it simple
My daughter is 5 months-old, and already, she possesses an intuition into user interfaces. I say this not because I’m merely a boastful father of a genius baby, but to illustrate that it can become instinctual at a very young age. Whether it is a bright, noisy button on one of her (too many) battery-powered toys or an interactive story on her granny’s Nook, she knows when she pushes a button, she gets a reaction.
Upright travelers of the information super highway are a tad more evolved than a baby, but anyone who has worked in our industry for more than a moment knows it ain’t by much. Kidding aside, the internet is a barrage of media & messages all vying for attention. If you’re going to command enough to capture that ever elusive click-through, you need to give your audience a reprieve from the clutter and go as far as making it an instinctual interaction.
Put what is important “above the fold”
In the newspaper industry, editors will place the most important, eye-grabbing content up high on the page – above the fold. This is an effort to grab eyeballs and lure in readers.
The same basic principal applies in website design. I don’t want to get into the more technical above the fold/below the fold subject in this article, but basically the most common display size (dimensions) of your audience on desktops and laptops is currently around 1440px wide by 900px high. This means you have 900px available in the view port before the vertical scrollbar kicks in. The bottom of the immediately visible area is your ‘fold’. Anything below the fold is out of sight, so the viewer will need to engage the scrollbar to see more. Try to keep your most important content and actionable items within that 1440×900 border to gain maximum exposure. If you’re not sure how to design for common browser dimensions, google ‘css grid systems‘ and you’ll find many tools to help you in the process.
That’s been one of my mantras – focus and simplicity. Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.
Apple is renowned the world over for the innovative industrial design of their products. If you’re reading this, you’ve probably had at least one customer who’s referred to the Apple website when describing a goal. Apple does an impeccable job of filtering things down to the most basic relevance and hiding as much technology as possible behind a spacious, contemporary facade. In the Steve Jobs biography, he’s said to have had an obsession for wanting Apple to ‘focus like a laser‘ on its goals and not get distracted with other markets. You’ll see below their website release of the new iPad, where Apple is visually swaying its visitors to focus like a laser on that one single product.
Adobe sells a wider variety of software products than any other enterprise vendor. This might not be a business subscribing to the aforementioned ‘focus like a laser’ (possibly the crux of what made Mr. Jobs dislike Adobe Flash) but Adobe does a solid job of condensing such a broad range of topics into a top navigation system and above-the-fold slideshow as their centerpiece.
Help your audience focus on your focal points
You may recall the search engine battle for supremacy of the last decade. Everyone knows who prevailed. If you think it was because one had a more advanced algorithm than the other, or it was brand disaffection, you’re fooling yourself. It was simply because it was just that damn simple. Over the years I watched countless layman internet users sign into their Yahoo or Hotmail email, keep one of the two news aggregators as their homepage and still jump right over to Google to do their searching. Was it because they preferred the results better? Nope. Google was such a nice break from the content clutter, it became the De facto search utility where people would go to clear their minds and just search.
Imagine if the information super highway were an actual highway. And all the homepages are billboards asking you to pull off now and explore them. Picture there are thousands of billboards on that one road in every direction everywhere you look all contending for your concentration. And let’s not assume everyone is stuck in rush hour. Traffic moves pretty well along on the internet.
How are you going to be seen in a sea of signage?
How are you going to get your point across succinctly enough to keep the attention of each visitor?
No one knows exactly how many websites there are. Some place it upward of 1 billion. And this number is increasing exponentially. This is terrific news for our industry but has side effects. For the topic at hand, we’re going to see more and more distracted, impatient users. Whether your website’s goal is to sell something or provide useful information, if you don’t give the visitor exactly what they’re looking for in the shortest amount of time possible, they’re leaving just as fast. Like I said before, make it instinctual. Don’t make them think.
I think design covers so much more than the aesthetic. Design is fundamentally more. Design is usability. It is Information Architecture. It is Accessibility. This is all design.
– Mark Boulton
The real estate sector leverages the internet quite well. As it should. It is a perfect fit with the complexities of info, rapid pace of resale and the very visual nature of displaying a listing. Zillow delivers right out of the gate with a homepage that places their two visitor priorities in a perfect triangular focus map. Top down. Left to right.
AVAAZ gives citizens a voice with the tremendous help of a well conceived homepage. Your eyes are drawn from their forceful logo into the slideshow and immediately across to the call-to-action.
Rhymesayers keeps things smooooov with a clear cut, high-contrast headline juxtaposed to a heavy slideshow. The mp3 player draws your eye because it is the only splash of color up top and calls you to action with large familiar controls.
Once again, Skype shows us they understand the archetype. This slideshow is clever in that the call-to-action (CTA) pulls you easily into the location you expect to see its content and then provides that next CTA only a short diagonal distance from the direction your eyes were already headed in. Well played Skype, well played.
Vimeo’s primary ‘Sign up’ CTA is very traditional but they throw a few more in the mix such as the massive ad banner and a reinforced ‘Join’ in the top navigation. We can assume the valuable real estate given to the ad space was to meet a business priority and that they’re reaching the objective of attracting clicks with such a large banner where it is.
This week’s award for ‘focusing like a laser’ goes to Dropbox. I had to illustrate a cause & effect image below so you can see just how concise their homepage is. They give you two options, watch a video and download. The video starts in place without compromising the ever present download button. Can’t get much more focused than this.
Another start-up you’ll see impeccable design focus from is SeatGeek. Ticketmaster must be groaning in their grave being yet-again reminded that there is still room for innovation in event ticket sales. When you can acquire seats faster online than in line at the box office, you’re looking at industry disruptive technology. And that technology here is usability.
Do we really need another online retailer of electronics? Decide thinks we do and shows us that despite market saturation, you can quickly differentiate yourself with a brilliant UX and high-tech interactivity. Look how they take you from search, to result, to a matching CTA with a graceful color palette & layout that accentuates what is most important.
Usability Best Of
This is far from a definitive list of impeccable homepages, there are entire websites & awards devoted to that. I rather wanted to showcase a handful of sites that demonstrate the best of website user experience based on the topics discussed in this article.
Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.
As obnoxious as auto sales can sometimes be, Ford steers visitors clear of any usability bumps in the road. They start with an unobtrusive logo and ancillary menu that sits well atop a full screen background. The medium contrast top navigation is frictionless drawing you right into a brilliant photo composition that showcases three different car calls-to-action without a seam between them. They place an additional row of focal points just above the fold. There is a lot to interact with here without feeling like there is.
AudioVroom is an up and coming website to build your own personal radio stations. You’d think this has been done many times before but AudioVroom makes usability so effortless, they’re already working their way up the veritable charts.
The Obama Administration shows us that tasteful design doesn’t need to end at the edge of the private sector. The Whitehouse‘s site employs all the classic and modern usability best-practices.
We should expect nothing less than intelligence from the paragons of spreading original thought. TED Talks brings attention to their wealth of video lectures with straight forward controls and an immediately accessible video gallery. The navigation is busier than I would prefer, but the light background palette helps them get away with it.
Yeah, it’s a shameless plug for my favorite city in America, but Positively Cleveland pulls off an exceptional case in point of form following function.
A grid system should keep you on track but sometimes designs get trapped in those boundaries and designers have a hard time breaking through to make things original. SHFT pulls off a creative use of background imagery to give personality to the brand. The top menu and header text elements seem to float above the various depths taking nothing away from the focal points.
Another way we can learn how to implement better usability is to explore what not to do. I could point to countless DIY websites built by non-professionals, but that would be too easy. Instead, we’ll show you how even professional designers – paid large sums by successful organizations – can become misguided.
Our opportunity, as designers, is to learn how to handle the complexity, rather than shy away from it, and to realize that the big art of design is to make complicated things simple.
– Tim Parsey
The New York Times is arguably America’s greatest newspaper, packed full of hard-hitting journalism and diverse, enjoyable reads. But the designers here aren’t capitalizing on the vast number of readers who peruse their site. It’s an industry-wide truth that hard copy sales are down. The advent of the internet, though, allows the publication to reach a wider audience than ever before. In looking at their site, the entire top section is squandered with a gaudy name plate & ad banners. This has the adverse effect of shrinking the left side navigation. Content above the fold is further impacted by the inappropriate layout. Efforts to generate a wealth of digital subscribers will be hindered here because of ineffective usability.
Anthem is one of the nation’s top insurance providers, but any claim they have of a top quality website should be denied. The users are going to be a very broad demographic perhaps than most. The No. 1 goal here needs to be ease of use. The company directs people to the website because over-the-phone, human resources are expensive. But by approving an unconventional navigation system, they are just asking for confusion – and higher call volumes. What’s more, their design is too wide for the broader range of browser dimensions.
Simple usability seems to have flown right over the heads of the designers for Sky Mall, the prolific seller of air travel novelties. The business model for the magazine, always found neatly tucked in the seat back in front of you, is targeting impulse shoppers. However on this homepage, the one thing that seems to be missing above-the-fold is the most important: the merchandise. Plus, priceless portions of the page top are being hogged by un-important ancillary section links. Now that internet access is becoming increasingly available a mile high, Sky Mall needs to realize the impetus to optimize for traveler viewing on laptops & tablets or it will be forgotten on the tarmac.
Major League Baseball has three major strikes against its homepage. The first, and most obvious, is the game scoreboard. It’s so dark and heavy on the screen – it cannibalizes the entire left side. All the while, it is hard to read and the interactivity is sorely lacking. They could do so much more with it. Second, the news feed off to the right feels like an afterthought. Third, all the above-the-fold content decisions appear poorly thought out. The combination of the bulky scoreboard, oversize slideshow, banner ads and news feed panel fail to deliver a home run of content to dive into. Hardcore or fair-weather baseball fans alike are being denied a user experience worthy of America’s Favorite Past Time.
Brembo is one of the most iconic aftermarket auto parts companies. However, the website designers should have been red-lighted on their navigation decisions. The brand is envied by competitors, but the site needs tuning. The design is quite clean and stylish. But by going with an unorthodox main menu, barely atop the fold, they are detouring potential direct or retailer interest. You’re instead drawn toward what appears to be top navigation but represents sections that maybe should have been relegated to the footer. Experimentation with abstract menu systems can lead to bold, innovative design – but it has to be done well. The bottom of a website’s homepage might not be the place to go full throttle with it.
Bill Smith appliances site screams laziness. It almost looks like they literally copied-and-pasted a tacky, newspaper classified ad. Aside from the tired and outdated motif, there is no immediate focus on featuring products. In today’s competitive consumer goods market, the core of any product retailer site has to be selection and price. Everything else is secondary. Here, the designer gave too much space to promoting the vendor’s name across the entire top. Additionally, the bulky menu system to the left offers questionable value.
South By Southwest – We love SXSW… the event. But event invitations almost always follow a set of rudimentary basics: Who, what, when, where, why and sometimes how. Here, Austin’s flagship mixed media conference, a widely-acclaimed and expensive affair, appears to have made some missteps on usability. As nice as it looks, the homepage design does little to sell new potential attendees on the event. Any swelling enthusiasm will quickly wane for uninformed visitors, who are forced to click an inordinate amount of times to figure out what this is, who will be there and why they should join in the fun.
Excite’s seemingly antiquated site is anything but exciting. Seriously – did they toss in the towel circa 1995? It looks like it belongs in a time capsule. If their main goal is to have you click on ads and leave their site – congratulations. That’s about all they have succeeded in doing. They do have a high-contrast color scheme. That could work well. However in this case, the accent color is wasted on borders and legends, which only serves to further distract anyone from engaging with the search and content.
The thing that makes CVS successful is convenience. Their website, however, is anything but. Maybe it’s just me, the red “buttons” don’t really feel like click-able buttons. Not only that, the heavy blue calls-to-action that flank the site content are redundant – both for prescription services. Even if pharmacy is a large part of what brings people to the site, that topic can easily be consolidated to free space for other priorities.
Fark‘s design is almost as laughably bad as the outrageous news stories that are its bread-and-butter. It is worth noting, however, that the site has actually improved over the last few years. But it still has quite a ways to go. The first available menu is unimportant to the goal of keeping eyeballs on the page. The next thing that draws your attention are the story excerpts. This would be good, except that the element that has the most weight is the source – not the cleverly-written headlines. What’s more, the poor branding destroys whatever emotional connection the reader could have made with the site’s greater mission.
ICPlaces.com is an online entertainment site for local & regional producers. But you wouldn’t quite know that by looking at it. There is no main menu system. There is nothing on the front page to tell you what the site is or where to start your search. And a video begins blaring before you ever really get your bearings. No one is amused.
Dilbeck is one of the most recognized real estate companies in Los Angeles. But I’m not sold on the website design. Almost every aspect above the fold is a roadblock to property searching – which is the whole reason people visit.
Most designers inherently know what conventional usability looks like. Admittedly, if you cross examine some of my do’s and don’ts, you’ll notice I applaud the use of an element in one place only to later berate it in another. There are countless subtleties in color selection, interactive states, margins and layouts that can make or break the aesthetic. There are nuances behind when and why you should use a certain navigation orientation or where you place a call-to-action. We always recommend designers take a step back before diving into mockups and work through the information architecture and wireframes so you and your client gain an expansive view of the content and layout potential. Predetermining taxonomies, business priorities, design boundaries, and user experience goals can be an arduous process. But planning ahead will ultimately lead to a better user experience resulting in more immersion, visitor retention, conversions, brand recognition and so much more. As a website designer, you possess a great power. Even if it is by way of the meager mouse, you have the power to influence the decisions of others. Those clicks can lead to measurable success for everyone involved. So use your power wisely.
Hello dear Zine readers. Simon and Jon from Studio Ace of Spade here. Today, we’ll have the pleasure of walking you through the making of our entry for an old installment of The Fox Is Black’s Recovered Books contest.
Our goal with this walk-through/PSD break down is to provide some insight on the concept behind the poster, and on the various techniques that helped during the execution phase of it.
Let’s be clear: we don’t think we’ll give you any magic recipe to create a cool poster, but rather a detailed look at what our workflow for this one was, and a look at some of our favorite techniques when manipulating images and blending them with type elements and textures. We hope you’ll be tempted to actually play with the various values we used in our level editings and filters as well as the different textures in the packs we used, in order to make this piece your own.
How it came to be
The contest on The Fox Is Black
Like we said earlier, what became this poster was an entry for The Fox Is Black’s Re-covered book contest.
The Fox Is Black, formerly Kitsune Noir, was started in April of 2007 as a way of sharing interesting ideas with likeminded people.
The contest is quite simple. Bobby and his team of authors choose a book, provide some background inf, cover examples, and a deadline. Here’s some of the announcement post:
Well, it’s been a few months since our last Re-Covered Books contest, so I figured it was time we get back to creating some awesome work, don’t you think? I decided that I wanted to pick a book that was newer, something that could really inspire a lot of bold ideas and not be marred with clichés. Browsing through our library at the TFIB HQ I came across a copy of Do Androids Dream of Electric Sheep?, and realized that’s exactly what I was looking for.
It’s important to remember that this was the book that inspired Blade Runner, the emphasis here is on the word inspired. That means I don’t want to see any Harrison Ford looking guys on your covers, or anything that’s borrowed from Blade Runner. Try and use your imagination and come up with some crazy, sci-fi imagery.
And here are the examples of (beautiful) vintage covers he provided:
Having read excerpts of that book a long time ago and not seen Blade Runner yet, we quickly proceeded to do so in order to understand the difference between the 2. After some research, we also discovered a comic book version of the book, edited by Boom Comics!
After all that research and armed with our best memories of sci-fi movies (from Metropolis to The Matrix), we felt like we could go ahead with conceptualizing a direction that would be ours, even if not totally unique.
The title gave us the most obvious visual direction. There are androids, sheep, electricity, dreams that are mentioned. The story includes robots that are so close to look like humans that they might not be recognized by an untrained person. It’s also happening in a society devastated by a global nuclear war, and Earth is in a shape so bad that most of the people left to colonize the stars.
In short, we want robots, electronic elements (circuit boards…), sheep, and a gloomy atmosphere.
From there, we started to gather reference photos and some other visual to create something close to a mood board.
This mood board includes a WPA poster with 2 bighorns sheep, a 1890s photo of the National Galleries of Scotland of a sheep named MacGregor, one of Hannes Beer’s ADED project installment, a photo of sleeping sheep, and the Bighorn sheep print designed by Mark Weaver.
After the mood board, we embarked on a quick texture research, to find circuit board textures we could use. As usual, Caleb from Lost and Taken got us covered, with this pack of circuit board textures, published on WeGraphics.net. Bittbox also has a series of circuit board textures up, but we ended up not using them. We’ll explain why a bit later.
After some quick sketching on paper, it became clear that trying to draw a robot sheep wouldn’t work as efficiently as using a photo as the base of our poster. We did some posters including hand drawn elements before, but this one just didn’t seem to work. Instead, we decided to use the 1890 photo of MacGregor the sheep as the base element of our poster.
Once the base of the poster was determined, we also knew we wanted to have the circuit boards present in the image as well, probably overlayed on top of it. We also knew we had to have the author name and book title on it somewhere.
A lot of the things that happened during the execution of that cover/poster were happy accidents, as it often happens with an organic design process. This means one thing: EXPERIMENTATION IS KEY. It also means that what we sometimes consider as mistakes can actually be more interesting than the original direction you planned for.
With all that said, let’s dive in the execution part of this piece, shall we?
First, some useful resources
The very first file you’ll need to get is the picture of MacGregor the sheep. Don’t forget to grab the biggest size available.
Let’s look at our layer palette to see what we used and what you’ll need to emulate it. First, the background.
In here, we have, from top to bottom:
- A photocopy texture made by clarisaponcedeleon and available on DeviantArt
- Scan-32 is a vintage paper texture part of a pack done by Caleb of Lost and Taken called Vintage paper textures vol. 1 (published at Design Kindle)
- VV_PaperDotsSingle is a paper texture with some heavy grain, published on Flickr by Dustin of Valleys in the Vinyl
- VV_DirtyPaperPack_02 is from a series of dirty paper textures collected by Dustin of Valleys in the Vinyl
- bashocorpo_com__paper3 is a paper texture from Bashocorpo
- Metallic blue (6) and Metallic Blue (2) are both from a pack called 7 blue grungy paper textures from Lost and Taken
You’ll also see a color layer (in blue #6faab8), but more on this later.
The next set of resources will be useful for the global texturing process:
Here’s where to grab these ones:
- Tape borders and tape borders copy are constituted of pieces of tape coming from Fuzzimo’s Flickr stream and from Lost and Taken and combined on a layer.
- Splash 3 comes from a pack of textures made by Andre Meca and published on PSD Fan
- grunge_-_dust_-_deviantart_-_too_dusty… is a film texture with dust and speckles I found on DeviantArt
- texture_from_film_-_05_-_4298403252_6b4b31470a_o_d is a grainy film texture, coming from a set by m. r. nelson on Flickr
- 4439092868_c299e91a19_o – subtle grunge – LT is part of a set of subtle grunge textures made by Lost and Taken
- Old Film 02 has been found on DeviantArt
- noise2_7 is part of the second set of noise textures put out by WeGraphics. If you don’t want to buy the set, use the free sample
- circuit board – BB is one of the textures taken from BittBox’s circuit board texture pack
- c_b_2 – BB is wrongfully credited to BittBox here, and can be found in that free set of circuit board textures at WeGraphics
Phew. That’s all the resources you’ll need in terms of textures. In addition to that, you’ll need the 2 aged effect actions, created by the good folks here at Go Media (Aged Effect One and Aged Effect Two).
Note: in order to save the actions, just do a right click on the links above, and choose “Save link as…”
Let’s make this piece
Step 1: creating a new document
Let’s remember that at first it’s supposed to become a book cover. So we could just go ahead and decide on a cover format based on one of the most common book sizes. Since we weren’t sure we’d make it through the contest and just in case we’d want to turn this into a print, we decided to design our submission as an 18×24 inches poster.
So let’s create a new 18×24 inches document in Ps. As you can see, our document will be in RGB mode since some of the filters we’ll be using in the final phases are available in RGB mode only.
Other than that, since we might end up getting this to print, don’t forget to put the resolution of your document to 300 ppi. We’ve also added guides, as they help us to structure the composition. On a 18″x24″ print, we have them typically set up at 1, 2, 9, 16 and 17 inches vertically, and 1, 2, 12, 22 and 23 inches horizontally. Then, you can also add some as needed.
Note: you might want to create a similarly set up document in Ai, and leave it open in the background. We’ll use that one for creating the type elements a bit later.
Step 2: let’s place MacGregor
We could have started with the background texture buildup, but we wanted to make sure we’d place the main element of our poster without the distractions of background textures. We already knew that our type would mimic a typical book cover layout (title at the top, author at the bottom), so a somewhat off-centered placement for MacGregor was what made sense.
Drag the sheep image in your document. Desaturate it, then, convert it to a smart object (right click on the layer). 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 has some limitations. Once it’s a smart object, place and resize it as you see fit.
The image the National Galleries of Scotland are making available is fairly small. We’ll need to think about sharpening and other enhancements. In terms of sharpening, one method I like to use a lot is based on the high pass filter. It’s been explained very well on this blog by Oliver Barrett, so I won’t go over it too much in detail.
You’ll need to make a copy of your correctly placed sheep layer. Then, right click on the layer and rasterize it. Once it’s rasterized, apply the high pass filter. I used the highest value possible for the filter, 250, because the base image is so small. Switch the blending mode of the high-passed layer to soft light and play with the opacity to adjust the intensity of the effect. You can see I actually have my base layer (not high passed) on hard light, to let the color and background effects play through, then the high passed layers are set on soft light at 25% opacity. The second copy is here because I needed to make the sheep a bit more present once the background was done.
The background textures
Since we wanted to create a dark and digital mood but not fall into a Matrix style, we opted for an electric, kind of muted, blue as our base color: #6faab8. After that, we wanted to start with a paper grain and rusted metal background. As you’ll see, it evolved into something a bit different.
First, a layer filled with the base blue (#6faab8).
Then, our first texture: Metallic Blue (2). Open it, drag it in your document and place it at the center. Resize it in order to cover the full extent of the canvas (or even to go beyond its limits). Then you want to desaturate it (CTRL/CMD+SHIFT+U) and adjust its levels (CTRL/CMD+L), to bring the details of the texture out. Then, sharpen it a couple time by using the sharpen filter found at filters > sharpen > sharpen. Just compare your original Metallic Blue (2) file with the one I have here. You’ll also notice that I placed the blending mode of this texture on Overlay @ 100% opacity.
Now, by following a similar process, let’s build up all the other layers used for our background. Here, Metallic Blue (6) has been placed on Soft light @ 100% opacity, after being leveled and sharpened.
bashocorpo_com__paper3 is bringing us the splatters we wanted. It also lightens the piece.
VV_DirtyPaperPack_02 adds folds and other worn effects.
VV_PaperDotsSingle is probably the texture that has the most impact throughout the piece. It’s what makes the final piece’s halftone effect so strong. Now that we have a chance to look back on this, maybe we would have put it on Soft light instead of Overlay, and also down to 50% opacity instead of 75%. Yet, as said before, it’s what brings most of the main feel to the piece. It’s bringing these great lines of worn folds.
Scan-32 is part of the Vintage paper textures Vol. 1. We edited the levels to make it really dark (the black is at 125, the mid-tones at 0.5 and the white at 200). Using Linear burn as a blending mode brings a lot of dark back into the piece.
Finally, ending up with the photocopy texture on Soft light @ 75% opacity helps to restore some light in the center zone, where MacGregor awaits some further treatment.
This concludes the background. If you’ve read our tutorial/case study of our Lost and Taken poster on this very blog, you’ll see that the process to play with the textures and combine them together is pretty similar.
Adjustments to MacGregor
Once you turn back on the layers for MacGregor, this is what your piece should resemble. All the texture work of the background is hidden! So, instead of leaving your base sheep layer on normal @ 100% opacity, let’s switch it to hard light.
The result of this blending mode switch lets the background show through pretty well. We’re definitely hitting the grunge vibe we wanted the piece to have.
We’re not having much of a technological feel to this, but that’s where the global texturing process will play. For now, it’s time to create our type elements.
The type elements creation
As a rule of thumb, when working on a piece like this one where there aren’t too many type elements to manage, we like to create them in Ai. It offers more control on the type, and allows to adjust scaling at will before applying textures and other effects.
Here are the final elements we used in the piece.
You’ve probably all recognized Gotham. We decided to use it because it’s a really legible typeface, but also because it has that great vintage feel. Because of the overall dark piece, we wanted the type to be white. In order to make sure it would be legible, we included it within these black blocks that act as a separation between the busy texture of the piece and the type. Finally, the white rectangles help to structure the type elements a bit better.
If you look closely at our type elements, you’ll notice they’re looking worn out. To achieve this effect, we’re using the roughen filter in Ai (Effect > Distort and Transform > Roughen). You can see the values we’ve used on the screenshot. We need to give credit here to Simon Walker (aka Super Furry) and to Dan Cassaro (aka Youngjerks) for the tips and tricks on how to use this filter. Simon did a great post over at Method & Craft detailing his use of it.
When placing our type back in the piece in Ps, we realized that white type in a black rectangle wasn’t that efficient. We then decided to invert the type elements to black text in white rectangles, which has much more visual impact.
Once both type elements were placed, it was time to start adding texture to them. Instead of adding another set of texture layers specifically to them, we decided to just place their blending mode on Soft light @ 100% opacity. When stacking copies of the layer, you’ll give it more opacity, with the textures below still playing through it. In our case, we stacked up 3 copies of the layer of each type block.
You’ll also notice a Hue/Saturation adjustment layer for both elements, and here’s the reason why. This is what happens without the adjustment layer:
The colors are just way too “hot”, too saturated by places. Sometimes, this can be a sought after effect. James White (aka Signalnoise) explained in his broadcast about his Dagger Woods poster that his really flashy colors are often obtained that way. But this time, we weren’t pursuing this route, so we added that adjustment layer, and turned the saturation down to -75.
Which gives us the following result:
Much more subtle. Also, remember we’re designing in RGB, and that when printing, these really bright colors don’t translate all that well (unless you add a spot color and work with some really talented pre-press guys).
The last thing we added to the type was a layer mask in which we pasted a grunge texture to add some extra grunge. Demonstration:
Without the grunged layer mask, this is what we get.
Here’s what the content of my layer mask looks like:
The texture was probably taken from this grungy lamp post texture pack from DesignInstruct, but we could be wrong. To paste a texture in a layer mask, it’s quite easy. Start by opening the texture you’re interested to use. Copy all its content (CTRL/CMD+A, CTRL/CMD+ C). Then go to your main document, and ALT+CLICK on the layer mask. You’ll be switched to see the content of the layer mask. You then just have to paste the texture you previously copied in there, adjust its placement, size and levels, maybe use the sharpen filter, and you’re all set. This technique allows to use elements than are bigger than brushed, which are limited to a 2500×2500 pixels size. And here’s the result of our manipulation:
Here’s a shot of the current state of our piece:
Now that the type is in place, it’s time to add some global textures on here.
This step is important, because it helps us to bring coherence to the piece by unifying all the elements together. The technique behind it is the same than when building the textures for the background, except this time you have to take the legibility of everything you have underneath into account. What’s the point of adding more to the composition if it takes your original work away?
Let’s start by adding something we’ve been talking about from the start, the circuit board textures.
We’ll start by using c_2_b, which comes from that WeGraphics free texture pack. We placed it vertically and made sure it would cover all the design. After the typical desaturation, sharpening and level editing, we switched its blending mode to Overlay @ 100% opacity.
Thinking the effect wasn’t as strong as we wanted it to be, we duplicated the texture, which gave us the following result:
We were happy with the added intensity. We just put the opacity of the copy a bit down to 75%.
If you looked well, you’ll see we have a layer mask on part of the board textures. The reason for that layer mask is to soften the board texture on the text blocks. Let’s look closer at our text without the layer mask:
And now, here’s the text with the layer mask being active:
It’s really subtle on the top part, more obvious on the credits, and helps quite a bit. The layer mask content consists of the text blocks surface filled with #d4d4d4 gray.
Next texture in line is one of the circuit board textures from Bittbox’s set. It’s on Soft light @ 100% opacity. It adds some really soft lines.
Next, we have noise2_7 (or you can use the free sample, spot the link under the download button). It’s placed on Screen @ 50% opacity. Screen makes the black parts of the image transparent, which just leaves the white speckles and dust appearing. This ages your piece in a heart beat.
For the same reason we duplicated the circuit board texture, we’ve duplicated that one too. The other thing we did to the duplicated layer is to rotate it 180°, to add some more visual variations.
Next texture in line, Old_Film_02. Placed on Soft light @ 50% opacity, it’ll had some soft hints of more dust and speckles.
The next texture is taken from Lost and Taken’s subtle grunge textures. Placed on Soft light @ 100% opacity, it brings some brightness back in the piece.
m. r. nelson’s texture_from_film_05 brings some of that film grain into the piece. Soft light @ 100% opacity.
too_dusty, the film texture from Miss Alienation’s DeviantArt gallery, is yet another dust speckle texture. You’ll need to apply some pretty harsh levels to make the speckles come out. Place it on Soft light @ 50% opacity.
Andre Meca’s splash texture adds another layer of subtle variations. Its blending mode should be Soft light at 50% opacity.
The tape border layer has been created using the various pieces of tape of the packs I listed above. If it’s too long and painful for you, you could also use these great brushes released by Chris Spooner. Combine your tape elements to create a frame that would go around the edge of the piece. Then, put the layer on overlay @ 100% opacity. Since we didn’t think it was creating a strong enough frame, we duplicated it and tuned down the opacity of the copy to 75%.
Phew. Almost done! Bear with me for the finishing touches, and you’ll have yourself a great finished product!
Finalizing the piece
So far, here’s what we have:
What we’ll do now is to gain time in the following steps. First, select the whole piece (CTRL/CMD+A) and then crop it (Image > crop). The reason we do that is to clear the file of the excess of texture that goes beyond the limits of the canvas. You don’t see them, but Ps does and it slows it down when applying filters and inflates your file size.
Once the cropping is done, let’s create a new layer that will include a merged copy of all the content of our piece so far. There’s a shortcut for this, it’s SHIFT+CTRL/CMD+ALT/OPTION+E. Once that’s done (and it can take a while, so go grab a warmer for your coffee mug), make 2 copies of that layer.
This is where the actions we’ve asked you to download will get useful. Get them loaded in Ps, and let’s play with them a little (Addicted to design wrote a quick how-to).
Run the first aging action on on the first copy of the comp layer. Here’s a preview of the result:
The action effect is a really harsh, almost xerox like (but with color) rendition of the piece. Let’s switch that to Soft light @ 25% opacity, for a less aggressive result.
Let’s turn back on the second copy of our comp and run the 2nd aging action on it:
For the same reasons as before, let’s switch this to Soft Light @ 25% opacity, and it’ll already look much better.
These 2 actions help to enhance the contrast, while still adding something of an aged look to the piece. Now the last piece, the halftone effect.
The halftone effect we use to finish most of the posters we do is greatly based on this tutorial written by Adam Levermore. Mad props to him. Let’s create another comp layer (once again, the shortcut for that is SHIFT+CTRL/CMD+ALT/OPTION+E). Once it’s done, rename it halftones and make it a smart object. Reset your color palette to black as your foreground color and white as the 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. Here’s what you should see:
The first thing you should go is head over to the zoom menu, and hit the “Fit in view” option. Now you’ll see what you’re doing. After that, we choose to emulate a pretty realistic halftone effect, with a minimum dot size of 5. We set the contrast at 15, like that it’s high enough to still show highlights and dark areas, but it’s also low enough for the brightest areas to how some of the halftone dots in them. Here’s the result:
Now, it’s time to use to our benefit some of the smart object status of our halftone layer. First, let’s change the blending mode of the actual halftone effect. Double click on that symbol, noted 1.. Then, in the drop-down menu (2.), choose Soft light @ 100%.
And then, finally, we can put the blending mode of the layer on lighten @ 50%.
Now, hit File > save! Save it as a PSB, as the final file is over the PSD file format size limit. Our file weighs a whopping 2.5+ Gb. And here you are, with a neat grunge, Do androids dream of electric sheep?-themed, poster.
Thanks again for sticking with us to the end of this rather long tutorial. We hope we’ve given you some insight on how we do things. If you have questions, suggestions, love/hate messages, let’s get the discussion going in the comments! Also, if you want to follow the progress of the poster as we made it, you can check the stream of Dribbble rebounds associated with it.
Simon H. and Jon Savage, Studio Ace of Spade.
Hey Go Media faithful! I am just now one month into writing my book! If you’re unfamiliar with it, I’m writing a book about how to build a design firm. It’s basically my life story up to this point. I’d say it’s half autobiography and half how-to. Rest assured that the autobiographical part of the book focuses on life stories that pertain to building my design business. Specifically, I tell lots of stories about how I’ve failed – miserably. Hopefully these stories will be both entertaining as well as informative. Even if you’re just working as a freelance designer and have no intention of building yourself into a firm, this book will be chalk-full of design business insights and life lessons.
Which brings me to the point of this blog post. I would like to answer all your legal and accounting questions in this book. I am currently scheduling time with Go Media’s accountants and lawyers. But, I don’t know what nagging questions are keeping you up at night! So, if you wouldn’t mind sharing your burning questions with me, I’ll get you professional answers! You can either add your questions as comments below this post, or e-mail me directly at: [email protected]. If you’re going to e-mail me your questions, please make the subject: “Burning Questions.”
Before we get started
Chris Parks (AKA Pale Horse) here for Go Media. Today, I’ll be outlining my recent experience working with The Indomina Group, a global entertainment company who produce and distribute movies, television, music and interactive games. Their latest project was a Hong Kong, wire-fu, murder mystery release called “Detective Dee & the Mystery of the Phantom Flame”. Indomina contacted me to create a limited edition poster design to promote the release of the film here in the U.S.
I absolutely love screen-printed, movie posters, as they give artists the chance to create a piece that is far more interesting and collectable than the standard, glossy, big budget designs released to the masses.
Below is a shot of the final, approved artwork that was printed for the release.
To give you full insight into the project from start to finish, I’ve included the interaction emails with the client and progress shots along the way so you can follow along.
Lauren Fisher – Client
We’ve started a project at Indomina where we release an art/teaser poster for every theatrical release we do.
We just finished one for Griff The Invisible that will premiere this week at Comic Con and I need to get started on the next one, which is for Detective Dee and the Mystery of the Phantom Flame. It’s an AMAZING film, full of kung-fu awesomeness, high-production values and a stellar cast.
I love your work so much and I think you could come up with something awesome based on the imagery from Dee.
I’m thinking since it’s teaser art we don’t have to cram a bunch of type on there…the title is a mouthful on its own: “Detective Dee and the Mystery of the Phantom Flame”
I’m attaching the official key art here and I’ll send you a link to the trailer after it premieres, which should be in a couple of days! I was hoping to have it finished a month from now to release before the film comes out. What do you think?
I thought it was really cool that even though I didn’t have any previous movie poster pieces in my portfolio, the client saw the potential in my illustrations for this type of work. I didn’t hesitate to jump all over this one!
Along with working out the budget, I responded with some initial questions to get things rolling. When working out project budgets, there are usually several factors I take into consideration. Some of the factors I considered here were: the number of hours I plan to spend on the piece, where the artwork will be used, timeline for completion, getting public credit for the work / adding my logo to the piece, how much I would enjoy working on it and so on. Since my work is pretty detailed and there are 5 characters, dragons, typography and background imagery, I estimated about 26-30 hours of illustration time on this one. I always attempt to at least get paid for the actual hours put into the piece. There is of course, also, time involved for back and forth emails, phone calls, changes, etc. that are hard to estimate. With smaller projects, like limited edition posters, a lot of these extras often get thrown in for free, as the price could potentially become too expensive to make sense for this type of project. To cover your ass, you definitely want to establish early-on in your estimate, what you are providing (eg. concept sketches, number of revisions, final file formats ex.) so that if things get hairy with a needy client, you don’t go broke trying to finish the project.
Note: As a rule, I also take a 50% down payment (wherever possible) to make the project official and add it to my schedule.
Chris Parks – Artist
Count me in! The budget sounds good and will allow me the necessary time to put some of love into the piece and make sure it’s really badass! The month timeline should work fine as well. See below for some initial questions and I’ll send over my official pricing .PDF and 1/2 down payment info to lock you into the schedule to get rockin’ as soon as possible.
- Will the poster be screen-printed or full color?
- If screen-printed, should I stick to a certain # of ink colors
- Can I create custom typography for the title or should we just use the current logotype?
- Will it be a standard 18×24 in. size?
- Do you have a folder of images / characters that I can use for reference? (I found a few on dee.indomina.com, just wondered if there are others to utilize)
- Is it possible to watch the movie before getting started?
Soon after, I received my answers, down payment, still images and a screener DVD to watch the film. The piece was to be an 18×24, 3-4 color screen print and custom typography was a plus.
Starting the design process
I was now ready to start selecting useful reference stills and work up my initial layout. Below are some of the reference images that I decided to work with for the piece.
I started in Photoshop to quickly cut and move reference elements around until I liked the overall feel of the layout and got all of the main characters into the design.
Next, I decided to work with the typography and incorporate that into the piece early on. I think a big mistake a lot of illustrators make, is to try and force the type in at the end, rather than planning for it from the beginning.
Since the title of the movie was really long, I knew I had to solve the issue right away, so I opened up Illustrator and typed up the title in several different fonts that could provide the base for my custom type. These fonts are a selection from Letterhead Fonts and a site I run called Golden/Black.
I often choose a few fonts with similar attributes, select parts and pieces that I like from each and combine them for a custom design. I really liked the tall, ornate feel of the first font shown here, but it needed the bold, more legible look of the second one. I also thought the lightning bolt-looking element from the “t” was pretty cool and decided to incorporate wherever possible. Adding the little flame to dot the “I” seemed to make sense, so I played with that as well.
These font styles proved to be a good choice because I could easily grab the points and pull them to make the type very tall and condensed to fit the space I allotted on the poster. As you can see, I placed a lightened screenshot of my reference image into Illustrator so I could view the space available. To make even more room for my artwork, I gave the type an “Arc Upper” warp effect in illustrator. The effect worked pretty well, but I didn’t like how it distorted some areas.
To fix these areas, I “Expanded” the effect on the type, copied the elements from the original (non-warped) design, pasted them back on top and erased the areas as needed to bring it back to how I wanted it to look. After a few other tweaks here and there, I was happy with the type design and went back to the illustration in Photoshop.
Time to draw
A lot of people think that I create all of my illustrations in Illustrator, but my preferred method these days is Photoshop CS5 and a Wacom Cintiq tablet. I used to create a ton of vector work, but I find it much more liberating to just draw straight onto the tablet with the brush tool. I do however, aim to retain a lot of the clean lines and shapes that I like about vector art and incorporate that look into my Photoshop work.
To get started, I always set up my files using a 600-800dpi document size to make sure the lines are crisp and clean. (In this case 600dpi works fine since the piece is 18x24in.) Next, I set up my layers to get started on the illustration. As you can see below, I’ve got my reference image and type placement layers below a Hue/Saturation layer to lighten and colorize the image so I can draw on top of it. The top layer is where I’ll start drawing with the brush tool in black ink.
I set up my brush for drawing with my Wacom tablet using the settings below. Nothing too fancy here. Just turn on Shape Dynamics, Smoothing and Spacing. Set hardness to 100% and Spacing to 1%.
Next, click I clicked Shape Dynamics and configured the settings as shown below.
(Note I also use these same brush settings for my eraser tool)
First bits of client feedback
Before getting too far into rendering the illustration, I decided to send the client an in-progress shot to make sure everything was working well and no big changes were need. A lot of times I’ll send over a rough sketch of the entire piece, but In this case, since I was working from a photo montage, I thought it best to email a snapshot blueprint where the client could see the layout quickly and get a sense of how the line art and typography would look.
After sending over the initial screenshot, I got the following client response:
Lauren Fisher – Client
This is looking really cool! Definitely into the layout and the type treatment.
My only note is that Dee is looking a little…off. Not sure if there is another pose that might be more badass since he’s the star?
Since I’m always fine with making things “more badass”, this was fine feedback in my book!
Now that the layout and overall look was approved, I could really dive into the line art at this point, so I went through the characters, one-by-one, filling in all the black areas and tiny details.
Here’s a close-up where you can see some of the details of the folds and shadows drawn over the reference image. I like to use a lot of black in my drawings to give them a very bold look, so I outline all of the elements and then fill in the shadows as I go along. It’s very important to look carefully at the reference image and decided what you want to be in shadow and what should be lit. I find when drawing faces, it’s best to leave most of the details to the shading phase, especially when drawing women. Too much black line work can make your female portraits look harsh and unnatural.
(Note I’ll often sketch in red on a separate layer below the line art layer to give myself a guide for changes to the reference image and to sketch in areas that are too dark to see)
Once I was happy with the line art and got Detective Dee’s more “badass” look approved, it was time to start blocking in colors and shading. I don’t like to commit to exact colors at this point, but focus on fills and basic shading on separate layers that can be changed at any time.
After a lot of the color fields and shading were blocked in, I started choosing colors that fit the mood of the piece and shades that were within the 4 color limit. At this point, I also wanted to incorporate a background into the design for added visual interest. For this I used one of the high-res movie stills sent by the client.
I chopped it up, flipped it and converted it into a halftone pattern. Then I used the channels pallet to select just the black, then copied and pasted it into the background of my illustration.
To give the poster a good amount of lighting and depth, even with the limited color pallet, I like to make the piece appear to have more colors than it actually does. I decided to use a cream-colored paper to allow for 2 shades of tan and 2 shades of teal, mixed with the black line art.
The cream paper color is also used for added highlights throughout the piece. Simply filling the line art with color can make the artwork look flat, so this is the stage where the piece really comes to life!
Now it’s time to drop in my typography and send off the fully rendered poster artwork preview and wait for approval.
Final approval discussions
Chris Parks – Artist
I just put the final touches on the Detective Dee poster and I’m really stoked on how it came out! Please see the attached .jpg preview, let me know what you think and I’ll wrap it up and send over the print file. Talk to you soon.
Lauren Fisher – Client
This looks AMAZING.
Thank you! We are just standing by for producer approval, but we should be all set for delivery.
Will you be sending it all set up for screen-printing? We will be sending the artwork to be printed by a company called Vahalla Studios in Kansas City. They are awesome.
Chris Parks – Artist
Very cool! Glad you like it! Yes, I’ll set it up for print and send over the production file as soon as you give me the green light. The artwork was created in Photoshop, so the file will be a super high-res, layered .psd file for printing. Yeah, the guys at Vahalla do amazing work! Should look great! Talk to you soon.
Getting ready to deliver the print ready files
After receiving approval from the client, it’s time to set up the final artwork to be screen-printed. I always like to work in separate layers from the beginning for each color as I’m working in Photoshop, so setting up my files for print is pretty easy. I start by busting out my handy PANTONE color guide and pick some nice “uncoated” ink colors for the printer to use. You should choose ink colors from the uncoated book, not coated. This is because papers used for screen-printing will generally not be coated and the ink color reacts differently on each.
After I’d chosen my PANTONE ink colors, I changed the color mode to CMYK, cleaned up my layers and named each layer with the PANTONE code as shown below. (Note: I could certainly write an entire tutorial about the details of file preparation, trapping etc. here, but this is the basic idea.)
So, because this is a 600 dpi, layered, CMYK .PSD file it’s ends up being about 612MB. Once compressed, it becomes a 200MB .ZIP I use a service called You Send It, which I use just about every day. After uploading the file, I sent my final invoice and file download link to the client to complete the project.
Some production photos
See below for some photos sent from Vahalla Studios after production.
I hope you enjoyed this tutorial and have been inspired to take your creations to the next level!