The new Twitter homepage is more like a stand-alone application, and offers support for multimedia, keyboard shortcuts, and easy access to various types of content.
The new design has different dimensions 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 weve
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 shouldnt
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 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 Designsection 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 youre already a
COLOURlovers member, you can access your own palettes or palettes you
follow or have marked as loved. Its 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 Palette
COLOUR lovers
is a great resource for color fans, but there are tons of other great
resources on the web to get the perfect color combination.
Color Hunter offers palettes based on photographs uploaded on
the site. You can search through palettes and upload your own
photograph to find the perfect palette.
ColorCombos.com 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 from COLOURlovers helps pick out the
colors that are in an image. Whats 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. 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. Its 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 is a simple add-on that shows up in the bottom status bar of the FirefoxFirefox
browser. Not only does it show you the current dimensions of your
browser window, 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 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 shows up in Chrome
toolbar. Clicking the button lets you select from a dropdown list of
various browser sizes or device types.
Its got a great interface and is really easy to use.
Test Photoshop
Lots of designers like to
manipulate their backgrounds or color schemes in Photoshop or other
image editing programs.
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.
Created PSD
files. They are in resolutions of 1024×768, 1280×800, 1440×900,
1600×1200, 1920×1080 and 1920×1200.
The guides and
layers are all editable so you can customize these files for your own
uses.
