Design insights & tutorials.

80’s Style Design Using Photoshop

Turquoise Flag-Tip

preview

The 80’s have always had an iconic impact on Pop Culture. I have been seeing a lot of 80’s inspired designs on the internet, but never found a tutorial. So, here’s a simple tutorial inspired by the 80’s. This is just a basic design to get you started, and Adobe Photoshop is all that’s required (and very few stock images). And of course, a lot of modifications can be done with this technique.

Final Preview:

Leave

Part 1: Creating The Main Text

Taking a canvas size of 1900 X 1200. Of course you could pick any size according to your preference, but make sure the resolution is decent enough.

1

Fill the background layer BLACK.

2

With the Text Tool type whatever you want the text to be. I chose “Leave, but don’t leave me”, from a Pink Floyd song. “But don’t leave me” is coming later. Right now we’ll work on “Leave”. The font I have used is Futura Heavy.

3

  1. Right-click on the text layer, go to Blending Options to create Layer styles.
  2. On the Layer style box, go to Gradient Overlay, tick it.
  3. On the Gradient Overlay, we open the Gradient editor and make the New Custom Gradient as above. I have chosen shades of black, white and grey so that we can easily modify the colors later.

4

Then apply Stroke, and in the fill type, set it to Gradient, and choose the simple Black to White Gradient preset.

5

Next, make a new layer above the text layer, name it Gradient 1 (or anything you please). Fill it with a gradient. I used real bright colors, in honor of the 80’s.

6

The ‘Gradient 1′ layer is set to Soft Light mode, with an opacity of 72% (you can experiment with the modes, and opacity).

7

The above image shows you are current progress. We are beginning to have the 80’s looks to it.

Part 2: The Background

8

Next we are going to add a nice texture to the image. I have used a paper texture. You can find it here.

Select all (Ctrl/Cmd+A), copy the texture (Ctrl/Cmd+C) and paste it (Ctrl/Cmd+V) on your work. The Blend Mode is ‘Vivid Light’, and you can see we already have a great effect going.

9

Now it’s time to create a new brush to get a cloud effect; open up the Brush Engine, and use the following settings:

10

It’s a very useful brush, and can be used to make clouds in other work as well.

Now make a new layer “Clouds”, and paint with the brush you just created. Add a bit of Inner Shadow, to add more depth to the clouds.

11

Now change the order of layers, bring the ‘Clouds’ layer just above the Background. Also, the opacity of the ‘Clouds’ layer is Changed to 56%.

12

Now Ctrl/Cmd+Click the ‘Leave’ (Text) Layer, which selects the region of the text, and then go to the ‘Gradient 1′ layer and add a layer mask. This masks of the gradient from the rest of the image and leaves it on the Text.

13

Then we create a New Layer, Name it ‘Clouds 1′, Above the ‘Clouds’ layer. Make sure your foreground and background colors are Black & White, Go to Filter -> Render -> Clouds.

14

Keep the overlay mode as Vivid Light. Then in the Blending mode, add a Gradient Overlay, and use the following 2 colors for the gradient: #00fff0 and #e303bb.

15

Next we will add some stars to the background.

We now make a new layer above the ‘Cloud 1′ layer and fill it with Black. Then we go to Filter -> Noise -> Add Noise. Use Gaussian, Monochromatic, 10 % amount. There are various ways of making a star filled sky, this is the one I chose.

16

Next, choose Image -> Adjustment -> Levels and use the following values for Inputs: 65, 1.00, 99.

17

I have renamed the layer to Stars, and the blending mode is set as Screen.

Next we’ll add bigger glowing stars. Make the following brush using the brush engine:

18

Paint with varying brush sizes. Use the bracket keys ([ and ])to change the size quickly. Then add a Layer mask, and paint with black, using the same brush. This gets rid of some extra stars.

19

Now with a brush of 0% hardness and size of around 300, paint along the edges and get rid of some more stars, also add some Gaussian Blur if required.

