OK, if you’re reading this it means you have been trying to compose your background and everything got messed up when you tried to upload it, also all of your images got caught behind the Twitter box.

Alas my friend, here is the answer to your prayers. In the following tutorial you will find the exact measures of a background that doesn’t crop before it should (when viewing at 100% in your browser) and also where to locate your designs in your background.

As you see, everything is in its place and nothing is getting cropped. Now we are going to show how you suppose to do it:

1. Create your canvas

For start, go to File>New and create a canvas with the following parameters: 2725 px X 1843 px, RGB color mode and 72 dpi. Make sure to enter the exact measures (width and height), otherwise it won’t work. We choose this measures so the background will cover even the largest screen resolution available, which is the next thing we are going to talk about.

2. What about the screen resolution?

As most people know, not all computers display the same amount of information in terms of pixels. A few years ago the most common thing was to find computers displaying 800 pixels to the width and 600 pixels to the height. But now those values have changed. We now can find computers with widescreen resolutions, capable of display around 1600 pixels width per 1200 pixels height. There are four main screen resolutions currently, so you must work all the time preventing that your design will be shown perfect in each one of this resolutions. The four main resolutions are 800 x 600 (this resolution is entering into disuse), 1024 x 768, 1280x 1024 and 1600 x 1200.

There is also another resolution to consider, which is the widescreen resolution. The most common resolution for this class is 1440 x 900 pixels. Its very important to take this resolution present because widescreen displays are finding their way in the tech market this days.

Twitter was designed to work with resolutions over 800 x 600, lower resolutions will require horizontal scrolling. Regarding the vertical measures. Most people tend to add a series of toolbars to their browsers, reducing considerably the vertical space available. We consider that the minimum vertical measure to ensure a full exposure of your design is 525 px. It’s very important to remember that the background image will always change horizontally, but never vertically, the image will always remain the same and only the Twitter area will be scrolling.

We are going to work for a resolution of 1024 x 768, which currently is the most used by the web users around. Coming up next, we are going to show you the main measures of the Twitter area at a 1024 x 768 resolution.

The left area is the part where we recommend for you to place the most information, such as the logo, bio and contact information. We suggest to leave the right area without any information. We also recommend to start placing the information below the header space, because in slow resolutions, the Twitter logo will overcome that area.

Use the right section to place some extra information. We can’t ensure you that the area will be the same 115 px of the left one, so if you’re going to place something, keep it minimal. After the 115 px of the visible area, both left and right side, there must be none information displayed, because people with lower resolution than yours will not see it. The same happens with the vertical area. All information displayed beyond the 525 pixels will be not seen by many users, so be careful with that.

Another thing to remember is the connection. Keep always the resolution at 72 dpi and try that your image won’t exceed the 500 K, otherwise, the visitor will get bored while the site charges and you will lose a client.

There is a website that could be very helpful before you upload your new background, it’s called Ranks.nl and offers the possibility to see how a website is seen at different resolutions, that way you can make sure that you’re doing the things right. After uploading the background you can go back to the site and check how people are perceiving your Twitter account.

Now let us show you how our Twitter account looks at different resolutions.

800 pixels X 600 pixels.

1024 pixels X 768 pixels.

1440 pixels X 900 pixels, widescreen resolution.

1600 pixels x 1200 pixels.

With the tips that we just gave you, we are positive on believing that you will be able to create a pretty cool background for your Twitter account, ready to be seen from different screens. Another things you need to consider are to not display too much information, because the visitor will get overwhelmed and will probably run away. Try to generate an identity all around the website, remember that the background is more than just an artwork, it’s a space to show to people how you are.

3. Customizing the template

OK, as you can see on the Twitter site, the template is formed by 3 different spaces. The 2 at the extremes are free for you to place your artwork and the middle one will be displaying all the website information. What we need to do is to generate a template that we can use at any time while making Twitter backgrounds.

First we need to define some guides to create a 1024 x 768 area, in which we will place all the important information, the rest should be artwork space. Go to View>rulers, you will now see the vertical and horizontal rulers, ready to assist you.

Now we need to define the area, hold click over the horizontal ruler and move it down until you reach the 768 pixel, you will probably need to zoom in to be precise.

Zoom out and you will see how the canvas is now pointed at the 768 px.

Now hold click over the vertical ruler and drag the line until you get to the 1024 pixel.

Now we have defined the vital area, outside this there can be not information displayed.

OK, now grab the rectangle tool and draw a shape exactly over the guides, we suggest to leave it with a blank fill.

By default, Photoshop builds shapes as a path. Go to Edit>free transform path and place it right in the middle of the canvas, that way we will know that everything around is blank space ready to be filled with artwork,

Now you need to define the two missing guides and we are done. Drag them from the horizontal ruler, one at 115 px from the beginning of the rectangle (NOT THE BEGINNING OF THE RULER) and another at 878 px. You can use the ruler tool to determine easily this measures.

Now you have the template ready to assist you every time you need to design a Twitter account. We hope that you find this information useful, we will see you again.