Guide To The New Twitter Header Image: Specifications, Tips & Templates
Yesterday Twitter launched a new look out across all user profiles that allowed users to generate a bolder, more vivid look. The new Twitter profiles feature one very large image (reminiscent to Facebook Timeline and Google+ page covers.)
The new Twitter header images are a bit different as user text and description info is actually floated across them. To help you maximize your exposure, we’ve made a list of tips, templates and specs to help you get the most of your Twitter Header image.
- The display size of the Twitter header image is 520px x 260px
- Maximum file size of 5MB
The new profiles not only lay text over the header photos, but also float the Twitter avatar on top as well. This means that no matter what you do, your Twitter avatar will always be top & center justified on the Twitter header image. In addition, a white stroke accompanies the avatar that cannot be removed. Here’s a look at some creative Twitter header uses:
@RyanSeacrest pulls his fellow American Cohorts into the Twitter header and uses the avatar to display his face. However when look at the profile page, the overall picture looks quite seamless.
Politics & policies aside, @MittRomney delivers a solid Twitter header photo. The avatar is perfectly located on his face while the rest of the header images pulls in the surrounding environment.
- Twitter adds a black gradient layer to the header – regardless of your image.
- Using a photo with vastly different proportions (i.e. vertical) will give you errors
- Darker Header images allow the White overlay text to show up much better
- “Follow Us” arrows can be placed in the lower right hand side for those looking to place a call to action on their header
- The Twitter header makes the overall design less about a busy background and more about a vivid header. Making both busy can be distracting.
To help you make your own perfect header image, we’ve created this easy to use Photoshop file.
The file consists of the exact specs and the location of where the Twitter avatar will fall. Simply toss in your background image and located the images to the position you’d like:
Then hide the layer “Twitter Avatar Area” so that the white stroked box is hidden. Save this file as your background file. Then load the selection “Main-Twitter-Logo-Area” (Select -> Load Selection -> Channel=”Main-Twitter-Logo-Area”) and crop the image.
This is now the portion of the background that you’ll use for your avatar. Feel free to add any logos you’d like, then save as your avatar.
Just upload the background (Settings -> Design -> Header) and the avatar photo (Settings -> Profile -> Photo) and you’re done.
Here’s an example of what we did for @CypressNorth:
Let us know what you’ve created in the comments and don’t forget to follow us for more great updates like this — enjoy!
Latest posts by Greg Finn (see all)
Rubyon September 22, 2012 Reply
any way to do this without having photoshop? bueller?
Ramiroon September 23, 2012 Reply
Great post! Thanks a lot for the PSD file!
Greg Finnon September 24, 2012 Reply
Twitter auto-appends the semi-transparent black layer on top to attempt to give the visual more depth. Sorry, nothing you can do.
Angelaon October 1, 2012 Reply
Hey…this is so helpful. Thanks a mil!
Can you suggest a good size to make my Twitter background so that it can be viewed on most screens?
Greg Finnon October 1, 2012 Reply
If you keep your information 66 pixels wide (on the left of the background image) that will work for 98% of viewers (1024 px and up). In regards to the overall width and height, I usually go the “more is better” route. The best way is to experiment and use tools like resolution resizers (https://chrome.google.com/webstore/detail/idhfcdbheobinplaamokffboaccidbal) to see the exact look for different resolutions.
Chelsea Adams (@ChelseAdams)on October 15, 2013 Reply
Looks like my profile photo is a bit fuzzy. Ah well, it looks great small. Something to trouble shoot. We’re 60% of the way there, though!
- Time Flies & Terrible Lies: July Content Marketing Ideas…NOT
- Candy, Cabins & Color TV: June-ified Content Marketing Ideas
- Packrats, Playoffs & Plenty Of Flowers: May Content Marketing Inspiration
- Fools, Frogs & Furious 7: April Content Marketing Ideas
- Friendship, Fat Tuesday & The Fish Bowl: Content Marketing Inspiration For February
- How To Exclude Mobile Apps From AdWords Display Campaigns on
- My First Semester Teaching: CSIT 330 – Mobile Application Development on
- Setting up a small office or home office VOIP system with Asterisk PBX – Part 4 on
- Setting up the Android Google Volley ImageLoader for NetworkImageView on
- Social Media Cover Photo Cheat Sheet & All-In-One Social Template Download on