Posted by: msbodetti on Aug 11, 2011
So after my last post on creating a custom background for my YouTube channel, I thought it would be definitely cool to get it done for Twitter.
Even though both YouTube and Twitter pages look similar and if you had to upload your YouTube background we made before, you will see that it's totally off. And to figure out how to design your custom background, you have to resize your browser to see if the background changes in any way.
So I uploaded my YouTube background to my Twitter page but it's too much to the left. So when I resized the browser window to the left to make it narrower, the background stayed still but the Twitter body moved to the left. And when you move it to the right, the Twitter body moves right.
So what can we do with that information?
We can make a custom background with our main images placed on the top left corner and try to keep important images away from the right, reason? Well we don't know how big or small our viewers browser windows are opened and if it's on the left, the viewer will still see it regardless how big or small their windows are opened.
But which screen size should we use?
We should use the most common one 1280 x 1024
1. Download the psd file of the Twitter template here. If you look in the layers panel, you should see a folder called Templates and you will see the most common screen sizes listed. Make sure the 1280 x 1024 is not hidden and all others are.
2. You will see the Blue area is the background we going to place our custom images to. You can place images to the right but it's not advised because not all our viewers have the same screen size. Delete the background layer and you should see that the 1280 x 1024 is transparent.
We can place our images behind it to see where it will be not seen by the Twitter body. I'm going to be placing my image on the left side behind the purple seen below. And add some bubbles. Be creative!
3. Once you finished customize it to your liking, hide the 1280 x 1024 layer and Save for web and devices. Remember you can only save it as a JPEG, GIF or PNG and it needs to be no more than 800K. (GIF and PNG can show transparent backgrounds, JPEGs don't)
4. Login to your Twitter account and go to Edit profile - Design and select the Change background image button on the page.
Browse to your custom Twitter background and press Save changes. Wait for it to upload and reload the page. It should be seen in a box under Change background image. If you don't see it, keep trying or try again later.
Select that box and let it load for a preview. You can change the text, links, box and background colors to match your background image by selecting Change design colors button.
Check out a snapshot of my custom Twitter page below
If you get stuck, let me know and I'll help!