20

Part 3: The 80’s Twinkle

It’s very simple to create the twinkle used in so many 80’s posters.

21

  • Take a soft brush, and just click once with it on a new layer, to create a soft circle.
  • Duplicate the layer, and go to Filter -> Blur -> Motion Blur, Angle 0 degree, Distance around 46 pixels.
  • Keep duplicating and adding motion blur 3 more times.
  • Then merge all these layers (5 of them). Go to Free Transform, and stretch it, it widen the glowing object.
  • Finally, duplicate the merged layer, Rotate by 90 degrees.

We have the twinkle now. We merge both layers, and name the new layer ‘Twinkle’.

Now we can use the ‘Twinkle’ layer where needed.

22

Duplicate the ‘Twinkle’ layer over the Text layer (rotated, transformed etc.) and place them on the text. This makes it shiny and 80’s!

Part 4: The shapes

Create a new layer for the shapes.

Using the polygon lasso tool, and create a selection in the shape shown above. Select the Gradient tool, and use a Gradient of color White (foreground color) and transparent. We fill the selection with this gradient.

23

Next, Duplicate the shape and shift it a bit. (Press Alt/Option and drag the shape). Merge the layers, and duplicate them. Then we flip them horizontally and create and new shape.

24

Orient the shapes in different directions and places, as shown below:

25

27

Then apply a Gradient Overlay, using Blending options on the few layers, with Hard Light as the Gradient Overlay Blend mode.

28

So, this is how it looks so far (below). We are almost done now. You can leave it right here, or make a few more adjustments.
30

I add the new Text layer, “But Don’t Leave Me”, and apply a stroke via the Blending options.

31

If you think the colors are too bright, you can add a Hue/Saturation mask on the top of the layer stack, and lower the saturation to somewhere around -15.

32

The final image:

33

Hope you had a lot of fun going through this tutorial. A big thanks to the guys at GoMedia, for making this possible. Cheers!

About the Author, Rahul Jha

