New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating and applying custom backgrounds

From: Social Media Marketing with Facebook and Twitter

Video: Creating and applying custom backgrounds

So you've set up your Twitter account. Now, the thing with Twitter is that it's much more about the message, less about the flash, all right, because a lot of times people are going to be following you and using their own Twitter readers, Twitter utilities. They're not actually going to go to twitter.com/blissno5 to see what it is that you've written. Or they don't go to Twitter web site to tweet; they use something else. Very often when you find somebody interesting that you want to follow, you'll go to their Twitter page to see a list of all their past tweets, which I haven't even found a utility that really shows you a single user's past tweets better than the Twitter page itself.

Creating and applying custom backgrounds

So you've set up your Twitter account. Now, the thing with Twitter is that it's much more about the message, less about the flash, all right, because a lot of times people are going to be following you and using their own Twitter readers, Twitter utilities. They're not actually going to go to twitter.com/blissno5 to see what it is that you've written. Or they don't go to Twitter web site to tweet; they use something else. Very often when you find somebody interesting that you want to follow, you'll go to their Twitter page to see a list of all their past tweets, which I haven't even found a utility that really shows you a single user's past tweets better than the Twitter page itself.

So it does make sense for you to spend some time in fancying it up a little, making it a little custom for your own business. So we're looking at Anne Smith's new Twitter account, which is using the default blue-color background. And if you want to change the background or the color of the links or maybe add some art over here, you need to go to the Design section. Now we are looking at a new Twitter layout. If you watched this title from my year and a half ago and you followed my instructions for creating a custom background, then you might realize it's not really working with the new Twitter design.

They changed the design in October of 2010, and they gently rolled it out, making it optional for most users until recently in the spring of 2011, when everybody is using the new Twitter design. Basically, your feed takes up much more room than it did before. This is 1,040 pixels going across. So you have less room of a message on the left. Anyway, let's take a look at some of the different designs that are built in, and then we'll talk about creating a custom design. To get to the Design section, you need to be on your profile.

That's the list of your own tweets, not your Home section--that won't work. Go to profile and then click Edit your profile over here. When you click that, then it will bring you to the editing mode, where you'll find Design. So it's a little harder to locate than it was in the old Twitter design. Jump right over to Design, and here are the themes, and a theme is a combination of a background image that's built into Twitter and different colors for the background of your tweets, for the sidebar, and for the links. So notice how as I click on these different themes, the link colors and the background colors also change.

You can always override one or both of those. You can change the background image and leave the design colors--the design colors are the colors for links and backgrounds of your Twitter feed--or you can change the design colors themselves. So if I said, well, gee, I kind of like this one with the leaves, I can just click Change design colors. I can change the color of the background behind the leaves, the color of the text, the color of the links, and so on. I am not going to spend too much time there; instead, we are going to be talking about creating custom backgrounds, which you do down here by choosing Change background image.

You can upload your own image. Before I actually jump into how you would do that, let's take a look at some other Twitter pages. Here is a good friend of mine named Megan who's using one of the built-in default Twitter backgrounds, which chooses the colors for her. So, it looks pretty good. Forget Computers chose a very simple background color. It's not one of the built-in patterns. Then apparently, their brand's color scheme is orange and gray, and they went ahead and change the links and everything to gray and orange, to this theme. So they're using a very simple interface.

They're not spending a whole lot of time in coming up with a background image, which makes a lot of sense, because notice on this monitor, which is at 1,280 pixels wide, if I make it smaller, we lose even more space to the left. So there is an inviolate among the space of 40 pixels wide here. If you want to put a message, it would have to be 40 pixels tall--probably rotated would make the most sense. But otherwise, for people with larger monitors, you do get more space, and the Twitter feed remains centered on the screen. So James Fritz, trainer in Milwaukee, is sort of like Forget Computer's.

He's got a very simple background color and colors. A friend of mine named Joan Stewart who has a wonderful busy publicity business with many thousands of followers, notice that she has not quite yet updated her Twitter background to match the new Twitter design. So you'll find a whole lot of sites that look like this, because for so many months Twitter used the old design, which gave people a lot more room here on the left. So you might need to redo this, because this is kind of awkward. Now I assume that if I am on a much larger monitor, we would have more space here on the left. But a lot of people are looking at Twitter pages on really tiny monitors, on iPads and tablets and things, so you might want to keep that in mind that if you have a background that you modified for the old Twitter design, you should go back and change that.

And here is somebody who did do that; InDesign Magazine rotated their logo and they got rid of a whole lot of text that used to be here. It still gets cut off if I am on a very small monitor size, but on a 1280 or larger monitor then it's perfectly fine. And they made a nice little fade in to the background color here. So, how do you customize this background and upload it to replace one of these guys? The best thing to do is to figure out what colors do you want there. And what I did was I just jumped over to my web site, which remember is blissno5.com, and I am kind of doing this on the cheap.

I don't have an advertising department or an art department. So this is a built-in theme from WordPress, from my blog. What I did was I just took a screenshot of this section of the web site, and then I open it up in Photoshop. Here's that screenshot. I just open it up, and then I selected it and I copied it and I pasted it into a Twitter background template. It's a free exercise file that you can download from this title. I created it for you. It's called New-twitter-background.psd. It should open in any version of Photoshop.

What it shows you is this is a very wide file. It's 2,500 pixels wide, so that it doesn't have to tile. It doesn't have to repeat. Basically, you would fill the whole thing with the background color and then put your artwork on top. This box here represents your width of the Twitter feed, those two columns. Then over here, if we zoom in, this guideline shows you, if somebody is looking at your Twitter page on a monitor whose horizontal resolution is 1024, you have these 40 pixels to play with. Remember InDesign Magazine, that was flipped up.

