The Ultimate Guide to Twitter Theme Design

This post will help you become a real Twitter theme design Guru. You will learn how to design the cool theme, where to draw inspiration or where to get/generate some free themes if you don’t have time to create something on your own, don’t know Photoshop or you are just lazy and spend most of the day enjoying the young spring sun :)

Designing a Custom Twitter Theme

Strange as it may be but all the designers use different (though pretty close) dimensions when designing Twitter backgrounds, here come just a few:

  • 1600 px by 1200 px
  • 1898 px by 1593 px
  • 2048 px by 1707 px

The dimensions you can choose for your Twitter theme depend on 2 factors:

  • the background design you plan creating;
  • the most used resolution (you can check it here ): 1024×768 (26,42%),1280×800 (20,18% ) and 1280×1024 (10,94%).

If you plan creating a graphically rich background and want it to be large enough not to tile you can make it 1600 pixels wide – taking into account the most popular resolutions. If you plan leaving the right area in just a solid color with no graphics or gradients you can make the theme narrower (1200 pixels) and just add an option to tile. In most cases you can make your design 1200 pixels high but don’t forget that the active/informational area should be not higher than 800 pixels as some of us have lots of tools added to the browser toolbar which makes the visible area even smaller.

Creating the design for DesignTermite Twitter theme we have used 1300 x1000 canvas size matching all the most popular resolutions and quite enough to create something unique.

Starting on the Twitter theme design I strongly recommend making a screenshot of some twitter theme in your browser and use it as the basis for future design. The area on the left of the tweeting interface is 250 pixels wide. It’s recommended to leave at least 10 pixels on the right and left of this area for better visibility and perception and thus the active area is around 230 pixels or so (the active area on our theme is 210 pixels).

Having the tweeting interface screenshot as a part of your design will help you to better organize the elements and ensure they are not being covered by the middle area. You will also know where to start the background design on the right side if you plan creating some specific design elements.

The sample of the Twitter theme with middle area overlapping the text info on the left:

Some of designers are also making use of the Twitter background header area and add company name, links, email addresses or contact phones there. This is not an easy thing to accomplish, you have to move the elements, save as .jpg, upload as a Twitter background and look for a perfect location for say a company name at the same time making sure the design doesn’t look cluttered. If you’re a fan of the clean style, you can just leave the header area as it is, if you are a guru of the clean style, it’s worth giving it a try.

Good example:

Bad example:

10 Rules to Follow

Now when you can choose the right dimensions and have a draft with the middle area screenshot ready you can start on design itself. Same as a website home page, Twitter theme should speak about the author/services or whatever you are trying to deliver to your audience. These 10 simple rules will help you make your Twitter theme not just a cool background but an effective marketing tool:

  1. Design your Twitter theme following the style and colors of your website.
  2. Add your photo (if you are a one-company person) for more personal approach (we all like to see who we are working/communicating with).
  3. Add your company logo and company name.
  4. Give a link to your website.
  5. Provide email and contact phone number (in case you check your email often and answer the phone, Twitter is real-time).
  6. If you work in California only don’t forget to mention that, it’ll help you to create a more targeted base of followers interested in your services.
  7. Give a brief description of the services you provide: this can be a few words or several sentences but make sure they deliver the important information.
  8. Spend some time on your design. If you provide design services some percentage of people might judge on your creativity from your Twitter theme.
  9. Keep the design clean. Make sure the middle area is not overlapping your information (this is the problem with 80% of themes having the info block on the left), that your company name is not cut and that Twitter users don’t have to scroll down to see some important info.
  10. Make Twitter theme a small portfolio of your works. If you are a photographer, designer or painter you can nicely integrate the screenshots of your works into the background and your work will speak for itself.

P.S You may skip some of the points above if you own a well established brand or a popular website and just create something cool to keep your fans even more excited and inspired.

Examples:

Using photo as a Custom Twitter background

This is probably the most simple way to create a custom Twitter theme. Just take a cool photo and upload it as a Twitter background. Adding some information will help other twitters to identify who you are and what you do. You still have to keep in mind that the photo size should be at least 1024×800 to cover the background and that the middle area will be covered by tweeting interface. It makes sense to use some abstract rather than portrait photos and blend the edges of the photo into the background to eliminate the harsh edges.

