How to Design a Twitter Background that Promotes You

January 29th, 2010 | Alex Mathers

Editor’s note: this is a guest tutorial post from Green Glasses (Ben Mounsey) a UK illustrator and designer with a client list including Cartoon Network, Nickelodeon, and Computer Arts Magazine.

–

I’m a big advocate of Twitter, for keeping your sanity if you have an isolated work place, for getting feedback and inspiration from your peers, and for publicizing your work and goings on.

Twitter is a pretty minimal experience, which I love. It’s as far from Facebook in terms of complication and usability as you can get. There’s something innately more interesting about someone who’s made some effort with their avatar and Twitter page, and will often lead me to believe they’d be good to follow.

Your Twitter page is a great blank canvas to represent you! Take advantage of this and use it to display a business card style list of links, along with your eye-catching and stylish imagery.

I will show you how!

Step 1: Prepare the canvas.

The size is important because of how people view your page; it’s the trickiest bit. Different monitor sizes, be it a 15inch laptop, a 24inch monitor or bigger, mean the placement of your background image behind the central Twitter panel will vary. You can’t cater to everyone, unless you are creating a simple repeating pattern with no business card.

I decided to go for 1600 x 1200px, it means that most displays will fit, with some smaller ones slightly, but not completely obscuring our info.

Click images to enlarge.

TIP: It might be tempting to put something snazzy on the right hand side, such as your logo, but as the center panel is not stationary and expands from left to right, anything in that area is more likely to be obscured.

Step 2: Setup the work area.

Make sure your rulers are in view (cmd + R) and setup to measure in pixels (crtl + right click + select ‘pixels from the drop-down). Now drag out a vertical guide from the left rule, and place it 245px from the canvas edge (to add a precise measurement type the amount into the ‘X’ field at the top).

The area we’ve marked out between the canvas edge and our guide is our safe zone – we need to keep our business card info inside this area.

TIP: Make sure you lock your guides so you don’t accidentally move them, got to: ‘View’ > Guides > Lock Guides.

Step 3: Bring in your design elements.

I re-used elements from other work to keep it consistent with my brand and in keeping with my own website. Not essential, but I think it’s a good idea to fade your backdrop out from left to right, it adds to the idea of having a sidebar, without having a harsh edge to it.

Step 4: Add your business card style details.

I suggest bringing in a logo and making sure you keep whatever info you have, web address, social networking links etc, inline with it. With ‘Snapping’ turned on your ’safe area’ guide will come in useful for this.

Step 5: Save.

Go to: File > Save for Web, and save it as a jpg at ‘High’ quality. All that’s left to do is upload it to Twitter, pick a complementary colour pallet for your center panel, and you’re done.

TIP: Twitter limits the file size of backgrounds to 800kb, for loading reasons you’ll want to keep it under this anyway, you shouldn’t have trouble achieving this -any problems, have a play with the ‘Save For Web’ quality settings.