Visit our archive

Twitter Header Update

As I am sure you have noticed, a new Twitter header image for your profile page has begun to roll out. If you already have an existing account, you will have to wait until the update reaches you. If you are just starting an account, you will be able to have the new background header size right away.  The new Twitter profile background replaces the old header image and spans the full width of the screen up to a maximum image size of 2560px x 600px and a maximum file size of 3mb.

Twitter Header Background Template PSD Download


The new header is fully responsive and will stretch and shrink based on the width of the device that you are viewing. When you upload a new header background on your Twitter account, you can test this by shrinking the width on your desktop browser. The image will shrink down to a minimum size of 1024px x 280px. If the screen you are looking at the Twitter background on is smaller than this size, the right side of the image will cut off depending on how small the image is.

Twitter Background Header on a Smaller Screen Size
This is not the only challenge of creating a properly branded Twitter header backgound. The Twitter profile image has also been updated. The new size for your profile image is now 200px x 200px. The larger Twitter profile image holds a fixed position. If you tested out the responsiveness of the background header, then you should have also seen that the profile image remains in the same place on screen. The background header position underneath will change, so you have to be aware of the position of any text or images that must be visible to keep them from being covered by the profile image. Even though Twitter allows you to upload a PNG file for a profile image, any transparent areas will be filled in with white. So right now, it will not be possible to make a profile image that shows through to the background header image.

The template that I created has 3 safe zone areas. The safe zone for the main content will be visible on all screen sizes including the Twitter card.

Twitter Background Header Card

As you can see I had to make a new account to make the Twitter background template.

The safe zones on the left or the right of the main content safe area will appear on desktop screens that are larger than the minimum Twitter background header size.

Because the Twitter Header image will crop a larger image and stretch a smaller image to 1500px x 500px, I recommend uploaded your image at this size. When you upload your new image as a Twitter header you will be given two options for placement. One will allow you to move the image (provided that the uploaded image is larger than 1500px x 500px, and will also give you a scale bar that will allow you to zoom the image in and out. If you are using the template I have provided, you will not need to adjust these settings. The template is already optimized for Twitter and should provide a seamless transition from Photoshop to Twitter.
Twitter Header Upload Options

The previous Twitter Background still exists, though it seem now it is merely an aesthetic that will only be seeing by you when you are looking at your home stream or checking notifications. It would be nice if in the future you will be able to see the regular Twitter background when you start scrolling down while looking at someone’s profile.

Maximum Twitter Header Size: 2560px x 600px
Minimum Twitter Header Size: 1024px x 280px
Recommended Twitter Header Size: 1500px x 500px
Maximum Twitter Background File Size: 3mb

And don’t forget to check out the
YouTube Channel Art Template with PSD
Facebook Timeline Template with PSD
Google Plus Cover Photo Template with PSD

If you downloaded the template, throw me a bone and share it with your friends!

 DOWNLOAD THE TWITTER HEADER PSD TEMPLATE HERE

Greg Trujillo

Greg Trujillo

I'm one of the founding partners of CT Social, LLC. I love to talk about all things technology. I really enjoy learning new things about our universe, and existence around us. If you would like to socialize connect with me.

More Posts - Twitter - Facebook - LinkedIn - Pinterest - Google Plus

Comments

Loading Facebook Comments ...