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.
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.
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.
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 [video blogs]) 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.
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.
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.
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:
Tip #7: Use the space you have to share some information with your followers.
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.
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.
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.
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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Callum Chapman
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
here’s mine: http://www.twitter.com/holeycoww – I love designing twitter backgrounds, great pass time and bring in some fantastic attention.
Some great examples there, and amazing tips too!
@oridusartic’s twitter background is a great example of unique, elegant designing, easy to look at and all the information is there.
Great tips and really helped me to improve our twitter background design.
Our twitter background (@ibrandstudio), using big image type, clearly match with our website image, logo included and using the space to share some information.
Thanks
Awesome , I feel inpsired, off to make my background!!
This a fantastic resource. Having a custom twitter background is definitely an important step in brand identity. In my case, I took a minimalist route with no more than my logo, brand name, and short explanation of my company. One thing that I plan on doing is keeping my design similar across both my twitter accounts (@stephenhammy and @hammystudio). I definitely see the benefit of personalizing your account with a picture of yourself as the small thumbnail is waaay to small. Good article!
Problem appears when you design background for specific resolution. Personally, I’m on 1080p widescreen and most of those designs I can not see correctly. Suggestion: use patterns and big, big images. Works best and don’t over-saturate things. Sometimes they can not be seen.
goood tips thanks a lot
Great article :)
And here is my Twitter-Background: http://twitter.com/BlackMetz
It’s about myself. WIth this background i want that everybody can see who I am and what I’m doing.
What do you think?
This is good timing, as I have to design something for a new work twitter page. Thanks!
The only thing it’s lacking is the answer to this: how do you force your twitter page (by which I mean the content area) to stay stationary over the background, not centered?
I’d like to design an image that can be informative, especially for wider screens. If the twitter page is constantly shifting to stay in the center, it becomes limiting. Is there a way around this?
No way around it. Background can not be positioned, unfortunately. It will always stick to the top left corner.
Thanks for setting that straight. Cheers.
Hey, you forgot mine: http://twitter.com/bonsaistudio
:)
Nice.. but why the twitter bg alignment is left??? when twitter template is centered align.. i cant understand this.
i m having a prb on the bigger screen resolution
this also nice one
http://twitter.com/peacock_crest
Great tips and example. But why didn’t you include mine on the list http://twitter.com/koolimbe
I prefer the clean route, simple texture, nice lighting big on branding
http://twitter.com/nomhak
I’ve always been curious to see some stats showing how many people actually use the Twitters actual website for checking updates versus other means (mobile, apps, etc). Anyone know? Good tips, by the way!
Great post, and really thorough. I like the way you have lots of helpful resources and links woven into each topic section. Nice work.
You may be interested to know that using my free bookmarklet you can click to slide Twitter’s timeline out of the way so you can see a full Twitter background in all it’s glory, and click again to slide the timeline back into place and be on your merry way.
If you love to look at Twitter backgrounds as much as I do, it’s really helpful…
@Peekr
Hi, please: http://twitter.com/juniordesign
OMG! Is: http://www.twitter.com/juniordesigner
thanks!
cool tips, here is my background: http://twitter.com/colourofair
I have this: http://twitter.com/dailyespresso
I hope you love it
Well, I mainly use the twitter background to promote my latest project. Usually.
http://twitter.com/artweb11
Is there a tutorial for creating and uploading the background graphic somewhere? I.e., how big, where to work with settings, etc.?
Have always loved the MailChimp background! also a big fan of their product! =)
Great article and thanks for the resources!
Nice tips. I’ve used them in my twitter bg.
http://twitter.com/desaindigital
Since I just redesign my site, I’ll definitely redesign my twitter background too.
Very google for twitter. Thanks :)
check out mine, http://twitter.com/luisbv23
so much love for customized Twitter BG
My TWITTER background:
https://twitter.com/boeenet
great to see this twitter background and themes
vvvvvv awesome
Why “infamous”?
This is my Background
http://twitter.com/beavers_it
Great article btw, very useful.
Hey, nice inspirational post! I will create one for my twitter account as well.
Some brilliant tips that are really inspiring. I love the restricted colour palette style, mostly the way the colours match the colours used in the text. Thanks for the ideas.
No large photography backgrounds? (blatant plug) ;)
Just make it pink… :-)
I re-designed the Twitter page for the company I work for a little while ago: http://www.twitter.com/clearbooks.co.uk
Great examples of Twitter page designs.
Woops, typo! I meant http://www.twitter.com/clearbooks. Admin please edit comment :-)
Hi, nice article.
We’re happy with our own Twitter background too!
http://www.twitter.com/black_rooster
Just this morning I thought it would be a good idea to write something similiar about twitter, but I guess I was too late :(. Shi* always happens to me, WHYYYY MEEEEEEE????????????????
http://twitter.com/islamagica Nice background with repeated logo :p
Some great tips there. There’s so many styles and good examples it would be very difficult to list them all.
Good start tho.
for what it’s worth here’s mine: http://www.twitter.com/KSRuprai
crazy vector pattern style with subliminal messages :)
Here’s mine: http://www.twitter.com/writeitnl
Great tips and samples. I did try to follow Tip #1: Make your Twitter profile clearly match your websites image here http://twitter.com/katemag
Great stuff. I would add, be sure to check your background against different browser window sizes and resolutions. It may look great on a 30 inch Cinema display but maybe not on a Macbook. Optimize for a reasonable resolution but make sure it looks okay on smaller screens too.
Added mine just today :-) https://twitter.com/Hire_Debbie
Nice examples by the author and in the comments.
However I do suggest you do not set an end to your design on the right hand side. Better to have it fade out or something for the higher screenresolutions. Just design for the left of the screen because many of the examples given here look a bit odd on my screen resolution. They simply stop on the right at about 5/6 of the screenwidth.
Here is my example. Plain and simple. The way I like it:-).
http://twitter.com/albruna_nl
I agree with Martin. Although having design on both sides of the Twitter feed looks cool, it is limited to only the same resolution it was made in. Smaller resolutions end up with it partly off the screen and larger ones end up with it hidden behind the feed.
It’s also important to watch the width of your left side background if it includes information. This is especially true if you have a wide resolution that you’re making it on. If it’s too wide on the side (Ha! That rhymes.) then part of it will be hidden behind the feed on smaller resolutions.
This is my biggest annoyance with Twitter’s design options. All of these problems could be solved rather easily if they simple add an alignment option to the background uploader. They already have a tile or no tile option, so why not? Even just a centered or left-align option would be wonderful because you could design things that fade out on either side of the feed.
Anyway, overall..nice article with some great tips. :) It is very important to make your twitter stand out in design and, if possible, match your website. Helps users to associate the name/brand as being the same.
I use a single image that fills up the upper half of the page – http://www.twitter.com/kailashiyer – it’s an adaptation of my online avatar, an image I use everywhere.
Tip #11 : make your Twitter profile and your blog look like each other ( http://twitter.com/ozh & http://planetozh.com/blog/ )
Excellent article. Hats off.
Love it!
here is mine http://twitter.com/92pixels
thanks
I’m actually definitely in need of changing my backgrounds. Made some major changes so to my site(s) so this is definitely a reminder to get on that!
http://www.twitter.com/melodynieves
http://www.twitter.com/sexidesign
Great selection of Twitter backgrounds, all with various ways of approaching, nice list. LT
look at mine!
@jmagsgraphics
@jess_mags