How to Create a Custom Twitter Background

I needed a different creative outlet yesterday, after writing 10,000 words on my NaNoWriMo novel between Wednesday and Saturday. So I decided to create my own custom Twitter background.  It was easy and a lot of fun, so I thought I’d share with you how I achieved it.

I created my background using Paint Shop Pro X2, but you can use Adobe Photoshop or any other similar software, as long as it supports both vector and raster layers.


Before I began, I thought about what kind of look I wanted to go for.  Personally, I like color; I like my web sites to exude a cheerful, playful vibe.  But I didn’t want to overwhelm with bright hues and busy prints, because I didn’t want the background to compete with the profile.  I prefer light backgrounds with black print, as I find those the easiest to read.


I looked for a picture of me that was similar to my profile picture.  (It’s a bit tongue-in-cheek that all my profile avatars are me, in profile.


Here is the finished product, and below are the steps I followed to create it:







Step 1:  Layer One – The first layer in your PSP (or Photoshop, etc.) should measure 1440x800 pixels, which will be big enough to fill the screen of viewers with any size computer screen.  (Note: I didn’t need to fill the entire 800 pixels in length, because on my computer screen the bottom section was lost off the bottom.  Also as you design, keep in mind that about 760 pixels in the center of your plane will be covered up with your twitter profile columns.  This means you will only be designing about 225 pixels wide on the left margin and about 300 pixels on the right margin.  I realize that my math doesn’t add up – math sucks!  But the original 1440x800 are just the dimensions you need to ensure you’ll fill the space on twitter.  Based on your own computer screen, you’ll have to play around with spacing until it looks right, on your screen.)
I used a resolution of only 72 pixels/inch because it will be sharp but won’t slow down page uploads for people visiting your page who have slower processors or Internet connections.  This first layer should be set as transparent.


Step 2: Layer Two --  I pulled up the photo I’d chosen and resized it to 215x230 pixels.  I added a slim black border and then copied it.  I pasted the photo as a new layer, atop Layer 1.  I positioned the photo against the left margin, about an inch down from the top left corner. I double clicked the layer to pull up the Properties menu and clicked Layers, then added a drop shadow to the picture. 


Step 3: Layer Three -- I added a new vector layer and opened a text box.  I added my name in fancy font and beveled it with a blue overlay I pulled from the shirt in the photo.  I added a drop shadow.


Step 4: Layer Four – I added another vector layer and opened a second text box.  In it I added my original quote: “I write stories so I can live more lives than my reality would otherwise allow.”  (Love that!)


Step 5: Layers Five thru Eleven – I used raster layers to add individual colored marbles over my photo and down the right margin.  The marbles are simply picture tubes I sized the way I wanted.  Placing each marble so that they appear in a straight vertical line was not easy on my laptop, since I don’t have a mouse yet and was working on the integrated mouse pad thing.  Not easy!


Step 6: Based on the color scheme that had emerged in Steps 1-5, I clicked down to Layer 1 and used Flood Fill to wash the background with a soft, barely-there, dusty blue.


Step 7:  (It’s a great idea to “Save Copy As…” at this point.  This will save your image with all your layers maintained.  DO NOT save the image and merge the layers!  You won’t be able to edit individual layers once you’ve merged down and saved.)  I exported a copy of the image and uploaded it to twitter.
(Never changed your twitter background?  Here’s how:  Go to your twitter feed. Click your name on the far right of the menu at the top.  Click Settings.  Click Design.  Scroll down, and below the twitter themes, click Change Background Image.  Click Choose File, and select your exported custom background image.  Do not check Tile Background.  Click Save Changes.)


Step 8:  This step took me the longest.  Adjusting your background to get the spacing of all the elements right takes a while.  I had to move around elements from each layer, re-exporting and re-uploading to twitter over and over until I had the look I was aiming for. 


Step 9:  I used the Change Design Colors option on twitter’s design page to choose the colors for the profile background (where your tweets appear), text, links, sidebar, and sidebar border.  Save Changes.

And that’s it!  Now I have a twitter page that truly reflects me (at this moment in time…I’ll probably change it in the future!) better than any of the preinstalled themes available.



If we don’t follow each other on twitter, please friend me! I’m NicoleDwrites


See you over there!!