New Twitter Design Template: Combined Background and Header

Oct 22nd, 2012
New version!
Aug 26th, 2013 – Seamless Twitter Background and Header Template
Download our updated template.

Three graphics from one file

twitter background header combinedI knew I was going to have to create one eventually… this new template allows you to integrate your profile picture, header image and background together.

Development of the Template

Example of Twitter profile using our templateOne issue people may have with this template is the physical size of the working document… 3472×1845 pixels is quite large. Finding a photo or graphic this large might be a problem but this template is not for all situations.

How did I end up with this size? I felt that enough of the background was visible on my laptop to give me plenty of space to be creative. My screen size is 1440x900px but the recommended size for a Twitter header image is 1252×626 pixels.

I started with my previous template for the Twitter header (1252×626) and expanded the canvas around it to a size that would give me a background that when resized down to 1440px wide would line up with the header image once it gets resized down to 520×260.

How To Use This Template

The one thing to remember about this template is that when you create your images only the background needs to be resized.
The profile image and header image can be cropped and uploaded to Twitter as-is.

The background must be resized and scaled down to 1440×765 so that it will match the header image that gets scaled down to 520x260px (on the desktop). Remember to crop out Twitter’s Menu bar too or your background will not line up correctly.

So, there it is. Download it and get creative! If you have any questions or comments please let us know. As with my other templates I usually make adjustments and improvements over time so your feedback is welcome.

I would love to see what you come up with too so please leave a link to your new and improved Twitter profile below!

Note: Your email will NOT be added to a list for marketing purposes.

Download v1.0 of the Template Now!

Simply enter your email address and the download link will be sent directly to your Inbox (we can only send you the download link if you enter a valid email address).

NOTE: We’re currently having issues sending emails to *.icloud.com and *.me.com addresses (or pretty much any MAC-related domain). Please use an alternate email address until we get this figured out.





Like the template? Why not buy me a cup of coffee?



About the author:

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.

5 Responses to “New Twitter Design Template: Combined Background and Header”

  1. I didn’t try to match the background to the header. Different screen resolutions would throw that off anyway. My header and avatar were re-saved by Twitter with a slight loss of quality, probably because I didn’t use big enough sizes, so that Twitter would have more data to work with on their re-save at upload. All in all, though, not too bad. Thank you for your guidance!

  2. Bintehassan says:

    Twitter header is driving me nuts. The image is 1226 * 150, it’s a rectangular image. It’s not coming up quite right on the header and I feel like banging my head in a wall :'(

  3. Dan says:

    Hi, thanks for this but whenever I do it, the header and background image aren’t matching up, I’m following every step, do you know whats wrong?

  4. Thanks for sharing this template! I can’t wait to go and use it.

  5. […] latest design works with larger monitors than my previous template. So far, the resolution the template is designed for (1920×1080) looks good on my 22″ monitor […]

Leave a Comment

2 Trackbacks

  1. PSD Template for the new Twitter Profile Banner Image » Blog: Social Media, FAQs & Blog | InlineVision: Web Design / E-Commerce / PPC / Social Media | Las Vegas, NV

    […] (Looking for a template that includes the background? Check out our NEW Twitter template!) […]

  2. Seamless Twitter Background and Header Template - FREE | InlineVision: Web Design / E-Commerce / PPC / Social Media | Las Vegas, NV

    […] latest design works with larger monitors than my previous template. So far, the resolution the template is designed for (1920×1080) looks good on my 22″ monitor […]