How to Create a Twitter Background Image

Posted on November 10, 2008 by blueleafcreative

images1

How to Create Twitter Background

You are on Twitter and you want a custom background.  Here is what you need to know.

You can create your own background in any application that will let you save the file as a .jpg, .gif or .png and allows you to create the graphics you desire.  I used Adobe Photoshop to create mine (take a peek to see what it looks like).

Here are some things you need to know before getting started:

  • Your twitter background will force itself to the far left of the page.  Give your self some room from the left side.
  • People have different size monitors, so it is best to keep the graphics on the left and a solid color on the right so that you know they are seeing what you want them to see.

Creating your background

Set Your File Dimensions (page size): 378 px x 583 px or 5.25 inches wide x 8 inches tall

Now Set A Logo Area: 80 px by 583 px or 1 inch x 1.25 inches (this is about how big you want it to be)

Left Margin: Remember to set everything over 3/4 of an inch from the left side.

Top Margin: 14 px or 1/8 inch from the top is where you are going to want to put your logo (this way it lines up with the Twitter logo).

Right Margin: 3/4 inch – 1 inch  from the right is where you are going to want to put your guides.  Place your information between the left and right margins.  This will give you a little “elbow room” as people expand and collapse their windows.  Thanks The Harriman Team for point this out.

Important Note:  Different monitor sizes, and different screen resolutions will cause variations on how your background appears.  The sizes above were created so to meet the needs of most people.

Final file size according to Twitter:  “Images must be smaller than 800k.”

Make it “Purdy”

Colors: Select colors that match your Twitter template colors. You can change the colors for Text, Name, Link, Sidebar fill and Sidebar border as needed in the dialog box on Twitter.
Recommendation: Choose colors that work with the template you have choosen and save yourself the headache of matching the links, etc. to your image.

How to Upload your Twitter background

  1. 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 it was just the way I wanted it. Have patience and you’ll be thrilled with the results. Remember that you are working within someone else’s website and can’t control all the features.

Keep these things in mind when creating your new background for Twitter.

Things to remember when creating a twitter background image

Things to remember when creating a twitter background image

Good Luck!

If you found this article helpful, please Stumble or give a TWEET.  Your support is greatly appreciated.

If you have any questions or problems, please leave comments below, Tweet me or send me a direct message via Twitter.  I’m always here to help!

Happy Tweeting!

Connect on Facebook, Visit Blueleaf Creative online. Contact Leah at ldossey@blueleafcreative.com Follow Leah on Twitter, join the facebook group Creative Wisdom, or become a fan of Blueleaf Creative.

subscribe_to_creative_wisdom

Possibly related posts: (automatically generated)

Filed under: Social Media, Web 2.0, Twitter | Tagged: ,

« »

