Design Review

Industry insights, studio news, and even a recipe or two!

Twitter Background Template

August 27th, 2012 by
Share This
Share on Facebook7Tweet about this on Twitter5Share on Google+6Share on LinkedIn2Pin on Pinterest10Buffer this pageShare on Reddit0

In order to complete our package of Social Media branding templates, I just finalized a smart object friendly Photoshop template for Twitter!

Looking at other Twitter background templates there were a few things that bothered me.

  1. Most were either limited to a set screen size, or didn’t have an editable twitter feed interface included
  2. “stuck” with a screen shot of the author’s twitter feed
  3. no way to show customized link color

So, here’s my attempt to provide a template that’s just a bit more flexible, and of course utilizes Photoshop smart objects!

Here’s a quick step by step that will help you see how simple using this template is:

Customize Your Twitter Feed

Double click the “Twitter” smart object layer (once you are done, all instances of the smart object will update. So it doesn’t matter which instance you edit).

Inside the smart object, the “Customize Me” layer group contains everything you need to edit:

  • the profile pic (another smart object that will update all instances, including all of the smaller versions on each tweet)
  • A link color group (just select all text layers and pick your color in one fell swoop!)
  • Optionally you can also type in a custom screen name and company name. (if you want to really go over the top, you could customize each tweet too!)

Once you are done, just click save and close. The smart object will now update in the main template file!

Double click the “Twitter” smart object to customize the “feed”

Layers inside the “Twitter” smart object

Create your Background and Test with Different screen sizes

The Photoshop file includes 4 standard screen sizes to test your background on. Simply turn the appropriate layout group on or off.

  • 1024 x 768
  • 1280 x 1024
  • 1680 x 1050
  • 1920 x 1200

In order to update customize, just create your fabulous background, and turn each screen proof layer group on and off!

1024×768

1280×1024

1680×1050

1920×1200

 

Share This
Share on Facebook7Tweet about this on Twitter5Share on Google+6Share on LinkedIn2Pin on Pinterest10Buffer this pageShare on Reddit0

About 

Kandra is influenced in her design by everything from Hubble Space Telescope imagery to the strawberry plants in her garden. Her concepts are known for their characteristic combination of warmth, simplicity and functionality, and for their strong resonance with her clients’ brand and corporate identities.

Questions or Comments? Leave a reply, we would love to hear from you.

19 Comments on “Twitter Background Template

    Mom says:

    This is good Kandy, I like your process, without doing any as of yet, still rebuilding pc; instructions seems to be easy to follow, not cumberson. Very GOOD!

    Steve says:

    Thanks for the PSD template! A real big help to visualize how it will look in the different display resolutions.

    Brandon says:

    Thanks! This helps.

    eri says:

    thanks for the templte, its really help me…:D

    Richkid says:

    how do i download it?

    AJ says:

    Why does it continue to give me an error message.
    Content type cant be blank – your file was not an image, sixe cant be blank, filename cant be blank.

    I save it as jpeg, and its a small file size

      Hi AJ –
      If you can specify what you are doing when you get the error message, I might be able to help!
      I haven’t experienced any error messages when using the template, but maybe you are experiencing an issue with a specific Photoshop command?

    AJ says:

    I finally figured out the problem. It uploads with no issues on Chrome, but with Explorer it kept on giving me error messages.
    Template is awesome – thank you very much.

      Ahhh the issue was on the upload! I thought it was in Photoshop. Glad you figured it out, and poo on IE (as always – ha!)

      Glad you liked the template, and you should post a link to your profile page so I can see your work!!

    Wow Kandra! Thanks so much, your tool literally made it possible for me to take the time and do this for my Twitter page. Easy to work with since I don’t master photoshop at all. And I love the result. You rock!

    Tarryl says:

    Hi there,

    Great template! I am fairly new to this whole world, so excuse me if this is a silly question. But after you are done with the template, and have all your customizations done- how do you upload it to your twitter account. Like, if you upload this as a background, doesn’t the twitter feed just overlay the images, link colors etc?

    Thanks!

      Hi Tarryl –
      Once you have your design all set, you would need to upload just the background image (turn off all of the other layers and export for web); upload your profile picture; then use the settings in twitter to set your font colors. The template is mainly a tool for previewing all of the changes prior to making any changes online (and for proofing to clients!)

      Hope that helps, and welcome to the wonderful world of design!

    nicco says:

    Hi Kandra, your tutorial help me a lot, but i have an issue trying to upload my background image, after i selected the proper image, appears to me the you don’t have selected any image.

    i try and try, and still doing the same. could you helpme out?

      Hi Nicco –
      After you have the background set up the way you want it in Photoshop, you need to save it as a JPG, and then you should be able to upload it to Twitter. Hope that helps!

    Thank you for sharing the visualization of what the background would look like on different screens. I really enjoyed this :)


Phone: 303.995.1472 Fax: 1.866.823.5015 Site Map