Skip to content

How To Create A Twitter Header Image That Doesn’t Get Mangled

June 16, 2015

There comes a time in every man’s life when he has to change his Twitter header image. Why? Because Twitter changed the format, that’s why.

The old Twitter header was small: only 520 pixels wide. Here’s what mine looked like:blank vertical space, 32 pixels high
Old Mark Armstrong Twitter header image 520 pixels wide showing stopwatch men saying illustrations capture short attention spans

blank vertical space, 32 pixels highWhat are those Stopwatch Men doing in there? They’re supposed to represent “short attention spans,” which, according to the text, is what a Mark Armstrong illustration captures.

Then Twitter expanded header images to 1500 pixels wide by 500 pixels high. At least theoretically (more on that below).

They invited everyone to update their header. If you didn’t upload a new image, Twitter automatically expanded your old image to fit the new format. This created
some odd results, as you can see here.blank vertical space, 32 pixels highdefault new Mark Armstrong Twitter header image 520 pixel width expanded to 1500 pixel width with stopwatch men

blank vertical space, 24 pixels highWith no text to help explain the Stopwatch Men, it suddenly looked like I might be a watchmaker, or a time management consultant. Clearly, I needed a new header.BlankVertSpace.4pixels

I started googling, and found this enormously helpful post by Pauline Cabrera. Pauline explained that a 1500 x 421 pixel image would work best, and that portions of the image would be cropped or otherwise lost because of the way the header is displayed on mobile devices. She offered this handy template for download to anyone who wanted to build their own Twitter header image in Photoshop.blank vertical space, 32 pixels high
twelveskip.com template for 1500 pixel wide Twitter header image showing which areas will be invisible on all online devices, and which will be invisible on mobile phone display screen

blank vertical space, 32 pixels highI decided to use part of an illustration I’d done for The Rumpus. You can read more about that assignment in this earlier post.blank vertical space, 32 pixels high
illustration for Rumpus.com house precariously balanced on mountain peak, guy in bed sliding out window, moon stars mountain goat

blank vertical space, 32 pixels highHere’s a closeup of our oblivious sleeper whose bed keeps sliding back and forth out the window.blank vertical space, 32 pixels high
detail image illustration for Rumpus.com house precariously balanced on mountain peak, guy in bed sliding out window, moon stars mountain goat

blank vertical space, 32 pixels highI pasted the image onto the template, using all the space between the two areas that are invisible on mobile devices.blank vertical space, 32 pixels high
House balanced on mountain peak pasted onto template for 1500 pixel wide Twitter header image between invisible areas

blank vertical space, 32 pixels highThen I layered in a night sky, and sprinkled it with stars. Hmm… there seem to be a couple of “star gaps”…blank vertical space, 32 pixels high
add night sky and stars to template for 1500 pixel wide Twitter header image

blank vertical space, 32 pixels highWhy the gaps? I wanted to leave room for some text. I put the sky over the template. That way, I could reduce the opacity of the sky, and see what visible areas I had available to me.blank vertical space, 32 pixels high
night sky and stars 1500 pixel wide Twitter header image with opacity adjusted so can see template

blank vertical space, 32 pixels highI added a title, a tagline that emphasizes my work in creating images for social media marketing, and my website URL.

I thought it might be fun to include a quote about “living on the edge,” or doing “cutting-edge work.” I did some more googling and found this wonderful, obscure quote by author Henry Miller: “We live at the edge of the miraculous.” True for both art and life, the kind of reminder we all need.blank vertical space, 32 pixels high
add Mark Armstrong Illustration website URL Henry Miller quote re edge of miraculous to 1500 pixel wide Twitter header image template

blank vertical space, 32 pixels highI used my reduced opacity trick to see the visible areas. This allowed me to choose appropriate type sizes, center the text, and use the space to maximum effect.blank vertical space, 32 pixels high
reduce opacity to see placement of Mark Armstrong Illustration text plus website URL Henry Miller quote re edge of miraculous on 1500 pixel wide Twitter header image template

blank vertical space, 32 pixels highFinally I went to the Twitter site, held my breath, and uploaded my new header.

Here’s how it displays on my desktop iMac. Pauline Cabrera was absolutely right: the ends of the 1500 pixel-wide image get cropped off– a fact Twitter doesn’t tell you about. Pauline’s template, based on her hard-won experience, saved me a lot of trouble. Thank you, Pauline.blank vertical space, 32 pixels high

new Mark Armstrong Illustration 1500 pixel wide Twitter header image with website URL Henry Miller quote as displayed on iMac desktop monitor

blank vertical space, 24 pixels highOne of reasons custom images are a good investment is that they can be creatively recycled. This is especially true for social media. There’s really no limit. All it takes is
some imagination. Here’s an example:

I took the central image from the new header, and built onto it. I duplicated the sky, cloned the stars, and added an inspiring quote by Harriet Tubman. I also included my website URL. It’s the sort of image people like to share: on Facebook, Twitter, Pinterest, etc. Including the URL ensures one’s brand gets seen. It also tells people where to find you.blank vertical space, 32 pixels high
new Mark Armstrong Illustration Twitter header image recycled for social media post with Harriet Tubman quote

blank vertical space, 16 pixels high

    *       *       *       *       *       *       *       *       *       *       *       *       *       *       *       *blank vertical space, 16 pixels high

Are you on Twitter? Did you design your own header image?

Do you include your website URL on the images you share on Twitter, Facebook, et. al.?

Do you use a mobile phone to access the internet? If so, how does my Twitter header look? Can you see all the key elements? I don’t have a mobile phone myself, so I’d appreciate the feedback!

Hope you’ll leave a comment.blank vertical space, 24 pixels high

If you enjoyed this post, please click the Like button below.

If you’d like to share this post with others, please click Tweet or Facebook or StumbleUpon or one of the other Share buttons.

I also invite you to get updates. Just click the Get Updates button in the sidebar below the Portfolio Thumbnails, or click + Follow in the blog menu bar.blank vertical space, 24 pixels high

If you’d like to buy prints or greeting cards, click on any of the large preview images in the sidebar below the Get Updates button.blank vertical space, 24 pixels high

Other Posts You Might Enjoy:BlankVertSpace.8pixels

Mark Armstrong And His 7 Dark Secrets

Happy Birthday To Folksinger Patty Larkin And Her Machine Gun Guitar

Hollywood Blood & Gore: America’s Founding Fathers Would Be… Proud?
blank vertical space, 32 pixels high
footer for all future blog posts showing picture of blog author Mark Armstrong, along with short bio and contact information

blank vertical space, 32 pixels highblank vertical space, 16 pixels highblank vertical space, 16 pixels highblank vertical space, 40 pixels high