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.
- Most were either limited to a set screen size, or didn’t have an editable twitter feed interface included
- “stuck” with a screen shot of the author’s twitter feed
- 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!
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!
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!
Thanks for the PSD template! A real big help to visualize how it will look in the different display resolutions.
Thanks! This helps.
thanks for the templte, its really help me…:D
how do i download it?
There are two links to the zip file: the large image at the top of the post, and the bold link at the bottom of the post.
If you have any problems with the download, please let me know.
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?
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!
Glad it was helpful Kevin!
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!
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 🙂