Create a Custom Background for Twitter

May 26, 2011

Built into Twitter under the settings section you can do some customizing for your Twitter page background. When I see a twitter background that is straight out of the defaults, I actually cringe, instantly I have made a “none creative” judgment. Now I know that isn’t fair but that is a first impression and I am pretty sure others get that reaction. Using one of the custom backgrounds is better than the default but… Creating your own background is really more fun.

Twitter changed over to a fluid layout back in 2010 making the need to plan a little more important before you build.

Top section
The first thing to remember is the top toolbar is 40 pixels high and it spans the whole window no matter what resolution you are viewing it in. Then there is a 20 pixel high space before the content starts.

Center section
The center portion is a two column design with about 112 pixels on the left. So if you are putting your logo or some image on the left plan to make that fall into that 112 pixels range. The spacing on the right is fluid depending on the resolution.

Timeline Column
This is always fixed at 540 pixels but the sidebar will vary from 500 – 380 pixels.

Sidebar is semi-opaque at about 75% so depending on what color you choose it can impact the ability to read the content.

Photoshop

If you are able to design in Photoshop create a new document sized to 1280×1024 pixels. Move a guideline to the 60 pixel mark from the top and don’t plan anything important up there. Place another guideline to the left side at 112 pixels and keep any logo or images you want to be seen in that spot. You can create a pattern or line that will come out behind the center section. Fill the background however you want remembering from that first guideline on the left you will have Twitter two columns for at least 920 or 1040 pixels. Save your background as a gif or png. Go into your Twitter account and go under settings, you can upload your graphic and save it. Then view it. You can always tweak it and upload again it things didn’t look the way you thought they would.

The next part of customizing is to select the color scheme to match your new background. That adjustment is also under settings.
Now you are ready to show your stuff.
Remember your branding try to have the background match your website.