Typographic illustration tutorial

OK, so today, I am going to show how to produce an easy typographic illustration using photoshop and illustrator. The example below is of a face, but it can be used for anything really. It is pretty simple to do, so is a good one for beginners, but does takes a bit of time to build up.

First pick an image. I have chose someones face. The best images are ones which have a good contrast between the light and the dark areas. Now you want to simplify the image. The best way of doing this I find is by turning it greyscale and and then playing around with the brightness and contrast in photoshop (image>adjust>brightness and contrast). You can also try the posterize tool (image>adjust>posterize) afterwards to further simplify but start off with brightening the image lots and adding some contrast as well. As you can see this gives a simplified version of the image, leaving the minimum amount of contrast to define the image. Below is my image once simplified.

Now take this image into Adobe Illustrator. Create a new layer by opening up the layer pallette (window>layers), clicking on the arrow in the top right hand corner and selecting new layer. You want to place the image on this layer. Either copy and paste it across, or save it as a jpeg and place it in. This image will act as just a guide, double click on layer 2 and the layer options box will appear. Click the template tick bow.

This will make the image muck lighter, so we can see when we place items on top of it. Lock the layer too by clicking on the lock layer option next to the eye symbol. Make sure it is below layer 1, and now select layer one, which is where we shall create our illustration.

Now we want to start to place text onto of our image to create the typographic effect. Started by choosing some keywords. and typing them out in whatever font you choose. Then outline them (type>create outlines) and make sure they are grouped as the words or phrases. I have used baskerville. Its now simply the case of dragging them over and starting to build up the darker areas with the layers of text.

Use your artistic eye here. Don’t just make everything heavy, rather try and define which areas should be the darker shading and building up more text in those areas to make the effect darker. This takes a while, but just keep going and the image will take shape soon enough. You will also need to rotate the words or phrases and resize them to fit parts of the shading. You can do this by selecting the free transform tool on the toolbar (short command e) Try and do this a bit everywhere as it gives the image a nice freedom to it, making it more interesting and textured. I think it works much better when you have a high contrast between the type sizes. So basically containing really large words and also really small ones.

Eventually your image should look something like this.

Looks ok huh! Its actually a nice image in its own now, but I have gone back to photoshop to add some colour.  So, save your file as an eps. Open up photoshop and create a new document and set it up to whatever size you need. Place your eps in as a smart object to the size you want it (file>place). Don’t worry, as you have selected smart object, you can still resize it without losing any of the quality.

Bring up your layer pallette (window>layers) and you will see your illustration there. I have added a gradient effect on mine. To do this click on the effects panel at the bottom of the layer pallette, and select gradient overlay. By clicking on the gradient image you can add any colours you choose.

To finish off I have also added some text with a gradient as well. I have used the font dubtronic.

I have also tried having the image only available through the text. To to this, create a text layer just below the image. Control click on the image (right click if on a PC) and select create clipping mask. The image will now only show over the text area below like so. For this I used a font called Pincoyablack.

So there you go – all done. Told you it was really simple. So let me know what you thought? would love to see any examples anyone else has worked on.