31 Responses

  1. mcmilker, on November 10th, 2008 at 10:51 pm Said:

    Arghhh…could have used this post yesterday as I fiddled around in Photoshop trying to figure out how many pixels to make my image!

    terrific primer on creating a background for twitter – will tweet!

  2. blueleafcreative, on November 11th, 2008 at 1:11 am Said:

    McMilker – Sorry the timing was off for you! If you need any help or suggestions for your background let me know. I’m glad to assist! Just give me a shout on Twitter or leave a comment below! Love to follow you on Twitter!

  3. Meroko, on November 11th, 2008 at 1:50 pm Said:

    Thanks for this! I just sent a couple of people to this page! A great idea to write it all out for people to do their own!

  4. blueleafcreative, on November 11th, 2008 at 1:57 pm Said:

    Meroko – You are welcome! Glad you are finding it useful! Will be posting a new tutorial on how to create a Twitter background in Word/PPT later this week for all of our PC friends out there!

  5. Julie - On the Dot Creations, on November 12th, 2008 at 12:59 pm Said:

    A wonderful, informative post! I’ve been on Twitter for 2 days now, and need to work on creating a nice background. Thanks so much!

  6. Carla, on November 15th, 2008 at 9:09 am Said:

    Thanks so much for this tutorial – I found it hugely helpful. I only had one major modification – I used an 80px top margin rather than 14px. It works better if you’re intending on using a prominent text box as it matches up with the top of the main box.

  7. Nathon, on November 16th, 2008 at 1:52 pm Said:

    I appreciate the technical specifications you’ve given us. I am a PC user and I do not have Adobe Photoshop. You mentioned that you would post how to create a background in MS Word. How is that possible? How do you get MS Word to save its file as an image, rather than a .DOC ?
    Thanks

  8. gus, on November 16th, 2008 at 3:56 pm Said:

    Thanks for this! I set out to create a custom twitter background this afternoon with Photoshop (with which I’m a beginner). From start to finish, it took me about two hours. It was relatively easy with your directions.

    if you don’t have photoshop, you can probably also use the Draw program in the free Open Office suite of programs.

    thanks! pls follow me at twitter.com/gus_sentementes

  9. Thyme2dream, on January 8th, 2009 at 7:40 pm Said:

    oooh, thank you for posting this!! my hubby is the official photoshop wizard at our house, and now I can ask him pretty please to make a background for me…he wouldnt have had the patience to figure it out himself, lol

  10. DurbinDigital, on January 19th, 2009 at 12:07 am Said:

    Did a RT 4 U! Great article, now I might actually be inclined to change my BG… been too busy to browse through all of the settings & options!

  11. Grandpa Shayne, on January 21st, 2009 at 3:45 pm Said:

    Leah, This is wonderful. Very specific. I’ll be using it for my new profile.

    Thanks, @ShaynePacker

  12. blueleafcreative, on January 21st, 2009 at 9:26 pm Said:

    Glad this is useful for you – please let me know if you have any issues or if there is anything else I can do to help!

  13. The Spotlight, on February 1st, 2009 at 1:45 am Said:

    Thanks!! Very Helpful

  14. Twitter backgrounds | Bengt Wendel, on February 2nd, 2009 at 2:11 pm Said:

    [...] are some useful links with tips and images: How to Create Twitter Background Make a Good Impression with a Custom Twitter Background Free Twitter Backgrounds – I picked one [...]

  15. A Penguin in the Orchard » Blog Archive » links for 2009-02-05, on February 5th, 2009 at 8:09 pm Said:

    [...] How to Create a Twitter Background Image (tags: twitter design tools) [...]

  16. Mary Rudakas, on February 25th, 2009 at 10:50 pm Said:

    Thanks so much for this!! Working on it now, finally upgrading from the boring basic background!

  17. Maria Keckler, on March 3rd, 2009 at 12:16 pm Said:

    Very cool. New to Twitter, so I’ll be trying this out. Thanks for the help.

  18. Twitter backgrounds | Bengt's Notes, on March 11th, 2009 at 2:17 am Said:

    [...] are some useful links with tips and images: How to Create Twitter Background Make a Good Impression with a Custom Twitter Background Free Twitter Backgrounds – I picked one [...]

  19. 25 of the Best Designed Twitter Homepages | Design Reviver, on March 19th, 2009 at 4:49 pm Said:

    [...] How to create a Twitter background image (blueleafcreative.wordpress.com). How To Create A Custom Twitter Background (searchforblogging.com). Make a Good Impression with a Custom Twitter Background. How to Create a Twitter Background (ehow.com). Create a Twitter Background Using Powerpoint (theclosetentrepreneur.com). [...]

  20. Doctor Twitter, on April 4th, 2009 at 5:20 am Said:

    Doctor Twitter is the number one source for twitter themes..u can easily apply them with one click…good tutorial and i think it would work well for the professional types on Twitter

  21. 25 of the Best Designed Twitter Homepages | Easy Street Interactive Blog, on April 10th, 2009 at 10:05 pm Said:

    [...] How to create a Twitter background image (blueleafcreative.wordpress.com). How To Create A Custom Twitter Background (searchforblogging.com). Make a Good Impression with a Custom Twitter Background. How to Create a Twitter Background (ehow.com). Create a Twitter Background Using Powerpoint (theclosetentrepreneur.com). [...]

  22. Katie, on April 20th, 2009 at 5:14 am Said:

    Ok, I’ve been trying to create my own personal background for twitter, and I put in the dimensions you gave and it’s way too small. It’s like a tiny portion of the screen, and I do NOT want to tile the image. Please, if you could, give the correct dimensions for the graphic.

  23. Twitter Backgrounds, on April 30th, 2009 at 5:19 pm Said:

    Good detailed article. People who know how to use photoshop and are active on Twitter will like to use your tips to make their own custom background image.

  24. Ghillie Suit, on May 16th, 2009 at 11:34 pm Said:

    thanks for the instructions. working on mine now.

  25. chauhan, on May 18th, 2009 at 7:16 pm Said:

    Thanks for posting, Its really help those people who are using twitter backgrounds, twitter templates etc.

  26. twitter backgrounds, on May 22nd, 2009 at 2:25 pm Said:

    Great tutorial you’ve got here! We actually referenced it when we were deciding on sizes to create our free twitter backgrounds. It’s a good detailed article that would help even a beginner make a twitter background. Thanks again.

  27. DG, on May 27th, 2009 at 10:03 am Said:

    I do not have this option under Design??

    ‘Use my custom style below’ radio button

    I have the option to Browse for a image but that isnt working …

    hmmm … a bit stuck

    :)

  28. Dave, on July 14th, 2009 at 2:41 am Said:

    Just what I have been looking for. Many thanks for that tut.

  29. seventysangel75, on August 4th, 2009 at 3:49 pm Said:

    very helpful working on making a creative one now thanks heaps :)

  30. Ben Brooks, on August 12th, 2009 at 8:28 pm Said:

    Hi there,

    Thanks Greatly for the specs etc. although I found that I didn’t need the Left Hand Margin when I used Fireworks.

    Twas of great help to me.

    Cheers again
    Ben Brooks

  31. Want to customize your Twitter background? « rock the status quo, on September 5th, 2009 at 12:08 am Said:

    [...] your Twitter background? 2009 September 4 tags: Twitter by morgancarrie Here is a good article from BlueLeaf Creative on customizing the look of your Twitter background – very important to do for both Twitter [...]

Leave a Reply