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

Recreate tabloid style headers

Incorporate retro publishing aesthetics into your site with three examples of headers

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)

You can download the tutorial files here

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.

02 Backgrounds

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.

03 Starburst

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.

09 Gradient

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.