Create a Custom ‘Grunge’ Twitter Background

In this tutorial I will be showing you how to create a unique, custom Twitter background using Photoshop, which will be used to display additional information about yourself.

Tutorial Details

Program: Photoshop
Version: CS or Higher
Difficulty: Intermediate
Estimated: Completion Time: 2 Hours
Final Image Preview:

Downloads Required:
PSD Files: template.psd, polaroid.psd
Stock Images: texture, coffee cup, coffee stain
Fonts: base02

Ok, so you want to make a custom Twitter background. If you want to make a one like mine- ‘twitter.com/abbott567‘ which displays addition information etc, then you have to be prepared to accept that it is not going to work on every computer in the world. The image is simply made for the majority of users.

Research claims that less than 37% of internet users are using a traditional screen resolution such as 1024×768, less than 3% using the old school 800×600. With the cheapness and availability of widescreen laptops/monitors in todays society, its understandable that the majority of users are using a screen resolution such as 1280×800 or higher. Now we do not have to compensate for anybody using a higher screen resolution as they will rarely run the browser in a maximized window anyway.

I made my background 1500×800 – this way i had a bit of leeway or padding for the larger resolutions, but i was still hitting the majority of users, and it wont really matter on a 1024×768 monitor as the Twitter centre colum pretty much fills the browser window, so you cant see the background anyway.

So… enough blabbing, lets create something.

Step 1

Download the template.psd file and open it. It is a photoshop image I have set up with a few guides.

Once open, you can see there is a few guides, basically, the content you put inside a certain two rectangles is what people will see on your twitter page.

Im going to make a grunge style image similar to the background I am using at the moment for the sake of the tutorial.

Step 2

Download a soft grunge image from bittbox’s flickr page.
I chose free_high_res_texture_102.

Paste it into a new layer on our twitterbg.psd and resize it to suit.

Step 3

Next we need to make a box to fit our additional information in. Select the rectangular marquee tool and drag a box the same size as the long column on the left.

Step 4

Choose Select > Modify > Smooth and set the radius to 10px. This will round the corners of our selection. Now create a new layer and fill with a solid colour. I used a dark brown – #170c01

Step 5

Now you can use the text tool to write a bit about yourself, and include a small image if you like.

Step 6

Next we need to add something to the right hand side of the page. I am going to add polaroid pictures of some images I like.

Download this next psd file: polaroid.psd
This is an image i have put together to hopefully help you make your polaroid images quickly and effectively.
Simply paste the photo you want onto the layer labeled photo, then resize it to fit the frame.

Step 7

Next, Select Image > Merge Visible to flatten all the layers, you can now drag a box around the polaroid and choose Edit > Copy, return to our twitterbg.psd and choose Edit > Paste.

Now we have the polaroid, simply resize and reposition it using the free transform tool (Edit > Free Transform).
Put it in the rectangular box on the right.

Step 8

It looks a little flat, so we click Layer > Layer Style > Blending Options.
Tick ‘Drop Shadow‘ and use these presets.

Step 9

Repeat this step a few times with different photographs, positioning them in a sort of scattered arrangement.

Step 10

Next, download the coffee cup.

In Photoshop select the magic wand tool and set the tolerance to 40. With a click on the white of the background and one on the shadow you should have selected the entire background behind the cup.

Step 11

Choose Select > Inverse and then choose Edit > Copy.

Return to twitterbg.psd and choose Edit > Paste. We now have our coffee cup. Use the free transform tool again to resize and reposition it somewhere in our right hand rectangle. Add a drop shadow but use these presets:

Step 12

Now you should have something like this.

Step 13

Now add a coffee stain, just to make it look a bit more grungy.
Download the coffee stain from: http://www.sxc.hu/photo/1103262

Paste this into your document but make sure it is on the layer below the coffee cup. Set the blend mode to multiply (Layers > Layer Style > Blending Options – choose Multiply from drop down box) and resize and reposition it somewhere near the coffee cup.

Step 14

To finish add your screen name to the background somewhere. Create a new layer above the grunge background we pasted in. Using the text tool type your screen name, I used the font Base02 from dafont.com. Select Layers > Layer Style > Blending Options and use the following presets.

Step 15

As you can see stroke has been ticked. This is a 1px inside stroke using a dark brown colour.

And thats the design finished…

Step 16

Now we need to export it with the maximum settings twitter will allow. So choose File > Save for Web & Devices.

Step 17

Then find the small options box located at the top left hand corner and choose Optimize to file size.

Step 18

Twitter only allows a maximum of 700kb so make your maximum 700.

Click OK then SAVE and name your file. Your all finished.

Step 19

Go into your twitter account, select settings, then design and upload your new custom background.

Thank you for visiting this tutorial. Please leave comments/suggestions below.