Blog.SpoonGraphics

Twitter Background Design How-To and Best Practices

With Twitter quickly becoming the hottest site to be seen on, everyone wants to stand out from the crowd. There has already been a range of quality designs showcased on various sites, which has shown an emergence of trends such as the ‘sidebar’. Let’s take a look at some of the best practices around Twitter background design and get to work creating our own.

We all recognise the default blue Twitter background right? It’s not a bad design, it’s clean and trendy but it doesn’t stand out when the majority of Twitter users also have the same look. Furthermore, if you’re keen to achieve more followers, removing this background would probably help out by showing that you’re an active user, or if you’re tweeting on behalf of your company or service, it helps prove that you’re not a spammer.

Generally speaking, there are three main approaches when it comes to creating your Twitter background (other than a boring solid colour!):

1. Repeating Background Pattern

The repeating background pattern is the age old website background effect, create a repeating graphic and upload the file to your account. The main advantage is that a repeating pattern will work at any monitor resolution. Examples:

2. Background Graphic Fading to Colour

Using a single graphic on your profile can help add some visual interest, in order to allow this to work at higher resolutions the image is faded out so that it blends into a single colour, which is then specified as the background color. Examples:

3. Extra Large Background Graphic

The third general approach to Twitter backgrounds is the use of an exceptionally large background image that fills the whole screen. While this approach gives the widest options in terms of visual creativity, it does bring up the issues of image file size and the fact that the image will inevitably cut off on a certain monitor resolution. Examples:

Sidebar or No Sidebar?

One trend that has emerged from the creativity behind Twitter background designs is the use of a sidebar. The sidebar is an area of screen real estate that is put to use to display additional information about the user, such as large profile image, bio and lists of websites and other social networks. Due to the lack of space on 1024×768 resolution monitors, profiles using the sidebar approach usually only accommodate 1280×1024 upwards, with anything less simply being hidden by the main Twitter website content.

I’ve put together a handy template so you can visualise how your theme is going to look on the popular resoluitons of 1024×768, 1280×1024, 1680×1050 and 2000×1920. Open up the PSD and place your design under the Template folder.

Let’s Design Our Own

Given the information so far, let’s design ourselves a cool and creative Twitter background. In order to accommodate the majority of users, and to minimise loading times, we’ll go ahead with option two from above and use a graphic along with a background colour.

Open up Twiter-BG-Template.psd into Photoshop. We’ll settle for accommodating 1280×1024 and upwards primarily, with anything smaller simply seeing less of the design.

Choose a solid colour for the background, I’m choosing a warm grey. Fill the background layer using Option/Alt + Backspace.

Download a lined paper resource from SXC and open it up into Photoshop, cut out a section of the paper using the Pen Tool.

Paste in the paper resource into the main document, scale and position according to the blue template layer.

Add some realism to the paper by adding a Drop Shadow, use very subtle options to recreate how the light would naturally fall on the paper.

Right click on the Drop Shadow effect from the Layers palette and select Create Layer, then press CMD+T and Warp to distort the shadow.

Drag out the corner point of the Warp filter to stretch the shadow, this helps give the appearance of a slightly raised corner.

Paste in this coffee cup stain into the document and scale into position. Set the blend mode to Multiply to render the white areas transparent.

Open this image of a coffee cup into a new document, create a mask around the cup and cut out the main object.

Paste in the cup and position to the upper left corner, add a soft Drop Shadow.

The tall cup would cast a much larger shadow in real life, so create a layer from the Drop Shadow and use the Warp settings to stretch out the shadow, adding much more realism. Drop the opacity to avoid the shadow taking focus in the design.

Place in another element of lined paper, cut it down to size, rotate and position into place. Add another very soft drop shadow to give realism.

Transform the page with the Warp setting to curve the bottom corner upwards.

Scan and paste in some doodles onto the page, rotate and scale them into place so that they appear from under the upper stack of paper.

In the blending options, add a dark blue Color Overlay to give the impression of a ballpoint pen drawing.

Download a photograph of an old blank Polaroid, place the image into the design and add a subtle Drop Shadow.

Open up a photograph of yourself and place it into the Polaroid area. Use a mask to cut away the excess.

Paint some blobs of yellow and magenta over the photograph, then change the blending mode to Color. CMD click on the photograph’s mask and crop down the colours. This adds a slight effect to the image to give a vintage appearance.

Write out a personal message onto the lower portion of the Polaroid using the brush tool, or a pre-made handwriting font.

Check over the design for any last tweaks, pay attention to how the objects lay in relation to the template.

Crop down the image to accommodate just the graphic elements, the rest is just a flat colour that can be reproduced in the Twitter settings.

Save the image for Web, adjust the JPEG compression to balance between overall file size and image quality.

Log in to your Twitter profile and head to the Design tab. Browse for your background image and upload it to the server.

Next, change the theme colours to match the overall design. Sample areas from the image to ensure the palette matches. The most important option is the background, making sure it is exactly the same hex code as the image for a smooth transition.

With the design now complete head over to your profile to check out the theme for real. If you liked this article, come and say hello to me on Twitter.