Monday, May 14, 2012

Make Your Own Custom Twitter Background

I went googling for sizes of Twitter Backgrounds so I could make my own. The information was so sparse and varied, I just experimented. I hope this guide helps you create your own custom Twitter background.

I work with two different size monitors and did a Print Screen to compare how my custom twitter background would look to others with perhaps similar screens. 

I went with the lower size because the average "webster" (my new word for a web user today) might have a smaller monitor and that's the size I used.

Start a new document in Photoshop. File/new. Make sure you're working in pixels 
and type 1280 wide x 1024 High, 72 dpi. You now have a new working file.

Pick a picture that represents you.

Size both files by grabbing a corner of the file window and
put both files on the screen so you can see them at the same time. 
Make sure that the file that you want to grab FROM is on the top. 
Then put your cursor over the layer you want and essentially pick it up 
and drag it to the file underneath.

Be sure to put your rulers on.

Put your Move tool (the arrow = top tool on tool bar) over the left the ruler and 
pull over a guide to 5 inches from the edge. 
This parameter is based on where twitter information ends and 
my picture starts in my original screen grab.
This picture is centered so you will have to adjust it in transform. 

After adjustment

Now we're going to have fun. 
You're going to add a gradient for a background that is one fluid piece.
In the bottom of your layers palette, the box with the white circle is where you make masks. Make sure you're on your layer you want to work with. Click on it. 

 Select only the mask so you can create a gradient.

Click in the gradient as highlighted here.

This is the dialog box that will come up. Use white to black or vice versa. 
Remember to experiment. 
You won't hurt anything. 
Making mistakes helps you learn.

Use the gradient tool and drag it horizontally across the page

Wa La! You can adjust how much gradient by experimenting with the gradient tool, 
dragging it further out or into your picture.  This picture is rather dark, so the next step is to make adjustments in "Levels, curves, etc."

It's like adding salt and pepper to a yummy dish. The are some expert ways to accomplish this, but we are having fun here and we're going to follow what looks good to us! An adjustment layer will appear. Drag the tabs in the adjustment window to your liking. I like to adjust pictures ever so slightly as I want my pictures to have a semi-normal coloring.

Here's the final picture.

You have to be under 800k. 
We started with a 72 dpi file, but if you have to adjust then move the slider to a smaller jpeg quality. I wouldn't go lower than medium (6) because your file will get too pixelated and you'll want it to be as crispy as you can get it in a 72 dpi world.

File. Save as JPEG. The blue guide line will not show up in your final picture. 
Upload to Twitter.  
Make sure you save the file as a PSD document as well.
You can continue to make your own custom Twitter background again and again.
Here's the difference in monitors. Click on the image and you'll see the original size.

 If you have any questions be sure to ask. I'll answer as soon as possible.  
Thanks and HAVE FUN!

One final note. SAVE AS YOU GO.

1 comment:

  1. Love your guide! It's my next webby project. I'm working on a banner right now, it's all I can say... thinking of you! xoxox, V