Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Mark Billen
9th December 2009

Bring 80′s-inspired styles to your web templates

10 Colouring: Cassette Tape

10 Colouring: Cassette Tape

Bring 80's-inspired styles to your web templates

In Illustrator, File>Place the cassette image and then create a new layer on top. Use the Pen tool to trace the label and inner reel in black stroke with no fill.
Select both of the shapes and click the Divide button from the Pathfinder panel. Right-click, Ungroup and delete the inner shape. Apply a gradient of #FF9FD6
to #FFD2DC.

11 Colouring: Cassette Tape 2

Bring 80's-inspired styles to your web templates

Select the shape and copy/paste into ‘80’s_style.psd’ in Photoshop as pixels on a new layer at blend mode Multiply. Resize to fit if needed and place on top of the cassette image layer. Repeat this colouring and copying/pasting method for the Rubik’s Cube.

12 Linking layers

Bring 80's-inspired styles to your web templates

Every single object that you have drawn and its colours are on separate layers in Photoshop. Select each set of layers and click the Link icon in the Layers panel. Now the two linked layers will remain intact whenever one is moved or transformed, ensuring you won’t lose track of any of your work.

13 Logo

Bring 80's-inspired styles to your web templates

Hand-draw the logo on paper and scan into Photoshop. Double-click on the layer, hit Enter to exit the locked background layer mode, and remove the background. Save as a .psd file. In Illustrator, File>Place the file. Add a new layer and using the Pen tool, trace an outline shape around the logo.

14 Logo: 3D effect

Bring 80's-inspired styles to your web templates

Apply fill #FFF100 and stroke #F44A7A to the shape. Select it and click Effect>3D>Extrude & Bevel. Experiment with the angle. Click More Options and check Custom in the Shading Color panel, with colour set to #AEFFFB. Copy/paste the shape into ‘80s_style.psd’ in Photoshop as pixels on a new layer. Copy/paste the logo sketch and use Free Transform>Distort or Skew to match the shape of the text.

Pages: 1 2 3 4

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.

    4 Comments »

    • Victoria Web said:

      I really like the 80′s style template above, as retro is in fashion and it has a hand drawn design element to it.

    • brittany said:

      i love this template

    • Lyandu said:

      Hello
      Very nice, they wish to have had Photoshop in the 80s.

    • FW Website Design said:

      Great design, love the 80 retro style, Thanks for sharing.

    What's your opinion?

    Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

    Be nice. Keep it clean. Stay on topic. No spam.

    * Required fields