Creativity Magazine

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

By Mrstrongest @mrstrongarm

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 high
What 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 high
default new Mark Armstrong Twitter header image 520 pixel width expanded to 1500 pixel width with stopwatch men

blank vertical space, 24 pixels high
With 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 high
I 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 high
Here’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 high
I 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 high
Then 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 high
Why 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 high
I 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 high
I 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 high
Finally 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 high
One 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.


Back to Featured Articles on Logo Paperblog