Creating a Custom Twitter Header Image
I recently had to create a custom Twitter header for my job, so I decided to go ahead and save a template in case anyone else wants to make one and isn’t sure how. I know Charles briefly explained it when he created his, but having the exact dimensions as well as a template might help. The basics are as follows:
Recommended dimensions: 1252×626 pixels
File Type: JPG, PNG, or GIF
Maximum file size: 5MB
Here’s a PNG file showing the dimensions:
Feel free to save it and pass it along. I’ve also created a layered Photoshop template for those who are comfortable going that route. You can download it from here.
Keep in mind that Twitter will automatically put a gradient overlay on top of your profile header to ensure that the white text of the profile info is always legible, so take that into consideration when choosing your colors. The white border around your profile pic/avatar is also something that cannot be changed.
Note: Twitter uses responsive web design for their page layout, which means the elements are designed to be fluid and will expand/contract proportionally based on the device they’re being viewed on. There are some examples as well as ideas & insructions on this page.
Additionally, this page at the Twitter Help Center tells you how to change your profile & header images, and if you scroll down to the bottom you’ll also find a brief video tutorial.