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).

Sample customized Twitter background

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).

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!


About Grannelle

eMarketing Scholar
This entry was posted in Education, Online Marketing, Series, Social Media and tagged , , , , , , , , . Bookmark the permalink.

8 Responses to Customizing Twitter Backgrounds

  1. Pingback: Customizing Twitter Backgrounds | Tout sur Twit...

  2. Pingback: Customizing Twitter Backgrounds | techno and so...

  3. Pingback: Customizing Twitter Backgrounds | Social Media ...

  4. Pingback: Customizing Twitter Backgrounds | The Digital A...

  5. Paul says:

    What does make me happy is that there are a lot of people taking advantage of either paying to have their own background made, downloading a free pre-made background, or making their own. I guess all these posts on emphasizing how important having one for branding purposes has gone far.


  6. Nile says:

    Normally I do save Twitter backgrounds in PNG and then a copy in JPEG, mostly due to the fact that some of the more detailed backgrounds were over the allotted amount Twitter allows in PNG format. I do like the DM message example you gave.

    For a lot of people I deal with, graphic design is not their forte, and even using GIMP or Microsoft paint is a challenge for them. Then, they are a bit confused on how to change their background on Twitter to their new designed one.

    What does make me happy is that there are a lot of people taking advantage of either paying to have their own background made, downloading a free pre-made background, or making their own. I guess all these posts on emphasizing how important having one for branding purposes has gone far. 😀


    • Many thanks for your insightful observations, Nile.

      For those unfamiliar w/ Nile’s work, she is a highly accomplished authority on online community matters, as well as a designer/developer extrordinaire; she offers customized Website and blogsite composition and architecture. GSM is honored to have her visit, and she is most certainly welcome to stop by again anytime!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s