Recreate tabloid style headers
INCORPORATE RETRO PUBLISHING AESTHETICS INTO YOUR SITE WITH THREE HEADER EXAMPLES OF HOW TO ACHIEVE THIS FASHIONABLE EFFECT
THE ACT OF news reading has largely moved from paper to screen, thanks to the internet. This doesn’t mean that newspapers are dead, its familiar aesthetics can simply take new life in modern-day newspapers: blogs and websites. Bold titles, catchy sub-headers, taglines and graphic styles yield
effective design and add a distinguished sensibility to any site. The result is an innovative interpretation of a tested and familiar visual communication.
Let’s take a look at how this is achieved with three different influences: a financial newspaper, a retro broadsheet, and trashy tabloid magazine. When designing web headers, the most crucial aspect to be aware of is spacing since there is only a limited amount of area to work with. Make the most of it by
keeping everything neatly aligned, clean and legible. Each style offers a uniquely different flavour but all will conjure up the fun of sitting back in your favourite chair and reading the paper.
Author: Wendy Ding | Tutorial originally appeared in Issue 157
Download Tutorial Files
01 First banner
The financial-style design here is like the tailoring in a fine suit, which adds simple sophistication. The title is timeless and bold while other elements echo the same voice, only slightly quieter. The clear and crisp white text on a dark background is an elegant and classic look that highlights the maturity of the website and gives it a clean, crisp feel.
The space around the title is bigger and pure black while the rest are dark greys; this draws the eye and creates a hierarchy. The surrounding backgrounds also have minor
variations: the top bar has a diagonally striped pattern while the bottom is a faint black to grey gradient. These small details add subtle visual interest to the header and give it some extra flair.
Make an oval shape in Illustrator with the Ellipse tool to use as a guide, then draw zig-zagging lines
around the top half with the Pen tool. Set the colour to #E2D6A3 with no fill and add some sheen with
Effect>Stylize>Inner Glow. Make the settings Normal blend in #9E9C5E, Opacity 75%, Blur 0.15 in and check the Edge box.
04 Dashed lines
In Illustrator, first create a line with the Pen tool in #B4EDED at 1pt stroke width. Then, under the Strokes panel, check the Dashed Line box and set it to 3pt dashed and 5pt gap. These lines will separate the headers but do so very subtly, adding a layer of depth to the site’s header and keeping within the overall intended theme.
05 Second banner
This banner will have a more retro theme. First, scan a multi-columned newspaper section. Then, in
Photoshop, select Image>Adjustments>Gradient Map and make sure Preview is checked. In the dialogue box, click on the gradient to bring up another window. Click on the first Color Stop and make it #685112 for the text, and the second #FFF7DA for the beige background.
06 Expand the image
To fill the whole page, you’ll need to duplicate the newspaper layer in the Layers panel and shift the
position so the two images stack one on top of another. With the Eraser tool, erase along the edges so that the text matches roughly. Merge the two layers when you are finished and you’re background image is coming along nicely.
07 Aging effect
To age the newspaper, use the Dodge and Burn tools to lighten and darken certain areas. Use a low Exposure like 5% and make the disparities random, as the aging effect should look natural. The end result should look like an old newspaper page. When finished, save the image as a JPEG.
08 Corner band
A dark band adds a nice contrast to the newspaper texture. In Illustrator, place the newspaper JPEG by selecting File>Place. On a new layer, draw a corner band with the Pen tool in a dark brown fill at #63452D with no fill. Then, add two thin lines close to the edges in #CCBD8D at 1pt stroke width.
First you’ll have to drag out a thin horizontal rectangle using the Rectangle tool. Then you need to select the shape and in the Gradients panel, select Radial gradient and set the colours at #CCBD8D and #AD9A74. Then, with the Gradient tool drag inside the shape to apply the gradient.
10 Third banner: tabloid theme
The key to creating a tabloid look is using bright colours and big sans serif fonts that shout at the viewer with commanding force. Use clashing and lively colours like pink, yellow and white since the content is usually frivolous or trivial but nonetheless entertaining. More importantly, it needs to suggest a scandalous appeal.
11 Circle graphic
The type in tabloid design is mostly square and structural, so a round shape gives a nice visual break.
In Illustrator, create a circle with the Ellipse tool in blue at #3E75CE. Then, in the Appearance panel, add two new strokes from the corner menu and make the top one white at 3pt stroke width, and the bottom in a lighter blue at #52A5E8 in 10pt width.
12 Visual hierarchy
With high-intensity colour and letters, it is crucial to keep the design clean and fitted. Otherwise, everything will be too cluttered and messy. Make the title the primary focal point by increasing its size and set it in capital letters. Leave room at the top for a feature line, space at the left for a catchphrase or tagline, and be mindful of the colours’ effect on legibility.
13 Drop shadow
Normally, drop shadows are frowned upon because it can cheapen the look of a design. However, it is quite fitting for a tabloid theme and can be used here. In Illustrator, create the title text in the font Impact at 127pt size with a white fill and 2pt black stroke. With the text selected, click Effect>Stylize>Drop Shadow to bring up the dialogue box. Set the blending mode to normal in black at 85% with a blur of 0.08 inches.