An article I was reading about photoshop

href=”http://netdna.webdesignerdepot.com/uploads/2011/08/thumb15.jpg”> class=”alignleft size-full wp-image-26446″ title=”thumb” src=”http://netdna.webdesignerdepot.com/uploads/2011/08/thumb15.jpg” alt=”" width=”200″ height=”160″ />It seems that the 50s are back, not just in advertising and design, but also on clothes, TV shows, and elsewhere.

I honestly think this is one of the most interesting and creative eras for advertisement; some ads are really memorable and funny.

So, inspired by that I decided to make a tutorial on how make a retro poster for a web designer.

After reading the tutorial, you can download the Illustrator source file at the end of the post for reference.

I hope you guys like it and please be sure to share your results and questions with us in the comments…. id=”more-25798″>

Here’s a full preview of the poster that we will be creating:

href=”http://netdna.webdesignerdepot.com/uploads/2011/09/preview.jpg”> class=”alignnone size-full wp-image-26448″ title=”preview” src=”http://netdna.webdesignerdepot.com/uploads/2011/09/preview.jpg” alt=”" width=”615″ height=”816″ />

class=”spacer_” />

Step 1

Let’s start by opening Adobe Illustrator. Create a 21 x 27 cm (8,27 x 10,73 inches) canvas in CMYK mode with 300 dpi resolution.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/1.png” alt=”" width=”615″ />

class=”spacer_” />

src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/2.png” alt=”" width=”615″ />

class=”spacer_” />

When designing a poster/flyer, I like to place some guides on the edges. You can make then visible by pressing command + R / Ctrl + R. Just grab them and place. I used a 1 cm distance on each border.

src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/3.png” alt=”" width=”615″ />

class=”spacer_” />

So, first you should download this texture we’re going to use on the background, you can get it at href=”http://www.cgtextures.com/texview.php?id=24027&PHPSESSID=9pcat1tirn0dv6mgr1etbm25p5″>CG Textures. Place it on the canvas vertically and then hide it for now. We’ll activate it later.

src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/4.png” alt=”" width=”615″ />

class=”spacer_” />

Step 2

The next thing you should do is to download the Flyboy BB font; you can get it href=”http://www.1001fonts.com/font_details.html?font_id=3330″>here. This will be used for the main title. Using the text tool (T), write “The WebDesigner” in a dark yellow color. The CMYK values can be viewed in the second image bellow.

src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/5.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/8.png” alt=”" width=”615″ />

class=”spacer_” />

Make an individual text box for the word “The” and use a blue color on the fill. The CMYK values can be viewed in the second screenshot bellow.

src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/6.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/7.png” alt=”" width=”615″ />

class=”spacer_” />

Step 3

Let’s start by creating a rectangular shape with spiked ends that will be used as background to the secondary text. You can create it using either the rectangle tool (M) or the pen tool (M).

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/9.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/10.png” alt=”" width=”615″ />

class=”spacer_” />

Using the selection tool (V) + alt you can copy the original shape. Then go to Transform > Reflect, and choose to reflect on the vertical Axis.

src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/11.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/12.png” alt=”" width=”/” />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/13.png” alt=”" width=”/” />

class=”spacer_” />

In order to unite the shapes, place both as shown below, then go to the pathfinder panel, and choose the option called Unite.

src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/15.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/14.png” alt=”" width=”/” />

class=”spacer_” />

Here’s another font you should download, Bazar Medium; get it href=”http://www.abstractfonts.com/font/14741″>here. So, here I just insert the text “The Hero of the Worldwide Web”.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/16.png” alt=”" width=”615″ />

class=”spacer_” />

Using the pen tool (P) I made these little shapes to stylize the text a bit. You can copy and reflect these, so they are symmetrical.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/17.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/18.png” alt=”" width=”615″ />

class=”spacer_” />

Step 4

I always liked those rounded rectangles used as a sort of ad plate. So, using the rounded rectangle tool, create the basic shape and then using the direct selection tool (A), adjust each point until it looks like the shape below.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/19.png” alt=”" width=”615″ />

class=”spacer_” />

Let’s add a linear blue to white gradient. Go to the gradient panel to set the colors as below. Using the gradient tool (G), you can adjust the amount and direction of the gradient.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/20.png” alt=”" width=”/” />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/21.png” alt=”" width=”615″ />

class=”spacer_” />

Halftone is a really stylish effect that can bring that old fashion aesthetic to your layout. Go to Effect > Pixelate > Halftone. Set maximum radius to 10 pixels and make sure all the channels are at 0. This will make the gradient monochromatic.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/23.png” alt=”" width=”/” />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/22.png” alt=”" width=”/” />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/24.png” alt=”" width=”615″ />

