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
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 (3616 downloads )
Step 2
Then make sure layer visibility in the folder 1024×768, has been active
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
then add layer style
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
Then place the tab that we created earlier behind your name
Add layer style
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.
Step 6
Change the layer visibility on the folder 1024×768 become non active and on the folder 1600×1200 become active
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
Change the layer style in the image
Step 8
Now let’s create a sentence in it
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
This is our final result
Live preview
This is our real preview for the new twitter layout:
And here, our background stil appropriate for the old twitter layout :
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 (3155 downloads ) 🙂