DesignBash

web magazine and more…

Twitter Background – How to Make a Custom Background

This quick tutorial will run through the basic task of creating a custom twitter background. It’s really easy to do and makes your twitter page stand out from crowd. Whether you’re a business or an individual, if you use twitter at all it’s probably worth your time to make a custom background.

Step 1 – Size it Up

Before making a background we need to think about the dimensions of the twitter site. Basically, your background will be sitting behind a container that is 763 pixels wide. Furthermore, we need to remember to keep our background image under 800k in size.

Twitter Background Dimension

Step 2 – Prepare the Photoshop Document

With our size restrictions in mind, lets go ahead and start creating a background. First, create a new document that is 1600px by 1200px in size at 72 DPI.

Step 3 – Put in Some Guides

The first thing I do when working in Photoshop is to place my guides. I first create a shape that is exactly 763-pixels and place it on the left side of the photoshop document. Twitter will justify (stick) your background to the left of the screen while allowing the main container to remain centred relative to your browser window. This makes it hard to know where to place your background elements, but you’ll probably want to place any important background elements within 150-pixels of the left side of the canvas.


Step 4 – Create a Mind Blowing Background

This tutorial is more about the technical aspects of making a twitter background, not so much the actual design work. But when creating your background it’s important to remember that your background should fade to a solid color, otherwise people with large screens could end up seeing unattractive “cut” lines. Here are the steps that I took to make my background “work”:

  1. Created a nice background that has a radial gradient at the top
  2. Applied a subtile background pattern
  3. Used a masking layer to “fade out” the right and bottom edges of my pattern/gradient layers
  4. Made a note of the solid color at the edges of my background (#481904 in my example).

Step 5 – Setup Twitter

After logging into twitter, head over to settings/design area. You’ll need to set your background color to whatever you noted in the last step and then upload your new fancy image.

I know this background isn’t “mind blowing”, but it’s cute and simple and a good example of what you can do.


If you’re interested, feel free to download the blank background and add your own name.


Blank Twitter Background

Click for the full size version






posted by admin in Tutorials and have No Comments

Place your comment

Please fill your data and comment below.
Name
Email
Website
Your comment