Visible Area of Twitter Header Graphic

Twitter Help: Why doesn’t my Twitter header graphic show as expected?

What the hell is going on?

At Veloxsites, every time we make a Twitter header graphic we run into this.  This has brought the team some endless confusion and frustration.  We can be found cursing the skies: Twitter specs, why have you lied to me?

Well, Twitter isn’t lying, they just aren’t being helpful, in a moment you’ll see why.  You know who they are really letting down is graphic & CSS n00bs (tres technical term for newbie). Straight from the horse’s mouth, Twitter tells us that the header graphic dimensions are 1500px by 500px:

  • Header photo (recommended dimensions are 1500×500 pixels)
  • Profile photo (recommended dimensions are 400×400 pixels)

Twitter Support – https://support.twitter.com/articles/127871

 

Now you ask: so why isn’t my full Twitter header graphic being shown?

Guess What?! It is. It just has other things layered on top, hiding parts of it. You can see when you inspect the header element in your browser the image is size 1500×500 pixels and takes all of that space, but the top menu and profile navigation sit on top:

Twitter Header - Inspect Element

So yeah, those dimensions are totally correct, but there should probably be some directions about a safe area.  For anyone familiar with creating graphics for video, we all know there is a standard “action safe” and “title safe” area within the screen.

How do I know where Twitter’s title safe area is?

When we inspect the top menu and profile navigation we can learn their sizes and how much space we are loosing on our Twitter header graphic.

Global Navigation CSS Rules

Profile Navbar CSS Rules

Now we know we are losing 46px off the top of our graphic and 60px off the bottom.  For safety on resizing the window we probably want to give ourselves a bit more of a buffer, at least 5px.  So, when creating a Twitter header graphic make sure you put nothing of important in the top 50px and the bottom 65px.

 

Photoshop Social Kit Extension

Social Kit Logo

If you use photoshop to create your Twitter header then, easy peasy, make yourself some guides and don’t go out of them! There’s even this nifty photoshop extension called Social Kit created by Source that can help you test out your Twitter header creations.

Social Kit Preview Graphic in Twitter Profile
Social Kit – Preview Graphic in Twitter Profile

Incase you’re new to extensions, after installation go to the Window menu and tick off Social Kit from the Extensions dropout:

Open Social Kit Photoshop Extension
Open Social Kit Photoshop Extension

Create a clipping mask with your graphic on the “EDIT THIS” layer:

Social Kit Cover Photoshop Layers
Social Kit Cover Photoshop Layers

 

But I don’t Use Photoshop…

Now we’re playing a guessing game!  No worries, I’ll give an overview of 3 web apps that can help you create Twitter header graphics, sort of.  But basically, the idea is to estimate that you’re buffering at least 50px from the top and 65px from the bottom.

*The following overview is regarding the free versions of these apps:

Snappa Logo

1. Snappa

  • Newly launched by the guys behind stocksnap.io
  • Surprisingly quick
  • Has no preview feature
  • Lets you access all the images from stock snap for ease of use
  • Shapes and icons are integrated from public libraries
Snappa Size Selector
Snappa Size Selector
Snappa Work Area
Snappa Work Area

 

Fotor Logo

2. Fotor

  • Medium app speed
  • Has a preview that is 100% inaccurate
  • Almost all images and shapes are premium elements
  • You need to source and upload all your own stuff
Fotor Size Selection
Fotor Size Selection
Fotor Work Area
Fotor Work Area
Fotor Incorrect Preview
Fotor Incorrect Preview

Canva Logo

3. Canva

  • They have lots of templates, not just for social images
  • Their Twitter preview is an intrusive overlay, at the very least it appears to be accurate
  • There are more free images available than Fotor
  • Painfully slow (every time I try to create anything I rage quit and use photoshop, but you told me you have no photoshop, so…)
Canva Social Templates
Canva Social Templates
Canva Work Area and Preview
Canva Work Area and Preview