How to Design the Perfect Twitter Header Image

by on 20th September 2012 with 76 Comments

screenshot

Twitter recently rolled out an updated design for profile pages, which allows you to insert a new “header photo” that sits on top of your feed, much like Facebook’s timeline cover image.

Today we’re going to dive in and see some examples of good Twitter profile images and discuss how you can design your own. I’ll even toss in a free template so you can get started right away.

Free Template!

Before we dive into the article, here’s a handy free template that you can use to design your own Twitter header image. The file provided is a PSD created in Photoshop CS6.

Grab your free PSD: Click here to download.

screenshot

How to Use It

To use this template, simply replace the background image. The UI layer group is meant to help you get a good idea of what the image will look like once it is implemented on the site. Hide the grouped layers before saving.

Meet the New Twitter Profile

Once upon a time, Twitter was a text-centric service. These days, they’re constantly seeking to improve the visual experience by integrating multimedia features and support.

The most recent profile redesign pushes this idea through more prominent photo streams and a brand new feature: the Twitter profile header.

screenshot

As you can see, this new image sits on the top of your recent tweets and holds your profile image as well as some brief text about you. To help launch the new profiles, Twitter seems to have partnered with NBC, so lots of our examples will be from their various accounts (not all users have upgraded yet).

screenshot

Ultimately, this isn’t adding a ton of design work to your profile, it’s simply one extra image. However, even one little image can bring lots of questions, so I’m here to answer a few that you might have as you approach building your Twitter header image.

How Do You Set Your Profile Header?

The first question that you’re bound to ask is, how do you turn on this thing? If you head over to your profile, it’ll look like it always did. Currently, users who haven’t set up a header image will retain the old design.

screenshot

To upgrade your profile, click on the Settings gear at the top right of the page. From here, click on the “Design” tab in the left side navigation bar.

screenshot

Once you’re on the Design page, scroll down to the “Customize your own” section. Here you’ll see a “Change header” button. Simply click that and upload your image to set your header.

screenshot

That’s all there is to it! Now you just have to decide what to put there!

What Size?

The next important question to ask when designing your profile header is, “What Size?” If we take a look at the NBC images that Twitter no doubt personally helped set up, we see that the size is 520px wide by 260px tall.

screenshot

Ultimately, this breaks down to a 2:1 ratio of width to height with a maximum upload size of 5MB or 1252px by 626px.

Design Tips & Considerations

The size of the image that you upload certainly isn’t the only consideration that you need to keep in mind. I’ve noticed a few quirks that you definitely need to know if you’re going to pull off a successful design.

Watch Your Readability

To experiment with the space on my personal account, I grabbed a random photo that I took of a digital display in New York City. It seemed like it would make the perfect abstract background. Here’s the result:

screenshot

As you can see, it’s a fairly attractive visual. The problem though is that it’s interfering with the text quite a bit, and I’m a readability nut.

Obviously, with the white text, you’ll want a background that’s decently dark. Mine fits this description, but the lights serve as bright points that reduce the contrast between the letters and the background and add too many distractions.

The solution here is pretty simple, I just darkened that background where the text lies so that the lights don’t interfere so much. The result isn’t quite as cool visually, but it’s much more readable:

screenshot

Twitter Screws with Your Image

The folks at Twitter know that the trick I used above, darkening the bottom of the image, is something that’s going to need to be done on a lot of images. In fact, site actually does it automatically whether you want it to or not.

As a test, I grabbed this image and prepped it for the Design Shack header. Here’s what I see in Photoshop:

screenshot

Now, if I upload that image as you see it above, here’s the result as it appears on our profile page:

screenshot

See the difference? A background gradient has automatically been applied, considerably darkening the original colors. It’s a subtle effect on most photos but when you get into something with less detail it really stands out.

This certainly isn’t a bad thing, it does indeed help the text stand out, it’s just something to keep in mind as you prep your image. Also, note that Twitter is automatically applying rounded corners to both the profile and header image.

Design Tips

Now that we know all about how to create and apply our image, let’s take a look around and see what others are doing with this area for some inspiration.

Integrate Your Profile Image

One of the best I’ve seen so far is Ryan Seacrest’s. I love the integration of the profile photo into the header image. Brilliant. You can fully expect to see tons of users trying to pull this off in different ways.

