Design a Custom Twitter Header in 8 Simple Steps

Howdy! Maybe you’re one of those who haven’t updated their Twitter headers yet, or maybe you’ve heard it already but you’re not just into creating your own design due to a lack of inspiration? Well, that’s not a problem at all now, this tutorial is for you. I’m going to show you how to create your own, and showcase some Twitter headers for your inspiration.

Before we get started creating our own design, let’s take a look at this list of inspiration to boost up your creativity level.

Use of Self Portrait

Select your best photo and align it properly to with the avatar.





Select the best product you own and showcase it.




Vector Illustration

Using Vector art is always good to look at.




Dark Backgrounds

Dark background makes the avatar picture and text pop ups more.





Very creative how they present their interest by the use of illustration.




Make it Simple



Now that you’ve seen some inspiring Twitter Headers, let’s create your very own Twitter header. See below how I created my own Twitter header.

Creating The Custom Design

Step 1

Open Photoshop and create a new document 520px by 260px.

Step 2

Let’s setup a guideline where our block will end. To do this go to ViewNew Guide. Set the value to 180px and make sure you select Horizontal.

Step 3

Now let’s create the blocks. Using the Rectangle Tool(U) create a 11px by 11px shape, place it from the top and downwards for the guideline and make sure each block has a distance of 5px. Also adjust the positioning as shown in the screenshot below.

Step 4

Duplicate all the blocks until you reach far right.

Step 5

Now that we have all the blocks in place, time to change the colour of each block. The goal is to suit your current twitter background. What if we choose three colours from the existing background? I took two colours from 1WD’s logo and a one colour a little lighter than dark grey.

  • #f58220
  • #6d6f71
  • #8a8c8f

The orange squares will be aligned to the avatar image, then the remaining blocks will be filled by the other colours.

Step 6

Continue filling the boxes with colours until you fill them all. Once you’re done, you should have something that looks like in the screenshot below.

Step 7

It feels like it’s a bit boring that it has the same number of blocks in each columns. What if we remove some blocks on the top and bottom? Let’s try it.

It looks more appealing to me. What do you think?

Step 8

Twitter will automatically darken up bottom part of the image about 50% – 60%. In this case, 60% of our design will not be enough to make the text pop up more.

How it looks when we upload it on Twitter.

Now what we are going to do is add a gradient to the bottom part of our design. Select the Gradient Tool(G), change the Foreground colour to #8a8c8f, set the gradient to Foreground to Transparent. Start filling from the bottom towards the centre of the canvas.

Now that we have finished our design, save it as JPEG, Ctrl + Alt + Shift + S to save for web.

How it looks when I uploaded it to Twitter.

How To Set Your Twitter Header

Click the settings icon and choose settings from the drop down menu.

Select Design

When you scroll down to the bottom you will see Customize your own. Click change header botton and upload the JPEG file we just created.

When you look at your profile you will see how great it is raspberry

Demo | Download


There you have it, we just created our new custom Twitter header design in eight simple steps. Just make sure that your Twitter header is a part of the overall design and describes your personality or brand. Make it as simple as possible.

Well, that’s it! I hope you found this tutorial helpful. Make sure to share this to your friends if you like it and don’t forget to follow me on Twitter @_burnstudio. Thanks!