Design your Twitter Background and Header With My Latest Template

twitter-template

Twitter is currently rolling out a new design to all users according to their tweet from the 13th of January.

Most people will not be affected.
If you have a design where your background and header image were meant to look like one continuous graphic you will need to recreate your graphics.

The good news is that I’ve created template you can download that makes it pretty easy.

How The Design Has Changed

The header image has not changed shape, but it is now a bit larger. The overall width of the Twitter interface has also gotten wider. Check the graphic below for the exact measurements.
Twitter measurements - old vs new

Using The Template

I’ve made the process as easy as possible by flattening everything out and saving it as a transparent PNG.

There are three files you can create with this template. The background, the header and the profile photo.
You will also see a bunch of different screen sizes represented in the template. They show you where you background will get cut off or will looked cropped, depending on the size of the screen it is viewed on.

Background

The size of the template is 4046x2100px. When you are finished with your design, save your file and hide the header and profile image, then resize your background image to 1905x989px before uploading.

Header

The header in the template is the recommended or maximum size Twitter allows at 1252x626px. When you are ready, hide the profile photo and crop your file to these dimensions and upload to Twitter. No need to resize.

Profile Photo

The profile photo does not meed to be resized either. In the template it is 156×156. It is possible to upload something larger but most people will only ever see it at 73x73px. When you’re ready, just crop, save and upload.

Why is the template so large?
I want to have a header graphic that is the maximum size (1252×626). This is because I’m not sure when or where the header will be displayed and at what size but I know that using a larger image is better than using a smaller one, say 590x295px. When it comes to image quality, it is always better to shrink an image than to have to make a small image larger.

On the desktop, your header image is only displayed at 590×295 but since we are designing our header image to be much larger.
My template is also meant to allow you to create a background that will line up with your header image for a unified design.

Since the header image is starting at a larger size, we also need to design the background at an equally large size. To maintain the seamless illusion, we need to resize the background image from 4046px wide to 1905px wide so it will line up correctly with our shrunken header graphic.

 

Download The Template

twitter background header template preview
click to download


 

Michael Currey

Michael Currey is an experienced web designer, front-end developer and social media manager with 15 years of experience and an education from the Academy of Art University in San Francisco. He founded inlineVision with his business partner and software engineer Nina Khoury in 2011.

Visit Website

There are no comments yet, add one below.

Leave a Comment

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

*