If they're looking at it on a 1280-wide monitor, a pretty common size, you have this many pixels. And if they're looking at it on a widescreen monitor, which is 1440, you have this many pixels. So basically, you want to get your message over here, probably keep it within 1280, and have something that makes sense in that inviolate 40-pixel area here on the left. Remember, I talked about that. Now you also have 20 pixels at the top. Let's jump back to Safari. And if we look at say Forget Computers, this nav bar is at the top, and then there's 20 pixels of space here that you can play with.

So your background image can go all the way to the top. Or if you want it to align with the top of your Twitter feed, you'd move it 20 pixels down. So I dropped that into my Twitter background. Notice that I've set up this file so that Twitter elements are these. So, the idea is that you would go to Your art section and drop in your stuff, and then you can hide the Twitter elements. So what I did was I took the URL and I typed it out and rotated it and fit it so that it fit exactly within that 40 pixel, and then I put my phone number there.

Then I had it just fade out. I also put in a large background color behind the whole thing. There are other templates around on the Internet, if you want to look for Twitter background templates. The problem is that not a lot of them have been updated for the new design, so keep that in mind when you're evaluating these. Once you have gone ahead and created a file in Photoshop, what you want to do is hide all the elements you don't want to be part of your Twitter background, like I don't want this thing to be part of my Twitter background. So I am going to hide this and then choose Save As a JPEG or Save for Web & Devices as a JPEG.

Your file needs to be under 700K in file size, and it needs to be JPEG, GIF, or a PNG file. So I've already done that, and I saved it to my desktop. Then you go to your Design section of your Twitter page, come down here, and you click Change background image, and then Choose File. I have mine in Twitter art under bliss, not bliss_logo, bliss-bgd.jpg. I don't want it tile, because it's 2,500 pixels wide, and then you have to remember to choose Save Changes.

That's when it uploads a file, and it says, "Your profile customization has been saved." Now, let's take a look at our Twitter page. Here we go! So I wanted it to go all the way up the nav bar, so I carried that artwork all the way to the top. I didn't leave that 20 pixels wide here, and I kind of like how it came out. So, you don't have to spend all day doing this, because remember not everybody is going to go to your Twitter page. And also, people can't click this. This is a background image. So they're not going to be able to click it. But you do want to be able to put some information here, maybe your tag line, your web site, your phone number, things that might not be in your bio, because you only had 160 characters for your bio.

You can put a little bit more information there. With the new design, you don't have a lot of room to play with, but it is nice to put a little extra effort into your Twitter background.

Show transcript

This video is part of

Image for Social Media Marketing with Facebook and Twitter
 
Expand all | Collapse all
  1. 1m 3s
    1. Welcome
      1m 3s
  2. 22m 45s
    1. Understanding online marketing
      9m 12s
    2. Comparing Twitter and Facebook
      8m 38s
    3. Preparing for online marketing
      4m 55s
  3. 26m 10s
    1. Setting up your business account
      6m 45s
    2. Creating and applying custom backgrounds
      9m 1s
    3. Tweeting and following
      5m 21s
    4. Following Twitter's terms of service
      5m 3s
  4. 25m 46s
    1. Setting up your personal profile
      7m 42s
    2. Understanding the News Feed
      5m 47s
    3. Controlling access to your posts
      4m 48s
    4. Customizing privacy settings
      3m 30s
    5. Following Facebook's terms of service
      3m 59s
  5. 1h 5m
    1. Crafting follow-worthy Tweets
      8m 55s
    2. Attracting followers
      7m 41s
    3. Following the right people
      6m 10s
    4. Responding to mentions
      5m 40s
    5. Tracking keywords in the Twitter stream
      7m 8s
    6. Using hashtags
      4m 12s
    7. Getting Retweeted
      9m 7s
    8. Adding your Twitter feed to your blog or web site
      4m 51s
    9. Integrating a "Tweet This" feature into your online marketing
      4m 12s
    10. Measuring your impact
      8m 1s
  6. 2h 2m
    1. Touring Facebook Page timeline features and controls
      9m 49s
    2. Creating a new Facebook Page
      7m 50s
    3. Creating a profile picture
      8m 26s
    4. Designing a cover image
      7m 38s
    5. Creating a combined cover-and-profile image
      8m 43s
    6. Using the admin panel
      4m 26s
    7. Editing important Page settings
      7m 19s
    8. Adding and featuring Page admins
      6m 0s
    9. Customizing the apps bar
      5m 39s
    10. Posting to your Page strategically (for EdgeRank)
      5m 18s
    11. Pinning, highlighting, and adding milestone posts to the timeline
      6m 18s
    12. Managing spam by hiding and unhiding user posts
      6m 3s
    13. Using the Notes app for longer posts
      5m 43s
    14. Using Facebook as your Page
      4m 58s
    15. Adding favorite Pages to your timeline
      4m 9s
    16. Building an audience for your Page
      7m 22s
    17. Adding a Facebook Page feed to your web site
      7m 38s
    18. Analyzing traffic with Facebook Insights
      9m 8s
  7. 59m 22s
    1. Reducing your workload with social media management programs
      9m 27s
    2. Enhancing your Page with Facebook apps
      5m 53s
    3. Creating your own iframe app to customize your Page
      14m 55s
    4. Using a third-party iframe app
      6m 39s
    5. Adding a Like button to your content outside of Facebook
      6m 29s
    6. Advertising on Facebook with Facebook Ads
      12m 28s
    7. Advertising on Twitter with sponsored Tweets
      3m 31s
  8. 3m 59s
    1. Next steps
      3m 59s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.