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)
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:
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.
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
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.
Incase you’re new to extensions, after installation go to the Window menu and tick off Social Kit from the Extensions dropout:
Create a clipping mask with your graphic on the “EDIT THIS” layer:
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:
- 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
- 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
- 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…)