Blog Details

Twitter is slowly changing its users to a new design format. Here are some guidelines for creating a background in the new design as well as a Photoshop template that you can use to create your own background. (Directions are in the .psd file.)

About this Twitter Design Template

  • It is a Photoshop CS4 file. 
  • It is a blank design - be creative!
  • It has guides for several standard browser sizes so you can see how your design will vary.
  • Instructions are listed where "Tweets" would go when you open the file.
  • I used this template to create the examples below. Many of the examples are "Don'ts" - so pay attention!
  • Don't hesitate to contact me (awysocki@blueboltsolutions.com) with any questions!
Download Template

 *Registration required

Tips for Designing Twitter Backgrounds

NOTE: Your background image will “stick” to the top left corner of the screen, regardless of window size and scrolling.

  • One option is to use a smaller image or graphic and tile it to make a pattern. This will look good no matter what size screen your viewer has.

 

  • You can also use a large image (1920px wide by 1200px tall), that still looks good when cropped to the top left 1024px by 768px of the image. This allows for the smallest to largest typical screen resolutions as surveyed by w3schools.com.

 

  • Try to use an “ambiance” type of image, that still gives the same effect regardless of what pieces are blocked out - like stars, clouds, landscapes, etc. This is why patterns work well with the new twitter design. This cat image, while adorable, does not work well for a twitter background as screen sizes change.

 

  • Do not try to design around the centered twitter content. As viewer resolutions and screen sizes vary, this will leave your design floating to the left or right of where you actually want it.

 

  • Be careful if designing a left column, as was popular in old twitter designs. You have only about an 80px wide space to work with for a 1024 x 768 resolution! If you try to design within this 80px column, your page will look kind of empty in larger windows.

 

NOTE: Take advantage of the sheer white background.

  • There is a white background that contains the twitter elements and is set at about 35% opacity.
  • People will be able to see parts of your design “underneath” these twitter elements. This lends itself nicely to repeating patterns (as long as the pattern isn’t overwhelming itself).
  • Your background image, top navigation bar and white transparent background stay static as you scroll, but the inner twitter elements move. This means your design becomes visible through the sheer container as a viewer scrolls down your page.

Best of luck in your twitter design! Please tweet your results to @BlueBoltSol.

Recommended For You

Wondering if it's possible? Everything is possible with a little CSS magic!