How to create a Twitter Background

I spent a few hours learning how to create a Twitter background in Photoshop for my Twitter page. I don’t have much free time, and playing with technology is one way I stay sane. Plus, a very active Twitter user and my student, Paige Soucie, requested to learn. Fortunately, I ran into my friend Nancie Dodge. She shared with me her recently acquired (last night) knowledge on how to create a Twitter background in Photoshop.

I will share my notes from her quick lesson on how to create the image in Photoshop. These instructions require a very basic knowledge of Photoshop.

Examples:
@mpranikoff
@knightfdn
@adamostrow
@JLab
@fvongraf
@drcarp

Free Social Media and Other icons:
50 Social Service and Bookmarking Icons Sets for Bloggers
35 Social Media Love Icons
Free Icons
75 Beautiful Free Social Bookmarking Icon Sets

Steps: This handout is for users who know basic Photoshop.
1. Open Photoshop
2. File > New > Name Document > Preset (Web) > Select 1280 X 1024 or 1024 X 768 (Size is experimental because people have control over the size of their browser by stretching the handles in the corner).
3. Pick a color using the Paint Bucket tool. It is best to stick to a solid color because you will have to match the background color chosen in Twitter because people may stretch their browser beyond the size of your image.
4. The left-hand side is the real estate typically used for sharing information about yourself or your company. The main Twitter center area is approximately 763 pixels. Design content for outside that area. Try 160 pixels for your width of your informational sidebar on the left-hand side. That is what worked for me.
5. New Layer(s) > Create your informational sidebar (e.g., name, social media icons, URLs, picture)
6. You will find you will likely have to upload several .jpg versions of your design to Twitter because the width does not always work. I uploaded 5 different .jpgs my first time.
6. File > Save for the Web and Devices
7. Go to Twitter > Settings > Design > Change Background Image
8. Change Design Colors > Find your Web color in Photoshop (e.g., 500303)
9. Test the final design on several computers.

Leave a Reply