Twitter Profile Header Image Template for Photoshop

by

You may have already heard that Twitter announced the addition of header images for profiles today, but what if you don’t want to just upload a standard 1252×626 header image? Well, I played around with it for a bit and decided to throw together this down and dirty how to and whip up this Twitter profile header image template for Photoshop or Gimp.

Let’s talk about the quirks first.

Example Customized Twitter Profile Header Image

  1. The image upload minimum is 1252×626 pixels, but the display is actually 520×260 pixels with a thin dark gray border and rounded top edges. Since you’re not designing at a 1 for 1 size, it will make matching up the rest of the template difficult. See the green example to see what I mean.
  2. The profile picture is centered with what appears to be a rounded 4 pixel border. (Display size roughly 178×178) And, as Derek Pillie pointed out, they all get the gradient added.  This makes matching backgrounds, for a transparent look, an issue unless you now change your background.
  3. The name, username, description, and location are all centered and will of course be dictated in part by how much data exists. *I have not tried playing with left, center, or align right overall design settings yet, but I see no indication or examples of that changing this area.
  4. I couldn’t find any language specifying what could, or could not, be in the header. In other words, prepare for a lot of self promotion, calls to action, contests, and general garbage clogging up headers. This does of course free you up to add a phone number or other tactful and useful information in.
  5. *UPDATED* There is an issue, as pointed about by Chuck below, on how the mobile and tablet versions display. Needless to say, there is no way to correct for this in the template. Just be aware of it and try to review your profile on a mobile device before putting a stamp on your work. Certain types of Twitter header layouts are going to be more prone to issues than others. Check mobile and tablet header samples, in both iOS and Android flavors, here.

To make things a bit easier, at least for those of you with Photoshop or Gimp, I created this Twitter header template (sample of cheat sheet below). If you don’t have Photoshop or Gimp you can use this full size .PNG cheat sheet. If you use the .PNG version, you will just have to overlay it via whatever program you are using for position hinting. Please note this is not my most precise work ever, but it worked well for the variations I tested with. It’s my hope that this will help you get more creative with the available space and serve as a reference to keep your text areas free of things that will inhibit legibility of the Twitter header. By all means, let me know if you spot any issues and feel free to share it with others. There are plenty of other step by step Twitter header examples and how-to’s, so I will just point to Twitter’s own info about how to add a header photo. You won’t see a change to the new profiles UNTIL you upload a header image.

Twiter Header Template and Cheat Sheet

Did you find this helpful? How about being a peach and sharing it out to Pinterest for me. Need some internet marketing help? Give me a buzz at 877.817.4442.

9 thoughts on “Twitter Profile Header Image Template for Photoshop

  1. Angelique

    Thanks so much for figuring out the size of that profile photo, and the banner. It’s SO HARD to make a decent banner with that stupid gradient. What were they thinking?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>