Face it -- a company Twitter profile is incomplete without a custom Twitter background. Users who stumble across your profile will expect to see some basic branding such as company name, logo, and URLs to lead them to other useful information.
Chances are, you have access to some design software somewhere in the office, and trust me, you don’t need a creative team to execute this simple task. Either read the step-by-step instructions below, or follow along during the video tutorial to whip together an awesome custom Twitter background.
Don’t shy away from creating a background for your individual, personal Twitter account either! Twitter is a great resource for networking and personal branding. With that in mind, let’s get started. (Keep in mind that your background can be made with the following measurements using any design software).
Step 1: Setting the Right Measurements
Open your design software, and create your new background using the following measurements:
It’s important to note that Twitter backgrounds will not scroll down as users scroll down a profile page. The text/images on the background will be glued to one spot and will never move.
Step 2: Define Your Design Space
A blank canvas should now appear on your desktop. Now, due to the fact that a timeline or feed of activity exists on the center of every Twitter screen, we need to ensure that what we place on our background is never covered up by this feed. The trick here is to ensure that the text and images are viewable on any screen size (i.e. the feed doesn’t cut it off on a 13” screen laptop because the background was made on a 15” screen). To ensure you are always working in the “safe spot,” pull out a marker over the 300-pixel mark on the horizontal ruler in your design software. To do so, simply click on the vertical ruler and drag until the line touches 300 on the horizontal ruler. This marker will not appear in your final product, it is simply an indicator for you to keep all your work inside that selected area. (If you're working off of a design software that does not have a marker feature, simply draw a line, and delete it after).
Step 3: Choose a Background Color/Image
Color in the entire canvas with one color. Alternatively, you could insert some sort of image that takes up the entire background. Just be sure you own the rights to the image you choose, and consider how it will look when part of it is covered up by the Twitter feed. A solid color is always a safe option. It’s also easier on the eyes.
Step 4: Add Your Text
At this point, you’re free to write the text and add whatever images you choose to the 300-pixel wide, left-hand column we created. For HubSpot's Twitter background, we simply added our company name, a brief bio, URLs for our website and social networks, and our company logo. Nothing too crazy. What you choose should be a reflection of your company in some way, but it should also be simple. Twitter is the world of 140-character updates for a reason. Twitter users are used to brevity. The point is, keep it short.
Step 5: Save Your File Correctly
Now, save the file to a safe place to ensure you can find the original file again if and when you need to update it. Then, save the file again as one of the three file types Twitter accepts: JPG, PNG, or GIF. Be sure that the image size does not exceed 800K, because that is the maximum file size Twitter accepts. If you do need to shrink the image size, click here.
For those designing in Photoshop, you will automatically be directed to a new prompt after clicking "Save," which will give you the option of adjusting the image quality. Simply adjust the image quality down one number, and you will notice an extreme drop in file size, without harming the quality to a threatening extent.
Voila! Now you have a background ready for Twitter. Easy peasy, right?
Step 6: Upload Your Background to Twitter
Lastly, go to your personal or company Twitter profile, and head over to "Settings." This option is listed in a drop-down menu under your Twitter username on the upper right-hand side. Once you've navigated to "Settings," click the "Design" tab. Click “Change background image,” and upload your background! Then, click "Save Changes," and your beautiful and custom background will appear right before your eyes.
What design elements do you think make for an effective, visually pleasing Twitter background?


pubfish, inc. 6:44 PM on October 14, 2011
Hi Anum,
Thanks for this how-to vid. I followed it and it works!
Thanks,
Laura
Join: www.pubfish.com
Learn: blog.pubfish.com
Discuss: fb.com/pubfish
Follow: @pubfish
Des Kirby 7:35 PM on October 14, 2011
Thank you so much for sharing this. It's exactly the kind of tutorial I was looking for.Easy to follow for non-tech types like me. I dont have Photoshop but i used another tool i found online. I now have all my contact info on my Twitter business page. Great job Anum. The Hubspot Blog rocks!
James 9:00 PM on October 14, 2011
Well, it is a well written guide, but alas, you apparently did not follow your own advice.
Looking at YOUR profile on my laptop (a 15" screen with 1366x788 resolution in Google Chrome) your bio text is overlaid by the Twitter Feed and the bottom half of your URLs and logo are not visible at all.
Zeeshan 9:21 PM on October 14, 2011
Nice and simple tutorial. I usually make twitter backgrounds which are in 16 bit color mode. Although its increases the size of the file, but its rich in color.
Anum Hussain 12:08 AM on October 15, 2011
Glad it was helpful for many of you!
James, I actually do know what you are talking about, and based on my observations, that is a function of how much or little people have their Twitter zoomed in our out. If your Twitter windows zoom is at "normal" then you should see all the text fine; However, if you have your window zoomed just one notch up to make your text bigger, then yes it gets cut off. I played around with these settings heavily but unfortunately could not find a way to ensure 100% that it would not get cut off because people adjust their screen to so many various sizes. That being said, I tested this size on a variety of browsers and different people's laptops and found this worked best.
Hope that is sufficient enough for you! If you ever find a better estimate do share :)
Love Tumblr 1:09 PM on October 15, 2011
Great tutorial, I was always confused with the size of Twitter backgrounds.
It's important to brand everywhere online these days, so thanks for putting this guide together.
Lonnie Ayers 2:39 PM on October 15, 2011
Could you show how to do it with powerpoint? It is the most common software out there, just not sure how to do it or if you can with it?
Ray 11:02 PM on October 16, 2011
Yes! I have been trying to figure this out for a week! Thanks for this easy to follow answer!
Smith Lottery 3:35 AM on October 17, 2011
Very cool.It's useful for me.
Bill Burpeau 9:09 AM on October 17, 2011
Hi Anum,
Great to meet you at the Tech Fest in Windham on Saturday! Fantastic post. I will be customizing our Twitter background. Thank you for the "How To" tutorial.
Aida 11:46 AM on October 17, 2011
Thanks for the very helpful post. Was wondering how many pixels wide the actual twitter feed area is, so that I can have a cool border around my background.
Chris Pergantis 2:34 PM on October 17, 2011
What about the footer at the bottom of this page? Is there something we can do to emulate this design feature?