tech tip – new twitter header

 twitter header - tech tip tutorial

It’s Tech Tip Tuesday. Holla.
It’s no secret that social media owners want to keep us on our toes. They are constantly changing the rules, terms of service, ease, and of courser the layout. With each new change comes a new design. Twitter recently rolled out a new look, very similar to Facebook. The new looks means all those fun headers and backgrounds we had are now worthless. Time to update those twitter headers ladies (and gentlemen if there are any here).

Before we begin, I owe all the inspiration to the amazingly talented Pauline. She blogs over at Twelveskip. She is the mastermind behind all the hard work here, figuring out dimensions, and layout. I am just using the tools she gave us and showing you how to modify it to fit you.

First let me show you Pauline’s Twitter header (click the image for the live preview):

New Twitter Header Size 2014 @ twelveskip.com

Gorgeous right? It’s crisp it’s clean, it’s simple and it gives you all the info you need to know who she is and what she does! Brilliant.
Pauline also shared on her blog a twitter header template image. There is a link on her blog to download it.

Here is a preview of the image:

Click here to view the original size of the Twitter Template

I was not joking when I said she did all the hard work. Look at all the detail she added: invisible areas, iphone visibility, where your profile pics goes ect.

Let’s move on to the how part.
How do we use the above template and create our own header. You could Photoshop, Pixlr, or PicMonkey.

I chose to use PicMonkey this time. First I downloaded the template and loaded in PicMonkey.
Here is the step that I think will help you the most. Start adding your images, text, graphics right on top of the template. This way you can see exactly what places on the template are most visible to mobile devices and PC users.

twitter header tutorial

I know it looks like a hot mess right there but trust me, it makes it so much easier to know that the important information is in the visible areas! Once you have most of your info/graphics on the template add a large rectangle of a solid color (you could also add another image that was large enough to cover your whole header) and place if over all your hard work. Right click on it and chose send to back.

using picmonkey to make twitter header

Now you can see what you header will look like, you can move things around, and or add more to the areas that some may not see. Save it to your computer and upload to twitter!

the pearl blog live twitter header

Here is my header. Some of the areas listed in the invisible designated spots were cut off but that’s okay I only added blank circles there. I tried seeing if I just made a header template the size of the visible area via Pauline’s template and she’s right, it does not look good. I also tried twitters recommended 500 height. again it was blurry. I am so thankful for Pauline’s hard.

If you are looking for more inspiration check out these tweeter’s headers (what does one call someone on twitter? a tweeter? a twitterer?)
@momteaches2, @Beauty101Blog, @optimistic_mama, @tagsthoughts, @naptimeismytime @ChristineCaine, @NishWeiseth, @angejim0531

© 2014, Chrissy@thePearlblog This post may contain affiliate links. Purchasing through them will help support this blog.. All rights reserved.

About Chrissy@thePEARLblog

Sinner turned saint. Lover of Jesus. DIY crafter. Mom of 3. Blogger. Friend. married to her high school sweetheart. I blogs to share about the things I love. My hope is that my love for crafting, Jesus, family, and food will inspire you to try something new. If you enjoy what you read, don’t forget to subscribe to my blog!

Comments

  1. There is large collection of ready to use twitter headers. 1500×500 pixels – http://twitrheaders.com

  2. Fantastic Tutorial..thanks for taking the time!

share your thoughts...