It’s time to update your Twitter skills and keep up with the learning curve. For those unaware, Twitter updated their user profile layouts to include a profile background image that looks a lot like Facebook profile headers. However, it functions differently than its Facebook peer in that it is responsive, meaning it will get resized and/or cropped based on a visitor’s browser width and screen resolution.
This is important because you need to approach designing a background header image understanding that the overlaying text and your profile image will move in a fluid fashion over this image.
Confused? No problem, there’s a fantastic article by Greg Trujillo at ct-social.com that not only explains what you need to know, but it provides one of the most useful Photoshop templates I’ve come across to help understand where image safe zones exist and how to use them to your advantage.
There’s even a step by step video instruction on how to use the template and by the end, you’ll have some mad twitter background image design skills under your belt.
Here are some of the twitter header images I’ve made for Adaptistration, Adaptistration Jobs, and The Venture Platform; if you visit the live profile page, you can see how they function inside the responsive environment.