Branding Yourself on the New Twitter

Pariah Burke

If you’ve signed into your account on the Twitter website lately, you should have seen a popup inviting you to “Meet the new Twitter.com.” The recently redesigned Twitter Web interface is a radical change that will nullify the carefully crafted and information-laden background images many designers created to market themselves and their websites. To see what I mean, look Figure 1, which is my Twitter Web interface on the old and new Twitter. Notice the narrower space the new Twitter affords for the sidebar-like column of information embedded in my background image. Both images were taken at the common 1280×1024 screen resolution (minus browser chrome).
Figure 1: My Twitter Web interface in the old version (first screenshot below) and the same background in the new version (second screenshot below). Click on the image to see a larger version.


In both versions, the main timeline column (the white one in the figure above) is a fixed-width of 540 pixels. However, the previous Twitter used a fixed-width layout with a sidebar that was a constant 200 pixels wide. This new version is a liquid layout: The double-column sidebar varies in width from 380 pixels to 500 pixels, depending on the screen resolution and the width of the browser. Thus, even at its smallest size, the new Twitter takes up 180 more pixels horizontally than did the old, cutting into those richly designed identity backgrounds.
And those are just the horizontal changes. There are also height and vertical positioning changes, and there’s now a toolbar that stretches across the top of your page. Finally, on browsers that support CSS shadows, the top bar has a 3-pixel drop shadow below it that tints artwork directly beneath the bar.
In other words, it’s time to redesign your Twitter profile background. To make it as easy as possible, just follow the steps below and download the templates I’ve provided, which are compatible with Photoshop and Illustrator CS3, CS4, and CS5.
Designing in Photoshop
If you prefer to work in Photoshop, download and unzip the NewTwitterTemplate_Ps.zip.
After unzipping the file, you’ll have the NewTwitterTemplate.psd template; open it in Photoshop CS3, CS4, or CS5. You should see the image in Figure 2.
Figure 2: The initial view of the template shows all layer groups activated. Click on the image to see a larger version.

The template contains layouts for six of the most common screen resolutions: 1024×768, 1280×1024, 1440×900, 1600×1200, 1680×1050, and 1920×1200 pixels. Outlines and crop marks define the limits of each resolution, while white boxes represent the main timeline column and black boxes represent the Twitter sidebar. You can change the color of the sidebar, which I’ll get to shortly.
1. First, choose a resolution to work with. There are six layer groups on the Layers panel (see Figure 3).
Figure 3: The layers and layer groups in the template.

Within each group is a smart object containing the resolution-defining outline and cropmarks (don’t edit this layer!), as well as a pair of shape layers, one each for the Timeline and Sidebar. Click the layer visibility eyeball beside all the layer groups you don’t want visible. Make sure to leave the ungrouped layers “Top Bar,” “BG IMAGE HERE,” and “Color Fill” visible.
2. Click the expansion arrow beside the layer group you’ve chosen to work with to reveal the three layers inside the group. Double-click directly on the black square in the Sidebar shape layer to open the color picker (see Figure 4). Using any of the controls and ramps in the color picker, or by entering a color value in HSB, RGB, Lab, CMYK, or HTML hex code (the bottom field identified by a pound sign), set the background color of your Twitter profile’s sidebar. Click OK when you’re satisfied and you’ll see the rounded rectangle sidebar change to the color you’ve chosen.
Figure 4: Picking a sidebar background color.

Don’t bother changing the background color of the Twitter timeline; it must always be white.
3. What kind of page background would you like? If you’d prefer a solid color page background, double-click the blue square on the Color Fill layer to select a background color with the Color Picker.
If you want to insert an image you already created, select the “BG IMAGE HERE” layer and go to File > Place and select that image from your computer. The image can be in any standard format: PSD, JPEG, PNG, AI, PDF, and so on. Depending on the file type, you may have to choose certain options before actually placing the image into the Photoshop document.
Once the image lands in the document, you’ll see a bounding box defining its size. Use the control corners of the bounding box to position and/or resize the image so that it fits within the resolution crop marks, aligned to the left edge. When the placed image is the way you want it, press Enter/Return to commit the changes. Note that Photoshop will place the image automatically as a smart object, which means you can resize and reposition it non-destructively at any future time.
How does your new Twitter layout look? Is there enough space at the resolution you selected to see the background color or image sufficiently around the sides? Do the colors work together?
4. Try the other resolutions to see how your profile might appear to other people. Change the colors of the Sidebar shape layers and either resize the background image to fit within each resolution’s cropmarks, or, better yet, duplicate the background image layer and resize and reposition the duplicate for each new resolution.
Designing in Illustrator
Designing your new Twitter new background is a breeze in Adobe Illustrator. Download and unzip the NewTwitterTemplate_Ai.zip. After unzipping you’ll have the NewTwitterTemplate.ai template; open it in Illustrator CS3, CS4, or CS5. You should see the image in Figure 5.
Figure 5: The initial view of the template shows all layers activated. Click on the image to see a larger version.

Like the Photoshop template, the Illustrator version contains layouts to enable you to design for and preview your Twitter background in six of the most common screen resolutions : 1024×768, 1280×1024, 1440×900, 1600×1200, 1680×1050, and 1920×1200 pixels. Outlines and crop marks define the limits of each resolution while white boxes represent the main timeline column and black boxes represent the Twitter sidebar. You can change the colors of the sidebar box, and I’ll get to that shortly.
1. Choose a resolution to work with from the top-level layers on the Layers panel (see Figure 6). Click the layer visibility eyeball beside all the layer sets you don’t want visible so you can focus on the chosen resolution. Make sure to leave “Topbar (Fixed)” and “BG IMAGE HERE” visible.
Figure 6: The Layers panel showing the resolution sets and some of the objects in the template.

2. Click the expansion arrow beside the layer set you’ve chosen to reveal the objects on that pixel-value-labeled top-level layer. There are four objects, three of them locked.
The first object, “Timeline,” is the white, rounded-corner path that represents the timeline column of your Twitter user interface. Twitter does not allow changing the background color of the timeline column, so there’s no real point in modifying the “Timeline” object. Also locked are “Cropmarks,” which describes the area of the Twitter profile at the specified resolution, and a third object that serves as the label for the resolution at the bottom-left of each set of cropmarks. Leave these objects alone.
3. The fourth object in each resolution set top-level layer is the “Sidebar” path. Black by default, you may want to select the path and, using either the Color or Swatches panels, change its color to suit the theme you’re building.
4. What kind of page background would you like? For a solid color page background, select the orange path on the “BG IMAGE HERE” layer and choose a new color from the Color or Swatches panel.
If, however, you’d like to insert a drawing or image you already created, select the “BG IMAGE HERE” layer and go to File > Place and select that image from your computer. The image can be in any format Illustrator understands: AI, PDF, PSD, JPEG, PNG, and so on. Depending on the file type, you may have to choose certain options before actually placing the image into the Illustrator document.
Once the image lands in the document, you’ll see a bounding box defining its size. Use the control corners of the bounding box to position and/or resize the image so that it fits within the resolution crop marks, aligned to the left edge.
How does your new Twitter layout look? Is there enough space at the resolution you selected to see the background color or image sufficiently around the sides? Do the colors work together?
5. Try the other resolutions to see how your profile might appear to other people. Change the colors of the “Sidebar” paths and either resize the background image to fit within each resolution’s cropmarks, or duplicate the background image object and resize and reposition duplicates for each new resolution.
You now have your new Twitter new background and color scheme, proofed at different resolutions, and ready for export and use on Twitter.
Speaking of Twitter, do you follow CreativePro.com? We’re @CreativeProse.