How to create a retro-inspired typography poster

In: Design|Graphics|Images|photoshop|tutorial

21 Mar 2010

In this tutorial I will show you how to create a retro-inspired typography poster design in Photoshop playing with stock photos, blend modes and filters. We will also use a metal grid texture for a grungy background and paper texture to give a nice retro feel to our design.

For this tutorial I have downloaded a few things; two textures and one font.

The first texture is a metal grid.  It is from Urban Dirty, a free stock textures site. You can download this here: http://urbandirty.com/gallery/photo/2837206782-s.  The second texture is a paper texture from Bittbox, the texture is available on this Flickr stream: http://www.flickr.com/photos/31124107@N00/2118267647/.

The font is called telegrafico and can be downloaded for free at Dafont, here: http://www.dafont.com/telegrafico.font.

Step 1: First off start a new document 1500×2000 pixels, and paste the metal grid into a new layer.

Step 2: Double click the metal grid layer to open the Layer styles window. Select Gradient Overlay, and select a dark brown to a rust colour to a white, click the top selection handle for the white end and change the opacity to 70%, this will help diffuse the gradient over the grid making it blend better.

Once you have finished selecting the colours, change the Gradient Overlay settings, Blend Mode to ‘Multiply’ and ‘Radial’ with a scale around 30%

Step 3: Once you have finished creating the Gradient Overlay, right click the “fx” icon on the layer and select Create Layer, this will separate the gradient from the layer so we can manipulate the gradient layer separately from the image.

Select Gradient layer and Duplicate this, you can do this by either right clicking the ‘Layer 1’s Gradient Fill’ or Selecting the  ‘Layer 1’s Gradient Fill’ holding the mouse down and pressing ‘ctrl’ at the same time dragging the layer up in the layers palette to drag out a new instance of the layer.

Change the second gradients Layer mode to ‘Darken’, and position the layer off center to the original gradient, in the poster I moved the gradient so the middle white section was the bottom left of the canvas.

Step 4: Add the text LOVE FOR TYPOGRAPHY in ‘Telegrafico’ to the middle of the canvas, I have done this on individual layers for each word and aligned the ‘o’s’ in a diagonal line, along with the word TYPOGRAPHY split so that TYPOG is on one line and RAPHY is on the next.

Next create a new layer and name it ‘strike’, create a bold line across the canvas stretching from the left arm of the ‘Y’ in TYPOGRAPHY and through the ‘O’s’ to the left top corner.

Then select all you font layers and right click selecting ‘Rasterise Type’, this will enable us to manipulate the font.

Select the ‘Strike’ layer and right click merging the layer down on top of the TYPOGRAPHY layer.

Step 5: Next with the Marquee tool (M) select the tail of the first ‘P’ in typography and Transform (ctrl+T) the tail so that it extends all the way down off the canvas.

Do the same with the ‘R’ in the layer FOR. Select the tail of the ‘R’ and extend all the way up out of the canvas.

Step 6: Once all the extra font tails have been extended, select the three text layers and right click, selecting ‘Merge Layers’.

Double click the new single text layer and let’s add some Layer Styles! Here we have selected Outer Glow and a Stroke.

For the Stroke, give it a size of 13px and set the colour to white.

As for the Outer glow, set it to screen and opacity 75%, with a yellow hue and spread of around 70% while a size of around 20%.

This gives it a great double edge look!

Step 7: Now add the paper texture to a new layer on top of all the other layers, and set the Layer type to ‘Hard Light’ with Opacity 75%. This lets the texture and colour of the paper come through to the bottom layers, giving the whole poster a very vintage feel!

The poster still needs a bit of depth so adding a bit of mood lighting will help that!

Make a new layer and with a large soft paint brush dab big black spots around the edges in an uneven border.

Once you are happy with the amount of dabs change the opacity to be around 65% to soften the brush strokes and let through some texture.

Conclusion and Final poster!

In this tutorial we touched on Blend Modes, filters and layer manipulations. The idea was to create something minimalistic but beautiful and with a retro feel.  All in all with some stock photos and Photoshop tinkering we can create a great retro-inspired poster in no time at all!

Digg Design Float StumbleUpon Twitter Facebook Yahoo Buzz Technorati Favorites Mixx Delicious Share/Bookmark
Go to Source

5 Responses to How to create a retro-inspired typography poster

Avatar

bonera

March 23rd, 2010 at 4:18 am

Go to your layers pallette and look down at the bottom. You'll see a button that says FX… it includes drop shadows, inner shadows, glows and TaDa Stroking.

Avatar

Amy The Apple

April 2nd, 2010 at 1:47 pm

it happens to me sometimes but you have to wait for your page to fully load up in order for you to change your top friends
you will know when your page is fully loaded up in the bottom left hand of the window and it will say done.

Avatar

Micah//Melancholy

May 19th, 2010 at 8:28 am

I'm thinking Toolbars>>Customize?
If that doesn't help, I don't know… I don't know how you could possibly remove the favourites. I love using the favourites bar xD
It's useful!

Avatar

Broken Hearts & Last Goodbyes♥

May 29th, 2010 at 5:56 am

check out these fur bikinis

I'm kidding. I think your poster is awesome.. However, it does require people to read, and you know how hard it is to get a message across when people have to read it.

Avatar

Kirsten C

June 1st, 2010 at 4:20 am

=( I'm sorry I couldn't give you a better answer

Maybe ATI is worse/Cheaper ??

I have "Power Color" X1650 PRO 512MB GDDR2 with 1GB Hyper Memory

graphics card

… it was a CHEAP one… around 50€ in PC City [Some of them are around 200€ to give you an idea for the price range]… the only PC Game I play is "THE SIMS 2" and I can play it on Full Graphics o.k

I only have a Core 2 (2.2GHz) with 3GB ram (the processor is below the minium for The Sims 2 it say's a 2.4GHz)

Sorry I couldn't be more help… Look on the back of the box of your games. or inside there should be a sheet of Graphics cards

This is what I done, then I visited PC City, and asked them to show me all of them that were on the list, then I asked them to show me all the ones under 60€ with Tax. and from there I chosen the one with the highest numbers.
512MB (I don't know if it's good? But they had some with 212mb(around this number I think))
Because MORE usually means Better..

Mine isn't anything special but I have the option to change all these settings like you say, and it has a thing called OVER DRIVE ?? So I've done this also xD I think it make's it run faster than it should
I installed it myself, opened the box voided my Dell worranty xD put it in the PCI Express slot [15 pin] then pluged my moniter into that then installed the CD it came with…

Sorry I couldn't help more
Thanks' for the answer to my question ! [I left my PC and it restarted (twice) and now works]

Comment Form

About this blog

This blog delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from: CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. Our goal is to help you communicate effectively on the web with an engaging website or functional interface.