How to Create Custom Twitter Backgrounds

You don’t have to go to design school in order to lay out a fun and interesting Twitter background. Neither do you have to master Photoshop. Thanks to technology, you have several tools to help you “snap together” an eye-pleasing background. Before I dive into the tutorial, I want to introduce several more tools that you can add to your collection. They are:

Adobe Kuhler: You can create your own color theme, or download a theme from the community. You’ll need to register with Adobe before you can use this program, but it’s free.
Striped Backgrounds: Select your screen resolution, click the Randomizer button until you find a color scheme that you like, and then click Download.
Tiled Backgrounds Designer: Another simple tool to create nice backgrounds.

If you haven’t already, download the Photoshop template that I wrote about in Monday’s post. Open the file and select the 1280×1024 resolution template. This is what you should have on your screen.

Next, create a pattern, either using the pattern makers mentioned above or use the pattern overlay inside Photoshop.

Your screen should look like this. At this point, you could say that you are done and upload your new design onto the Twitter interface. For the purpose of this tutorial, I’m going to continue by showing you how to add a sidebar that will tell your visitors who you are.

We’ll start off by creating a new layer. Once that layer is created, draw a plain white rectangle in the left part of the template. This is going to contain your contact information. Draw this rectangle so that there is equal spacing between the leftmost edge of the screen and the right edge of the shaded area of the template. Position this rectangle so that it is approximately 350 pixels down from the top edge of the image. When you are finished, make a copy of this layer, turn the rectangle in this layer into a square and center it above the rectangle. Your screen should look like this.

You can spiffy up the square and rectangle by giving it a drop shadow or or whatever effect you want. But because my pattern is so busy, I decided to leave them plain. The square is going to contain your picture. Add your picture. Then draw a text box in the rectangle and type in your introduction. If you include links to your website, make sure to make them a light blue color, to make them look like links. Don’t forget to add your name above your picture.

Your background is almost done. Notice how this screenshot is lighter than the ones before it. I made the background image more translucent because I couldn’t see the text of my name. The great thing about Photoshop is that you can work around your mistakes.

Save your file as a .psd so you can edit it later, if you need to. Hide the template layer, and click Save for Web & Devices. Format your design so it is under 800K and save it as a GIF, JPG, or PNG. You are now ready to upload!

When I first started designing Twitter backgrounds, I looked for tutorials that would help me come up with the “standard” sizing that would allow everyone to see my background. My research produced a variety of options for setting up the size of my design, but no standard. The real problem, I found, involved the resolution settings of the users’ screens.

People who owned PCs with 1024 x 768 screen resolutions on 15″ screens couldn’t see what I saw on my 20″ iMac. I wound up using the 1600×1200 pixel size because several of my followers reported that my design got cut off when I used anything larger. Once I uploaded the design, I had to remember to change the background color so the two wouldn’t clash. That was easy on my end, but I still wanted to know what my page looked like on other screens without having to bug my friends into sending me screenshots.

Firefox has this great plugin called Web Developer, which lets you see how your Twitter page will look with different resolutions. I’ve included some screenshots for you to look at.

800x600 Screen Resolution

1024x768 Screen Resolution - Most Common

1280x1024 Screen Resolution

1600x1200 Screen Resolution

What a difference, huh? Based on the information I found using Web Developer, your best best is designing your Twitter pages to be compatible with the 1024×768 and the 1280×1024 screen resolutions. As for the image size, I would set it to at least 1600×1200.

When I first started designing, I became familiar with the pros and cons of using free photos, images and fonts. You’ll find an abundance of them online for your Twitter backgrounds. The biggest problem I encountered was quality. If I liked the photo well enough to download it, I had to adjust the contrast and/or the color balance if I wanted a particular item in the photo to show up better. That’s not a big deal for me, unless I’m in a hurry to get the design finished.

The next roadblock I faced was the licensing issues some of these free photo sites or the individual creators of these photos and images. I either couldn’t alter the images in any way, use them for a commercial purpose, or had to keep the sites URL address embedded in the photo. Because of these limitations, I use these sites to find interesting images for my blogs.

When designing anything else, I use paid sites, such as iStockphoto.com. The biggest reason is quality. Another reason is that I can see how many times an image has been downloaded to gauge its popularity. If I see over 500 downloads for a particular image, I look for something else. Like with the free photos, you must understand the licensing involved with the paid photos. The biggest downside to paid sites is the cost. Most of these sites use a credit system, where you pay for a certain number of credits before you start downloading images. I’ll list the best sites, both paid and free, in my next post.