Lab Week 13: Twitter Image Design

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:

New York Times Bits Blog Twitter

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:

twitter header image dimensions

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 header 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.

Twitter background
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.

Twitter background image

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!):
twitter_browser
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!).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s