Perfect Your Twitter Header Image: Download Our Mobile-Friendly Photoshop Template

Tara Hornor

If you’re an avid Twitter user like me, you probably noticed the email this week announcing Twitter’s latest efforts to improve engagement. After losing marketshare to Instagram, Twitter responded by giving us the ability to create our own header image, as well as control over the link color and other bits of design opportunity. This gives us a lot of additional control from a branding standpoint!

But, you have to be careful. I threw my logo up about two minutes after I received the email, and I noticed hours later that the desktop version and the mobile version are very different. For example, on the mobile version my logo was partially covered by my profile pic. So, I decided to create a template so that I could design my Twitter header with precision — because that’s the kind of designer I am…and so are you if you’re reading this.

Let me walk you through the template I created, so that you can jump right in and start using it in just a few minutes. As a sidenote, I don’t have an Android device, so I’m not sure if the Twitter app on your Android-based phone has the same dimensions as the iOS equivalent that I used.

Twitter Header Dimensions

In the desktop version of Twitter, you’ve got to deal with two sets of dimensions — and that’s assuming Android’s image sizing is the same or close to iOS for our purposes. The image proportions are the same; the desktop has the dimensions of 520 x 260 pixels, and iOS uses 320 x 160 pixels — a 2:1 scale in both cases. But, don’t let this fool you. Your profile picture changes in terms of scale, so on the desktop version you have a different safe area for your design elements than that of the mobile version. Before we jump into that, here’s a look at the image sizes:

Desktop version of Twitter

iOS version of Twitter

Other Considerations

Twitter puts a bothersome gradient across your background image, so be prepared to deal with that frustrating reality. My template takes this into account, so you can design with a gradient over the top of it.

Also, as mentioned earlier, the profile pic expands in terms of scale between the desktop and mobile version of Twitter. Here’s what I mean:

In the desktop version, the profile pic is approximately 82 x 82 pixels, including the frame, on a background that is 520 x 260.

On the desktop version of Twitter, the profile pic is relatively small

Yet, on the iOS version, the profile pic is considerably larger (relative to the background) at 78 x 78 pixels. The mobile background shrinks to 320 x 160 pixels but maintains it’s 2:1 proportion. Also, the profile pic is positioned slightly higher on the background compared to the desktop layout.

The profile pic in the iOS version of Twitter takes up a lot more space in the design area

The moral of the story being that you have to design with both of these profile dimensions in mind.

Using the Template

The template has several layers worth mentioning. With all of the folders expanded, here’s the big picture of what you’ll have to work with:

Basically, you’ll put your design elements like logos and the like in the “Your-Design-Hide-Everything-Else” layer, toward the bottom. The other layers are available for you, so you can hide and expose them as needed for testing purposes.

Right above that folder is the “Profile-Images” folder. You can use these based on the design type you are testing. I recommend always keeping the iOS version visible, but you may want the desktop version for your own design, so I included that as well.

The “Text-Area” folder contains the section that is 442px wide where Twitter puts your bio text. I’ve done my best to model the typography they use, including font sizes extracted from the CSS. Just hide the “red text-area=442px” layer to see the design without the placeholder box.

The uppermost folder contains everything but the “Your-Design” layer and the “white-bg” layer. So you can hide this folder to see the final version that you’ll save and upload.

Click here to download the Twitter Header Image Template.

Hopefully this template will help you with your Twitter header image as much as it helped me. Try it out and let me know how yours turned out. Were you able to use this template to quickly get your design just right?

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.hotyogadoctor.com/ Robert Scanlon

    Thank you very much Tara – not only is the template handy and detailed with useful design layers, but the blog post explains it all succinctly – thank you for this very helpful timesaver!

  • http://www.the3dpalette.com Heather Salamone

    Thank you, I have been getting more and more into Twitter, and now I am Twittering for clients also. This is a very helpful template! I can’t wait to get it on there and brand Twitter to my own site!
    The 3D Palette, custom website design
    http://www.the3dpalette.com
    Heather

  • http://caseypalmer.com Casey E. Palmer

    Thanks for this — going through a rebranding exercise and I want my Twitter page to look the best that it can, so this’ll be useful :)

  • http://www.wayfresh.co.uk WAY FRESH

    Thanks Tara, was just trying to wade through all the logo requirements for Twitter and this is perfect.

    Thanks, Simon

  • http://essentialsoftheonlinebusiness.com Chris Trynkiewicz

    That’s really handy. Thanks, Tara!

  • https://plus.google.com/u/0/117883511520701899763?rel=author Tara Hornor

    Glad everyone found this to be so useful! :)

  • P Schuster

    Tara- I love that you include an HTML file of the written tutorial and images with the zipped working files. It allows us to collect a great tutorial to consume when we can make the time. Thanx!

  • http://www.pixelfreeway.com/ Ian

    Excellent PSD template thanks Tara :)

    I have created my one here using your template:
    https://twitter.com/TheFunnyCartoon
    I have an Android phone and checked it on the mobile browser and it looked fine.

    If anything, I would say the Android profile image version is closer in size to the desktop one.
    Not as big as the iOS-profile-pic-frame in your template. I haven’t got an iOS device to check it.

    One thing I found was even saving it using a maximum quality jpg, Twitter would compress it too much causing blockiness, so saved for web in PNG-24 which had better results.

    Thanks heaps, was a very helpful template,
    cheers, Ian

    • https://plus.google.com/u/0/117883511520701899763?rel=author Tara Hornor

      Nice! Your header turned out great!

  • http://www.twitrcover.com/ twitrcover

    check out http://www.twitrcover.com for twitter covers , headers!

  • http://www.twitterheaders.co Kevin

    I like to use http://www.twitterheaders.co , they have a free header creator tool too.

  • http://99tweet.com Marinna DiCapinni

    Great tip! Thank you this is what i really looked for. I google’d a great header site it is called http://99tweet.com it’s faster than 2 seconds