screenshot

Show Off Your Work

Graham Smith, everyone’s favorite logo designer, jumped on the opportunity to update his profile right away. His idea is simple and effective: it shows off his work in a nice, understated grid of logos.

screenshot

Match Your Profile Background

One thing to keep in mind when you’re working on your header image is that it is actually part of a greater design and should go well with your background image.

We see this done well on the breaking news account below. The header image is a red world map made up of pixels.

screenshot

This is actually the same image that they used on the page background, only smaller and in a different color. This makes for a nice consistent look.

screenshot

I love how the large background is the subtler version while the header image really grabs your attention with a bold color.

Keep It Simple

If you’re having trouble coming up with a good header image, remember three powerful words: keep it simple. Even apart from the image, there’s a lot going on in this space and your goal is to tie it all together, not overcomplicate it.

In Twitter’s own extended family we see some good and bad examples of this. Twitter co-founder Evan Williams has definitely chosen poorly with a graphic that’s much too busy for this space.

screenshot

Compare this with the image used by Twitter Bootstrap creator Mark Otto. His choice is much better:

screenshot

This is nice, simple, and actually pretty striking. Most of the image is whitespace (black space in this instance) so there’s not much to interfere with the text. The content represents an event charged with emotion and wonder for all of us though, which makes for a memorable experience.

Show Us Yours!

There you have it, everything you need to know about creating the perfect Twitter header image. Now that you’ve read my tips and seen some great inspiration, go make your own with our free template!

Once you’ve got your Twitter header image all ready to go, leave a comment below with a link so that we can see what you came up with.

Comments & Discussion

76 Comments

Comments & Discussion

