When Twitter rolled out the new header images yesterday with an announcement on the TODAY show, I quickly realized that a lot of people were going to take the Ryan Seacrest route and integrate their Twitter avatars into their header images for a single, seamless header (see image at right). After all, this happened with Facebook Timeline covers as well, sparking some really creative uses of the new format.
In updating not only my own Twitter header, but the ones for Mario, Small Biz Go Mobile and the #SocamShow as well, I ended up creating a Photoshop template to make it quick and easy to design, test, and deploy a variety of new Header images for Twitter.
So I thought I’d share those with you :)
Instructions for Use
These Photoshop templates have four layers: a black background, a place for you to drop your own background image, a simulation of the white outline that Twitter will automatically place around your image, and a layer for you to drop your header image.
To set it up, first drop your background image onto the blank background layer called “Your Background Here” and line it up exactly how you want. Then, using the guides I provided, copy and paste the section inside the guidelines (the area inside the white box) to a new document. This will be your new Twitter profile picture, so save it as a JPG image remember where you put it!
Finally, set up the document so that the white lines around your profile pic and the black background are hidden, showing only your new header image.
I recommend saving this as a PNG image for the best image reproduction (Twitter allows up to a 5MB header file, so even a very large PNG should work just fine) or as a maximum quality JPG image.
To upload your new header, log into your Twitter account, click on the gear icon in the upper right hand corner, and then click on “Settings.” In the menu that appears on the left side of your screen, click on “Design” to see your design settings. The option to upload your new header image can be found here.
Download Links
I’ve provided downloads in two different sizes. The SD one is an exact pixel-for-pixel representation of the final image size that Twitter will display on their website. If you’re looking to work quickly and get something up right away, this is probably the one that you want. The dimensions on this image are 520×260, for reference.
The second download is the HD version, offering the highest resolution image Twitter will accept: 1252×626. I image they’ll be using a higher resolution version for things like retina displays on the iPad 3, so if you want your header image to show up with the maximum image fidelity everywhere it appears, this is the one you’ll want to download.
Twitter Header PSD Template SD – 100 KB