Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member