New Twitter Design Template: Combined Background and Header
Three graphics from one file
I 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
One 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!
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”
Leave a Comment
2 Trackbacks
- 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!) […]
- 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 […]
Search
-
Latest Articles
-
Jul 17, 2021
Woocommerce Security Woos
-
Apr 15, 2020
Citibank and Other Bank Scam Text Messages
-
Mar 6, 2020
Hostgator Account Phishing Emails
-
More From Our Blog
[…] (Looking for a template that includes the background? Check out our NEW Twitter template!) […]
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!
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 :'(
I do have a separate template if you’re only looking to design your Twitter header.
http://inlinevision.com/blog/psd-template-for-the-new-twitter-profile-banner-image/
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?
Thanks for sharing this template! I can’t wait to go and use it.
[…] 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 […]