Examples:



Using a Tile Pattern for Twitter background

Not way too creative but not a bad solution if you need things done quickly. You can either type “free patterns”, “tile patterns”, ‘twitter patterns” into Google and look for something to your liking or generate a custom pattern using one of the tools below. Do not forget about size requirements. The patterns look nice but if you want your Twitter background to be informative you’ll have to add backings for text, logo and info. Below you will find some resources where you can find cool free Twitter patterns.

  • BestDesignOptions
    1000+ free background patterns
  • COLOURlovers
    You can choose from the list of patterns available or create your own pattern directly on the website with a cool Seamless Studio application.
  • Stripe Generator
    Allows you to generate only striped patterns but they look quite cool.
  • Tartan Maker
    The name speaks for itself. You can create various tartan backgrounds.
  • BgPatterns
    This one is pretty simple. You are offered to choose a figure that will be repeated multiple times. You can choose the background color, opacity and the angle for the icon-tile. The backgrounds are simple yet very sweet.
  • Guilloché Pattern Generator
    This one is a bit different from the rest and allows to create a unique structure (there are lots of similar generators on the web now). You can use it as a tile for your background and create something unique looking with less efforts.

Examples:

Get a ready-to-go Twitter background for free

The number of websites offering nice free Twitter backgrounds is rapidly growing (and the number of those creating low quality stuff is growing even faster) so we’ll list just a few we like most. The main reason is that Twitter backgrounds are cheap and easy to create and same as the free templates they are used mainly for promotion of some other services and paid design as well as for the text line “created by”. In any case that’s the sweet offer and it would be a mistake not to use it. Also, if you are looking for a holiday Twitter backgrounds you may follow FlashMint and TemplateMonster on Twitter as these template giants usually create free Twitter backgrounds for Christmas, Halloween and other holidays. Most of the websites listed below offer Personalized Twitter Backgrounds and Custom Twitter Backgrounds for a fair fee.

Useful Twitter Tutorials

I hope you will find this post useful and it’ll help you to create a nice and functional Twitter background. Good luck!

Anastasia Miles

