Total Followers 132,503
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.
Select your best photo and align it properly to with the avatar.
Select the best product you own and showcase it.
Using Vector art is always good to look at.
Dark background makes the avatar picture and text pop ups more.
Very creative how they present their interest by the use of illustration.
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.
Open Photoshop and create a new document 520px by 260px.
Let’s setup a guideline where our block will end. To do this go to View – New Guide. Set the value to 180px and make sure you select Horizontal.
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.
Duplicate all the blocks until you reach far right.
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.
The orange squares will be aligned to the avatar image, then the remaining blocks will be filled by the other colours.
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.
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?
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.
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 :P
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!
Get The Only Freelancer crash course you will ever need to read!
Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. Other than that he loves Coffee and his Girl.
Sunday, February 24th, 2013 11:45
Great tutorial though I was expecting few more ways to design custom twitter header .. still not bad either
Tuesday, February 5th, 2013 22:35
Awesome examples! Just the kind of thing I have been looking for for inspiration on some of our clients Twitter pages. Thank you for sharing and if I come across any more in my search I will be sure to post them here.
Wednesday, January 23rd, 2013 09:29
Twitter is one of the important Social media website and it play an important role to build and E identity of any business hence the presentation of your twitter profile must be as good as possible. The Stuff here provided to design Twitter Background is really good and it will really help to designers as well as Twitter Marketers…
Tuesday, January 22nd, 2013 08:10
Wow, awesome tips, I’ve always wondered how to make good use of the Twitter header page, now it’s time to try it out. Thanks.
Tuesday, January 22nd, 2013 04:57
Never thought about creating my header on my own. It is easy to use something that is already created but if I can do that only in few steps why not.
Also I like few ideas that you have here. Those 2 in the beginning are very cool.
Saturday, January 19th, 2013 06:31
Very well described tutorial.i will be waiting eagerly for this type of tutorial.Thanks to author
Wednesday, January 16th, 2013 10:30
Nice and very inspirational set of twitter headers. I have to do something like this with mine too :) Thanks for posting this article.
Sunday, December 30th, 2012 09:56
More power and thank you, for beginners like me your a gift from heaven.
Thursday, December 27th, 2012 08:06
I can’t afford the massive Photoshop, but i do have InkScape and GIMP. Is it possible to use these instead and still get the same effects as from Photoshop?
Saturday, December 22nd, 2012 23:57
I have it under “Edit Profile”. I’m not sure though if my twitter page has been update to new platform whatsoever but probably others have the same experience too.
Saturday, December 22nd, 2012 10:42
great examples of some very creative twitter header designs. Your instructions on how do design your own makes things easy for all of us. Thanks for sharing.
Friday, December 14th, 2012 11:27
Very useful post! Trying to predict image sizes and resolutions in the various social media tools can take guesswork and several tries before getting it right… this will save time for myself and my clients when it comes to maintaining a consistent brand online. Thanks.
Friday, December 14th, 2012 05:11
Im just now hearing such a great news about designing a twitter header @wpbeginner good informative collections…thanks for posting
Thursday, December 6th, 2012 07:19
Simply Great ! Nice Header Collections …. Explained very well, will try it today, Thank you :)
Wednesday, December 5th, 2012 15:52
I love these header designs, I think it is great that twitter has finally come-up to speed with Facebook!
I really like the designs where you match your head up with your body…..
But I think I prefer the really abstract backgrounds like the Adobe one you showed….. I found a really good site that has heaps of Abstract Twitter Headers.
That site is really worth a look.
Monday, December 3rd, 2012 08:51
Thanks John for posting on this. Very useful for me..finally, I can bring something new to the my header.
Monday, December 3rd, 2012 05:48
This tutorial is very helpful for all designers. I personally like it . I also used it spontaneously. I am looking for such a design like it.Thanks
Monday, December 3rd, 2012 01:00
Great Article Michael,
I’ve been using this great little site to get a heap of Free Twitter Headers for my own twitter profile, check it out….
Thursday, November 29th, 2012 04:43
That’s cool background! I like how they utilized the background for their brand, and those photos are cool too. Might as well change mine :)
Thursday, November 29th, 2012 07:30
Hello Sanjay,
Thanks for liking it. It will be cool too if you show us your end result when you finish it :)
Wednesday, November 28th, 2012 09:22
Nice, simple tutorial I can use to guide people who ask, always amazes me how many people get things like this wrong and end up with horribly stretched headers on T / FB etc. cheers!
Tuesday, November 27th, 2012 13:26
Just a small correction on this line. “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.”
On mine, I didn’t see “change header” button under settings. I have it under “Edit Profile”. I’m not sure though if my twitter page has been update to new platform whatsoever but probably others have the same experience too.
Tuesday, November 27th, 2012 14:18
Hey Bandy,
Thanx a lot for pointing this out.
I just checked it out myself and You are right.
It can be found at Settings > Profile .
Thanx a lot once again Bandy
Tuesday, November 27th, 2012 21:45
No problem James. Your welcome… :-)
Tuesday, November 27th, 2012 23:30
Ooh! That’s bad. I think Twitter updated it when I was writing this tutorial the change header button is place on the design tab just right above the change background. Sorry for this Bandy. Thank’s for pointing it out. :)
Tuesday, November 27th, 2012 09:23
This is just great! I was looking for a tutorial on this ever since Twitter put out this feature. Thank you :)
Tuesday, November 27th, 2012 23:21
Hello! Isuru,
You’re very welcome. Btw, from the inspiration I listed which on is your favourite?
and Don’t forget to show us you’re result. :)
Tuesday, November 27th, 2012 23:58
I think Ryan Seacrest and Damien Basile have utilized this new header feature quite nicely. I will give it a go once I have some free time for sure :)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
isuru
Tuesday, November 27th, 2012 09:23
This is just great! I was looking for a tutorial on this ever since Twitter put out this feature. Thank you :)
Michael John Burns
Tuesday, November 27th, 2012 23:21
Hello! Isuru,
You’re very welcome. Btw, from the inspiration I listed which on is your favourite?
and Don’t forget to show us you’re result. :)
Isuru
Tuesday, November 27th, 2012 23:58
I think Ryan Seacrest and Damien Basile have utilized this new header feature quite nicely. I will give it a go once I have some free time for sure :)
Sanjay
Thursday, November 29th, 2012 04:43
That’s cool background! I like how they utilized the background for their brand, and those photos are cool too. Might as well change mine :)
Michael John Burns
Thursday, November 29th, 2012 07:30
Hello Sanjay,
Thanks for liking it. It will be cool too if you show us your end result when you finish it :)
Josh
Monday, December 3rd, 2012 01:00
Great Article Michael,
I’ve been using this great little site to get a heap of Free Twitter Headers for my own twitter profile, check it out….
Mark
Monday, December 3rd, 2012 08:51
Thanks John for posting on this. Very useful for me..finally, I can bring something new to the my header.
Saiful
Monday, December 3rd, 2012 05:48
This tutorial is very helpful for all designers. I personally like it . I also used it spontaneously. I am looking for such a design like it.Thanks
SDGSteve
Wednesday, November 28th, 2012 09:22
Nice, simple tutorial I can use to guide people who ask, always amazes me how many people get things like this wrong and end up with horribly stretched headers on T / FB etc. cheers!
Bandy
Tuesday, November 27th, 2012 13:26
Just a small correction on this line. “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.”
On mine, I didn’t see “change header” button under settings. I have it under “Edit Profile”. I’m not sure though if my twitter page has been update to new platform whatsoever but probably others have the same experience too.
Michael John Burns
Tuesday, November 27th, 2012 23:30
Ooh! That’s bad. I think Twitter updated it when I was writing this tutorial the change header button is place on the design tab just right above the change background. Sorry for this Bandy. Thank’s for pointing it out. :)
Bandy
Wednesday, November 28th, 2012 12:25
No problem Michael, Good article by the way…
James Richman
Tuesday, November 27th, 2012 14:18
Hey Bandy,
Thanx a lot for pointing this out.
I just checked it out myself and You are right.
It can be found at Settings > Profile .
Thanx a lot once again Bandy
Bandy
Tuesday, November 27th, 2012 21:45
No problem James. Your welcome… :-)
Pozzy
Wednesday, December 5th, 2012 15:52
I love these header designs, I think it is great that twitter has finally come-up to speed with Facebook!
I really like the designs where you match your head up with your body…..
But I think I prefer the really abstract backgrounds like the Adobe one you showed….. I found a really good site that has heaps of Abstract Twitter Headers.
That site is really worth a look.
Ali Masani
Thursday, December 6th, 2012 07:19
Simply Great ! Nice Header Collections …. Explained very well, will try it today, Thank you :)
Juris
Tuesday, January 22nd, 2013 04:57
Never thought about creating my header on my own. It is easy to use something that is already created but if I can do that only in few steps why not.
Also I like few ideas that you have here. Those 2 in the beginning are very cool.
MH RONY
Saturday, January 19th, 2013 06:31
Very well described tutorial.i will be waiting eagerly for this type of tutorial.Thanks to author
Phil
Tuesday, January 22nd, 2013 08:10
Wow, awesome tips, I’ve always wondered how to make good use of the Twitter header page, now it’s time to try it out. Thanks.
Sachin Kalambe
Wednesday, January 23rd, 2013 09:29
Twitter is one of the important Social media website and it play an important role to build and E identity of any business hence the presentation of your twitter profile must be as good as possible. The Stuff here provided to design Twitter Background is really good and it will really help to designers as well as Twitter Marketers…
Steve
Sunday, February 24th, 2013 11:45
Great tutorial though I was expecting few more ways to design custom twitter header .. still not bad either
Jake Lawson
Tuesday, February 5th, 2013 22:35
Awesome examples! Just the kind of thing I have been looking for for inspiration on some of our clients Twitter pages. Thank you for sharing and if I come across any more in my search I will be sure to post them here.
DlaGeeka Filmy
Wednesday, January 16th, 2013 10:30
Nice and very inspirational set of twitter headers. I have to do something like this with mine too :) Thanks for posting this article.
adel
Thursday, January 10th, 2013 07:54
It was awesome, i will definitely try it. thnx for post.
Valerie Kutchey
Friday, December 14th, 2012 11:27
Very useful post! Trying to predict image sizes and resolutions in the various social media tools can take guesswork and several tries before getting it right… this will save time for myself and my clients when it comes to maintaining a consistent brand online. Thanks.
emyloretta
Friday, December 14th, 2012 05:11
Im just now hearing such a great news about designing a twitter header @wpbeginner good informative collections…thanks for posting
Matt Colangelo
Saturday, December 22nd, 2012 10:42
great examples of some very creative twitter header designs. Your instructions on how do design your own makes things easy for all of us. Thanks for sharing.
sagir hossain
Saturday, December 22nd, 2012 23:57
I have it under “Edit Profile”. I’m not sure though if my twitter page has been update to new platform whatsoever but probably others have the same experience too.
vin jansa
Sunday, December 30th, 2012 09:56
More power and thank you, for beginners like me your a gift from heaven.
Paul Mountney
Thursday, December 27th, 2012 08:06
I can’t afford the massive Photoshop, but i do have InkScape and GIMP. Is it possible to use these instead and still get the same effects as from Photoshop?