Last month, twitter announced one of their new feature: header photo. With header photo, you can make your profile page more meaningful. Actually, it is a simple thing. You can just upload your photo into "Design" section on your twitter's profile settings. You also can crop and drag for compositing the header photo within the twitter's site. Done.

But, there's a different story if you want to design a well-done header photo. You have to make sure the compositions is okay with the texts and also the avatar. Not mentioning to design the header photo that "seamlessly integrated" with the avatar.

So, I made this twitter header photo template in Adobe Photoshop (CS3) format that can help you design your own.

How to Use It?

First, download it first, here. Open it, and you will see 2 layers of background in the bottom: "Pattern Fill 1" and "Sample Header". These layers is just for sample, so you can delete them and place your own background.

Before make some adjustment, you should edit the text layers inside the "Texts" layer folder. To make sure your background plays well with those text, so I placed these layers to simulate the real site experience. Type in your full name, @account, bios, location and URL, before adjusting the background.

Don't forget to make sure the texts is highly readable. Unless you don't want people reading your name and bios or clicking your site's URL.

These texts also important if you want to make an "integrated design" between header photo and the information, such as: arrow pointing to some word, make some underlines or highlights in your bios, and cirling some texts. It could be fun.


Let's export it! First, set these layers hidden: "Texts", "Avatars", and also "Twitter Header + Avatar..." (unless you want to make some "footnotes"). Then, choose "File" - "Save for Web & Devices..." from the menu. Make some adjustment related to image and file size optimization — or, just like me: select "JPEG High" preset — and hit the Save button.

Upload it into the twitter's site. You also can use official Twitter apps on iPhone, iPad, or Androids to do it. And don't destroy your design work with adjusting the header photo on twitter's site or apps.

How About The Integrated Avatar?

Okay. This integrated avatar thingie is awesome, right? I hope you were not avoiding the white-squared border when you compositing the background, because it is your-next-awesome-avatar. You've done it well? Good!

May be you want to save your work first. I highly recommend you to do this.

I already make some guidelines in the center of the template for this purpose. You can just crop the "avatar area" using these guidelines. And yes, it's done! Do the "Save for Web & Device", and upload to twitter's site as your avatar. It's a wrap!

You can close the and file discarding any changes. Or, if you did not save the file before cropping, you can just hit CMD+Z (oh yes, it is Ctrl+Z on Windows machines) to undo the cropping and save the file.

Enjoy your new and awesome header photo! Any comments and critique related to the template are welcome.

Download from my DeviantART: Guide Template for Twitter Header and Avatar