WordPress Tweaks & Tuts?

Subscribe to TheCreatology via RSS | Email

Quick-n-Easy way to Create Twitter Background – Part 1 [Design Layout]

by Aky Joe

You must be thinking why am I writing this article, when Mashable already has explained about Twitter Backgrounds 2.5 years back. Well, reply to this thought, is this article in which you will learn Quick way to create custom Twitter Background. If you are tired of changing or have spent a lot of bucks in getting a Custom Twitter Background, then this article is for you.


Last December 2011, Twitter changed its User Interface layout for the second time. Well, it happened for good, as Twitter adapted new html5 features. It sure is surprising for Tweeple (people who tweet), whereas annoying for few, who paid so much to get Custom Twitter Background done and it needs rework again.

Don’t worry, I have a tutorial for you below which will help you to create twitter background easily. The tutorial is divided into three parts: Basic Requirements, Prepare Theme & Design Twitter Background Layout.

Basic Requirements

Here is a list of items you need, to create custom Twitter background:

  • Image Editor (eg. Photoshop)
  • Internet Browser with screenshot plugin (optional)
  • Cool Fonts to Impress (optional)

Prepare Theme

This is an important part of the tutorial, where we will prepare and collect information to design custom twitter page. To do so, lets go through few points below:

  • Expression: The page should reflect Who You Are? a blogger, a photographer or a biker. What You Like? a Apple iPhone or a Ducati 848. It should reflect your interest and help people to know more about you.
  • Branding: The social branding conforms to have your bio, photo or avatar and contact information.
  • Show Time: After all its your page, so give it a shot. Of-course use your mad skills here. 😉

Design Twitter Background Layout

Now that we know what we want in our theme, lets start with the layout design. Check out easy steps below:

Create Latest Twitter Layout. Best way to find out the latest twitter background layout is itself twitter, check how…

  • Set your monitor resolution for the most optimized version, For Instance, in this tutorial we will be using 1366px X 768px screen resolution which also is commonly used resolution.
  • Once done, open your twitter page in any browser and Press “Prnt Scrn” on your keyboard. In case if you have a screenshot plugin installed in your browser then quickly take a rough screenshot of the visible area of your twitter page.
  • Next, open Adobe Photoshop and paste/import the screenshot file, just as in the image below.

Step 1 - Latest Twitter Screenshot

  • Now that you can easily make out in the screenshot above, usable area which is in blue color background as shown in the screenshot below.
Create Twitter New Layout-Step2

Step 2 - Prepare Twitter Theme

  • Next step is to setup guidelines, which will be a reference, when we will start with the design phase in tutorial [Part 2]. (Refer the screenshot below)
Create Twitter New Layout-Step3

Step 3 - Setup Guidelines for Design Phase

  • Save the PSD file, once you are done with setup of guidelines for new twitter background.
  • Take a break, for the work accomplished, Yes I am Serious we are done!

Now wasn’t that easy of a tutorial, just with hit of “PrntScrn” key and here we got latest twitter layout ready. Well now that we are all set with new twitter background layout and we shall proceed for the design phase. Leave your comments, incase you have any feedback, queries or doubt in your head.

PS. > Design Phase Article Link will be available shortly here. ( or subscribe to our blog)

Similar Topics: , , ,

TheCreatology Support

Got a Query? We're ready, Just Say it!

If you have a doubt or a feedback, then get-in-touch with TheCreatology Support Team now.

Start a Hangout or Email Us

Are you looking for...

  • Logo Design
  • Web Development
  • Thesis Skin Design
  • Graphic Designing
  • Virtual Assistance
Hire Us!

No Comments

{ read them below or add one }

Leave a Comment

Previous post:

Next post:

Contact Aky

Yes, I agree that all information above is valid.

Simple question, what's...