76 Comments

  1. Nice Article Joshua!
    I updated mine, 520×260 and adding a gradient as you recommend it, to make text more readable:

    https://twitter.com/dcorbacho

  2. Matt says:

    Here’s a quick little example for a gaming account done through the Pixelmator crashes!
    https://twitter.com/furiousukFM

  3. Tara says:

    Great space to visually represent your description.
    https://twitter.com/Tbanda

  4. Anonymous says:

    Thanks for that tip. But what about background size what should be that background size, let me know please.

    Thanks ;)

  5. kaliana says:

    Here’s mine and one I made for my friend

    https://twitter.com/go_kali
    https://twitter.com/bodhitzen

  6. nomi says:

    I’m usually reluctant to try new stuff but I did have some fun doing my twitter header right away. Check it out https://twitter.com/nomiDesigns

  7. MJ Meyer says:

    Sweet! Thanks for the template. Works like a charm.

    So mine’s not perfect and the icons make it hard to read, but what the hell. I like it. :) https://twitter.com/mjmeyer_za

  8. Ricky says:

    I’m a huge fan of “Six Feet Under: … Here’s mine ;)

  9. Ricky says:

    I’m a huge fan of “Six Feet Under: … Here’s mine ;)
    https://twitter.com/RickyVillegasB

  10. Rolle says:

    Thanks for this. I was not in very creative mood, so I just took the photo of one of my favourite photographers, John Carey (fiftyfootshadows.net). Check out my profile at https://twitter.com/rolle

  11. Eldritch says:

    That worked really well. Thanks for your hard work!
    Here’s my profile: https://twitter.com/EldritchBlack

  12. Did mine the other day.

    Nothing too fancy but it does the job.

    https://twitter.com/PhotoCaptures

  13. Tim Fielding says:

    Hello everybody, I like twitter headers. Nice design challenge. :)

  14. Great article & loving this new feature on Twitter. We decided to keep it simple and use the Header Image to accentuate what we do.

    https://twitter.com/amerginonline

  15. Luis Serrano says:

    Great article man. You just help me out with the resolution of the BG!

    By the way, great designs here from your examples.

    Greetings. L

  16. sally says:

    Thanks for the tips! Here’s what I came up with:

    http://www.twitter.com/dkeventmkting

  17. Sam says:

    How can I remove this header feature though?

  18. Scott M. says:

    Thanks Josh, I managed to do it all without photo shop too!

    http://www.twitter.com/scrilla100

  19. JanLosert says:

    Hi! Cool tips! I prefer my space art images :) so here it is: https://twitter.com/JanLosert What is your opinion?

  20. Tuncay K. says:

    Have a look at mine: http://twitter.com/trkaplan
    I increased the brightness of the image then applied a reverse gradient layer mask to hack twitter’s default image filter:)

  21. Bethany says:

    Thanks so much for the template, it really helped!

    Here’s ours: https://twitter.com/IridiumProjects

  22. Joshua Johnson says:

    Lots of great examples everyone. Thanks for sharing!

  23. rajasekaran says:

    How much dpi have to set on twitter header image? 72 dpi or 150 dpi?

  24. Kieran Headley says:

    Great post and template helped alot!!

    https://twitter.com/kieran_headley

  25. Shellie Haack says:

    Some creative folks out there! Here’s mine: http://twitter.com/empowerpointers

  26. Jairo Rodríguez says:

    This is mine! I used my logo and its graphic line… Check it out…. Hope you like it! http://twitter.com/JairoRodriguez7

  27. Do you like our new twitter header? It’s like a chalkboard :) We’ll update our background to match soon! http://www.Twitter.com/AndrewAndPete

  28. Samuel Couto says:

    Nice examples!
    My take on this subject is to keep a clean and and consistent look between the two pictures, in this case, to keep myself on the subject.
    I use the same picture as the image profile but blurred, which also helps a lot with the readability.

    https://twitter.com/samscouto

  29. Thanks for the help – here’s what I did with it:
    https://twitter.com/DFActing

    Bit stark in contrasts?

  30. Stenton Toledo says:

    Shutterstock just posted a few images that look pretty cool as header images — http://www.shutterstock.com/blog/2012/09/fall-patterns-twitter-header-image/

  31. Thanks for a great post; very helpful! So what happens to the standard profile info (text) that used to be displayed? Does the header image replace that? Do we now have to put all that info into an image? Also, it seems like many background images would need to be changed, since they could have similar info. (I’m thinking of one of my pages in particular, http://twitter.com/EtsyBagalicious .) Would love to hear your take on this. (I’m also wondering about impacts to SEO since the profile info may now be in an image.) Would love to hear your take on these questions. Thanks! ~Corinne

  32. Maca says:

    Very simple yet elegant .. for now https://twitter.com/MacaMarijana :)

    Thanks for the tips ;)

  33. Sam Osborne says:

    Sorted mine last night as a tone in of my background pattern!

    https://twitter.com/SamOssie

  34. gcreatives says:

    try to make creatives layout in my twitter header.
    make a profile picture look like transparant to background. please check on:
    https://twitter.com/Gcreatives

  35. Teresa says:

    Fun, simple and integrated: https://twitter.com/TeresaSims

  36. Bekah says:

    Thanks for the .psd! That helped a lot!

    For mine, I just had fun with a pic of my face + some photoshop custom shapes:

    https://twitter.com/McStrangeFart

  37. Lorenzo Pascuito says:

    Regarding the Integration with the profile image: be very careful… 60% of Twitter usage comes from mobile and the view of the header and the profile picture are not the same. :)

  38. DiaGK says:

    Hi. Thanks for sharing this. I will re-do my Twitter asap. Taa!!

  39. Great article, and a great Photoshop file to modify for making a mockup of the Twitter header. Here’s mine: https://twitter.com/Cartagram

  40. Adriana says:

    I’ve made myself a twitter header too. Check it out :)

    https://twitter.com/hariana_v

  41. heptagono says:

    Very useful.

    Thanks for sharing.

  42. Satya says:

    Here is mine https://twitter.com/Satyajeet

    It’s working okay on the desktop but messing up a bit on mobile, so please check at both places while finalizing.

  43. PLV says:

    I was wondering how you can make a header like Ryan Seacrest’s. Any help??

  44. Kula says:

    Get article. After reading it here is the one we came up with: https://twitter.com/kulacase

    Interested in what you think. Cheers.

  45. ReeZh Design says:

    Nice one. Actually, we did manually design our twitter header, but after reading this… Boom! ;)

    visit us to: https://twitter.com/reezhdesign

  46. Shalom says:

    i need the software for MAC

  47. ruthy thomas says:

    nice collections. And there is a site http://twitterheader.org which has ready made twitter headers for download.

Leave a Comment

Subscribe
Membership
About the Author