Articles by Month: December 2010
We’re all still pretty young here at Go Media. Heck, Go Media founder Bill Beachy is only in his thirties. So yea, it’s fair to say we’ve played plenty of Activision’s award-winning action game Call of Duty. That’s why we were excited to get the call from Activision saying they wanted to use our vector art in the latest installation of the series: Call of Duty: Black Ops.
Activision hand picked images from The Arsenal for use in the Playercard editor of Black Ops. There are more than 480 images, but it’s not too hard (especially for long time fans of The Arsenal) to pick out the skulls, heraldry, or disgruntled suits that came from our library.
Check out the (admittedly lo-res) screenshots of the emblem creator below. Images in the emblem editor can be colored, moved, rotated, resized, and overlapped to create unique playercards.
WARNING! This entire blog article is an advertisement. Wait! I know what you’re thinking – either 1. “This guy is crazy,” 2. ”I’m going to stop reading this article immediately” or 3. “This is all just a clever device to pique my curiosity and keep me reading. Damn it! It’s working!” Whatever you’re thinking, please give me a few moments to explain.
Back about seven years ago as Go Media was just starting to grow, we decided we needed a blog to better market our design firm. The GoMediaZine was the result. The original intention was straight-forward. First, establish ourselves as authorities on design by sharing our design knowledge and trumpeting our accomplishments. Second, gain new design customers through our reputation as a design leader. When the Arsenal was born about a year later our customer base suddenly included fellow graphic designers. Accordingly, the content of the GoMediaZine also changed. We needed to produce content that would drive traffic to our design products (vector packs). The strategy was almost the same. We would build a community of potential customers by sharing our design expertise; this time through amazing (and FREE) design tutorials. We hoped that the community would become customers of the Arsenal. It was a classic win-win. As cliché as that sounds, we truly believe in it.
This concept of marketing through education is nothing new. But, typically, we would write articles and tutorials AFTER our products were already finished and available to the public. Recently, however, Jeff Finley has been working on an E-book to sell on the Arsenal. The E-book is an insider’s guide to the apparel industry. While doing some research on marketing e-books he learned that you should really be posting blog articles long BEFORE you launch your product. Basically, you’re priming your audience so that by the time you release your product, everyone is lined up down the street ready to buy it. I guess this makes perfect sense. Everyone does it. Whether it’s a movie, a video game or a new Apple product, the marketing hits the streets long before the product is available.
That brings us to this blog article, an advertisement. This article is an advertisement for the most ambitious and useful design tool that Go Media has ever produced: Prooflab (prooflab.us). This is the first in a series of blog articles I’m going to write about managing your design projects, posting proofs, tracking time, etc., etc. It’s a series of articles about the logistics and communications side of being a graphic designer. The goal of which, I hope, will be to entice you to try the Prooflab once we launch it.
Of course, one key to the success of educational marketing is that it needs to be genuine and provide REAL VALUE to the reader. It can’t pretend to be valuable, but in actuality be a long article explaining how great our product is. Furthermore, Go Media’s audience is very sophisticated. Our audience can sniff out an ad or some secondary motive in a heartbeat. Whenever we posts anything on the GoMediaZine that is overtly self serving, we are summarily bashed, and rightfully so. If we do not do a good enough job keeping the design community’s best interests in front of our own you let us know! So, of course, I’ve been struggling mightily to figure out how I could possibly write a series of articles about project management, specifically, project management for graphic designers with the punch-line being: “Prooflab is THE solution.” All the while, not being too obvious about it and simultaneously providing you with some valuable knowledge.
Well, I couldn’t think of any. Or perhaps my conscious wouldn’t let me. So, I’ve decided to take a different approach – 100% transparency. I will lay all my cards on the table. I’ve decided to have a true, real, and honest discussion about the various products and systems that graphic designers use to manage the design process. I’ll let the chips fall where they may. My hope is that once we’ve gone through this learning process, the conclusion is that Prooflab is indeed the ultimate design management tool. But if it isn’t, then we will keep improving it until it is. Our goal is to make Prooflab the industry standard.
So, where do we go from here? Well, I suppose I could use your help! I have some ideas of my own, but I would like to ask you – what should I write about? What questions do you have about proofing, time tracking, client communications, project management, design firm management, CRM, etc. Or if you would like to contribute in a real way to this conversation by talking about how you (or your firm) manages its projects – I would LOVE to hear about it. Basically, let’s make this a design community-driven discussion about how to best run a design project. And hopefully, we will all benefit.
You can add comments after this article, you can write me directly at: [email protected] OR, if you have a few minutes to spare, you can take this short survey that we’ve thrown together. I will include your thoughts and survey results in subsequent articles.
I may insert your thoughts directly into my text (with credit or anonymity – whichever you desire) or simply use them as primers to help direct my research. I truly appreciate your help on this. And I promise to remain as impartial as possible – I know you’ll call me out otherwise.
Ever been asked to come up with a type driven design but still wanted to use imagery? Creating text through collage can be an awesome solution. Here’s what you’re going to need to create a successful piece:
1. An open mind. I always find that being noncommittal toward the placement of objects allows you to easily rearrange the elements into a better composition.
2. A solid sense of composition. When you’re looking at the elements you’re going to use, it helps to have a rough idea of where that element will go and how it relates to the elements around it.
3. Lots and lots of royalty free stock photos. You don’t want to just pull images off of Google. That’s always a bad idea. The original photographer may somehow see that you’re using his/her work without permission and seek legal action against you. I find that using sites like istockphoto or sxc.hu are good places to start. Also, flickr can be a great resource if you ask the photographer’s permission.
4. Patience. It can take a long time for the forms to take shape in the way that you want them to. The important thing is to not get frustrated and to keep working until something strikes you.
5. Basic understanding of Photoshop. This tutorial uses the pen tool, blending modes, transformation tools, and other filters and effects.
Before we get started, you need to think through the project and determine whether or not that collage typography is appropriate for your project. It should only be used in a situation where you can use full color or four color process printing. There may be situations where a good color separator can get it down to 10 colors or so if you’re printing silkscreen, but that could be quite expensive.
Preproduction: Type Layout & Editing photos
Okay, let’s get started. First thing we’re going to do is rough out the composition, which basically is just laying out the type that the image is going to be based on. In this case, I’m going to be using Sign Painter, a typeface by House Industries. Let’s go with something short. Fly is an easy three letters. Bird imagery makes sense here, so let’s stick with that.
The next thing you’re going to do is find imagery and remove the background. I’m only going to show one here, but I’m probably using around 30-40 images total for the whole collage. For this pelican image, I’m going to use the pen tool to outline the shape of the bird.
Now I’ve got the outline finished, and I’ve used the right click (ctrl click on mac) -> Make selection to get our pelican selected.
Next, I’m going to go up to the top menu and go Select -> Refine Edge. I want to make sure that the edges of the bird are clean and crisp and don’t get weird edges.
These are the settings that I used for this photo, but it’s going to be different for each photo, so you’ll have to try out each setting on your own to see what photo will work for you.
So now that I’ve refined the selection, I want to make the pelican its own layer, separated from the background. Ctrl/cmd+J will create a new layer for your selection. Now, we’ve got the pelican on it’s own layer, lets see how clean the edges are. Make a layer under the pelican and fill it with a bright color. This helps to see how your edges turned out. I’m not looking for them to be absolutely perfect here because the layering of images will help hide any imperfections in the edges, however you don’t want them to look too weird.
Building the letterforms
I’ve gone ahead and cut out a bunch of bird shapes from various images and dragged them onto the collage canvas. I like to have them all visible, away from the text so that I can see what I have to work with. It’s similar to having a palette of paint. Also, I prefer to make all of my images smart objects so that I can scale them as I please. It increases file size, but keeps your options open in terms of composing the images.
Now I can start to create the letterforms using the images. Analyze your photos, see if there’s a shape that will fit perfectly as part of a letter. For example, using a wing as an arm on the F. Again, don’t marry yourself to a particular image in a particular spot. You may end up finding a better image to use down the line. Also, don’t be afraid to edit the images. You can use just a part of a bird if it fits better. Also, for this image, I’m not worrying about color. I think the random splashes of color from the various birds will result in a colorful image. We’ll talk more about that later in the tutorial.
As I said in the previous step, don’t be afraid to edit the images. The warp tool is a great way to manipulate an image into fitting into part of a letter. Here, I’m using the warp tool (Edit -> Transform -> Warp) to bend a feather into the L shape.
Keep forming the letters using the images, paying attention to how the images are layered on top of each other. You don’t want too many images just floating without something on top of them. Also, I prefer to use larger images to create the letters, but there are always going to be gaps. I like to feel those gaps with colorful pieces layered behind the larger shapes.
You should always be looking for images that will fit a specific space in the letter. For example, the head and beak of this toucan forms the counter of the lowercase Y.
From here, I’m filling in the spaces with images. I’m paying attention to the layering of images, the shapes of the images, and the relation of images to each other.
I’m also keeping an open mind the entire time and thinking if each element is in the best place. I’ve moved a few of them into new places, deleted a few, made a few bigger, etc.
Post Production: Additional Elements & Vintage Effects
So I’ve finished the collage. At this point, I want to clean up and organize the file. I’ll delete layers I’m not using and put the layers of each letter into a group so that I can adjust the placement of each. So now that I’ve got my file cleaned up and saved, it’s time to move onto some post production. I’m going to put some clouds in the background of the image. First, make a layer behind the word and fill it with a light blue. Next, find an image of clouds.
Now we’re going to separate the clouds from the background. It would be insane to try to do this with the pen tool, so we’re going to use the channels instead. First, desaturate the image – ctrl/cmd+shirt+U. Then bring up the levels – Image -> Adjustments -> Levels, or ctrl/cmd+L and make sure that there is very high contrast between the clouds and the sky. It should look like this:
Next, go to the channels palette, it’s next to the layers palette. Ctrl/Cmd click on the thumbnail to the left of the RGB/CMYK channel. This will select the lighter parts of the image, so in this case it will select the clouds.
Next, we need to see how the selection worked. Make a new layer and fill it with a lighter color. Then make another layer, fill that with black and put it behind your new cloud layer.
Now we can drag the clouds over to the collage and color them white. Mess around with the placement, find something that works for you.
To help unify the colors, we’re going to use a color balance adjustment layer. You can access this at the bottom of the layers palette. Because the background is blue, I’m going to slightly shift the colors of the collage towards blue. I’m not saying to make the whole collage blue, just to give it a hint of blue to help bring those colors closer together.
Let’s add in some noise and stuff to give it a slight vintage/aged feel. Yes, it’s super trendy at the moment, but we’re not gonna go crazy with it. It’s just an added flavor. First, you’re going to need to copy all of the layers and merge them together. This is going to be your filter layer. Next, lets add noise. Filter -> Noise -> Add Noise. These are the numbers I used, feel free to mess around with it.
Next, use gaussian Blur. Filter -> Blur -> Gaussian Blur.
Onto smart sharpen. Filter -> Sharpen -> Smart Sharpen. Again, these are the numbers I used. Feel free to experiment. Make sure the Remove: is on Gaussian Blur.
This is the result.
It’s a bit too much for what I’m looking for, so I’m going to knock down the opacity to around 40 or so.
I’m going to make another layer, fill it with a pale yellow, set the blending mode to multiply, and move the opacity down to 60 or so:
And that should do it. Here’s some other examples of collage type:
Go Media has a large student readership. We’d love to hear from you regarding your current classes and offered classes — what’s missing?
I know back in my college days, it was a far different environment than it is today. The school and professors were considered reputable in their field, yet I found some of their approaches to be out of touch. I imagine that situation never changes.
What’s not offered, or not given enough time in the classes you’re taking? What’s not available to learn that you feel are important skills for a designer to have in their arsenal for the future?
Are you missing out on new web technologies like CSS and HTML5? Is designing for mobile computing environments with iOS and Android sufficiently covered? What sort of information do you find yourself turning to design blogs like Go Media Zine for?
And let’s not be completely negative here — if your university is offering some kick-ass classes in areas that you feel are part of the future of design, let us know as well in the comments below.