The Ultimate Guide to Twitter Theme Design

Posted in Social Media, Tips, Web Design4 years ago • Written by 37 Comments

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!

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

14 Written ArticlesWebsite

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

37 Comments Best Comments First
  • LukeSF

    Friday, April 2nd, 2010 12:15

    1

    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

    0
  • Nikunj Tamboli

    Saturday, April 3rd, 2010 09:18

    12

    I am redesigning my twitter background & this guide is what I am going to follow.

    0
    • Dainis Graveris

      Saturday, April 3rd, 2010 16:30

      13

      Great! Let us know if you have more questions and show us your outcome after that!

      0
  • Lil Peekr

    Saturday, April 3rd, 2010 22:27

    18

    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!
    :-)

    0
  • Web Risorsa

    Saturday, April 3rd, 2010 11:32

    11

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

    0
  • AJ

    Friday, April 2nd, 2010 21:28

    10

    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!

    0
    • Dainis Graveris

      Saturday, April 3rd, 2010 16:39

      16

      Thank you for retweet, yes – it’s hard to have unique layout and focus on all resolutions in the meantime. Certainly a challenge :)

      0
  • Erica

    Friday, April 2nd, 2010 18:33

    4

    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).

    0
  • Barbara Ling, Virtual Coach

    Friday, April 2nd, 2010 16:34

    3

    Excellent guide! I’ll be sharing this with my network, thanks!

    0
  • Sarah

    Friday, April 2nd, 2010 12:33

    2

    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.

    0
  • Jogos Gratis

    Friday, April 2nd, 2010 21:11

    5

    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?

    0
    • Dainis Graveris

      Saturday, April 3rd, 2010 16:42

      17

      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 :)

      0
  • Auntie P

    Friday, April 2nd, 2010 21:16

    6

    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?

    0
    • Gordon

      Sunday, April 4th, 2010 00:48

      19

      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.

      0
    • Dainis Graveris

      Saturday, April 3rd, 2010 16:38

      15

      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.

      0
  • matthias

    Friday, April 2nd, 2010 19:05

    9

    Thanks for the nice article Anastasia,
    look @this http://twitter.com/chief_px_pusher
    greez chief_px-pusher

    0
  • Lena Tailor

    Friday, April 2nd, 2010 16:42

    8

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

    0
  • Chezzcuh

    Friday, April 2nd, 2010 22:29

    7

    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

    0
    • Dainis Graveris

      Saturday, April 3rd, 2010 16:34

      14

      Will check out, yes – they have really colorful and unique layout :)

      0
  • Justin Carroll

    Sunday, April 4th, 2010 04:11

    20

    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.”

    0
  • Elaine Jones

    Wednesday, June 8th, 2011 15:18

    32

    Thank you for the great article Anastasia.

    0
  • Terry Luan

    Tuesday, April 5th, 2011 11:44

    31

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

    0
  • alets

    Thursday, June 9th, 2011 16:26

    33

    Thank U!

    0
  • Clayde

    Thursday, July 28th, 2011 04:42

    34

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

    0
  • iiiii

    Friday, March 16th, 2012 07:47

    37

    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

    0
  • Rodney

    Sunday, January 1st, 2012 21:05

    36

    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.

    0
  • Raser

    Tuesday, August 23rd, 2011 12:38

    35

    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!

    0
  • Perry

    Monday, October 18th, 2010 14:19

    30

    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.

    0
  • G13 Media

    Wednesday, April 21st, 2010 00:43

    29

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

    0
  • Stewart Marshall

    Tuesday, April 6th, 2010 17:43

    23

    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.

    0
  • ptamaro

    Monday, April 5th, 2010 21:11

    22

    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.”

    0
  • Lourens

    Sunday, April 4th, 2010 13:10

    21

    Great article, this will come in handy :D

    0
  • LabsMs

    Wednesday, April 7th, 2010 08:33

    24

    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

    0
  • Ovais

    Wednesday, April 7th, 2010 14:26

    25

    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?

    0
  • Remi Vladuceanu

    Sunday, April 18th, 2010 16:32

    28

    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

    0
  • AceeBaBa

    Friday, April 9th, 2010 12:36

    27

    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.

    0
  • Kristi

    Thursday, April 8th, 2010 01:22

    26

    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!

    0
  • iiiii

    Friday, March 16th, 2012 07:47

    37

    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

    0
  • Rodney

    Sunday, January 1st, 2012 21:05

    36

    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.

    0
  • Raser

    Tuesday, August 23rd, 2011 12:38

    35

    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!

    0
  • Clayde

    Thursday, July 28th, 2011 04:42

    34

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

    0
  • alets

    Thursday, June 9th, 2011 16:26

    33

    Thank U!

    0
  • Elaine Jones

    Wednesday, June 8th, 2011 15:18

    32

    Thank you for the great article Anastasia.

    0
  • Terry Luan

    Tuesday, April 5th, 2011 11:44

    31

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

    0
  • Perry

    Monday, October 18th, 2010 14:19

    30

    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.

    0
  • G13 Media

    Wednesday, April 21st, 2010 00:43

    29

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

    0
  • Remi Vladuceanu

    Sunday, April 18th, 2010 16:32

    28

    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

    0
  • AceeBaBa

    Friday, April 9th, 2010 12:36

    27

    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.

    0
  • Kristi

    Thursday, April 8th, 2010 01:22

    26

    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!

    0
  • Ovais

    Wednesday, April 7th, 2010 14:26

    25

    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?

    0
  • LabsMs

    Wednesday, April 7th, 2010 08:33

    24

    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

    0
  • Stewart Marshall

    Tuesday, April 6th, 2010 17:43

    23

    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.

    0
  • ptamaro

    Monday, April 5th, 2010 21:11

    22

    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.”

    0
  • Lourens

    Sunday, April 4th, 2010 13:10

    21

    Great article, this will come in handy :D

    0
  • Justin Carroll

    Sunday, April 4th, 2010 04:11

    20

    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.”

    0
  • Lil Peekr

    Saturday, April 3rd, 2010 22:27

    18

    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!
    :-)

    0
  • Nikunj Tamboli

    Saturday, April 3rd, 2010 09:18

    12

    I am redesigning my twitter background & this guide is what I am going to follow.

    0
    • Dainis Graveris

      Saturday, April 3rd, 2010 16:30

      13

      Great! Let us know if you have more questions and show us your outcome after that!

      0
  • Web Risorsa

    Saturday, April 3rd, 2010 11:32

    11

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

    0
  • AJ

    Friday, April 2nd, 2010 21:28

    10

    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!

    0
    • Dainis Graveris

      Saturday, April 3rd, 2010 16:39

      16

      Thank you for retweet, yes – it’s hard to have unique layout and focus on all resolutions in the meantime. Certainly a challenge :)

      0
  • matthias

    Friday, April 2nd, 2010 19:05

    9

    Thanks for the nice article Anastasia,
    look @this http://twitter.com/chief_px_pusher
    greez chief_px-pusher

    0
  • Lena Tailor

    Friday, April 2nd, 2010 16:42

    8

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

    0
  • Chezzcuh

    Friday, April 2nd, 2010 22:29

    7

    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

    0
    • Dainis Graveris

      Saturday, April 3rd, 2010 16:34

      14

      Will check out, yes – they have really colorful and unique layout :)

      0
  • Auntie P

    Friday, April 2nd, 2010 21:16

    6

    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?

    0
    • Dainis Graveris

      Saturday, April 3rd, 2010 16:38

      15

      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.

      0
    • Gordon

      Sunday, April 4th, 2010 00:48

      19

      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.

      0
  • Jogos Gratis

    Friday, April 2nd, 2010 21:11

    5

    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?

    0
    • Dainis Graveris

      Saturday, April 3rd, 2010 16:42

      17

      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 :)

      0
  • Erica

    Friday, April 2nd, 2010 18:33

    4

    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).

    0
  • Barbara Ling, Virtual Coach

    Friday, April 2nd, 2010 16:34

    3

    Excellent guide! I’ll be sharing this with my network, thanks!

    0
  • Sarah

    Friday, April 2nd, 2010 12:33

    2

    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.

    0
  • LukeSF

    Friday, April 2nd, 2010 12:15

    1

    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

    0

Comments are closed.

23.21.34.188 - unknown - unknown - US