Simple Twitter Background: Create your own

Have you always wanted to design your own Twitter background? But never had the graphic design skills or no-how. Then have a read of this article on how to create your own very simple, quick and easy Twitter background, either from scratch or through a simple online website that I have linked below.

Firstly, there are several ways of creating a custom background for Twitter, the tutorial I am writing here, is for a very simple and quick background that will use the default colours to help match the theme throughout.

Setting the size of your background // Firstly you will want to set up a your page, set it to 378 px x 583 px (It’s important to note:  Different monitor sizes, and different screen resolutions will cause variations on how your background will apear. The sizes we use here, should meet the needs of most peoples computer screen displays, but feel free to go larger). Also important to note, Twitter will force your background to arrange itself to the far left of the page.  So give your self some room from the hand side.

Now to set a logo area // You want to make a 80 px by 583 px (this is about how big you want it to be)

Left margin // Remember to set everything 20px or so from the far left side of your page to give yourself some breathing room.

Top margin // We now want to come down 20 px from the top of the page, from this point, this is where you want to put your logo (using this size your logo should line up with the Twitter logo).

Right margin // From the left margin we have just placed, you want to create 150px or so area this is where you are going to want to put your final guide. This will now create a column for you to place your information/content in. (Between the left and right margins).

Saving // We need to make sure our final file size is small than 800k. Otherwise they wont let us upload it.

Final tweaking // Colors: Select colors that match your Twitter template colors. You can change the colors for Text, Name, Link, Sidebar fill and Sidebar border as needed in the dialog box on Twitter. Make your life simple and design your background colour to coincide with the colour choices in Twitter, so they all blend and match up nicely.

Uploading your Twitter background // Login and click ‘Settings’ >> click ‘Design’ >> Select ‘Use my custom style below’ radio button >> Upload your image

Getting your background to marry up perfectly with your twitter page may take some time to get a background your happy. I won’t lie, it does take a bit of trial and error, there’s a lot of editing and uploading again, and again until it is perfect. Remember your background will look differently on larger or smaller screens, so keep your background simple and clean. Aslong as you keep most of your details/logo’s to the top left of your page, you will be fine. Goodluck.

PS: Download // If I’ve confused you with my poorly written tutorial (which is highly likely), I have included the simple Twitter background Photoshop file I created for this demo, here for you to use.

Thats too much effort for me // Well, if your not as design savy as some, or simply don’t have the relevant design programs, then you can always head on over to Free Twitter Designer where you can design your own background online, it offers much more freedom than the Twitter default background templates. It is still curently in Beta, but hey give it a whirl.

 

Josh

Josh is a multidsicplinary designer who has a love for creativity and design. He enjoys learning and experimenting in all areas of design. Please feel free to follow Josh on Twitter

 
  • Hey man, was just browsing through the internet searching for some information and came across your blog. I am impressed by the information that you have on this site. It shows how well you understand this subject. Marked this page, will come back for more. You, my friend, ROCK!!!

  • J

    Hey Steffan, thankyou so much for your kind words, I’m still very knew to this blogging lark as you can probably tell, so I appreciate your words of encouragement greatly. Might I also add, your website is awesome! Thanks again for finding me and taking the time in commenting. Take care.