Pinterest Stumbleupon Whatsapp
Ads by Google

create twitter backgroundMaybe you’ve already tried out Twitbacks, or perhaps you just don’t like limiting yourself to an app such as PrettyTweet. You’re ready for the big dogs, and you want to design your own Twitter background in Photoshop.

Instead of calling your Hot Pocket loving neighbor Jim who says he “might teach you how to do it… for a price,” you’ve come to us, and it’s a good thing you did, because MakeUseOf always delivers with no compensation required.

Setting Up the Main Background

Proper pixel dimensions are key when it comes to creating Twitter backgrounds, so you will need to start off by creating a new Photoshop file that is just the right size. The dimensions that we are going to use for this project will have a width of 2560 pixels and a height of 1600 pixels.

create twitter background

The purpose for such a big size is that it provides just enough breathing room for large-screen monitors, so try to keep your design simple. Keep in mind that only part of it is going to show on most of your followers’ screens, so don’t fret too much over making a full-size, Louvre-worthy background image.

create twitter background photoshop

Ads by Google

Because my Twitter account uses a black and white theme that matches my personal site, I will be keeping it simple with a plain background. However, if you want to get crazy, I would suggest going old school with a nice radial gradient, or perhaps you could use a hand-drawn picture or photograph.

Preparing the Side Graphic

Twitter doesn’t provide the option of adding a header or banner image to your account, so the next best thing is to have a customized graphic or logo on the side of your stream using the main background itself. In essence, the side graphic is a virtual billboard, for it allows you to add web URLs, Facebook information, and anything else that you want to include that is relevant to your account. Unfortunately, nothing on it is clickable, so just consider it to be eye-candy.

create twitter background photoshop

For example, MakeUseOf’s graphic takes up the entire side of the page with a nice artistic depiction of the site. To make something like this, you should open a totally new Photoshop file with dimensions that have a width of 235 pixels and a height of 700 pixels.

create twitter background photoshop

The sizing of this image is actually pretty variable, but the general idea is to make it as visible as you can without it running into your stream. You have a surprisingly large field to work within, so don’t worry about not having enough room. Based on the upcoming step, I would advise using a totally transparent background layer or one that matches the color of your earlier Photoshop project.

photoshop twitter background

Putting it All Together

So now that you’ve finished both your main background and your side graphic, it’s time to put them both together. First, go to the project window of your side graphic, select all, and then click “copy merged.” After this, go back to your main background, and paste your side graphic right on top of it, lining it up against the top left corner of the window. Be warned that if you don’t line it up properly, it could be covered by a portion of your stream or run off the page.

photoshop twitter background

photoshop twitter background

Despite how small the side graphic may appear to be right now, it’s going to take up quite a bit of real estate when viewed in a browser. This is exactly why you should keep the artistic focus on your side graphic, for your followers will likely be paying the most attention to it. After you are finished, I would suggest that you finish things off by saving the background as a PNG file.

create twitter background

As you can tell with my own Twitter account, the side graphic is just to the left of my stream and totally out of the way. You may notice, however, that if the browser window is open in a small size, the side graphic will be mostly covered by your stream. This is normal, so don’t worry about it.

Since the side graphic is part of the background, it is cropped when you resize the window even though the stream content still stays in view. The issue may primarily be noticed by Mac users seeing that Snow Leopard does not allow full-screen viewing unless the window is manually resized.


So now that you are a Twitter background-making fool, you can play around with these guidelines to make something sexier than my own Plain Jane design. All in all, it’s a really nice graphics skill to know, especially if you are in the business of marketing and graphic design. As an endnote, you could probably adapt these same guidelines to something like Pixelmator MakeUseOf Must-Have Mac Apps Giveaway Day #10 - Pixelmator MakeUseOf Must-Have Mac Apps Giveaway Day #10 - Pixelmator Read More or the GIMP.

We’d love to see your own creations, so follow MakeUseOf on Twitter and give us a shout-out that will direct us to your own Photoshop Frankensteins. Also, since the process is all about customization, do you make your Twitter backgrounds any differently? In what ways did this method help you?

