New Twitter Background Header Image Tutorial

Twitter Header Template

Since releasing the new profile image last year Twitter has made a few minor changes, mostly to do with the way the scaling of the image is handled for mobile.  The new Twitter profile background 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, 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, unlike the mobile versions the twitter card will resize properly.

Twitter Background Header Card

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

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


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

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.


Loading Facebook Comments ...