Over the past few months, I have noticed a large number of people on Twitter asking if anyone can help them make a custom Twitter background. When I first started making Twitter backgrounds, I could tell there was more to it than just making an 800kb file and throwing it up there. My call to action on the left was cut off by my Twitter feed, and my call to action on the right was either under the feed or cut off by the right side of the page.
After a little bit of research, I was able to easily create a Twitter background for myself, and then help my clients and friends to create their own. A couple of things have changed since I first started making Twitter backgrounds– for example, the maximum upload size is now 2mb, and it is now much easier to create a high-resolution image for your background– but many of the fundamentals have remained the same.
One key thing to keep in mind when creating a Twitter background: the amount of room you have for your background is dependent on each individual user’s screen resolution. The Twitter feed area is approximately 870px wide. Luckily, the average screen resolution used today is 1366px wide. Because this is the standard laptop resolution and many people still use desktops or dual screen laptops with a larger monitor, I recommend that you use an image size of 1600px wide by 1200px high. This will allow people with larger screens to view your background without it cutting off too early because the background will not scale.
Even if you are starting with an image size of 1600×1200 pixels, you should still plan your image for the average 1366 x 768 screen. Since the Twitter feed is approximately 870px, you are left with about 496px to split between each side of the Twitter feed.
Another thing to remember when creating your background is margins! You should think about allowing 22px for a margin on each side of the screen, just to be safe. You can still design background for this area, but if you have any calls to action, text, or visually important images, you may want to try to keep them out of this area.
Factoring in margins of 22px, you are now left with about 226px for each side. I recommend placing your primary design on the left hand side, since that is where most people will actually view any call to actions or logos. Assume that you have a space of 200px for the left side, plus the 22 for the margin.
One important note– if you take your browser window and scale down the width, you will notice that the Twitter feed does not get any smaller; instead it slides to the left to stay in the center of the screen. I suggest testing your background image in this way after you have uploaded it, to give you an idea of how people with smaller screen resolutions will view your background.
Lastly, if you are using solid colors in your design, change the background color in your Twitter settings to be the same color as the edges of your image. This will make it appear that the background never ends for screens that may be larger than the background you designed.
Twitter Background Upload Limit: 2MB
Suggested Background Size: 1600×1200
Most Popular Screen Resolution: 1366 x 768
If you downloaded the PSD, share with your friends!