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:
We just released brand new collection of high quality vectors in Vector Pack 15!
This was a fun vector pack. I went through and picked out my personal favorites from each pack to share with you guys & gals in this free sample. Download and play!
Grab the free Vector Pack 15 sampler by clicking below!
It’s Monday, and that means another taste of upcoming Vector Set 14. And this one is particularly tasty!
First of all, none of these ornate images are recycled from low-resolution stock. We’ve created each one from scratch and have baggy eyes to show for it. It might be hard to tell the difference in a low resolution web browser, but inspect the line quality in Adobe Illustrator to appreciate the clean detail.
The full Ornate Patterns Vector Pack has 13 ornate flourishes and 13 seamless ornate patterns to go along! The patterns tile seamlessly, so they’re great for filling backgrounds.
Here is one of my favorite flourishes from the pack for free. Still, the whole pack is only $9.99 for hours & hours of illustration work done by Go Media artists. It’s a steal!
Here we are again with another round of scans from my Moleskine. Not much to say about these other than I was just having some fun drawing skulls and things. I was using just a regular ball point pen, which to my surprise, works great in these books. I think I’ll do so more often.
So the last time we posted some of my sketches, fellow Cleveland designer Geoff May ask for some close-ups. So, these are for you Geoff! By the way, he has some of his own sketches to feast your eyes on.
We went through some of our old artwork from the past two years and decided to make a few free wallapers for you. They’re in a bunch of sizes and some for widescreen monitors. Just go to our freebies page and scroll down to download the wallpaper of your choice. Check em out:
This tutorial will show you how to create intricate patterns in Illustrator super quickly. Stuff that would take you hours to draw manually with the Pen Tool takes just seconds when you use this technique. This tutorial is special because it was written by a guest author. His name is Barton Damer. I think he did a great job this time around and you can probably expect more tutorials from Barton in the future. So if you like it it, show your support and leave a comment! With that said, on with the tutorial!
You can watch the video or read the step by step tutorial below.
We’ll use some elements from Go Media’s Arsenal to give us a great starting point. In this particular tutorial I used Decorative 2 from Set 8 and also the Currency Ornaments from Set 4. If you do not have these elements, no problem, you can either create your own or use some stuff from our free sample pack. The principal behind this tutorial is using the Pattern Brush tool in Adobe Illustrator.
I chose this single Go Media swirl design from Decorative 8. Outlined it in black with a white fill. Then drew a
I’m going to show you the process as to how I do my ornate lettering. This is a new design I did for Stone Sour that utilized this technique. Now right off the bat, this is not a step by step tutorial. It’s more of a look behind the scenes into how I work. The very core of this process is having a solid drawing ability and a good understanding of letterforms, typography, spacing, composition, yada yada. Also, I assume you know your way around Illustrator, Photoshop, and 3D Studio Max. There is no simple process to this – so yep, that means it actually takes work! So for those of you who are only interested in a shortcut to get this look, you can probably just skip reading. Because there really isn’t anything short about this. It’s good old fashioned hand lettering that’s tweaked and finalized on the computer for a vector final result. Here is how I do it:
Start with a Sketch:
No of course, it took lots of bad sketches to get to this point. I probably went through about 4 or 5 sheets of paper with lots of various concepts. Once I had one I liked, I scanned it into the computer and placed it into Illustrator. Then I started creating my first letter using the Pen Tool.
Start Forming Letters with the Pen Tool using Sketch as Reference
I started placing basic geometric shapes (like circles) in place of where some of my major smooth curves are going to be. For me, it’s hard to get such perfect curves using the Pen Tool alone, so I give myself some help by putting circles in. I plan to clean this up later.
You can see I started getting a little more detail in there. Just creating shapes with only the Stroke Color on and not the fill. I’ll use the Pathfinder tool and subtract or add shapes together as I need to. Again, I will clean up this mess as I go.
I started making my letters solid fills now and used the subtract tool to knock out some of the circles.
You can see now that the S is cleaned up. The basic form is down and I am happy with it. I will add more fancy frilly stuff to the S later. At this point, I move onto the other letters. I will skip some of the redundant steps, but I basically do the same thing. I trace out the shapes with the Pen Tool or use basic geometric primitives to give me a good base. And tweak and tweak. I’m not afraid to merge shapes together and then tweak the points.
Continue to build the rest of the letters
Here is the rest of word Stone in its basic form. You can see each shape I created with the Pen Tool. Some of the perfect circular shapes were just circles that were merged with the other shapes.
This is what the basic form of the word “stone” looks like. Let’s move on to the other letters.
I added a swash underneath the letters to fill the negative space there and balance things out. I created this by making a custom brush in the shape of a tall triangle. This way the brush starts thick and ends in a point as it progresses down the path.
Now that all the basic letterforms are finished, now it’s time to add in details. Smaller swashes, frills, flourishes, ornaments, etc. These are kind of improvised based on what I’ve already created. I just eyeball it and see what might look good where. I might see an area that is begging me to put a flowery type shape there. Or a certain place that might look cool with an ornate swirl. I also duplicated my S and mirrored it and put it on the right side. I dressed it up with some cool detailing and arranged it in the piece until I was happy. This isn’t a science here, it’s just about what you think looks good. This is where I can experiment and I usually try some things that I don’t like and move things around until I am happy. This is my final piece after all the details were finished:
I think it looks very cool at this point, but I know there is more I can do to give it some extra kick. I will merge all the shapes into one path and import the path into 3D Studio Max. From there I can make it a solid 3D object and can get some cool effects that I cannot get in Illustrator. Well, it’s sort of possible with Illustrators 3D engine but in my opinion, it’s not as accurate and creates weird shapes. And I just like working in real 3D anyway.
Import paths into 3D Studio Max
You can use whatever 3D program you want if you are trying this at home. But I grew up using 3DS Max. So here are my paths in 3D space. I set up a camera exactly how I want it, which is perfectly centered and in front of my object. I also moved it slightly down to sort of “look up” at my object from underneath – just a tad. This will give it more of a “big” feel.
Extrude the Shapes
I used the Extrude Modifier to give my text a 3D shape. In most cases I would use Bevel to give my shapes a more realistic edge to them (because real life objects always have at least some sort of bevel on the edges and are not perfectly flux together). Bevel gives edges an accurate highlight along them and can really add to the realism of the piece. But in this case, since our final output is vector and NOT a photo realistic 3D piece, extrude is the tool to use. So while extruding, I simply tweaked my settings to my liking. Now it’s time to choose my materials that will best help me export this beast in a format that I can live trace easily.
I want my letters to be white and the sides of them to be black. This way the letters will really pop. To do this, I applied an Edit Mesh modifier to the stack and sleceted only the front faces of my letters. I made a material that was white and self illuminated. This is guaranteed to be white with no shadows. I applied this to my letter faces and then selected the inverse. As a result, everything else was selected. I gave the remaining selection a black material that was self illumincated to prevent any odd shadows or highlights from affecting my final output. This is good if you plan to live trace your 3D rendering which I am about to do.
Render a high res image
Once I have the materials applied the way I like them, I render out a high res image – usually bigger than 2500 pixels. This gives me a nice size image to live trace. Also, render using a TGA file extension with an Alpha Channel. This is so you can easily cut your image out of the background.
Before I Live Trace in Illustrator, I must go into Photoshop and separate my colors. For the whites, I select my highlights and invert them and copy and paste the now “black” letters into Illustrator. They’re ready to be live traced. For the black shapes, it’s a bit different. I make a copy of my render layer and use it’s Alpha Channel to make a selection and delete the background away. I make a selection around my rendered image and fill it completely with black. Then I give it a good sized stroke to give it some extra thickness. Then I take that into Illustrator and live trace it using the default settings. Here are the two pieces as you see them in Illustrator after they have been live traced:
I hope you enjoyed a look behind the scenes into the creation of Ornate Lettering.
Here are some other examples using this technique or similar:
A lot of people are making them. A lot of people suck. The graphic designers here at Go Media don’t suck, and neither do you. This tutorial requires NO drawing talent… so don’t trip folks. You will however need Adobe Photoshop 7.0 or higher and Illustrator CS2 or higher. My name’s Dave, and this is my first ever solo tutorial. I’m very unorthodox and direct… so forgive me if I lose you guys during any part of this. I’ll do what I can to answer questions for people who think my tutorial is too confusing. So we’re going to make a gig poster! Subject matter: Deftones and The Fall of Troy in Cleveland, Ohio at the House of Blues on May 30th. Why are the Deftones not first, you ask? Because I like The Fall of Troy better and this is an unofficial poster, who cares?
Those winged scrolls are new from Vector Set 16. They would look great in this design!
Let’s get to business.
So what to make? Hmmm… something fierce. Maybe something militaristic? Considering the legendary event of the fall of Troy… we’ll go that route. After searching through some public domain photos from WWII, I found a picture of Dwight D. (Ike) Eisenhower on D-day lecturing some troops.
We’re going to use this as the base of our initial illustration… but the hand, it lacks emotion. It’s ok. We’re all designers and we can fix this, right guys?
Istockphoto.com (a lifesaver for all stock photo needs) will be our resource. If you do not have an account, get one. If you would rather go the free route – www.sxc.hu, better known as Stock Exchange, has a slick selection of free stock photos. You’ll still need an account, but it’s free.
I found this chick holding a gun on istock. We’re gonna get the cheapest one because the resolution doesn’t matter so much in this tutorial yet. Her hand will become Ike’s hand… holding a gun.
Next we have to cut out Ike and the girl’s gun so we can combine these different pieces into the same image. We’re going to use the pen tool to cut these out. I trust we can all accomplish this through knowledge gained in previous tutorials. WARNING: Using the pen tool in Photoshop is tricky… to keep your anchor points from drifting off into oblivion, you have to alt+click them (The same way you would click your anchor points in Illustrator). Make sure your shapes fill color is an obnoxious color so you don’t lose it in the photo.
Once you have the shapes made to cut them out (and it’s ok if it took 3000 shapes and layers to make it) you’re going to merge them all to one layer. Ctrl+click your “shape layer” to make a selection and then click the actual image’s layer. Press Ctrl+C to copy and then press Ctrl+V to paste it into it’s own layer. Do the same for the girl’s gun. Save your PSD’s in case you fumble up. The hardest part is over.
Now take both shapes and tastefully combine them on a fresh canvas. Some airbrushing or cutting may be needed to make it look real. It’s up to you. The rotating of the hand will be needed to make it fit on Ike’s arm. Make your image 300 dpi (image>image size) and don’t worry about the image quality. Merge the hand layer with the Ike layer and make it gray scale.
You now have Ike pissed off and holding a gun.
Here is where it gets a little interesting and it might be hard to follow here. Create three files in Photoshop that overcompensate in size for the Ike-shape – you don’t have to save them or anything. They’re there for copying purposes only. Throw a copy of Ike into each of them. Make sure they all remain on their own layers. We’ll be playing with the contrast next.
Above are the setting you’re going to make Ike the first two files. The third will be -100% on both Brightness and Contrast. It will result in just a shape of him in solid black. Now open Illustrator and make a new file at 11×17 portrait orientation.
Size down the Photoshop window and drag over each of the layers that have been brightness/contrast-adjusted into Illustrator. Line them up horizontally and start Live Tracing them one-by-one using the “Black and White logo” option. The option is located on the top tool bar once your photo is selected. Copy these attributes in the photo below.
Live Trace is basically Illustrator’s tool for deciphering and creating graphics into vector art automatically. It was a new feature in CS2 and it’s way cool, but can have some backlashes. Like all automated solutions to things done best by hand, there are sacrifices made with the result. A lot of times, your Live Traced images get lossy. Having them at a high resolution most times solves this but not always. In our case though… the dirtier, the better.
Now make sure each image is expanded. Use your magic wand tool and select the white areas that Illustrator assumed when you dragged in the Photoshop layer. They’re there, trust me. Once all selected – delete them. They’re not needed. Now’s your time to start figuring out a color scheme for this big project. Here’s what I chose.
Having 1 dark color, 1 to 3 medium tones, a light color, and a wild-card color is pretty mandatory when making 4 to 6 color prints. They work better. Although this wouldn’t be a silk screened poster, following this limited color rule assists in giving it an authentic gig poster appearance.
Doodads are always the hot ish in your designs, so we’re using some from our arsenal, the Go Media Vectorpacks. Along with a few we’ll be making from scratch. Below is what we’ll be using from the packs. (side note: we’ll be using a bunch of stuff from Go Media’s Arsenal. If you haven’t any cash to purchase some of the packs, we’ve got some samples here).
We’re using 5 splatters from the various Splatter packs and one wheel-type doodad from Set 5’s Decorative Ornaments pack. Now we’re going to get all these shapes ready and drag em over into our Illustrator file. Mind you we have not touched Ike yet… don’t worry about him or the colors. Let’s get trendy.
Make a long, skinny rectangle and duplicate it about 80 times (alt+click and drag it to copy it once, and then press Ctrl+D over and over again until you get a lot of bars) or more depending on your preference. Align them to the center and space them evenly. Now use the add function in your pathfinder box and expand the selection. Now that it’s own shape – rotate it 45 degrees (holding shift + rotate will rotate the shape in increments of 45 degrees). Duplicate that shape about 3 or 4 times.
Now duplicate/take a splatter from the vector art we’ll be using and place it on top of that shape you made. Select both objects and intersect them (it’s an option in the pathfinder box as well). Expand the appearance of your object.
You now have a distressted pattern of diagonally running lines. It’s a pretty neat trick to add some organized distress to your designs. Do this a few times with different splatters. That is why I’m encouraging duplicating your objects and not just dragging and dropping. A lot of these shapes need to be kept preserved because they’ll be used over and over again throughout this project.
Now make sure your actual poster area is clear of any objects. Moving them to the sides of the artboard and separated is always a good thing to do so you can just drag in what you need when you need it. Make a rectangle in the 11×17 area. Bleed of the edges a little bit for good measure. Now fill it with a gradient of color 1 and 2. Throw a medium color in there if you want it to blend smoother (I added some earthy-red in the middle). It might help, or it might not, who knows. Experiment and be different.
Now we turn to the Go Media Texture Packs. I want a concrete-looking surface to start this off with. We’re going to use Concrete8.jpg. It’s a nice and has lots of good grainy tones. Place it into your file (file>place).
Stretch the image to fit the poster size. Now go to your transparency settings and choose the multiply setting. All the dark ridged areas of the texture are now accented onto the gradient. Drop the opacity down to like 30% or so. Lock these two objects in place at the very bottom and we’re onto designing the focal piece of the poster.
So now back to good ole’ Ike. Make the Solid shape of his body Color 3, The medium-detailed shape Color 4, and the least detailed shape Color 2. Align them in this order – Color 3, Color 4, Color 2. You have your focal image almost intact. Add a stroke of the same color to Color 3’s shape to bring it all in. Expand the stroke if you need to, in case we do any abnormal sizing to the figure. Group the three objects, and there you have Ike.
Take the wheel object we chose from Set 5’s Decorative Elements pack and place it right in the middle of the poster (above the gradient/texture combo). Size it up huge if you have to. It will accentuate Ike’s figure in the design. Fill it with Color 1 and drop the opacity down to 30%. We’re done with that.
Grab all those crazy diagonal line objects we made and fill them with color 3 or 4′ (your call, color 3 was too strong for my liking – I chose 4). I duplicated them and threw them in the middle-area of the poster, kinda outlining where Ike will be. Grab Ike and throw him in the mix. Make sure he’s the top layer. We’re almost there.
Let’s play with our text options. I want something nice and organized, but already beaten up with some grunge. I don’t want it a grungy impact font because those are way too common for post-hardcore bands nowadays… Luckily we created the Affliction font (located at our Arsenal site). It’s styled well and beat up tastefully. We’re using it!
So we’re gonna play with the font and sizing. After a few options, I think stacking the text all the same size by breaking up “THE FALL” and “OF TROY”and adjusting the tracking and leading should do it. Check out the settings I used below.
Duplicate that in case it gets messed up and right click the text and create outlines. Color it with color 3 and place it right above Ike in the poster. Add the Deftones with a larger tracking size and smaller font size and we’re in business.
I added a rectangle at the bottom for the venue information. I applied a stroke to the rectangle, broke up Ike’s group, and wedged it between the Color 4 object of him and the Color 2. Since we won’t be moving Ike at this point, we’ll leave him ungrouped, but the effect just created makes Ike’s figure look almost like a part of the rectangle; eliminating the look of the area being an afterthought. Now add your venue’s information and all that good stuff. Adjust your bleeds, save it out… and you are DONE!
Thanks for reading my first tutorial, I hope you learned something. I’m now going to go eat a hot dog.
GoMedia_Vector_Freebie_An-Angel-Grows-Wings (INCLUDES THREE FREE VECTOR DESIGNS!)
Like most Flash Motion Graphics designers, I am regularly perusing the web for design inspiration. I don’t know about you, but when I saw complex design elements like plants and tribal shapes grow on screen right before my eyes, I wanted to know how they did it. I assumed they were really good with shape tweening, but if you’ve tried to execute a complex shape tween, I’m sure you discovered quickly that Flash’s current shape tween renderer is about as predictable as Ohio’s weather. So the next best bet was masking a finished design and then revealing it magically as if it were being illustrated in real time. Sure enough, after testing some theories, we zeroed in on this process which we’ll now share with you!