Category: Projects

Customize Your Background for the New Twitter

Last month, Twitter unveiled a total site redesign. The new Twitter homepage is robust, more like a stand-alone application, and offers support for multimedia, keyboard shortcuts, and easy access to various types of content.

The new design also has different dimensions (originally based on the golden ratio) and treats backgrounds in a slightly different way. The result is that a carefully customized Twitter background that looked fantastic on the old Twitter, may not work so well with the new design. In many cases, the best solution is to create a new color scheme or background design to fit into the new parameters.

As more and more users are gaining access to the new Twitter, we thought it would be a good time to revisit the area of Twitter customizations. Fortunately, Twitter now offers some fantastic theming tools to make the process less of a chore, and we’ve created some Photoshop (PSD) files mapped to the dimensions of the new Twitter to help give you a head start.

Plan Your Layout

The new Twitter utilizes a fluid layout, meaning that the browser window or screen resolution can impact the width of some of the columns, as well as how much of the background image is visible.

Check out this image that we created to show off the layout of the new Twitter. Although resized to fit this blog post, this screenshot was originally taken at a resolution of about 1440 pixels wide.

There are a few points you need to keep in mind when designing or altering your Twitter background to fit into the new site:

• The new design has a constant top toolbar that is 40 pixels tall and spans the entire length of the web page. For most designs, this shouldn’t interfere with any of your elements, but be aware that this bar is always there. Also note that there is a 20 pixel tall space between the toolbar and the start of the two columns.
• The spacing to the right and left of the columns is fluid and will vary based on the resolution and size of the browser window. The spacing is also significantly reduced from the previous design. As an example, in a 1280×800 browsing window, in the old design, there were approximately 251 pixels on each side of the Twitter columns. On the new design, that is reduced to 112 and 113 pixels respectively.
• The Twitter sidebar on the right is now semi-opaque. The opacity is about 75%, which means that depending on what color you choose and the color or style of your background image, that can impact readability.
• The timeline column on the left is always 540 pixels in width, but the sidebar can vary. After a certain resolution (about 1130 pixels), it becomes fixed at 500 pixels wide, but on smaller screens or in smaller browser windows, it can be as small as 380 pixels.
• Because of the way the columns are now laid out, background images should probably only be tiled if they are patterns or seamless. Larger images are much better off transitioning to a solid color rather than repeating.

Use the Built-in Twitter Theme Tool

The excellent Themeleon tool from COLOURlovers has been updated for the new Twitter. You can access the tool by either going directly to the site or by selecting Themeleon from the sidebar in the Design section of the Twitter settings page.

You can login to Twitter in the app and customize your colors and backgrounds on the fly. The great thing about the tool is that until you hit ‘save,’ none of the changes take effect. Think of this as a great way to test out color combinations and various motifs.

COLOURlovers has provided a number of quality pre-built themes using backgrounds and designated color palettes, but you can upload your own background image and set your own color schemes. You can also browse the very large collection of COLOURlovers patterns and tiled background images. One of our favorite features of this tool is that if you use one of the pre-built patterns, you can apply a color scheme that will also change the color setup of that pattern.

COLOURlovers also has a ton of color palettes to choose from and to play with. If you’re already a COLOURlovers member, you can access your own palettes or palettes you follow or have marked as ‘loved.’ It’s a free community, and given the difficulty in actually discovering new color palettes in the theme creator, we recommend signing up so you can favorite your own schemes.

Find Your Perfect Palette

COLOURlovers is a great resource for color fans, but there are tons of other great resources on the web to get the perfect color combination.

We’ve written about some of our favorite web tools for working with color, but here are a few more:

• Color Hunter – This site offers up some palettes based on photographs uploaded on the site. You can also search through palettes and upload your own photograph to find the perfect palette.
• ColorCombos.com – This site has a great listing of user-generated color palettes and you can also test your combinations out to see how well they work together.
• PHOTOCOPA – PHOTOCOPA is another tool from COLOURlovers and it helps pick out the colors that are in an image. What’s great about this tool is that you can not only upload a photo, but you can also link or search for a photo from Flickr. Once you find your colors and create your palette, you can save it in your COLOURlovers library, which can then be accessed in the Themeleon tool.

Test Your Resolution

Because the new Twitter layout is fluid, how things look can vary based on the size of your browsing window. It’s a good idea to test how your background or color scheme looks at different screen sizes.

Fortunately, there are free extensions available for all the major browsers that make resizing your browser window a snap.

• Firesizer for Firefox – Firesizer is a simple add-on that shows up in the bottom status bar of the Firefox browser. Not only does it show you the current dimensions of your browser window, but right-clicking the resolution lets you select a pre-defined browser size. Your window will be resized as soon as you select your choice. You can customize the extension to add your own pre-set sizes.
• ResizeMe for Safari – ResizeMe lets you quickly change the size of your browser window. It works as a toolbar button and clicking the button can either auto-change the size to a selection of your choice or give you the option to select various sizes.
• Window Resizer for Chrome – This extension shows up in the Chrome toolbar. Clicking the button lets you select from a dropdown list of various browser sizes or device types. You can customize this listing. It’s got a great interface and is really easy to use.

Test it Out in Photoshop

Lots of designers like to manipulate their backgrounds or color schemes in Photoshop or other image editing programs. We understand. While there are plenty of PSD files created for the old Twitter layout, we had a hard time finding any good PSDs for the new Twitter.

Thus, we rolled up our sleeves and created this collection of PSD files. They are in resolutions of 1024×768, 1280×800, 1440×900 and 1600×1200. If you need a different variation, let us know in the comments and we’ll see what we can do. The guides and layers are all editable so you can customize these files for your own uses.

You can download these files at http://drop.io/mashnewtwitter.

(Via Mashable!.)