How to Create a Simple New Twitter Background Design in Photoshop

On September 14 last, twitter has introduced a new twitter, re-engineered Twitter.com that provides an easier, faster, better layout, and richer experience. But with the new display interface, our background was having problems to fit inside.
So in this tutorial, we will design an appropriate background to the layout of the new Twitter. But it can still be used on the layout of the old Twitter. Get started!

Final Image Preview

Let’s have a look what we’ll be creating
New twitter background

Tutorial Details

  • Software : Adobe Photoshop CS2 (minimal)
  • Difficulty : Easy
  • Estimated completion time : 30 – 60 minutes
  • Font used : Century Gothic

Step 1

First, please download file basic.psd: Favorite Links of The Week (0 downloads)
new twitter background

Step 2

Then make sure layer visibility in the folder 1024×768, has been active
New twitter background

Step 3

Create a writen form of your name, with font style: Century Gothic, Bold, size: 18px with white color, and change the text orientation
New twitter background

then add layer style
New twitter background

New twitter background

Step 4

With using rounded rectangle tool, we will create a new tab with radius 20px, color: #ec0064 and its position about a little higher than the position of your name that was created earlier
New twitter background

Then place the tab that we created earlier behind your name
New twitter background

Add layer style
New twitter background

New twitter background

Step 5

Make again a new tab under the first tab that we created earlier. With the same process as found in Step 3 and Step 4.
New twitter background

New twitter background

Step 6

Change the layer visibility on the folder 1024×768 become non active and on the folder 1600×1200 become active
New twitter background

Image that we’ll create below, only visible on the monitor with a resolution 1600×1200

Step 7

Create a new image as shown below, with using shape “talk5” then edit using the pen tool
New twitter background

Change the layer style in the image
New twitter background

New twitter background

Step 8

Now let’s create a sentence in it
New twitter background

Step 9

We almost finished, don’t forget to turn off layer visibility on the folder “latar”, because that folder only as a guide in making this background. Next please save it in .jpg or .png format
New twitter background

This is our final result

New twitter background

Live preview

This is our real preview for the new twitter layout:
New twitter background

And here, our background stil appropriate for the old twitter layout :
New twitter background

I hope you enjoyed this tutorial, do you have a good twitter background design? Share it with us in the comments section below!

Download The PSD File

Feel free to download the psd file (or source file): [Download not found] πŸ™‚

Powered by Shutterstock

46 Comments

  1. Globalweb Outsourcing says

    I am very glad to have your tutorial…..thank you….it’s really helpful.

  2. enam says

    me liked it. already have used it in my twitter a/c with some minor modification(hope you do not mind)……thanks a lot……;)

  3. Eko S says

    @Globalweb: Hi, we’re glad it helpful πŸ™‚

    @enam: Wow, we’re very happy…you have to use it on your twitter account. Thanks enam πŸ™‚

  4. Mike says

    Thanks for the tutorial. Very clear and easy to follow. Think I’ll give it a crack and try and come up with something better for my page. Just saw the new twitter today, so good time for new background.

  5. Bryce Wisekal says

    Resourceful tutorial. Thank you for sharing it!

  6. Yahya says

    glad you like it (^_^)

  7. Hot Yoga says

    Really nice and simple. Reminds me to do some much needed design to my twitter page. Thanks.

  8. Rob Creare says

    Thanks for this useful tutorial as I encountered the same background problem when twitter changed over to the new layout style. This background adds a nice personal touch to your twitter page without drawing focus away from your tweets.

  9. Praveesh says

    One of the simplest tutorial i ever read πŸ™‚ Good

  10. Jean Has Been Shopping says

    Excellent tutorial. Thank you! I was able to redesign my personal and business twitter backgrounds tonight.

  11. Logomondo says

    Excellent ork, Keep it like this!

  12. HD Tread says

    I still consider myself a novice at Photoshop so this tutorial has been very helpful to me for make a new twitter background.

  13. Brett Widmann says

    This is a very nice tutorial! Thank you.

  14. Soumya Dhar says

    Twitter is not just a micro blogging site anymore, along with information the graphical presentation is very much vital. This post has truly made us understand how to create an amazing background in a simple way through the help of photoshop. Great work πŸ™‚ cheers!

  15. friv says

    Thanks for this tutorial,I use Twitter,so,you help me with it.Thanks again!

  16. jocuri says

    This post has truly made us understand how to create an amazing background in a simple way through the help of photoshop.

  17. friv 4 school says

    Nice tut. I will use your tut to create a background give my twitter. Thanks

  18. David says

    Great and simple! Thanks so much for this.

  19. Sassy Jas says

    Thank You so much for this tutorial. This is one of the most helpful resources on the web, The only question is what shade of blue should Is use in the background

  20. mexican hammock says

    Yahya thanks a lot for such a nice and informative information about twitter. I am using twitter since a long time but never know those facts. Now i am going to redesign my twitter page shortly.

  21. Jocuri says

    Your tutorial help me change the project I work on. Thanks

Leave A Reply

Your email address will not be published.