How To Create a Simple Typographic Poster Design

How To Create a Simple Typographic Poster Design

Meaningful quotes and inspiring words always have a great impact on us. Typographic posters offer a wonderful way to promote a vision as well as products and brands. As long as the quotation is strong enough, the design itself may be as minimalistic as possible, while the poster can still make a huge impression.

Follow this step by step tutorial to create a simple typographic poster design with Illustrator and Photoshop. Learn how to use glyphs and vectors to customize fonts and how to create a print ready, textured composition in Photoshop.

I choose a quote from Eric Ries, entrepreneur and author of the very valuable book The Lean Startup. If you havn’t heard of his ideas, you should definitely consider getting your hands on the book and following him on Twitter. Eric kindly gave me permission, to use his quotes for the purposes of this tutorial.

The Final Poster Design

Here’s what the final design will look like:

Creating The Typographic Layout

To create the main typographic layout we’ll start with a new document in Illustrator. The tools for manipulating vectors provide full control over every shape and segment while maintaining crisp, scalable edges. Since our shapes and vectors will be scalable, we don’t need to worry about the dimensions yet. Any blank document will do.

As the basic font I used Helvetica Neue. It’s a classic, beautiful font with various styles from Ultra Light to Condensed Black and support for a range of Glyphs.

To get a first impression of the layout use the Type tool and write down the words including the approriate line breaks. Place the words with the strongest impact on their own line of text if possible.

Adjust the font styles, sizes and spacing of each individual line appropriately to add some variation to the type and to let the right rag look more consistently. Don’t be too determined here, this is just a draft to give you an idea of the final outcome.

Next, open the Glyphs window and look for some interesting alternatives for some characters. Change some letters to add a first creative touch to the design.

I changed some occurences of the letters E and O and also changed some letters to lowercase, again adjusting their size afterwards.

Now it’s time to work on every single line of text individually and add some more creative details to the design. In this example, we’re first faced with the words OUR FUTURE. Move the current text object aside, copy the first line, create a new textarea and paste the copied words in.

The image below illustrates every step I took in processing this part of the design. Have a quick look at it to get a brief idea of what we’re going to do, then read on for a detailed description.

So, let’s see what happend here. To make the letters appear even bolder, add a black 4pt stroke and increase the tracking to match. Once you’re comfortable with the settings, go to Object -> Expand…, make sure both Object and Fill are checked and hit OK.

With the stroke still applied, you might want to adjust some vertices now in case some areas are overlapping in an unintended way. I shortend the inner part of the rounded E in this example.

For further adjustments remove the stroke and go to Object -> Path -> Offset Path… Use half of the former stroke width for the Offset (2pt in my case) and set the Joints to Miter and the Miter Limit to 4. Illustrator will duplicate the path before offsetting it, so you’ll probably want to get rid of the original path. If your letters don’t overlap, the quickest way to it is by hitting the Unite button from the Pathfinder window.

Ungroup the letters by hitting shift+cmd+G. Now we’ll need to come up with creatives ideas to spice up the design. I worked on the letters UT in this line of text by drawing a line over the letter T, then dividing the shape and moving the upper right part onto the letter the U. Enabling the Snap To Point option and holding shift while drawing the lines will help you a lot in achieving the best results.

Unite the paths once more and that’s it. We’re done with the first line of text for now.

This kind of manipulation a simple yet effective way to add personality to your typographic designs. Flipping certain letters is another popular technique you might want to try out.

Go on with the next lines of your quote following the same principles as above. Look at the respective words and characters and think of ways to add an individual note and a unique look to the layout.

Here’s what I came up with:

You can see the changes I made in the image above. The first two letters of the second line were combined in an interesting way for example. The last three letters in that same line got tweaked as well. I also didn’t love the look of the letter Q in the forth line, so I recreated it using the characters O and ~.

Group each line into an own object by selecting its shapes and hitting cmd+G. Open the Transform window and set the width of each grouped line the same value (120mm in my case). Make sure the little symbol for constraining proportions is activated. Now move the groups in place and adjust their alignments and spacing to your taste.

Add some borders or other graphical elements if you like to and don’t forget to mention the author of your quote.

