RSS Twitteer Facebook linkedIn YouTube foursquarePinterestGoogle

Template for the New Twitter Layout – PSD & PNG

Apr 8th, 2014

I’ve been able to play around with the new Twitter layout since March the 22nd, when I created a new account for a friend.

Since then I’ve been taking screen shots, measuring things and looking for any changes to the layout before publishing this new Twitter template. I wanted to see if the changes I was seeing were final or if the Twitter elves were still refining things…

Twitter Header Photo Dimensions are 1500×500

Twitter template normal and on wider screenThis is a bit strange to me because the area for the header or banner is fixed in height. Wether your screen is 1500px wide or 1980px wide, the height of the header area is 500px high.

Update 4/24: The header photo area now gets taller as your screen gets wider. It’s trying to maintain the same 3:1 ratio but it doesn’t do it perfectly. In my tests, the buffer area in my template still works as a guide.

The header photo area starts at a height of 280px and grows to a height of 500px. Not sure if that’s the max height, but that still means that cover photo is being displayed in a 1920x500px window.

On my HD screen of 1920×1080, the top and bottom of the header (still) get cropped off. My recommended buffer zone is the 55px at the top and bottom of the graphic.

One nice thing is that the profile photo is now much larger, it is displayed at 200x200px compared to 73x73px on the “old” layout. Twitter does recommend that profile photos are 400×400 though.

The Transition will be painful

New header image in old mobile layoutUntil everyone has the new layout, the header images for those who have the new design and for those who don’t will be off.

If you still have the old layout and have not updated your header yet, people with the new layout will see your header image but it will be cropped. Same for people viewing your “new” header photo through the “old” layout. You can see by the example here that large areas on the left and right are being cropped off when I’m looking at my new header on my mobile app (iOS).

Not only that, but with the new layout where the profile photo is off to the left, it only makes sense to have graphics that are centered in the space. Unless your profile is being viewed the “old” way, where your profile photo, handle and bio are right there in the center, covering up your banner.

New header photo with old layout previewTo help withe the transition, I created a layer group you can turn on/off to see how your new 1500×500 header photo will look to someone who hasn’t had their account updated yet. I’ve also added editable name, handle and bio info for a realistic simulation.

New Mobile App Design

Luckily, I’ve seen that the mobile app for Twitter is getting a refresh as well, just no telling when. Check out this post by TechCrunch “Twitter Tests More Inviting Profile Designs On Mobile” for more details.

It will be nice when the mobile apps are updated to match the new desktop layouts.

What About the Twitter Background?

Single tweet with background imageAlthough the new Twitter design seems to discard the backgrounds we’re all used to, it’s not so…
There is one instance (so far) where your Twitter background will be displayed. When someone is viewing a single tweet by itself.

The width of the tweet box is 640px wide. I am including a template for the background with my usual guides for screen widths in the download.

Hope you like the templates.
As always, leave your feedback in the comments.


twitter template preview screenshot 1500x500

Download The Templates – PSD & PNG

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.

TwitteerFacebooklinkedIn

11 Responses to “Template for the New Twitter Layout – PSD & PNG”

  1. Phillip Dews says:

    Seems to me that the big three are all going for the same look!
    saying that though i must admit the profiles do look much better now!
    thanks for sharing the psd MC I will deffo be using it myself
    All the best!
    - PD

    • michael says:

      It does look a lot like Facebook. The think I like about Facebook though, is that the cover photo stays the same size no matter how wide your screen is. Makes it easy to do those cool “seamless” designs.

      Wonder how long this new design will last before it gets updated? :)

  2. Kyle Jones says:

    Thanks. I agree that it does look quite a bit like Facebook. I’m also curious to see how long it will last. One of the most frustrating things for me with social media is the changes (almost constant if you are on or manage accounts on multiple platforms) made to layout/image specs. But, I suppose, change is good!

  3. Lisa says:

    Awesome! Thank you.

  4. Kris says:

    Perfect! Thank you.

  5. Marie says:

    THANKS!

  6. How do you rectify the fact that no matter how high a res or size you put in all artwork is fuzzy and ugly. We prided ourselves on our artwork and now it just sucks. HELP!!

    • michael says:

      There’s nothing you can really do. Twitter resizes larger images down to 1500x500px.
      It’ does disappoint though. Maybe they’re getting low on disk space?

  7. Ambrosio says:

    awesome!!! thanks

  8. Matt says:

    Hi Michael.

    I’m a bit confused by all of this and have been running some tests of my own.

    I can’t fathom the 1500x500px issue. On my 1920×1080 screen it is certainly not a fixed width at 1500 and stretches to the full width of the screen.

    Also, the 500px height adjusts depending on the size of the browser window.

    That said, I’ve only been working on the “Take a Look” preview – I don’t know if that makes a difference. I’m not ready to update just yet until I’ve got these measurements nailed.

    • michael says:

      They have changed the functionality of the layout since I posted this article.

      Before, the header photo are did not get taller when the screen got wider. It stayed constant at 500px.
      Today I’m seeing something different. The header area does get taller, the wider the screen is, but it doesn’t maintain the 3:1 ratio of the 1500x500px image perfectly.

      The image I’m testing is still being cropped. The buffer area in my template is still a good guide.

  9. [...] My friends at inlineVision have a free template you can use for the new design – access it here. [...]

  10. [...] + Conteúdo {lang: 'pt-BR'}Quer customizar seu Twitter e não lembra quais são as dimensões do novo layout? Segue, abaixo, uma dica rápida com os tamanhos exatos e, também, um template para auxiliar sua criação. Mais informações no blog Inlinevision [...]

  11. [...] Photoshop & PNG Template Files by Inline Vision (requires email list sign-up) [...]

Leave a Comment

3 Trackbacks

  1. New Twitter design – a tour & to-dos for your small business * Small Business Bliss

    [...] My friends at inlineVision have a free template you can use for the new design – access it here. [...]

  2. Dica: dimenões do novo layout do Twitter | Blog da PaperCliQ

    [...] + Conteúdo {lang: 'pt-BR'}Quer customizar seu Twitter e não lembra quais são as dimensões do novo layout? Segue, abaixo, uma dica rápida com os tamanhos exatos e, também, um template para auxiliar sua criação. Mais informações no blog Inlinevision [...]

  3. The Most Recent Twitter Update:  Your Thoughts? | Colleen Eakins Design | Atlanta Freelance Graphic Designer

    [...] Photoshop & PNG Template Files by Inline Vision (requires email list sign-up) [...]