Customizing Twitter Backgrounds

You don’t have to be handicapped to be different, ’cause everybody’s different.
-Kim Peek

---

This article is part of a group of posts focused on optimizing ROI in Twitter use.

---

There are a great deal of Twitter users adopting a policy of consistent branding and positioning carried across from other Webspaces, e.g. Websites, eStorefronts, etc., by employing customized Twitter backgrounds. This would seem to be defined as best practice, as many marketers advise keeping the process of branding both homogenous and persistent transversely through availed channels.

Customized backgrounds lend an air of professionalism to one’s Twitter account. Also, followers tend to be encouraged when they see a touch of personalization and branding. By following these few easy-to-understand steps, you too can be the proud owner of an upscale, bleeding-edge Twitter site!

---

Here is an example image of a custom graphic (note: the photo and message in the middle normally will be covered by the Twitter feed and sidebar; it would only appear when users direct message [DM] from the site).

Grannelle on Twitter

---

Several factors must be considered when creating a custom background (the following suggestions and instructions are based on the use of Adobe® Photoshop and presume familiarity; if needed, the reader is referred to the Adobe® Photoshop Tutorials Website).

---

Size
There are two sides of the background which can be customized; right and left (note: the entire background will be one image). By keeping the graphic content of the right side width at 210 pixels (2.917 inches), and the left at 217 pixels (3.014 inches), all branding elements should fit within these two distances from the edges; height should be kept at 809 pixels (11.236 inches). The entire customized Twitter background graphic should be 1439 pixels (19.986 inches) width by 809 pixels (11.236 inches) height. As this is a Web document, resolution should be 72 pixels/inch. The resultant branding message will then be visible in both the “new” Twitter interface as well as the current version. While the space above the feed could conceivably be utilized in the overall creation of the graphic, this could prove problematic. Nevertheless, adventurous designers may wish to toy with this concept.

Background color
The option available that can be used to match the customized background color. It can be found in the Twitter navbar (located at the top of the site) by accessing Settings > Design > Change design colors. When the Change design colors option is accessed, and background, text, links, etc., are chosen, a color selector is provided for the user. In the selector is a dialog box wherein a hexadecimal value can be entered. This value is easily determined in Photoshop, and by matching the values no difference will be detected between the customized background and that supplied via the Twitter interface, as inequalities in coverage may occur.

Sidebar color
By matching the sidebar color to that of the background color (process described above), the information provided by Twitter in the sidebar section, e.g. name, number of tweets, following, followers, et al., will appear to float freely (note: by using a white background color [hex value = #ffffff], the feed itself will float; selecting both background and sidebar colors as white will eliminate page bordering altogether – this is how the Grannelle Twitter site has been fashioned [when employing this method, the sidebar border {appears as a delineation between the feed and the sidebar} can be eliminated by changing the color value to white also, if desired]).

Text and Graphics
All data such as hypertext, phone numbers, etc., are part of the total graphic. They cannot be accessed, copied, or pasted. However, by providing matching information accessible from the sidebar, such as that supplied for the Bio and Web headings (found in the uppermost portion of the sidebar), constancy can be achieved. Repetition of use of the profile picture is also helpful for uniformity. Twitter text and link colors can be selected from the Change design colors preferences to accent those in the customized background, though care should be taken to use contrasting hues. Bear in mind that users experiencing color vision deficiency (color blindness) may encounter difficulty in distinguishing certain color selections.

Total File Size and Format
The total size of the file must be smaller than 800k. GIF, JPEG (JPG), and PNG file formats are acceptable.

While the customized Twitter background graphic can be tiled (repeated across the page), it is not suggested for this method.

Using Photoshop, simply create a document with the aforementioned measurements, building content for the left and right sides of the graphic and choosing background color. Include text information, pictures, and other desired images and illustrations. Adopting a consistently matching background color, create a new document, again with previously described dimensions. Copy and paste the left and right (merged) images onto the appropriate sides of the image. Save the final product. The finished background can be uploaded in the Design section, Change background image, following the same procedure as formerly instructed.

---

By playing with and trying out these ideas, users can have a polished and professional Twitter site!