How to Create a Simple New Twitter Background Design in Photoshop

3,398

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: twitter_basic (3496 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): Simple New Twitter Background (3046 downloads ) 🙂

You might also like
47 Comments
  1. […] October 9, 2010: For new twitter background design please check our new photoshop tutorial how to create a simple new twitter background design and download the psd file for […]

  2. Globalweb Outsourcing says

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

  3. 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……;)

  4. 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 🙂

  5. 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.

  6. […] Article Link […]

  7. Bryce Wisekal says

    Resourceful tutorial. Thank you for sharing it!

  8. Yahya says

    glad you like it (^_^)

  9. […] Life Of Aquatic Sounds” →Create Light Text For Easily Create Light Text For Easily →How to Create a Simple New Twitter Background Design in Photoshop On September 14, Twitter introduced its newly redesigned interface that provides an easier, faster […]

  10. […] How to Create a Simple New Twitter Background Design in Photoshop […]

  11. […] How to Create a Simple New Twitter Background Design in Photoshop […]

  12. Nathan Jones says

    Very interesting, I have just written about some Photoshop Training and all about the New Photoshop CS5.

  13. […] How to Create a Simple New Twitter Background Design in Photoshop […]

  14. […] How to Create a Simple New Twitter Background Design in Photoshop […]

  15. […] How to Create a Simple New Twitter Background Design in Photoshop […]

  16. Hot Yoga says

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

  17. 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.

  18. Praveesh says

    One of the simplest tutorial i ever read 🙂 Good

  19. […] How to Create a Simple New Twitter Background Design in Photoshop […]

  20. […] 2: Create a new simple twitter background design in Photoshop […]

  21. […] a tutorial by iBrandStudio shows how Photoshop can be used to customize a profile background on Twitter. This nine-step, basic […]

  22. […] 5. How to Create a Simple New Twitter Background Design in Photoshop […]

  23. […] zijn recht komt. Dus maar eens gegoogeld om een oplossing te vinden voor dit probleem. Ik vond deze Engelstalige tutorial een eenvoudige manier (ook voor de beginnende Photoshoppers) om een eigen ontwerp te maken. […]

  24. […] Links of The Week – Resources for Effective Twitter Background Design – N.10How to Create a Simple New Twitter Background Design in PhotoshopFreebie: Diagonal Color Lines Twitter BackgroundFavorite Links of The Week – Resources for […]

  25. Jean Has Been Shopping says

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

  26. Logomondo says

    Excellent ork, Keep it like this!

  27. 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.

  28. Brett Widmann says

    This is a very nice tutorial! Thank you.

  29. […] How to Create a Simple New Twitter Background Design in Photoshop 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! […]

  30. […] new Twitter home page layout.How to Create a Simple New Twitter Background Design in Photoshop from ibrandstudio.comHow to make a Twitter background for the new Twitter.com from amplify.comFree New Twitter Background […]

  31. MDesigns says

    Good work, very simple and clean, check out my one:
    http://twitter.com/MDesignsuk

  32. […] 7.  How to create a simple new Twitter Background in Photoshop […]

  33. 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!

  34. friv says

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

  35. jocuri says

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

  36. […] 7.  How to create a simple new Twitter Background in Photoshop […]

  37. friv 4 school says

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

  38. David says

    Great and simple! Thanks so much for this.

  39. […] How to Create a Simple New Twitter Background Design in Photoshop […]

  40. 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

  41. 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.

  42. Jocuri says

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

  43. […] 13. Create a Simple New Twitter Background Design in Photoshop […]

  44. […] 7.  How to create a simple new Twitter Background in Photoshop […]

  45. honda oto tay ho says

    Thank You so much for this tutorial

Comments are closed.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. AcceptRead More