Line25

Style Up Your Twitter Profile with a Custom Design

Read the full post

A custom Twitter background is a must if you want to stand out from the crowd on Twitter. In this Photoshop tutorial we’ll look at building a stunning cosmic design that not only looks great, but fits within the crucial margins between the Twitter profile, allowing it to work at multiple monitor resolutions.

Designing for Twitter

Twitter has setting available for customizing the background image and colour scheme of a profile, which provides plenty of options for creativity. But just like in every day web design, variations in monitor resolutions come into play, so it’s crucial to ensure no important elements of your design are hidden on smaller resolutions, and that the design isn’t cropped off at larger resolutions.

There are typically three approaches when it comes to designing for Twitter:

The full page design

Problogger's Twitter design

A full page design is basically one huge background graphic that fills the entire screen area. The advantage is that you can fit all kinds of creative elements into the design. The downside is the large file size, and the inevitable point where your design will crop off on a large monitor resolution.

The repeating pattern

Callum Chapman's Twitter design

A repeating pattern is a perfectly safe choice. The background will continue across every resolution small and large, and will fill the entire screen area. Unfortunately your options of design are limited, as your graphic has to tessellate in some way.

The half page design

Chris Spooner's Twitter design

The half page design makes use of both a background image, and a background colour. This way you’re open to creativity within your design, and by creating a design that fades out to a solid colour, you’re prepared for when the design is viewed at higher resolutions. Don’t forget with half page designs, portions your design may still become hidden at small resolutions, so be careful especially if you’re using text.

Let’s get started with our own design

The final Twitter background design

The design we’ll be building is a half page layout that fades to black. The design itself is based on a cool cosmic space scene, resulting in a stunning a sleek graphic with lots of textures and lighting effects.

Download my handy Twitter background design template and open up the file in Photoshop. In the templates folder you’ll see a range of common monitor resolutions, showing where the main Twitter panel will sit on the screen. Remember to keep any important design elements within the safe area.

Fill the background with black. Then go to Filter > Noise > Add Noise. Select the options Gaussian and Monochromatic, then adjust the slider to add lots of speckles.

Press CMD+L to open up the Levels, then adjust the sliders to tone down the effect and give the appearance of a field of stars.

Add a Layer Mask, then use a large soft brush to erase the stars from the right of the design. Remember we’re using the ‘half page’ approach so we need the design to fade out to black.

Download a splatter resource from SXC, then paste rotate and scale it into place within the document.

Press CMD+I to inverse the design, switching it to a black background with white splatters. Change the blending mode to Screen to render the black area transparent so the stars show through. Paste in a second copy of the splatters to fill up the top and left areas of the template.

Type out some text to brand your design. Here I’m using the words Line25 set in the fantastic League Gothic font.

Change the fill colour to black, then scale and rotate the text vertically and position in the top left corner. Toggle the template layers on and off to ensure the text won’t be cropped off at the small resolutions.

Grab the Brush tool and select a spraypaint splatter brush. Dab a few spots of white on a layer underneath the text, so the splatter flare out from the letters.

Use a soft brush to add subtle spots of white behind specific areas of the text to give it more legibility. Tone down the opacity to maintain subtlety.

Add a Layer Mask to the text, then use a large watercolour brush at a low opacity setting to erase out a texture, allowing the underlying stars and colours to show through.

Finish off the design with a couple of large spots of colour. Change the layers to the Color blending mode to give a cold atmospheric feeling.

The final design includes plenty of detail for users with larger resolutions, but keeps the crucial element of the text inside the template for the small 1280px resolution.

Crop down the design to include as little of the solid colour as possible, then save for web. Being a smaller background image than a full page design the file size will be pretty average, which will ensure the design loads without delay.

Log in to your Twitter profile, then go to Settings. Click the tab labelled Design to access the background settings. Upload your exported graphic as the background image and deselect the tile option.

Next, adjust the colour scheme of your Twitter profile to match. Ensure the background colour is set to whatever colour your image fades out to, then choose some harmonious colours for the links and sidebar.

The final Twitter background design

Once everything is saved you’ll be looking smart with a stunning and eye catching custom design.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

24 Comments

  1. Great tutorial!

    Thanks for including my Twitter page with my repeating patterns :)

    If any of you want to use similar repeating patterns (or the same as me) they have been released as freebies here and here.

    Thanks again Chris! :)

  2. amazing, easy way to describe how can we design twitter background.

  3. paul says:

    really impressive design, very unique. I like it.
    designing twitter backgrounds is fun

  4. Lil' Peekr says:

    Great post – nice and simple…

    Using a custom Twitter background helps set you apart from the crowd, provide folks with your other links or info about you, or create a consistent brand.

    I love to look at custom Twitter backgrounds :)

  5. Claudia says:

    Simple and effective, great =)

  6. Mihai O. says:

    Great tutorial and the result it's awesome.

  7. Alan says:

    Everyone should have a custom design, especially if your a designer.

    Great tutorial Chris.

  8. great tips, check our Designed twitter profile at http://twitter.com/creative_nuts

  9. Jason Bender says:

    Great explanation. Very similar to how i created mine. Thanks for sharing!

    Jason
    http://www.twitter.com/urbanjester

  10. Ibrahim says:

    thanks Chris! i made mine with colourlovers.com app but it is always good designing our own stuff!
    Hugs man!

  11. Perfect example! I hated the sample ones so I went out and found a nice image to tile on mine, but I am now tempted to take the time to generate an individual one for my business…

    If I only had free time to work on my own stuff and not spend all my time working on client stuff!

  12. Beth McLain says:

    Thanks for this wonderful roundup Chris

  13. Zach says:

    I have been putting off jazzing up my twitter profile for a while, so this is a nice and inspiring entry.

    I have also been thinking that the area surrounding tweets is an excellent spot for additional promotion or calls to action. Never huts to throw out more messaging, as long as you remember to change it from time to time!

  14. Taylor says:

    Spooner, you magnificent basterd! As always, a great tutorial. I need to evolve my existing (and not so good) twitter background. Thanks for the resource.

  15. rajasegar says:

    thanks for sharing Chris, awesome design…

  16. Nick says:

    Great tutorial. What annoys me about Twitter is that they don't allow you to change the background of the white text area! It would be nice to control transparency too. Although, I guess this isn't MySpace!

    I went pretty crazy with mine:
    http://twitter.com/nick_ian

  17. Chris, this is one of the easiest and more useful tutorials I have seen today.
    Thank you for sharing.

  18. Auré says:

    Good article :)
    Few times ago I have made a psd twitter template in order. I have share its for free here : http://detruk.deviantart.com/gallery/#-psd-files

    Maybe it could help some people to create their own Twitter background.

  19. Thanks for the comments everyone. Glad to hear you're all enjoying customising your own backgrounds. I hope the tutorial came in handy!

  20. lava360blog says:

    great tutorial.. thanks Chris

  21. Daryl says:

    Great :) Looks beautiful, thanks:
    http://twitter.com/darylknight

  22. Nils Geylen says:

    I like putting easter eggs in the design that only appear when the screen size grows.

  23. Very detailed tutorial.

Comments are now closed