Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Type 2
  • Overview
  • Transcript

2.4 Typography Skills: Poster Design

This project-based lesson shows you how you can integrate typography into poster layouts, using grids and sans serif typefaces.

2.4 Typography Skills: Poster Design

Hey there, welcome back to this Tuts+ course, The Art of Typography. So far we've moved from the 15th century up until the 1960s, and looked at some of the key historical design movements that shaped the field of typography today. The last movement that we looked at was the International Style, which is a form of minimal functional graphic design that's had a huge influence on how designers approach layouts and type today. So in this lesson we're going to pay a tribute to the Swiss designers who made the International Style so popular and create our very own International Style poster, exciting stuff. So to follow along with this lesson, you'll need to open up Adobe Photoshop. You can also create this kind of poster layout in InDesign, but Photoshop is also a really nice choice for designing posters. So get Photoshop opened up and pause the video while you do that, I'll be waiting for you here. Okay, welcome back. Here we´ve got Photoshop opened up. First up, let´s change our preferences so we can measure out our grid in millimeters. So go up to the menu at the very top of the screen. And choose Photoshop and Preferences. Okay, so for rulers, choose millimeters, and click OK then to come out of there, great. Now I want to head up to File on the top menu and select New. On this window that opens, select international paper under the preset menu, and choose A3 from under Size. Great, just leave everything else at the default values, and click OK to create our poster canvas. Awesome, now the main thing we're going to look at in this lesson is creating a typographic grid. Once you have this basic grid in place, you can get creative with fonts and colors, and experiment with creating your own tribute to the international style that has your own unique stamp on it. You can view Photoshop's default grid for the canvas by going up to View, and then go to Show and choose Grid. This is going to divide up your page into lots of rows and columns. And then it's really up us to customize that grid to give us a more unique structure for the page. Let's make these grid sections a bit larger and more manageable. So head back again into the Photoshop menu, and Preferences, and this time, choose Guides, Grid & Slices. Under Grid, let's increase the grid line to occur every ten centimeters. And let's give it a nice punchy color so we can see it a little better too. And just make sure that the color of your guide is something a bit contrasting as we're going to have both of these interacting together on the page. Okay, great, now head up, and click OK. The next thing you need to establish for your grid is a margin. The International Style wasn't crazy about big margins. They were really happy with actually taking type right up to the edge of the page and beyond it sometimes. But for our poster here, let's work with our existing grid. So from the top ruler, and go up to View and Rulers, if you can't see your rulers on the work space. So from the top ruler, click and drag a guideline down to the first grid line, and then a second down to the bottom grid line. And from the left hand ruler, drag a guideline to the far right grid line, just like that, and one to the far left. Great, now let's mock out on the layout where we are going to place a headings, b headings, and body text. And what do I mean by those? Well, an a heading is a large title, b headings are smaller sub-headings or strap lines, and body text is your main quantity of text, which is going to be smaller. Pull a guide line down to 75, 7 5, millimeters, and then pull down a second to 125, 1 2 5 millimeters. Okay, great, let's now set our header. So you're going to need to navigate over to the tools panel, which over on the left-hand side of the work space, and select the Type Tool, or you can just hit T on the keyboard. Then click once onto the page just around here. Great, now type the word International. Okay, now you're going to want to make really good friends with the character panel whenever you're doing any typography in Photoshop. And you can find that up here under the Window menu and select Character. So from here, you can adjust the font, the weight, the size, leading and other things like tracking, which is the space between the characters and kerning which is the space between two individual characters. So let's highlight that text that we just typed out, and let's set the font to Univers, which is a famous Swiss style font designed by Adrian Frutiger in 1954. And then choose Roman from the selection of weights, and increase that font size to 130, 1 3 0, points. Let's decrease the tracking to -30, minus 3 0. So then we can switch to the Move Tool, which you can also get by hitting V on the keyboard. And we can just get that text really perfectly centered between those guidelines between the left and right margins. Okay, so let's complete our a heading with a typically experimental angle for the next part of the text. So, again, take the Type Tool, or hit T, and click onto the page, and type Style. This time highlight the text and set the font to Helvetica, and choose bold to make it really stand out. Let's increase the font size to 150, 1 5 0 points, and also select all caps from the selection of buttons at the bottom of the character panel. Fantastic, now switch to the Move Tool and hover over the bottom right corner of the text frame, and rotate it clockwise until it's at a straight 90 degree angle. Fantastic, now position the text so it rests against the right margin. Now we can look at building of a poster with b headings, or subtitles. So above the International heading up on the right hand corner take the Type Tool and click again onto the canvas. So you can type a few sentences of your own choice, or like I'm doing here type in, a strict grid, paragraph break, and sans serif type, paragraph break, creates a tribute to the, paragraph break, revolutionary design movement. Great, okay so set the font now to Avenir. And lets sets the size to 25 points, 2 5 points, and the leading to auto, just leave it as it is. So lets get rid of that tracking and set it back to zero as well. The International Style was all for mixing up the alignment of type as well. So we can do that here by switching over to the Paragraph panel by just clicking this little tab next to Character, and then choose right align text from the alignment options there at the top. Then take your Move Tool again, and position snugly against the margin. Just like that, great. So to really give this poster that table-like format that so many of these iconic 1960s posters also share, you can break your body text down into manageable chunks and present each as their own sort of unit on the layout. You want to aim for a very tabular data like format for the poster, which is going to capture the essence of the International Style. So let's create one unit of body text right now. First up, pull the guide line down to 175 millimeters. Then take the Type Tool, and click on the page and type white space. Set the text to align left, then switch back to the character tab in the panel, and adjust the font to Univers. Adjust the weight to bold, and set the font size to 30, 3 0, points. Let's move the text below that guideline and fit it against the left margin just like that, lovely. Okay now from the left hand ruler, click and drag out another guideline to 75 millimeters. Now let's take the Type Tool again, click on the page, and let's set the font to Avenir. Let's set the weight to Roman, and reduce the size to 14, 1 4, points, and increase the leading to 20, 2 0, points. Now you can type up a little morsel of body text. Just one sentence will do. So let's try, The Swiss School taught, paragraph break, designers to not fear, paragraph break, white space, but embrace, paragraph break, it instead. And that is one single unit of body text which you can now use as a building block for creating more body text on the poster. So why do we do it this way and not just put a whole load of body text in one paragraph onto the page. This was the visual theory behind the International Style. Design should be functional and easy to read. So lumping all of your text in one place is going to look too heavy for the layout. Splitting the text into data-like chunks makes the design more manageable, and overall, it looks a lot more visually appealing. So we can take this whole unit and drag it down onto the new layout icon to copy it, and place it underneath as part of our repeated pattern just like this. And continue to build it adding more units below that and towards the center of the poster. Basically with the grid as a rough guide, you can get really creative of how text is placed on to your designs, which is a fundamental part of developing as a typographer. You want to see a grid as a structured way of channeling your type designs, and you can create a sense of balance in your layouts by sticking to the a heading, b heading and body text sizing rule. What I would like you to do now is head up and go to File and Save this document. And when you have the time to sit down and have a play around on Photoshop, try to embellish this basic poster layout and introduce some background color, and try switching up the color of the type to something that's going to fit well of that 1960s look. Here is my efforts, I've gone for a red-orange background and some simple gray, white, and black text. I also introduced just some simple white lines on the design to enhance that grid structure of the poster, and make a bit more a feature of it. So be experimental and have a go. Bring your own ideas and color preferences to this basic poster structure, and just get yourself feeling really familiar with using a grid to structure your designs. Hand on heart, once you start using grids, you will never go back. They are so helpful for creating really high quality typographic designs. So that's fantastic work guys, give yourselves a big clap on the back. In the next lesson, you can sit back and chill. I'm going to bring our historical tour of typography to a conclusion and chat with you about that big question, which is whether typography really should be considered as art. So that's really great work, and I'll see you over in the next lesson.

Back to the top