I'm a Mechanical Engineer from India, and also a freelance designer. My brother, Rohan, and I run the RJ Artworks site. I love painting on walls, and I'm inspired by the Music of different eras.
Discover More by Rahul Jha

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • Simon Vansintjan

    This is great. I love the integration of all these techniques, and the fact that you were able to keep it so simple. Good stuff. The final 'LEAVE' looks really good.

    Thanks for this tut.

  • rorym

    Yummy Mummy!
    Those textures look great, in a 80s style wonder, keep expecting David Bowie to jump out of the screen with a crystal ball…no I'm not on crack!
    Cheers for the inspiration once again.

  • http://creativefeed.nardyello.com/ Nardyello

    Great technique. The font looks amazing!

    Let's go give it a shot! =]

  • irinei

    That's awesome, thanks!

  • jharohan

    Yeah!…even i'm gonna go try this one..

  • freelanceapple

    Awesome article! Thanks for that! I'm going to have a go now!
    Nice one Rahul.

  • Simon H.

    Nice tutorial!

  • Kid_Stevie

    This is really dope!!
    I just found this via blogger, its a good tut!

    but i get lost at “Part 4: The shapes”

    on what layer should i do this?
    because i dont get the texture..
    maybe its me, but i miss some explanation about it…

    thanks in advance! en thank you for the tut anyway!

  • rjha

    Well, after u have created the selection with the polygon tool, fill it with the gradient on a new layer. Now, with the move tool, press Alt, and drag the shape u ve created. This makes another shape on top of the last one. Repeat this Alt+drag again. So, you have what u wanted. Now merge all the 3 layers.
    Then u can play around with this semi transparent shape.
    Hope this makes it clear for you.
    Cheers!!!

  • Kstohl

    Im wondering why you didnt create your mask for the text using a clipping mask instead of selecting the text and creating a layer mask. This would allow you to edit the text and have the mask apply with it. As it is right now, the mask is rasterized which means each time you change the text, you have to edit the mask as well.

    Also, would it not be easier to create the shapes using a vector shape instead of making selections? You could have the vector shape filled with the gradient and it also makes it easier to edit after the fact.

  • rjha

    Since I already had a Gradient Overlay applied to the text, the clip masking won't work.
    As for using vector shapes, yes of course. Actually I didn't use the vector shapes as I like merging the shapes, so that it doesn't create a clutter of vectors, so I didnt use the vectors. But yes, vector shapes should certainly do the trick.

  • http://www.crearedesign.co.uk/ Michael Thomas

    Nice Blog, so how would of they done this in the 80s without photoshop???

  • http://www.sjlwebdesign.co.uk/ Sam

    Great tutorial, I love the effect! Was very easy to follow and has helped me learn some new photoshop tricks, thanks a lot.

  • rjha

    Exactly, I wonder how? That's food for thought…

  • freeffej

    Question:

    When I apply the color gradient to “LEAVE” how do i get it to fill just the letters, and not the whole page?

  • freeffej

    Never Mind, Figured it out.

  • papertransaction

    Freeffej, how’d you figure it out? I’m still wondering the same thing. It seems like there’s a step missing. Was it a mask?

  • Gustavo

    I used this tutorial as a base and got a great effect: http://img263.imageshack.us/img263/752/freetofly1024copy.th.jpg

  • http://www.facebook.com/ianmasoncallahan Ian Callahan

    Freeeffej, what did you do? I can't figure that bit out. It seems like a step is missing.

  • rjha

    Select the whole of the text region by Alt+Clicking the text layer, and then just add a layer mask to the Gradient layer. This way, the rest of the portion is masked off….

  • crazyblade

    Como E Que Eu Fasso Isso Numa Foto? Tem Que Baixar Um Pograma E Manu?

  • imyourdestiny
  • Pingback: Creative Bookmarks: Best of July 2009 | Tutorial9

  • guest174

    sorry rjha i'm kind of missing the step just to fill the word leave here – i appreciate you described it in the comments but still not getting it – alt click text layer then add a layer mask to gradient1 layer?

  • http://markos040122.deviantart.com/ marcos

    awesome !!!!! i love the wallpaper

  • http://www.joyoge.com/ joyoge designers' bookmark

    nice effect thanks for the detailed tutorial..

  • AJ

    The style we're trying to emulate here is airbrush art. The best example of this revived style today can be seen in the music video for “DVNO” by Justice, which nails the style of 1970s/80s TV / film idents and title graphics of all sorts – hand-drawn cel animation, early CGI, Scanimate, etc. It's nice that we can emulate some things in Photoshop, but there's nothing quite like knowing how the originals were created.

    What's killing me here is the lack of proper kerning between the “a” and the “v”. If I was art-directing this I'd send it back to have it tightened up.

  • amatatomba

    The kerning between the A and V was bugging me too!

    I just finished the tutorial last night. I stuck to it pretty closely, but I might make another for my boyfriend and deviate from the tutorial a little more. I used “Swim for your life” from the Jack's Mannequin song Swim for my text. It's my favorite wallpaper I've made so far.

  • kathile

    I am learning a lot as I go through this but I'm stuck at Step 4. Can someone tell me what I'm doing wrong?

    I make a new layer. I make a shape with the polygon lasso tool. I fill my shape with the foreground-to-transparent gradient. For me, the result is a white to transparent shape. Not the cool mask effect that you show.

    I'm a beginner at photoshop, so I'm probably some step that is obvious – but not obvious to me!

  • kathile

    I figured it out – I had the layers in the wrong order. ;-)

  • saruhhx

    what photoshop are you using?
    cuz mine doesn't have gradient editor on it?.

  • facebook-70202916

    He's using CS4….what photoshop are YOU using that doesn't have a gradient editor….as far as I can remember photoshop 6 and 7 had gradient editors

  • facebook-70202916

    Sweet TUt bro…..

  • umerzafar

    excellent.. so many little dirty tricks tips in it.

  • owais

    That's simply great, I have learned lots of brush techniques from it.
    Thanks for helping us

  • http://www.rumple.deviantart.com/ rumple
  • Karla gggggggggggg

    I am just finished with the turorial, and the design came out great!!!! Thank you sooo much for posting this! Some parts were a little bit confusing, but I figured it out! Thanks!

  • karlagggggggggggg

    I am just finished with the turorial, and the design came out great!!!! Thank you sooo much for posting this! Some parts were a little bit confusing, but I figured it out! Thanks!

  • martyn24

    can u help me find the Brush Engine???:-sfaast.10x and its a g8 tut

  • http://twitter.com/LudovicAoi Ludovic

    Leave but dont leave me? Pink Floyd reference?

  • utsav

    great it was realy help full thankuuuuuuuuuuuuuuu

  • http://twitter.com/rayhg ray h gamaliel

    u only design with one font. the rest is skill. salute!

  • http://www.harmonlegal.net/ Arizona bankruptcy lawyer

    That is such an awesome effect. Thanks for the share.

  • paki gurl 18

    hey buddy u have damn gud skills and u sharing them wid every1. . thatx realli sooo nice ov u

  • jms.whitty

    OK why oh why oh why does the gradient just fill up the screen every time i try i add it. I'm following the lesson to a T. Please help me!!!!!!

  • paki gurl 18

    u are nt adding layer masking to it. thtx y!

  • jms.whitty

    I just upgraded to CS4 and it was a breeze no problems at all. Thanks for your help though!

  • http://www.superchinawholesale.com/ handbags

    Actually I didn't use the vector shapes as I like merging the shapes, so that it doesn't create a clutter of vectors, so I didnt use the vectors. But yes, vector shapes should certainly do the trick.

  • photoshop3d

    Bringing the 80's back in style with photoshop.
    http://internet-pro-tools.com/photoshop-3d-tuto

  • listbl

    To me this is the best text effects tutorial I have seen yet.
    http://adobe-video-tutorials.blogspot.com/2009/

  • Matt

    Thanks for this nice work!
    dizi izle

  • http://www.freshbusinesscards.com FreshBusinessCards

    HI !

    Cool effect I will certainly be useful to my new project.

    Thanks

  • http://www.wiglingtonandwenks.com/ Kids online games

    Wonderful tutorial. I love the outcome of colors.

  • EDtertainment

    did you ever figure out how to get the graident to apply to just the text? I'm stuck at the same spot and I've tried everything, either the gradient takes up the whole screen or it doesn't show up at all :(

  • http://www.tradeage.com China Wholesale

    I'd like to learn something about Photoshop, thanks

  • Everything

    For me Bad Tutorial Many Things not explain how Just say do it or do that but how? for begginers is very poor tutorial

  • http://www.securityking.com Craig

    Thanks for sharing these techniques. Awesome!

  • http://www.craigfordham.net Lisa Thomason

    Great tutorial, has given me some good techniques and tips, Thank You! LT

  • http://www.cardsoftware.net Amanda

    Awesome effect, and great finish. Thank you for sharing.

  • http://www.mavinehir.org Chat

    thanks for this tut

  • Siby

    ****superb..thanx a lot…..****

  • Jenny

    Hi! I don’t really speak english but i will try.

    I’m doing the tutorial, and i had the same problem. The tutorial doesn’t explain it, but the layer with the shapes must be below the layer of the paper texture.

    I hope that helps you, with my bad english ;)

  • http://www.bestcardprinter.com Jeff Jones

    Really great techniques, really awesome that you have for shared this 80′s style photoshop design, Cheers!

  • Logo Design

    Love the way you mixed the paper texture in the font, nice nice job man!!

  • dizi izle

    simply wonderful!

  • http://www.kibem.com.tr Diyetisyen

    Since I already had a Gradient Overlay applied to the text, the clip masking won’t work.
    As for using vector shapes, yes of course. Actually I didn’t use the vector shapes as I like merging the shapes, so that it doesn’t create a clutter of vectors, so I didnt use the vectors. But yes, vector shapes should certainly do the trick.

  • http://www.kibem.com.tr Diyetisyen

    Since I already had a Gradient Overlay applied to the text, the clip masking won’t work.
    As for using vector shapes, yes of course. Actually I didn’t use the vector shapes as I like merging the shapes, so that it doesn’t create a clutter of vectors, so I didnt use the vectors. But yes, vector shapes should certainly do the trick.

  • http://www.ankarakuafor.org Kuafor

    Those textures look great, in a 80s style wonder, keep expecting David Bowie to jump out of the screen with a crystal ball…no I’m not on crack!
    Cheers for the inspiration once again.

  • http://www.ankarakuafor.org Kuafor

    Those textures look great, in a 80s style wonder, keep expecting David Bowie to jump out of the screen with a crystal ball…no I’m not on crack!
    Cheers for the inspiration once again.

  • Anonymous

    help! I get to the render>cloud stage and all of a sudden the paper texture takes over the background and all the gradient overlay edits only apply to the paper texture. The clouds disappear! I’m new to photoshop – got it yesterday. Any help would be appreciated.

    • Anonymous

      kk nvm figured it out. HOWEVER now I can’t paint the bigger stars. Gives me an error message saying “Cannot use history brush b/c history state doesn’t contain a corresponding layer”.

  • Moliva

    did you ever figure out how to get the graident to apply to just the text? I’m stuck at the same spot and I’ve tried everything, either the gradient takes up the whole screen or it doesn’t show up at all

  • http://twitter.com/_CannonTurtle CannonTurtle

    This article doesnt work anymore, i added gradient layer on top of text layer and did the exact same colors.But it didn’t effect the text layer at all.Fail

    • Holland

      Same here. This didn’t work for me at all.

  • http://www.facebook.com/people/Samir-Biswas/100002866620218 Samir Biswas

    Marvelous Tutorial!!!!!!!! I Am Really Helpful From This Article. Thank you very much for share. 

  • http://transcriptionplace.com/ Transcription Services

    I think you really applied a new innovative idea in your design. Appreciating. 

  • http://www.domain2host.in Domain Registration

     
    Amazing blog, I am regular visitor of this website, keep up the good work.

  • http://www.webdizajn.ws/ Web Dizajn

     Excellent!!!!
    Thank you so much for this awesome tutorial

  • http://www.facebook.com/mitch.steenis Mitch Steenis

    Great tutorial! Really awesome piece of art ;)

    But Ive an issue…
    What texture does he use to create his cloud brush? I cant find it in my photoshop. Im using CS6 extended right now.

  • yerio

    gracias, muy buen diseño!!

  • amanda

    i am so lost on how to add the gradient to the text. somebody please help!? I cant figure it out.

  • Adrian

    my cloud brush is only appearing black? help?

  • Sergei Drew

    Im doing this tut on Photoshop CS6, But it Wont Work for me when you put the Gradient 1 Layer and use 4 different colors it makes the ‘Leave’ Text Looking color full but then i do it it dosnt even change the color from black gray and white to the 4 colors i picked (Same ones as you), Im using The same resilution and every thing, Could You Know Of a reason Why This is happening and maybe help me out

  • Rai

    Hi, I’m not sure if anyone still checks this post or not since this was posted ages ago, but I’m trying to do the tutorial and stuck on step 2. I’ve followed every single step according to the instructions, but when I applied the texture and changed blending mode to Vivid Light, I don’t get the effect I’m suppose to get. Instead it looks very high contrast with blotchy spots on the black areas. Can someone please help? Thank you.

  • khalid

    i am struggling on the Clouds layer don’t really know what to do when I try it on my computer its just black circles over my text I try using the inner shadow thing but don’t really work, please help.