class=”spacer_” />

Using the text tool (T) write the headline “Webdesigner Depot proudly presents” using the Bazar Medium font.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/25.png” alt=”" width=”615″ />

class=”spacer_” />

Step 5

Next, let’s draw a retro ribbon shape, use the pen tool (P) and add the previous blue color. It may look a bit like tooth paste, but let’s add some folded edges on it next.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/26.png” alt=”" width=”615″ />

class=”spacer_” />

Draw the folded border using the pen tool (P). Duplicate, reflect, and place it on the top.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/27.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/28.png” alt=”" width=”615″ />

class=”spacer_” />

Add some little stylized lines on each side. This may take some time, but if you duplicate and simply adjust each using the direct selection tool (A) it will be quicker.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/29.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/30.png” alt=”" width=”615″ />

class=”spacer_” />

Copy and paste it twice, and then let’s add some characteristics like “Strong,” “Smart,” and “Fast.” Again, use the Bazar Medium font.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/31.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/32.png” alt=”" width=”615″ />

class=”spacer_” />

Step 6

Let’s make a simple arabesque using the pen tool (P), you can also try to do it using the brush tool (B). Then just duplicate and place it below.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/33.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/34.png” alt=”" width=”615″ />

class=”spacer_” />

Use the line segment tool (\) to create these lines, then duplicate them like this. Use an italic font to write the following text; I used Gotham Bold Italic on this sample. Using the text tool (T), fill each line with one part of the sentence.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/35.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/36.png” alt=”" width=”615″ />

class=”spacer_” />

Step 7

Those old promotional splashes can be really funny, let’s draw one. First use the crystallize tool, set the parameters of the tool by just clicking once on it’s icon; you can see them below. Now what you do is create a circle using the ellipse tool (L) and then use the crystallize tool above it. Just make sure you made the circle on the right scale.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/37.png” alt=”" width=”/” />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/38.png” alt=”" width=”/” />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/39.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/40.png” alt=”" width=”615″ />

class=”spacer_” />

Lets add the previous linear blue gradient. Use the gradient tool (G) to place it in the right direction.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/41.png” alt=”" width=”615″ />

class=”spacer_” />

Let’s use the halftone effect again. This time let’s use a maximum radius of 16 pixels.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/42.png” alt=”" width=”/” />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/43.png” alt=”" width=”615″ />

class=”spacer_” />

Copy this splash and change its fill to the previous red color. Send it to front.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/44.png” alt=”" width=”615″ />

class=”spacer_” />

Use the text tool (T) to write “HIRE NOW” using Bazar Medium. Duplicate the text, pick a black fill and send it to back.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/45.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/46.png” alt=”" width=”615″ />

class=”spacer_” />

Step 8

This is the last font you will need to download, this one is called Headline. As the name says, it’s really useful for headlines. Get it href=”http://www.dafont.com/headline-hplhs.font”>here. Let’s write “Hey buddy, I have an idea.” This will be our character’s quote.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/47.png” alt=”" width=”615″ />

class=”spacer_” />

I also added a few slashes below it, just to make a bit more dynamic.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/48.png” alt=”" width=”615″ />

class=”spacer_” />

Step 9

I wanted to draw a light bulb to make things a bit more obvious. So first use the ellipse tool (L). Then make the light effects using the pen tool (P).

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/49.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/50.png” alt=”" width=”615″ />

class=”spacer_” />

Let’s not forget to add the base of the light bulb. Drawing is about abstraction so don’t worry if it’s a bit abstract. Distance will tell what it looks like.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/51.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/52.png” alt=”" width=”615″ />

class=”spacer_” />

Don’t forget to draw the core and a few lines outside the circle. Make it a bit messy, so it look likes an error on the printing for a more vintage feeling.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/53.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/54.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/55.png” alt=”" width=”615″ />

class=”spacer_” />

Step 10

Our character is the hardest part of this tutorial, but follow my instructions and everything will be a piece of cake. I wanted to make a character similar to those men on the 50s ads, with an “ice cream” hair.

Let’s begin with the eyes. First draw an ellipse using the ellipse tool (L). Draw another ellipse in the border of it, then go to the pathfinder panel and choose the option called Minus Front.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/56.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/57.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/58.png” alt=”" width=”/” />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/59.png” alt=”" width=”615″ />

class=”spacer_” />

We’re going to use only the pen tool (P) from now on. It’s easy, you will see. So, draw this eye shape, then duplicate and resize it using the the selection tool (V).

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/60.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/61.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/62.png” alt=”" width=”615″ />

class=”spacer_” />

Now draw a really simple round nose. The mouth, as you can see, is basically two lines.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/63.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/64.png” alt=”" width=”615″ />

