Twitter Background Design – Great Tips and Gorgeous Examples

We all know that gaining Twitter followers is down to how often you tweet and what you tweet about – or if you’re a website owner and use Twitter, a way to communicate with your readers. However, there are additional ways to increase the chances of new stumblers to follow you, one of them being by having an interesting background.

This isn’t a quick route to Twitter success, but it most certainly does help. By designing your own interesting Twitter background you can express your personality through images. One example is if you’re a creative person (which you probably are as you’re on Psdtuts+!) you would likely be able to put your skills to use and produce something beautiful that other creatives will appreciate. If they like your profile page, the chances are they’ll like your tweets, therefore following you!

A Quick Introduction To Twitter Backgrounds

Twitter doesn’t offer a whole lot of functionality when it comes to designing backgrounds, but there are a bunch of ways to work around this. You can change the color of the background, sidebar and links, and add background images – fixed or tiled. The biggest problem with Twitter backgrounds is the fact that the majority of your image will be hidden behind Twitter’s timeline and menu, leaving only the space between the edges of your browser and Twitter’s foreground, as seen below:

The above screenshot was taken on my 13″ MacBook Pro with a screen resolution of 1280×800 pixels. The amount of space for a background with this resolution is reasonably good, however with smaller screens or older laptops with a lower resolution the space can decrease dramatically and you will need to be able to work around this.

The obvious thing you need to do is to design your background around Twitter’s foreground content so that when you upload your image it won’t be hidden beneath the timeline.

Types of Backgrounds

There are a few different types of backgrounds in terms of image sizes:

• The Big Image: This is just what the image suggests, a very large image! It can be used to cover the whole background of your Twitter profile. The bottom of them are often faded off into a solid color so that it merges into Twitters background (which of course you can choose the color of).
• The Fading Image: This is often a much smaller image than the above option, often just a square or rectangle covering the top left corner or the complete right side of your profile. All of the edges are faded into a solid color so that they blend into Twitters background.
• The Repeating Image: The repeating image option allows you to repeat an image throughout your background. A common use for this is patterned or textured backgrounds, such as my own which can be in the screenshot above. Text is not recommended for this kind of background as it will be repeated anywhere from several to several hundred times!

Chris Spooner has summed up these examples of Twitter backgrounds with a bunch of great examples, which can be seen along with a Twitter background tutorial: “Twitter Background Design How-To and Best Practices“.

The Good Stuff: Great Tips, Gorgeous Examples & Resources

After that quick introduction to Twitter backgrounds, we’re now going to look at a small selection of some lovely examples of backgrounds. We’re going to look at one design at time, and follow it up with a “Twitter Background Tip” that you can keep in mind when designing your own. We’ll also be outsourcing to some other articles and tutorials for a more in-depth look at particular subjects.

Please note that these tips may or may not be used together. Ideally only a few of these tips should be put into practice at any one time, as they don’t all work together.

Tip #1: Make your Twitter profile clearly match your websites image.

@Envato

We all know about how important it is to have a clear and strong brand, whether you’re an individual, a freelancer or a full-blown company. Envato has made their Twitter profile represent their main website by using the same beautiful digital bokeh background and the strong green color scheme.

Bokeh Resources

If you like Envato’s bokeh background, check out some of the following resources!

• Stock Resources: More Than 620 Bokeh Background Textures
• Tutorial: Creating An Awesome Digital Bokeh Effect in Photoshop
• Photography: Shooting Your Own Bokeh Shots With The Bokeh Masters Kit

Tip #2: Use plenty of interesting shapes and colors in your repeated backgrounds.

@Daniesq

If you’re going to use a repeated/tiled image as your background, be sure to keep it interesting, or alternatively make it match your brand identity. Daniesq uses a lovely vector-style floral tiled image that fits together perfectly.

Pattern Resources

If you want to go for a repeating background, some of the following resources may come in handy!

• Resources: The Ultimate Collection Of Free Photoshop Patterns
• Tutorial: Create a Themed Repeating Pattern in Illustrator
• Tutorial: Repeating Patterns

Tip #3: Show your face to the world and stick it in your background.

@chrisspooner

After all everyone wants to know what you look like! Your profile picture is often to small to really represent yourself, or you may be using it to display your brands logo or another image. Although your profile picture can be enlarged, most people choose not to view larger versions of your pictures, therefore this is where your background profile can come in handy if you feel a picture of yourself is vital for your online identity. Chris Spooner for example uses a portrait of himself (which is important for his identity as he posts vlogs ) with some of his infamous vector shapes to give his Twitter profile a highly-personalised touch.

Portrait Photography Resources

There’s no point including a photo of yourself in your background. Even if it is “just Twitter” you need to keep your standards up at a professional level. The below resources should help you do that.

