Bring 80′s-inspired styles to your web templates

15 Alignment

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

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

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

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

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.

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

Pages: 1 2 3 4