Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Bring 80’s-inspired styles to your web templates

The Eighties are making a comeback not only in fashion but also in web design. Here’s how to add some recognisable graphical touches

The Eighties is a special time for today’s Gen-Y’ers. It’s synonymous with our childhood when sunglasses, Rubik’s Cubes, cassette tapes and neon colours were all the rage. It was about exuding an unprecedented loud personality in all fronts: big hair, big clothes, and even bigger shoulder pads.

In terms of design aesthetics, computer graphics had started to become more popular. Everything was over the top and often clashed because of the bold colours, playful compositions, zany patterns or a combination of all of them. Some designs were so visually strong that it was overwhelming to look at. Nevertheless, this is what gave the Eighties its daring edge, which makes it one of the most memorable eras.

With this in mind, let’s explore how to dress up a web template in the style of this unique look. A collage, hands-on approach using bold colours, hand-drawn text, sketchy doodles and the signature spunky attitude all come into play. Totally rad, right dudes?

(This article originally appeared in web Designer issue 159, authored by Wendy Ding)

Tutorial files available here.

01 Design concept

step1

This exciting concept for an Eighties-style design is a whirlwind of playful iconic graphics that can all be associated
with that time. It embodies a combination of computer and hand-created images with some vibrant splashes of colour to invoke an energetic quirk. The open structure of the page invites the viewer to step in as if they were entering a time machine.

02 Design space

step2

There are three columns here from left to right: navigation, main content, and eye-candy graphics. The backdrop for the actual content is toned down compared to the heavier graphics to create balance and visual comfort. Although the menu text is rendered in a sketchy manner, it’s clean and clutter-free and this helps add to the focus.

03 Iconic images

step3

We chose four of our favourite images from the Eighties: a Rubik’s Cube, cassette player, fashionable girl and a sneaker. Sketch these by hand with a pen or marker on white paper. Scan the drawings into Photoshop under File>Import. Double-click on the image layer and hit Enter to exit the default locked background mode.

04 Close Cropping

step4

Then you will need to save the document as a .psd file. Next, delete the background so only the object remains (this is Close Cropping). This can be done with the Magic Wand tool and Polygonal Lasso tool. Clean up afterward with the Eraser tool if needed to make sure all your edges are sharp and the image looks clean and crisp.

05 Magic Wand method

step5

In Photoshop, select the Magic Wand tool and click on the background part of the image. It automatically detects other areas similar in colour and brightness and makes a selection. The Tolerance level can be adjusted in the Magic Wand panel to affect selection accuracy. This may also be improved by brightening the image under Image>Adjustments>Brightness/Contrast.

06 Polygonal Lasso method

step6

In Photoshop, click the Polygonal Lasso tool by holding down the Lasso icon and choose the second variation. Create the selection by clicking several points. Make an inverse selection under Select>Inverse and hit Delete. When done correctly, the deleted area is transparent and looks like a grey and white-chequered grid.

07 Photoshop file

step7

Although this tutorial demonstrates work completed in both Photoshop and Illustrator, the working document where everything is assembled is a Photoshop file. Create a new document named ‘80s_style’ and set the Width to 14 inches and the Height to 8 inches and save as a .psd file.

08 Colouring: Girl

step8

In Illustrator, File>Place the girl sketch and create another layer to sit on top. Name it ‘Colours’. With the Pen tool, draw shapes in the hair, lips, vest and accessories. Next, apply some fun colours and gradients to make it pop. Set the blending mode to Multiply under the Transparency panel.

09 Colouring: Girl 2

step9

For a faded vest, apply the fill in #8A9EAA. Click Effect>Stylize>Inner Glow and set the colour to #D3EACE at Normal Blend, 75% Opacity, 0.29 Blur and check Center. Select all the shapes 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 girl sketch layer.

10 Colouring: Cassette Tape

step10

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

step11

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

step12

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

step13

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

step14

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.

15 Alignment

step15

A consistent alignment keeps the design streamlined and neat, and also gives it a much more professional look. To bring up guides in Illustrator, press Ctrl/Cmnd+R to show the ruler, and drag out a number of vertical guides. Place text and elements alongside the guides neatly. Press Ctrl/Cmnd+; to toggle guides on and off.

16 Polka dot pattern 1

step16

While in Illustrator, turn on the Grid (Cmnd/Ctrl+“). Zoom in 550%. Create a square (Rectangle tool+Shift) across four squares of the grid. Create a circle so its midpoint sits at the top-left intersection in the first square quadrant. Drag+Shift+Alt/Option the circle so the duplicate sits at the bottom-right intersection in the fourth quadrant.

17 Polka dot pattern 2

step17

Set the circles to a light grey, and no fill with no stroke to the square. Drag everything into the Swatches panel to make it a Pattern Swatch. Create a 12×8-inch rectangle and apply the pattern swatch with no stroke. Hit S to scale down only the Pattern by -50%. Copy/paste the shape into ‘80s_style.psd’ in Photoshop as pixels on a new layer at blend mode Screen.

18 Chequered strip

step18

In Illustrator (grid on), line up four squares evenly and make two of them white and two of them black diagonally. Then drag it into the Patterns panel to make it a pattern swatch. Create a thin rectangle shape and apply the pattern with no stroke. Copy/paste the shape into ‘80s_style.psd’ in Photoshop as pixels on a new layer.

19 Gradient background

step19

Now back in Photoshop, on the bottom-most layer select all (Cmnd/Ctrl+A) and apply a gradient (G) of #c4dbd4 to #ffffff. This gradient plus the polka dot pattern is the backdrop for the content, and is inspired by acid-wash denim.

×