Twitter Background Template for Photoshop – Seamless Design

Download the template

Here is my updated Photoshop template for the new Twitter design that is still rolling out to everyone’s accounts.

I’ve been chomping at the bit, waiting for the update to hit one of the accounts I have access to. Logging in and out, switching browsers, clearing my cache… and it finally happened!

This Twitter template is very similar to the last one I created.
There’s a layer group for different screen sizes. They show the visible areas for small screens (1024×600), 13″ screens (1280×800), my 15″ laptop screen (1440×900) and of course, my HD desktop monitor at 1920×1080.

Necessary or not, I started breaking the Twitter UI into separate layer groups. If you want, you can grab a screenshot of your profile or a clients account and create a mockup. I also started to recreate the interface with shape layers and text layers but didn’t see the point. Feel free to finish the job. Just hide the “sample data” layer and you’ll see how far I got.

All that’s left are the layers for the header and profile photo. I created a white frame for the profile photo too, just for creating mockups. The official/recommended size for the header image is 1252x626px so you don’t need to resize the header once you crop it. The profile photo (area) in the template measures 156x156px. On the desktop, the profile photo is displayed at 73x72px so I feel it’s large enough. It’s always possible someone will click on your profile image where it can be shown at a larger size but I’m not too worried about it. That’s why I have a link to my website in there!

Saving your Twitter Background

The one thing you must do when saving the background is to resize it to 1905px wide. The reason I’ve made this template so large (4046x2100px) is that I want to be able to create the header image at it’s largest/recommended size. Since the header gets shrunk down to 590x295px on the desktop, you need to design the background at the higher resolution so that everything matches up when you’re finished. It’s the only way to get a seamless header and background design and have a large header image… not sure where Twitter displays the header at 1252×526 but you’ll be ready for it when they do.