Step one: Finding out what resolution to use
First I took a look at my website analytics tool (mine being google analytics) and checked out the user settings page. It basically told me that the visitors that come to my site have 4 screen resolutions that, in total, make up over 98% of my traffic. Keep in mind that those visitors are to my website, not my twitter, but I can make a good assumption that most of my web visitors look at my twitter and vice versa. Here is the breakdown of that list:
Step two: Selecting the template
So based on those stats I can assume that over 80% of my visitors that look at my site have a screen resolution of at least 1280×800 px. Going off of that, I am going to open up my template in photoshop and work my design around that. The PSD template is at the bottom of the post, download it and open it up. The PSD file is a large file with 5 layers. Each is a template for the four screen resolutions that I described above. Take a look at your web stats and see what most of your users’ resolutions are. If for some reason you dont have web analytics, just go ahead and use the 1280×800 tehmplate, as it is probably the most common screen resolution these days. Here is a screenshot of the template.
Step three: Filling in the blanks
Now all you need to do is make visible the resolution of your choice and put your logo design just to the left of the twitter content. I chose a horizontal layout to match the design of my website, but you can also do a vertical one like the one below.
Step four: Save and upload
Now make your design and save it as a JPEG and upload it to twitter, and you are all done! Feel free to take a look at my twitter to see how mine came out. I hope you found this tutorial useful, and If you do decide to make one (or if you have any questions), shoot me a comment or a message and Ill be glad to help out. Good Luck!
chris
i have never used photo shop. what do suggest on how to learn how to?
Chris
I would suggest browsing through a few of these wesites:
-Graphic Design Pro
-Tutorial Pro
-PSD Tuts
-Tutorial 9
Registry Review Group
Hi Everybody
Beckygtx
Question. When I pull a paper design of mine into the layout, the paper turns gray. Why? What setting do I need to change? Thanks!
Beckygtx
OK, nevermind. I found it. DUH! Thanks!
Drew Binkley
Great post, thanks. I love seeing what other people have come up with for this. I also created a helpful PSD for setting up a Twitter background. Let me know what you think… http://www.38pages.com/blog/post/twitter-background-template
Kawika
Awesome post about creating a custom twitter background, and thanks for the PSD template! It doesn’t appear that you’ve used the template on your own twitter, though, http://twitter.com/gdpronet doesn’t have your logo on it at all. Am I missing something?