The most complicated part of Twitter design is creating appropriate images in terms of dimensions and file size. It is important to be consistent with visuals, as guest lecturer April Schroeder of Liquid Creative Studio pointed out in her presentation last week.
The Twitter profile design is made up of three images: The profile image, the header image, and the background image. Below is a screen capture of the NYT Bits Blog Twitter page:
Twitter Image Dimensions and File Size
I suggest beginning your design with the profile image; this square image appears beside all your tweets. It’s a good idea to go with your organziation’s logo for repetition and visual recognition. Keep in mind that this image is relatively small; do not include taglines or other text that viewers cannot read. Twitter does not specify dimensions. In lab we created an image in Photoshop that was 200 pixels by 200 pixels (dimensions). As far as file size, with an image of such small dimensions, using Photoshop’s Save for Web, this should easily come in under 20 kilobytes.
Twitter Header Image Dimensions and File Size
The header image is a relatively new feature on Twitter. Twitter specifies both dimensions and file size:
Create a new file in Photoshop with the dimensions 1252 x 626 pixels. In lab we dragged the photo we wanted to use onto this new file and used the free transform tool (“Ctrl” and the “T” keys on a PC) to appropriately scale the image. Notice that 5MB is the maximum file size (there are 1000 kilobytes in a megabyte). Using the Save for Web option, your file should definitely come in far smaller than this (shoot for under 200K).
Twitter Header Image Design
You need to think holistically here about how the header will work with both your profile and background images. If the background image is busy, keep the header image restrained and vice versa.
Keep in mind that the profile image will appear in the upper center part of the header image; you do not want to choose a header image that will look odd if this area is obstructed by the profile image (for example, you do not want the profile image to cover a face in the header image). In the example below (using a mockup with a Shutterstock image), notice the use of directional force: the woman’s eyes look toward the profile image.
Twitter Background Image Size
Yikes. It is important to understand that his is not a one-size-fits-all situation, kids. You can always avoid the image-size headache and simply choose a solid color for your Twitter background. It can look nice, particularly if you have a lot going on in the header image.
I had to do a lot of searching online to figure out background image dimensions. The most useful source I found was on the Profile Rehab site. According to the above source, a background image that is 2500 x 1600 pixels accommodates all monitors. The smallest size is 1600 x 900 pixels. Standard screen resolution is roughly 1024 pixels wide and 768 pixels high (this figure also varies depending on the source). So, a 1600 pixel background width would work for that. However, many people are still using desktops with large monitors. If you create a smaller background image, you run the risk of having your image stop abruptly on these larger monitors (the image cuts off from the bottom and the right edge). So, if you use a background image with smaller dimensions, it is important to fade the right and bottom edges to avoid this abrupt line.
In lab we created a background file with the largest dimensions: 2500 by 1600. You will notice in this screen capture of Photoshop that I have drawn two vertical rule guides to indicate the Twitter feed area in the center (roughly 870 pixels wide) as well a horizontal rule guide to indicate what would be the bottom of a browser with the standard screen resolution height of 768 pixels.
It is important to keep in mind that we have created the largest possible background image dimensions. If you want something to show up, particularly a call-to-action (such as a web URL), this element needs to go in the upper left hand corner. Notice what happens when we upload this image to Twitter (after saving for web; background image file size cannot exceed 2MB!):
This is a screen shot on a 13″ Mac laptop.
Because this monitor is smaller, the text in the upper left appears much closer to the Twitter feed and the image that you see in the bottom right hand corner in the previous Photoshop screen capture disappears entirely. The best way to ensure a good background is trial and error. Just upload, test on various monitors, and edit accordingly (it took me three tries to get the web URL to appear correctly!).