Customizing Twitter backgrounds

Ever notice how some people make creative use of their Twitter backgrounds -- not just as a way to be pretty and set a tone, but also to deliver extra info about themselves? Seemed like a good idea to me, so I gave it a try this morning... and hours of trial and error later, I've got something functional -- not perfect, of course  (because there are too many variables to establish "perfect" in this instance), but OK.

The reason I like this is that now when people check out my profile to decide if they want to follow me, they get more info than they used to.

Wanna try it yourself? I'll walk you through the specs and steps after the jump.

THE NATURE OF THE BEAST
The first thing I had to figure out was how the background loaded, and basically it begins at the top left as a static image and fills down and to the right. This means that once you de-select the "Tile the image" option on Twitter's design page, each user's individual settings are going to result in a different presentation.

Here's what that means: If someone has a tiny 800-pixel monitor, they're just not going to see the whole picture. In fact, they're not even going to see the stuff on the left. But more on that later.

So what I really needed was something that would more or less split the difference on the left, putting the high-value stuff there, then leave the center open for the Twitter screen, then place some relatively low-value stuff more or less to the left of it. And the image that I came up with looks like this:

You'll notice that this left plenty of space off to the left, and that the middle is blank.I also left some extra depth at the bottom. Why? Because monitors come in different sizes -- and making a background like this one is all about compromises.

For instance: If you open my Twitter page in that tiny 800px monitor I mentioned before, what you'll see is likely to look like this:

That's because with a low-resolution monitor, you see only as much of the background as will fit, and the browser immediately starts putting Twitter on top of it. And while you can scroll up and down and get more of the Twitter screen, the background doesn't scroll.

Of course, most people don't roll with an 800px monitor (less than 7 percent of all users). These days, 1024 is a popular resolution, and of course you've got plenty of high-end designer types who surf via 2048px and better. So, what does this page look like at roughly 1024?

In this size, you'll notice that the material on the left centers up OK, and there's some of my stuff visible on the right. Nothing is perfectly composed, but you can see it, and you know a little more about me than you would just from reading the profile page and following the link to this blog.

My monitor is a 1680px, and here's how it looks to me at full screen:

The trick is, while this looks OK at 1024 and 1680, what's it going to look like on a big monitor? Some the tutorials I found were optimized for those beasts, with image sizes set to roughly 2048x1800 px. Yet when I tried to arrange stuff so that it looked good at multiple resolutions it never really worked. Which lead me to this realization:

PEOPLE WITH BIG GRAPHICS-OPTIMIZED MONITORS DON'T SURF FULL-SCREEN ANYWAY.

So I remade this background so that it would work OK at smaller sizes, but I left some extra padding around the right and bottom so that larger browser windows don't run out of background.. It's a series of compromises, but  that's the nature of the Web beast, baby.

THE SPECS
So the first thing you need is an image-editing program. I used Photoshop, but you could use a less expensive (or free) program and get the same result.

STEP NO. 1
Open a new document. Set the unit to pixels (not inches) and select the following: 2000px width and 1024px depth. Set the resolution to 72 dpi and select RGB for the color mode. If you've got a smoothing option, go Bicubic.

STEP NO. 2
Give your background a background. I made mine a linear gradient based on some colors I found in a great palette called Irish Coffee. But you could just pick a color and go with it.

STEP NO. 3
Build the high-value box that goes on the left. I set my upper left corner at 30px depth and 70px to the right.You may want to fiddle with those numbers.

The box itself I drew to 220px width and 760px depth. I made it a dark shade for contrast with the cream colored text (both from the palette I'd selected), and I placed a recent photo at the top. By the way, do everyone a favor, pick one font, and then stick to it. If you're going to be using reversed-out type (light on dark), be sure to use a sans-serif.

STEP NO. 4
Put some stuff on the right. Part of my schtick is that I draw cartoons and make Photoshops, so I wanted to put up a gallery of some examples, but you might have a single image that you want to show up, or maybe a series of photos you want to stack. Whatever.

After a lot of poking around, I aligned the average left edge of my gallery 1245 pixels from the left edge of my background image. I didn't want it too look too uniform, so I violated the grid with a couple of pieces that go farther to the left, but do it however you like.

My 1680 monitor actually cuts off closer to about 1640 pixels, but I'm not worried about that. And while I could add more pictures to the left and toward the bottom as a bonus for people with larger monitors, I figure why bother?

STEP NO. 5
Save your image at full resolution, and then save a Web version at a reduced size. My original was about 5 MB, and a 3-quality JPEG was 70k. That's a lot, but I still opted to improve the quality to 7 on the JPEG just to get better performance on the gradient. That bumped the file size up to 76k, which is a lot more than I'd normally use. I accepted that load in this experiment because it's just such an enormous file with so many images embedded in it. Yours will probably be much smaller.

STEP NO. 6
On your Twitter account, choose Settings and then Design.You'll wind up looking at a screen like this:

 

Click the "Change background image" button, then browse to the image file on your computer.

Once you've got it selected, be sure to de-select the "tile background" option and click the "Save changes" button. Your changes will show up in a few seconds.

DON'T LIKE SOMETHING?
Lather, rinse, repeat. Use these numbers to get you started and save you some time, but nothing beats tweaking.

Got a better solution? Please tell me (us) is comments.

DEC. 2 UPDATE: By request, here's my psd file for downloading and re-purposing.Download 12bg08

Comments

[Sue]

You're not going to share the .psd file? What's a girl gotta do to get a copy?

[Girt]

Something's weird - I'm on 1024x768 and your background boxes are hiding behind your twitter feed for me.

[Dan]

If you go under Display in your Control Panel window (don't remember the order for Mac), you can change your screen resolution. Not the size of your monitor, of course, but how it interprets pixels.

[Alanna]

I've been wondering how to create a custom background. Thanks!

[Patricia Anzanello]

I'll try!
Thank you for the information!