Twitter Background Template for Photoshop – Seamless Design

Jan 15th, 2014
Twitter has a new layout with a header image that is 1500x500px. Download our updated Twitter templates.
Affordable Tree Service Las Vegas Twitter profile
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.
screen sizes for various monitorsThere’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.

twitter elementsNecessary 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.

twitter header and profile photo layersAll 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

Twitter template for Photoshop screenshotThe 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.

Download The Twitter Template v2

Simply enter your email address and the download link will be sent directly to your Inbox (we can only send you the download link if you enter a valid email address).





Like the template? Why not buy me a cup of coffee?



About the author:

Michael Currey is an experienced web designer, front-end developer and social media manager with 15 years of experience and an education from the Academy of Art University in San Francisco.

One Response to “Twitter Background Template for Photoshop – Seamless Design”

  1. […] 2013Tweet Update – Jan. 15, 2014: We have a new template for the updated Twitter design here. Text […]

  2. Wouter Spaak says:

    Thank you very much for this revised template. I’ll be implementing it later today!

  3. […] – Centra la foto de fondo para evitar que alguno de tus elementos se pierda detrás del feed cuando se ajuste el tamaño del navegador. – Coloca un color de fondo que combine o complemente tu imagen, con el fin de evitar un espacio blanco, poco atractivo, alrededor de tu imagen de fondo. – Hay un sin número de plantillas que te ayudarán a visualizar una página de Twitter. Aquí hay una. […]

Leave a Comment

2 Trackbacks

  1. Seamless Twitter Background and Header Template - FREE | InlineVision: Web Design / E-Commerce / PPC / Social Media | Las Vegas, NV

    […] 2013Tweet Update – Jan. 15, 2014: We have a new template for the updated Twitter design here. Text […]

  2. Medidas en las Redes Sociales: guía útil - Likeable Media México

    […] – Centra la foto de fondo para evitar que alguno de tus elementos se pierda detrás del feed cuando se ajuste el tamaño del navegador. – Coloca un color de fondo que combine o complemente tu imagen, con el fin de evitar un espacio blanco, poco atractivo, alrededor de tu imagen de fondo. – Hay un sin número de plantillas que te ayudarán a visualizar una página de Twitter. Aquí hay una. […]