How To Create A Twitter Background In Photoshop

Icon c   How To Create A Twitter Background In PhotoshopMaybe 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.

mn1   How To Create A Twitter Background In Photoshop

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.

Shot22   How To Create A Twitter Background In Photoshop

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.

Shot3   How To Create A Twitter Background In 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.

side   How To Create A Twitter Background In 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.

Shot51   How To Create A Twitter Background In Photoshop

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.

Shot6   How To Create A Twitter Background In Photoshop

Shot71   How To Create A Twitter Background In Photoshop

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.

Shot15   How To Create A Twitter Background In Photoshop

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.

Conclusion

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 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

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

26 Comments -

Anonymous

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

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

john mista

is it the same? with photoshop cs5?

J. Lockhart

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.

????

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

J. Lockhart

I’m very glad the article could help!

Kiren J Glover

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

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

Phillipien

Absolutely love the advice!

J. Lockhart

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?

Rookie

An obvious rookie question here – how did you get your image into the 235×700 file?¬† I’m trying to import¬† – but maybe that’s not the right command?

J. Lockhart

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 235×700. (It’s very similar to how you’ll copy and paste the 235×700 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.

Heather Jacobsen

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

J. Lockhart

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:

http://www.makeuseof.com/tag/create-standard-youtube-background/

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

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

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.

Matt

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

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

J. Lockhart

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?

Anonymous

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:¬†http://twitter.com/#!/stuffed_pepper. ¬†In some browsers/screen sizes it works perfectly, in others some part of its cut off. hope it helps.

J. Lockhart

That’s what was messing with me ‚Äď the browser size. I’ll keep this in mind, because I’ll probably try it out.

Rock Almanac

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

J. Lockhart

New follower comin’ at ya.

Kristen Bromley

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

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

Teresa

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!