• Tutorial: Simple Portrait Photography Tricks
• Resources: 100 Free Photoshop Actions (And How To Make Your Own)
• Guide: A Simple Guide To Choosing Your First Lens

Tip #4: Make a big deal out of your logo and include it in your background image.

@vpieters

Including your logo in your Twitter background isn’t really necessary if you are already using your logo as your profile picture, but if not there isn’t really anything better you can do – it not only shows off your skills but also advertises your brands image! Vpieters uses a beautiful illustration (also used in the header of their blog) along with the Veerle logo in their Twitter background to make their website and Twitter profile fit together like two peas in a pod.

Logo Resources

If you don’t yet have a logo for yourself it is recommended even if you aren’t a freelancer as it helps to identify you as an individual, and it’s something else to show off! Here are a few good logo resources:

• Inspiration: Logo Showcase
• Tutorial: Logo Design Project Step by Step Walkthrough
• Tutorial: Creating A Crazy Cool Logo

Tip #5: Make use of the infamous Twitter bird.

@KrisColvin

Twitter is very well known for its simple Twitter bird mascot (as you can see in the following post: “Splendid Twitter Accessories and Products“, the Twitter bird is very well known and pretty sweet!), so why not embed it into your own design mixed with any of the above or below features? KrisColvin uses the bird to her advantage to produce a stunning “big image” background.

Twitter Bird Resources

If you want to include a Twitter bird in your background, check out these resources.

• Resources: 8 Free Cute & Simple Twitter Bird Vector Graphics
• Tutorial: Create a Cute and Adorable Twitter Icon in Photoshop
• Tutorial: Create a Twitter Style Bird Mascot

Tip #6: Link your background in with your Twitter name and profile picture.

@mut1ey

If you have a reasonably unique name that you use for your online identity, then why not expand on that and base your Twitter profile picture and background around that name? Mut1ey uses a rather cool picture of Muttley the dog from an old popular TV show as the profile picture, and expands on this by using a great illustrated piece of the character, along with an actual picture of the man behind the Twitter account and some contact information.

Brand Consistency Resources

It is important to keep the consistency of your brands image throughout your marketing material and social networking sites. Here are a couple of informative and helpful articles:

• The No. 1 Rule / Brand Consistency
• How To Keep Your Blog Branding On Track

Tip #7: Use the space you have to share some information with your followers.

@oridusartic

Your background space is a great way to share a little more information about yourself with your followers without being restricted by the character limit Twitter gives you in the primary biography area. Oridusartic embeds her blogs URL, email address and a list of her passions within a simple but stylish vector-based illustration that merges into a solid color. This helps new stumblers decide whether or not the user is going to be tweeting about things that are interesting to them.

Tip #8: Use a restricted color palette.

@willbryantplz

Using a restricted color palette (especially in tiled backgrounds) is a great way to show off your skill, as it requires patience and great compositions to make it look good. Willbryantplz uses a beautiful illustrated background merged with a grayscale texture to "wow" his followers and make the white Twitter foreground pop out from the screen. To really make this style work, the same colors should also be used as your font and sidebar colors.

Color Resources

If you’re going to use a limited color scheme, choose it wisely. Make it match your branding. Below are a few great color scheme websites well worth checking out!

• COLOURlovers: Color Trends and Downloadable Palettes
• ColorCombos: Website Color Combinations
• Adobe Kuler: Color Scheme Generator

Tip #9: Use your background to show off your personality, characteristics and interests.

@ericsteuten

Images are one of the best ways to share your personality and interests with people that somehow land on your Twitter page. Ericsteuten uses a wonderful illustration to represent his characteristics; clearly a happy, funny and imaginative guy.

Character Illustration Resources

Illustrated characters in your background are one of the best ways to show off your personality to your Twitter profile viewers; it shows off your skills too! Below are a few resources to help with character illustration.

• Interview: Roughly Speaking: Character Design Sketching Approaches
• Navigating the Sea of Character Design Merchandising
• Creating a Collection of Quirky Caricatures

Tip #10: Make the most of your own mascot.

@MailChimp

If you have a mascot for your brand your Twitter profile is an excellent place to show him, her or it off! It’s not only fun and entertaining, but is a great way to link your Twitter profile with your brand. One superb example of this is MailChimp’s Twitter profile, who use their infamous MailChimp character to really jazz up their page.

Conclusion

By putting some of these Twitter background design tips into practice, you’ll be improving your design skills as you’ll learn how to work around design limitations which more than often do turn up in personal and client projects, as well as producing a great, attractive background that will appeal more people to hit the follow button when visiting your profile page!

Do you feel you have a good Twitter background? Share it with us in the comments section below!