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.

  • Summer

    This tutorial is really great and pretty easy to follow, until you get to part 4. I am struggling extremely with it. When I follow this step, I do not get the same outcome as the tutorial depicts at all. When I add the gradient, the texture doesn’t come through, only the white to transparent shape is filled in. Any help?

  • DeCap

    Yeah this tutorial makes no sense right off the bat. It tells you to add a gradient and the texture but just excludes any explanation at all on how to get it to only go over the text and not the entire document. I don’t want a gradient on the whole document, I want the gradient on just the text, but this fails to explain in any way shape or form on how you do that and just goes along as if it’ll just work perfectly the way its shown. This tutorial sucks. It should be so simple but its just impossible to follow the steps and have exactly what the pictures show.

  • Guest

    Great tutorial! Very easy to follow and a great design. I don’t understand why these other people are having problems, I had no dificulties at all.