iBrandStudio - Resources in Designing Your Brand Identity

How to Create a Simple New Twitter Background Design in Photoshop

Posted October 9th, 2010 in Tutorials by Yahya

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 (2373)
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 (1815) :)

You can get high flying success by using our mcdst study guide, 642-437 exam dumps and testking 642-902 study materials. Testking 70-642 dumps and exam guide of testking ccda are also very useful in the preparation of exams.

share button
Powered by Shutterstock

45 Responses so far.

  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. 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. Resourceful tutorial. Thank you for sharing it!

  7. Yahya says:

    glad you like it (^_^)

  8. [...] 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 [...]

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

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

  11. Nathan Jones says:

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

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

  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. Hot Yoga says:

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

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

  17. Praveesh says:

    One of the simplest tutorial i ever read :-) Good

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

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

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

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

  22. [...] 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. [...]

  23. [...] 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 [...]

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

  25. Logomondo says:

    Excellent ork, Keep it like this!

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

  27. This is a very nice tutorial! Thank you.

  28. [...] 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! [...]

  29. [...] 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 [...]

  30. MDesigns says:

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

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

  32. friv says:

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

  33. jocuri says:

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

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

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

  36. David says:

    Great and simple! Thanks so much for this.

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

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

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

  40. Jocuri says:

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

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

Leave a Reply