Creating a Custom Twitter Background Using Photoshop CS5

The following is companion content for Photoshop CS5: The Missing Manual. This helpful piece shows you how to make a unique background image for your Twitter account.

---

The 140-character realm of Twitter happens to be a great place for shameless self-promotion, graphically speaking. In this tutorial, you’ll learn how to create and upload a custom Twitter background. Read on!

Repeating backgrounds

The simplest route to customization is to change the color scheme and repeating background graphic (also called a tile). The upside is that there are several web-based applications that’ll do it for you, and the tiled background looks great at any monitor resolution, in any size browser window. One of the slickest apps is Themeleon (www.colourlovers.com/themeleon/twitter). It’s a terrific way to waste 30 minutes.

However, to add any promotional info to your Twitter page, you have to build a graphic big enough that it won’t tile. One method is to build a big honkin’ graphic that spans the width of a Cinema 30” Display. Even though your page takes a hair longer to load, it sure looks cool, as shown here.



Custom background

Another approach is to create a slim, left-hand sidebar that fades to a solid color. Just set your Twitter background color to match and visitors will see a nice graphic on the left and a color blend on the right no matter how big their browser window is, regardless of their monitor’s resolution. Here’s how to do that:

• Gather some fun graphics. Companies such as iStockphoto are great resources for decorative embellishments like scraps of paper, pushpins, Post-It notes, and so on. You’ll also need a headshot, logo, photos, and images of your product, book, or whatever.
  
  
• Choose File➝New and create a new document named “Twitter Template” that’s 1280 × 1024 pixels. Once it opens, drop a horizontal guide one inch from the top of your document to represent the area hogged by the Twitter logo. Just choose View➝New Guide, pick Horizontal, and then enter 1 in. Click OK and you’ll see the new guide appear. Anything you place in this area may appear behind the Twitter logo if the visitor’s browser window is small.
  
  
  
  
• Add a Solid Color Adjustment layer for your new background. Click the half black/half white circle at the bottom of your Layers panel (circled in the screenshot below) and choose Solid Color. In the resulting Color Picker, select the color you want your sidebar graphic to blend into as it transitions to the right. To experiment with colors later on, just double-click the Adjustment Layer’s thumbnail to reopen the Color Picker.
  
  
• Create a white box to represent the Twitter feed. This area is a fixed size and automatically centers itself within the visitor’s browser window, so it’s helpful to have for reference while you’re designing. Add a new layer at the top of your layers stack and then press M to grab the Rectangular Marquee tool. In the Options bar, choose Fixed Size from the Style pop-up menu. In the width field, enter 10.625 in and in the height field enter 8.125 in. Click once along the guide at the top of your document to create the selection, and then drag it to the center of your Photoshop document.
  
  
• Press D to set your color chips to black and white, and then press X until white becomes the foreground color. Fill the selection with white by pressing Option+Delete (Alt+Backspace on a PC) and then press Command+D (Ctrl+D) to deselect. Here’s what your document and Layers panel look like now:
  
  
  
  
• Add your graphics. Choose File➝Place to add your headshot and other graphical elements as Smart Objects (or copy/paste straight from Adobe Illustrator). Using Smart Objects is great way to experiment with the size of each element because Photoshop remembers their original dimensions and file formats (vectors are infinitely scalable so they’re a great choice).
  
  
• Add your text. Press T to grab the Type tool and type your name, company name, mantra, URL, and even your email address (because this is a graphic, your address can’t be snatched by spambots). Since you’ll be saving the graphic as a PNG, your text will stay nice and crisp.
  
  
• Crop the image to the graphics’ edge. Press C to grab the Crop tool and draw a box around your images. Press Return (Enter on a PC) to accept the crop. Alternatively, you can choose Image➝Trim and in the resulting dialog, pick Bottom Right Pixel Color, and then press OK.
  
  
  
  
• Jot down the hex value of your background color. Since you’ll need to set your Twitter background color to the exact same value, double-click the Solid Color Adjustment layer’s thumbnail to open the Color Picker and copy the hex value so you can enter it into Twitter in step 11. While you’re at it, pick out new colors from your snazzy new graphics for your links, right-hand sidebar, and righthand sidebar border. To do that, click your foreground color chip to open the Color Picker and then click any color in your document to see its hex value.
  
  
• Export a PNG for Twitter. Turn off the visibility eye of the layer containing the white Twitter feed box, choose File➝Save for Web, and then click the 4-Up tab near the top of the resulting gigantic dialog box. Pick PNG-8 from the format pop-up menu at the top right, and then see how your graphics look. If they look terrible, increase the Colors numeric quality setting until they look good. Press OK to exit the dialog box and save your image.
  
  

  ---

  Tip: If you didn’t add text or vector graphics, feel free to use a JPEG instead as it’ll create a slightly smaller file.)

  ---

  
  
  
  
  
• Upload your new graphic to Twitter and change your page colors. Log into your Twitter account, click the Settings link near the top right and then click Design. Scroll past the thumbnails and click the “Change background image” button. Next, click “Choose File” and navigate to your new sidebar. Turn off “tile background” and then click “save changes”. Finally, click “Change design colors” and click each swatch to enter the hex values you noted in Step 9.
  
  

Here's the final result:




As you can see, building your own sidebar graphic is a lot of fun, and it’s a great way to show a little personality. Just sit back and wait for those “OMG I can’t believe you’re so creative!” messages to roll in!

Helpful Resources:

• Free, “plain-English” videos on social marketing. To get up to speed on social marketing and media, try watching the “Plain English” videos from Common Craft. They provide easy to understand, jargon-free explanations in easily digestible videos. Topics include Blogging, LinkedIn, Twitter, Podcasting, RSS, Social Media, Social Bookmarking, and more. You can watch the videos for free at www.commoncraft.com.
  
  
• The Twitter Book by Tim O’Reilly and Sarah Milstein. Perhaps the most useful book on the topic to date, it covers Twitter basics, how to make the most of Twitter, the best tools for managing your tweets, and even (gulp) how to use it to promote your business. 231 pages, $19.99 from O’Reilly.