class=”spacer_” />

Let’s add some wrinkles around the mouth. Add a line in the mouth to represent the teeth.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/65.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/66.png” alt=”" width=”615″ />

class=”spacer_” />

Add a few lines in each side to shape the tongue and a wrinkle in the middle.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/67.png” alt=”" width=”615″ />

class=”spacer_” />

I call this kind of chin by “butt chin,” I think I don’t have to explain why, do I? Just kidding guys. Draw his cheeks using the pen tool (P).

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/68.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/69.png” alt=”" width=”615″ />

class=”spacer_” />

I decided to make a head without the body, so you just draw these lines representing the neck.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/70.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/71.png” alt=”" width=”615″ />

class=”spacer_” />

The ear is quite simple, just add a small detail to represent the cartilage.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/72.png” alt=”" width=”615″ />

class=”spacer_” />

Back to the mouth, make a shape over the tongue using a red fill, then use the blending mode called Multiply. Also take out one of his teeth to add some humor.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/73.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/74.png” alt=”" width=”615″ />

class=”spacer_” />

While drawing him, I though that a redhead guy would be cool, but he needs a special haircut.

But, first let’s take care of the eyebrows. Just draw the first one, copy, reflect, and place it on the other side.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/75.png” alt=”" width=”615″ />

class=”spacer_” />

Let’s add some cool side burns on each side, the left one is thinner, don’t forget it.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/76.png” alt=”" width=”615″ />

class=”spacer_” />

The old fashioned “Ice Cream” hair, some may dislike, but it fits perfectly here. Draw it in two parts, like it was combed.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/77.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/78.png” alt=”" width=”615″ />

class=”spacer_” />

Using the ellipse tool (L) I added some tiny circles on each eye.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/79.png” alt=”" width=”615″ />

class=”spacer_” />

You may say the hair is too flat, so let’s add some white highlights to represent reflections.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/80.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/81.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/82.png” alt=”" width=”615″ />

class=”spacer_” />

Draw all around his face, watch for making some holes on parts like the eyes and mouth. Add a yellow to white gradient (the same yellow used all over the tutorial). Adjust the direction using the gradient tool (G). Then go again to Effect > Pixelate > Halftone. Set the maximum radius to 8 pixels.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/83.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/84.png” alt=”" width=”/” />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/85.png” alt=”" width=”615″ />

class=”spacer_” />

Step 11

First of all, you got to use the Multiply blending mode on each of the previous elements. Then use the rectangle tool (M) to create this beige radial gradient over the illustration. Then go to the blending modes and choose the one called Multiply.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/86.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/87.png” alt=”" width=”/” />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/88.png” alt=”" width=”/” />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/89.png” alt=”" width=”615″ />

class=”spacer_” />

Another paper texture to download, get it href=”http://www.cgtextures.com/texview.php?id=24707&PHPSESSID=9pcat1tirn0dv6mgr1etbm25p5″>here. Place it over the previous gradient, then use the Multiply blending mode.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/90.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/91.png” alt=”" width=”615″ />

class=”spacer_” />

And here’s the last texture, get it href=”http://www.cgtextures.com/texview.php?id=6809&PHPSESSID=9pcat1tirn0dv6mgr1etbm25p5″>here. Go to the transparency panel, set the opacity to 70% and choose the blending mode called Color Burn.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/92.png” alt=”" width=”615″ />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/93.png” alt=”" width=”/” />

class=”spacer_” />

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/94.png” alt=”" width=”615″ />

class=”spacer_” />

Now you can show the background texture from the beginning and it’s done.

class=”image-border” src=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/95.png” alt=”" width=”615″ />

class=”spacer_” />

The Result

Well guys, I hope you had fun designing it, go on and experiment more often with type, also research about 50′s design, you may find some really interesting samples. You can download the illustrator file href=”http://netdna.webdesignerdepot.com/uploads6/50s-typography/50stypographytutorial.zip”>here.

href=”http://netdna.webdesignerdepot.com/uploads/2011/09/preview.jpg”> title=”preview” src=”http://netdna.webdesignerdepot.com/uploads/2011/09/preview.jpg” alt=”" width=”615″ height=”816″ />

class=”spacer_” />

Marcos Torres is a Brazilian freelance illustrator/art director and also a contributor for Abduzeedo as a tutorial designer. You can get in touch with more of his work by accessing his href=”http://marcostorres.info/”>Website or by following him on href=”http://twitter.com/marcos333/”>Twitter.

Have you followed this tutorial? Share your results and experience below… />

href=”http://www.webdesignerdepot.com/2011/11/create-a-50s-ad-poster-in-illustrator/”>Source

Webdesigner Depot