How To Create A Twitter Background That Flows With Your Website Design

These days more and more social networking services such as Twitter are making it possible for you to give your profile its own design, this is key to getting your site know, logos, themes, header etc.. are things that people remember your site by, so its key to spread you design across the web. Here is a step by step tutorial on how to let your websites design flow straight into Twitter.

The Tutorial

Lets get started, download the Twitter PSD Background Template courtesy of Chris Spooner. This PSD has all the different screen resolutions and where the twitter section will be in relation.

Grab your websites header and place it in the top right corner. Then shut the visibility of the template group off.

Using this Hi-Res Spray Brush Set start to erase the right end of the header, the reason behind this is that we want to make the head fade of to the background colour seamlessly with a nice effect spray grunge effect, rather than a straight edge.

Using some of your own brushes really start to personalize the end result whilst blending from the header to the background. You can also use a white brush to spray some texture at the center of the header.

Next, get your logo and place it on the canvas, scale it to size, rotate it to make the design more free and fit with the fading edges.

Download a blank polaroid photo frame, scale it to size and rotate it the opposite way to the logo.

With the polaroid layer select go to Edit>Transform>Warp.

Warp the polaroids image at the bottom left up, this will create the effect that the edge is slightly curled.

Next to add more depth and realism add yourself a drop shadow with an angle of 35, opacity of 50% and a distance of 3px.

Now just turn the visibility of the PSD Template back on just to check that everything is aligned okay at the standard screen res.

Make your twitter page personal to you and grab a photo of yourself and rescale and rotate it in position, then give it the same Warp we did with the polaroid frame.

Add your name to the bottom space of the polaroid frame, the font I have used here is called Dear Joe.

Get yourself a Mug Stain Brush and place it over the polaroid photo, set the blending mode to Multiply.

Download Free Hand Drawn Doodle Icon Set bring the icons that you want or you are part of and desaturate them (SHIFT+CMD+U), rotate and scale them to your preference.

Next, take the desaturated social icons and nudge them into position behind the polaroid photo.

Using the same spray brush set as earlier bump the resolution up and set the colour to black, then spray some where over the header

Next, change the opacity of this layer down to 25%, this will add more of a textured feeling to the header.

Now find yourself some nice doodle brushes and place some around the design, then drop the opacity down to 35% so they aren’t too intrusive to the design – yet making it more ‘personal’.

That’s pretty much the design side of it done, you want to keep your websites theme, make it more personal however you don’t want to clutter it as it’s only the top left corner you have to work with. Now crop the design to the smallest area possible and save for web and devices (OPT+CMD+SHIFT+S) – save it as a JPEG and tweak the file size so you get high quality with the smallest file size.

Login to your Twitter account and navigate to your settings page, click the tab that says design. Change the background image by uploading your new design remember not tile the background.

Next, change the colour scheme of the design so that it matches the overall colours used in the design. Use the eye dropper tool in Photoshop to get the hex colour and simply apply it to the desired section.

Final Image

With the design complete head over to your profile and check out your new design! If you enjoyed this don’t forget to follow me on Twitter.