Ever wanted to make an interesting Twitter background? Here's how I did it.
Side note: This post comes to you straight from an email reply to fellow long-time podcaster Michael Geoghegan in regards to my Twitter background.
Also of note, this layout works best on higher res monitor settings. I imagine that most active Twitter users that are going to be viewing the site as opposed to sms or mobile versions are on high res settings. That said, let's roll.
Creating your background
-----------------------------
File Dimensions: 2048 px by 1707 px (no clue why i used these dimensions but I am sure I knew what I was doing at the time)
Branding Dimensions: 80 px by 587 px
Coordinates: X=20, Y=14
Horizontal position: 20 px from the left (give yourself some padding)
Vertical position: 14 px from the top (will line up your graphic with the top of the twitter logo. our eyes like symmetry) File size and type according to Twitter: "Images must be smaller than 800k. GIF, JPG, PNG."
Aesthetics
------------
Color palette: Pick colors that match that with default Twitter stylesheet colors. If they contrast too much follow the Change Background directions above and change the colors for Text, Name, Link, Sidebar fill and Sidebar border as needed.
Recommendation: Choose colors that work with the default and save yourself the headache of matching the CSS to your image. Follow Twitter's lead.
Uploading your background
------------------------------
Change Default Background: Login and click 'Settings' >> click 'Design' >> Select 'Use my custom style below' radio button >> Upload your image
Tags: template![]()
![]()
size ![]()
![]()
twitter background ![]()
![]()
Michael Geoghegan ![]()
![]()
twitter ![]()
![]()
Side note: This post comes to you straight from an email reply to fellow long-time podcaster Michael Geoghegan in regards to my Twitter background.
Also of note, this layout works best on higher res monitor settings. I imagine that most active Twitter users that are going to be viewing the site as opposed to sms or mobile versions are on high res settings. That said, let's roll.
Creating your background
-----------------------------
File Dimensions: 2048 px by 1707 px (no clue why i used these dimensions but I am sure I knew what I was doing at the time)
Branding Dimensions: 80 px by 587 px
Coordinates: X=20, Y=14
Horizontal position: 20 px from the left (give yourself some padding)
Vertical position: 14 px from the top (will line up your graphic with the top of the twitter logo. our eyes like symmetry) File size and type according to Twitter: "Images must be smaller than 800k. GIF, JPG, PNG."
Aesthetics
------------
Color palette: Pick colors that match that with default Twitter stylesheet colors. If they contrast too much follow the Change Background directions above and change the colors for Text, Name, Link, Sidebar fill and Sidebar border as needed.
Recommendation: Choose colors that work with the default and save yourself the headache of matching the CSS to your image. Follow Twitter's lead.
Uploading your background
------------------------------
Change Default Background: Login and click 'Settings' >> click 'Design' >> Select 'Use my custom style below' radio button >> Upload your image
It took me quite a bit of time to get a background image that I was happy with. There was a lot of editing and uploading again, and again until I got it right. I would suspect if you're like me your experience will be much the same. So have patience when getting it just right. And remember that you are working within someone else's website and can't control all the features.
Update: This is the background that I based this tutorial on - Croncast background all by itself if you want to use it as a guide.
Here's my current background at work (note: it is now free-form) - http://twitter.com/croncast.
Tags: template
size twitter background Michael Geoghegan twitter