- Share This Post
- Pin It
- 11
- 3
-
Sparkle (0)
We all love Twitter and their default backgrounds are nice, but wouldn't you like something a little more "you"? Something to match your website or just reflect your own personality? In this post, I'll show you some guidelines for creating a custom Twitter background, as well as some helpful resources in case using Photoshop isn't your thing. Away we go!
First, you'll need a Twitter account, so if you don't have one of those, go sign up at Twitter.com! If you already have a Twitter account, the next step is knowing how and where to change your twitter theme.
- Login. Click Settings on the top right. The background will appear like blue clouds in this area.
- Click Design. The background will now appear as the default or whatever you've already got set for your profile. You should see a bunch of pre-fab themes to choose from, so you can pick one of those or scroll down further for more choices. You should see a "Change Background Image" option, as well as a "Change Design Colors". Click on either of those to adjust the colors and background of your profile. These are both pretty self-explanatory.
- Once you've made your changes, remember to SAVE.
Ok, so now that you know how to change it, let's show you some tips for actually creating a background, shall we?
File Size and Dimensions
First, let's talk dimensions and file size. There are certain aspects of Twitter, as you may have figured out, that remain static. The main content box will always remain centered, 763px across and 67px from the top. We can't change these elements, so we just have to work around them.
With this knowledge, we also have to take into consideration the browsers folks are using and what resolution their monitor is set to. 1024x768 used to be the default, but 1280x1024 or higher (height may vary depending on monitor) is quickly becoming the norm. It's up to you if you choose to design for 1024x768 or 1280px and higher, but I tend to do the latter most often and this tutorial works with those dimensions.
The file size should not be more than 800k at Twitter's request, but I like to keep mine under 500k and preferably, under 300k. The lower the file size the better, but not at the sake of quality. I try to be considerate of load time; smaller file = faster load time. Tiling your background, if it's smaller in dimension, means a smaller file, but if you're going for a big 'static' background, just be mindful of how large the file is in terms of kilobytes.
To Tile or Not to Tile
If you DO WANT your pattern to tile then you could really make the background any size you want. If you do intend to tile, a seamless pattern or stripes are usually a good choice so you don't get Windows 95 Desktopitis with a chaotic pattern featuring your family cat. Unless that's what turns you on.
If you DO NOT want your background to tile, it's recommended your backgrounds are at least 1600px across and 1200px high, though I tend to make them (assuming we're not tiling) 2200px wide and 1600px tall, as I have a large wide-screen monitor and I have to assume others might, too.
Because the content area is centered, but the background is top-left positioned, most people put the goodies they really want people to see on the left side and, keeping the 1280 resolution in mind, should make that content fit within a 230px wide "column". You actually get 245px of space, roughly, but you'll want to leave a wee buffer between you and the content and allow room for the scrollbar on the right, unless you purposefully want it to overlap your graphic. You'll also want to allow for another 15px margin and then another 230px or more on the right if you intend to have your background graphic display on the other side of the content area.
Like this:
TIP: Sometimes, I find it helpful to set my browser size to 1280x1024 then take a screenshot of a Twitter page and paste it on a layer in my Photoshop file, positioned top-left and then drag my guides where I need them. Once I've got the guides in the right spot, I can hide the layer, for quick reference later, or delete it. This is especially helpful if I actually do want the centered content to overlay