Project manager and usability specialist. Interested in SEO and marketing, friendly and always ready to discuss new opportunities. Now working in amazing SEO Company named WebPromoExpert.net and you are welcome to follow me and WebPromoExpert on Twitter

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. iiiii says

    The Ultimate Guide to Twitter Theme Design I was suggested this blog by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my problem. You are incredible! Thanks! your article about The Ultimate Guide to Twitter Theme DesignBest Regards Veronica

  2. Rodney says

    Exactly what I was looking for,I think having a personalised twitter theme is a must for any business.
    I’ve bookmarked this for reference,thanks again for such a great article on the subject.

  3. Raser says

    It’s a shame you don’t have a donate button! I’d most certainly donate to this brilliant blog! I suppose for now i’ll settle for bookmarking and adding your RSS feed to my Google account. I look forward to fresh updates and will talk about this site with my Facebook group. Talk soon!

  4. Clayde says

    Am going to use to design my own Twitter theme! Watch this space guys! And look out for my theme! Wohoo!

  5. Terry Luan says

    Hi,
    Your guides are quite easy for me to follow.
    Thank for your great work

  6. Perry says

    Is there an update on this great article available as the New Twitter has a much wider look leaving less space for a fancy background.

  7. says

    Great writeup, been meaning to updae my twitter account was just unsure of the background spec to use. Thanks for the tips

  8. Remi Vladuceanu says

    I was always intrigued by the possibility of creating some unique design for a twitter background. Something that would give the impression of 3D but also to look professional and new-age style.
    You really gave me a couple of great ideas with this article :)

    Thank you,

    Remi

  9. AceeBaBa says

    Wonderful :) This kind of information really works. I am a graphic designer and when ever i get this type material online i feel i added +1 tool in my knowledge.

  10. says

    Great post! I keep designing and redesigning my Twitter theme, trying to get it just right. This gives me some good inspiration for my next redesign!

  11. Ovais says

    These are awesome designs actually…they are really creative and innovative..but unfortunately some of the designs are not appearing on my computer ..may be resolution problem..anyone else facing the same problem here?

  12. says

    Thx Anastasia. I want to design my first themes for twitter. So only add my logo pn my page. Good write for first theme maker for twitter

  13. Stewart Marshall says

    This is the article I have sought for long time. I always wonder why other peple twitter background are so beautiful but mind is so suck. Yeap….. however thank for great job.

  14. ptamaro says

    Here’s one of my favorite places to get really high-quality backgrounds and themes for your Twitter account – http://tweetygotback.com “Tweety Got Back, A Twitter Theme Shoppe. Free Twitter backgrounds and themes.”

  15. says

    Put your link in your bio, done. No one cares about your background content. If your stuff is good, trust me, people will seek you out. Advertising your info isn’t going to make people suddenly say, “Yeah, you know what, they are good at what they do. And look at that, they’re information is right there on the background. They’re so awesome. I want to work with them.”

  16. says

    Great post. The rules, examples and resources are great. The tutorial links are really helpful too. There are definitely lots more ready-to-go Twitter background sites these days then there were in the past — for free and those that create custom designs at reasonable prices…

    Although it’s not imperative for everyone to have a custom background, a Twitter background helps you: build credibility, show and tell a little bit more about you, market your product (if you have one), “strut your stuff” if you’re a designer, and build your brand and identity. There’s probably more reasons, but I thought I ramble through a few that came to mind so folks realize there may be more to it than just cosmetic or aesthetic reasons to tweak your Twitter profile.

    Follow me if you’d like (I’m @Peekr), I love custom Twitter backgrounds!
    :-)

  17. Web Risorsa says

    Great tutorial. Let me try to design a theme with this one for my twitter profile background…

  18. AJ says

    Great write up. I retweeted it as well. I to found designing for a range of resolutions a challenge. I focused on 1024×768 as the minimum and 1680×1050 for the max. I designed it so that at those two resolutions different information is seen on the edges of the twitter content, but this article makes me want to take another stab at it. Great write up, ty for the inspiration!

  19. matthias says

    Thanks for the nice article Anastasia,
    look @this
    greez chief_px-pusher

  20. Lena Tailor says

    Some really great backgrounds! People are really starting to put hard work into
    their designs.

  21. says

    Great article for twitter designers! Designer Depot is my favorite. :) We provide twitter backgrounds too, you might want to add twitcane.com too. Thanks :)

    xoxo

  22. Auntie P says

    Some great examples but unfortunately some of them don’t look so hot on my screen. Reason? I’m working on a Mac and I don’t stretch my window to full screen width (and I’m not alone in that) so much of the left-hand illustration is lost beneath the tweeting interface. This might be worth considering when making a design – what browser setup is your target follower most likely to be using?

    • says

      Which resolution of screen do you have? I did use template and created left side to be a lot more narrow because of those screen differences.

    • says

      I’m with Auntie P. I don’t use browser windows at full or near-full width, so all examples look strange with left hand images/text covered up. Screen real-estate is also at a premium as my system-of-choice is a laptop (MacBook Air); it goes everywhere I go.

  23. says

    how hard it is to find a graphic designer to design a twitter background for $25?
    Those fancy graphic designers are charging over $100 for a background and I think it’s not worth the money for such a small job.
    Should I use craigslist to find someone?

    • says

      I would suggest to go to some design forums or put offer on Freelanceswitch Job board for example :) I am sure you will find designer for good price :)

  24. says

    I have a widescreen laptop (1920) and my FAVOURITE thing is when someone’s Twitter bg fits my screen, or is well designed to respect the space available (seamless tiling, a great fade-to-colour that makes sense).

  25. says

    Thanks for the article Anastasia ~ I would also add that the area under the main Twitter interface area can show sometimes so not to completely neglect it … e.g. Some of it shows when people link to an individual tweet only or even when the fail whale shows – I think.

  26. says

    Yeah, resolution issue is quite a thing when designing for twitter… Last background I was designing for a client took quite a while to fine-tune and match a range of 1024 through 1920