The typographic part of our layout is finished. Now it’s time to add some colors and textures, to bring the design to live. So, switch over to Photoshop and open a new document.

Creating a Background Texture

If you intend to actually print your poster, you should talk to your printing office and ask them for the proper dimensions, margins, bleeds etc. to use. You’ll also want to use the CMYK color mode and a resolution of 300dpi when designing for print.

Before I go on, let me quickly describe my approach towards coloring in this tutorial. Since I’m not totally sure yet, whether I’d like my final poster to be blue, orange or purple in the end, I’ll build a flexible layer composition using various blending modes to create different shades of a one color. Later, this will enable me to view the design in all sorts of colors by experimenting with the value of just one setting.

We’ll start by creating the structured background. Go to Layer -> New Fill Layer -> Solid Color… and enter a name like Base Color, then hit OK. Select any color you like, I choose #5a91b1. This will be the base of our muted color scheme and – as I just mentioned – we’ll be able to change this tone at any time.

Create another layer by going to Layer -> New Fill Layer -> Gradient…, give it a suitable name and set the gradient’s style to Radial from white to black. Also increase the size and move the white center up by dragging it. Holding shift while dragging makes sure, you don’t accidentally move it horizontally.

Set the blending mode of this layer to Overlay with an opacity of 50%.

Hit cmd+shift+N to create another layer and name it Fibers. Fill this layer with some random fibers by clicking Filter -> Render -> Clouds and then Filter -> Render -> Fibers… Use a variance of about 17 and a strength around 20, then hit OK. Set the blending mode of this layer to Soft Light and the opacity to 75%.

Add a new layer, name it Noise and go to Edit -> Fill… Set the content to 50% Grey. Change the layer’s blending mode to overlay and go to Filter -> Noise -> Add Noise… You might need to zoom in to see the effect.

Add one more layer named Blurred Clouds, render clouds like you did before, but now apply a huge Gaussian Blur Filter with a radius of 150px. As a blending mode, use Overlay and set the opacity to 66%. This will add some more subtle structure to our texture.

Composing The Poster Design

We’re done with our background texture now and it’s right about time to put the pieces together. Switch back to Illustrator, select your all typographic elements and copy the content to the clipboard (cmd+c). Back in your Photoshop document, hit cmd+v to paste the objects onto the stage and select Paste As Smart Object. Scale and move the object to fit your needs. I used some guides to help me find the right placement.

Open the layer styles window and set the Fill to 0%. Add an Inner Glow and a black Color Overlay with the blending mode Color Burn.

This should leave with something similar to this:

I added a subtle Ripple effect to the font object to give it some sort distressed look.

The Final Typographic Poster Design

The typographic poster design is finished now and it’s ready for printing. Although the layout is fairly simple, it has a lot a detail and an interesting, creative touch.

As you’ve seen, we have used just one color other then black, white or grey. The benefit this technique gives us, is that we can now change that one color value of the layer named Base Color and everything will be adjusted right away.

I created a couple of different versions of my final design (Click to enlarge):

In this tutorial we covered some basic techniques of working with typography in Illustrator. Using various layer styles, blending modes and rendering filters in Photoshop, we created a unique, detailed texture and a beautiful, muted color scheme.

The final composition can easily be adapted to all kinds of variations. Just pick up some meaningful quotes of your choice and start working on your own poster collection using a consistent layout in different colors.

I hope you enjoyed this step by step tutorial. If so, why not leave a comment or share this post on your social network?

5 Comments on “How To Create a Simple Typographic Poster Design

  1. Typography is a genre in art,the main technique is where one uses just words or characters and arranged them in such a way to create a graphic or an art print. Typography is much popular artwork in these days.Its very informative article.I enjoyed a lot.Thanks

  2. My partner and I stumbled over here different web address and thought I should check things out. I like what I see so i am just following you. Look forward to looking at your web page again.|

  3. Thanks for sharing this great tutorial. I can’t wait to get started!

  4. Going to have to give this a try.

    I’ve been wanting to create some font images for a while. Not so much as posters, but for web sized images; and I think these would look great online.

  5. Great tutorial to get me started! Thanks alot.