Image Credit: mzacha

  1. Teresa
    October 23, 2011 at 12:42 am

    It's my first time trying to make a Twitter background, and this definitely got me on the right track. Now I just have to figure out how to puts pictures on... Haha!

  2. Kristen Bromley
    October 20, 2011 at 1:57 pm

    I did these instructions exactly as posted, and twitter keeps telling me that my image is too big. I set the dpi of EVERYTHING as 72 so I don't know what else to do.

    • J. Lockhart
      October 20, 2011 at 4:51 pm

      Hey Kristen! Try using the "Save For Web" option. It should let you get it to the right size.

  3. Rock Almanac
    October 14, 2011 at 9:02 am

    Thanks for the great tutorial, have just recently started my twitter page, added a background, now just need followers :-)

    • J. Lockhart
      October 15, 2011 at 7:25 am

      New follower comin' at ya.

  4. Anonymous
    September 28, 2011 at 2:02 am

    if its any help, i did a right side as well. i started with Lockhart's original dimensions, and after testing the image on several different screen sizes and browsers, decided on this: width= 1319, height= 751, res= 150 (just the way it came out after many edits). Lefthand content between 1/8 and 1 1/8 inch. Righthand content between 7 3/8 and 8 3/8 inch. Here's how the page turned out:!/stuffed_pepper.  In some browsers/screen sizes it works perfectly, in others some part of its cut off. hope it helps.

    • J. Lockhart
      September 28, 2011 at 6:35 am

      That's what was messing with me – the browser size. I'll keep this in mind, because I'll probably try it out.

  5. J. Lockhart
    September 27, 2011 at 10:54 pm

    The right side. Hm. This is where it would be difficult. The best that I could tell you is that you should do it by feel. Considering how everything aligns, most folks will be putting something only on the left. 

    Might I suggest taking a screen-cap of the page in-browser so that you can overlay it and figure things out that way?

  6. Matt
    September 24, 2011 at 8:18 pm

    Thanks man.  Great stuff.  My designer was going to change me $100 for a twitter background.  I made one that was more than adequate using your guide within 15 minutes.  

    • J. Lockhart
      September 27, 2011 at 10:52 pm

      Glad I could be of service! So. About that $100...

  7. Heather Jacobsen
    August 29, 2011 at 8:17 pm

    does the image size have to be 300 dpi? wouldn't 72 dpi be ok? thanks.

    • J. Lockhart
      August 29, 2011 at 8:40 pm

      I tell you what. You do what you want as far as that goes. We are actually having a discussion about that on my other article in the comments:

      Some commenters have come in with their own opinions on the dpi/ppi, but I recommend looking at E. Mantooth's comment. I typically use 300-600 because of the higher resolution with resizing, but the discussion there will provide you a great deal of information.

      I didn't really focus too much on the resolution as I did the basic principles of how to do it. It's really your own creative work, and I just wanted to provide a starting point. People tend to make alterations anyway. I know that I do with any tutorial that I read. 

      • Heather Jacobsen
        August 29, 2011 at 9:35 pm

        well i just always thought that screen resolution was 72 dpi. but i could be wrong. I'm currentl working on my page, using your recommendation of 300 dpi. i'll see how it looks when i upload it i could try 72 also and see the difference...

        • J. Lockhart
          August 29, 2011 at 10:12 pm

          Go for it! This will actually help me out in the future, too. 72 is probably a minimum that you can work with, but like I said, I always go higher for sizing issues.

  8. Rookie
    August 18, 2011 at 4:34 pm

    An obvious rookie question here - how did you get your image into the 235x700 file?  I'm trying to import  - but maybe that's not the right command?

    • J. Lockhart
      August 18, 2011 at 4:37 pm

      Hey there, Rookie.

      All I did was open up that typewriter image in Photoshop (File > Open > Find the file), selected all of it, and then pasted it in the 235x700. (It's very similar to how you'll copy and paste the 235x700 into the main background). 

      I'll be on here for a little while longer, so feel free to ask questions. Even if you ask while I'm out and about, I'll make sure to do my best to answer them as soon as I get back.

  9. Phillipien
    August 5, 2011 at 3:00 pm

    Absolutely love the advice!

    • J. Lockhart
      August 5, 2011 at 3:02 pm

      Hey Phillipien! I'm surprised this article has still gotten a few more reads. I'm thrilled that this helped you out. Have you been able to make anything yet?

  10. Kiren J Glover
    July 31, 2011 at 7:10 am

    Thanks a lot, just what I needed, I'm trying to start a twitter tech blog you see and this really adds an element to the page, thanks J. Lockhart!

    • J. Lockhart
      July 31, 2011 at 7:48 am

      Thanks for reading, Kiren! I'm happy I could help you!

  11. ????
    July 28, 2011 at 8:21 am

    great post I was looking for a way to create my own background thanks

    • J. Lockhart
      July 28, 2011 at 1:58 pm

      I'm very glad the article could help!

  12. john mista
    July 26, 2011 at 2:49 pm

    is it the same? with photoshop cs5?

    • J. Lockhart
      July 26, 2011 at 2:54 pm

      That's what I used. Basically, all I gave were pixel dimensions in this article. This honestly could work with any image editor that has layers out there.

  13. Anonymous
    July 26, 2011 at 9:02 am

    although am not a fan of all the backgrounds and show offs but still this is an awesome tutorial and very easy to follow, thanks and cheers  :D

    • J. Lockhart
      July 26, 2011 at 9:39 am

      I definitely appreciate that Suehl. I hope that you are able to use it for yourself.

Leave a Reply

Your email address will not be published. Required fields are marked *