How to Design the Perfect Twitter Profile Page (Free Template Included)


twitter-feature-image
FACT: Almost everybody messes up Twitter profile design. Does this include you? Yes, it does (probably). In this post, we’ll set you straight with a start-to-finish tutorial on designing your Twitter profile, including freebie Illustrator & Photoshop templates to resolve your crappy background once and for all (click here to skip the examples below and go straight to the templates).

In order to make an impact, your brand needs to be consistently crafted from one media channel to the next. This means your social profiles, e-books, white papers, business cards, t-shirts, letterhead, water bottles, brand-encrusted condoms, fluffy stuffed animals with your logo stitched on their forehead, the list goes on!

Aside: For help with designing your Facebook page click here. For help with your Google Plus profile click here.

Now, we understand, you get busy, and there isn’t always time for every little thing. But the way your brand appears on Twitter is serious stuff.

Designing Your Twitter Page Starts with the Background

Sounds simple enough: make a picture, upload it to Twitter. Done deal. Right? Wrong! While slapping your logo on a white background is a start, most tweeters can’t seem to color inside the lines. Even the biggest brands get it wrong:

@CharlieSheen

@CharlieSheen on 21 inch iMac

@CharlieSheen on 21 inch iMac

@Originalchexmix

@OriginalChexMix on 21 inch iMac

@OriginalChexMix on 21 inch iMac

@Shaq

shaq-imac

@shaq on 21 inch iMac

@ChakaKhan

@ChakaKhan on 21 inch iMac

@ChakaKhan on 21 inch iMac

@McDonalds

@McDonalds on 21 in iMac

@McDonalds on 21 in iMac

Even the prince of darkness can’t seem to get Twitter right.

WOW! What does it take to get it right???

With the formats for these social platforms constantly changing, it can be hard to keep up. Here are the 4 most common Twitter background design mistakes

Is your Design too small?

Take for instance, the @JuilliardSchool:

@JuilliardSchool

@JuilliardSchool on 21 in iMac

@JuilliardSchool on 21 in iMac

@Cher

@cher on 21 in iMac

@cher on 21 in iMac

@KatyPerry

@KatyPerry on 21 in iMac

@KatyPerry on 21 in iMac

@Nestle

@Nestle on 21 in iMac

@Nestle on 21 in iMac

Juliard, Cher, Katy Perry, and Satan have the same issue — their background images are just too small. They all need to know their images should be much larger to fit nicely on the largest monitors.

Does the design fit inside a laptop monitor?

The left-aligned design of Mattel’s Twitter profile doesn’t quite fit inside the space. Mattel needs to know that the left column on a 13″ MacBook only shows 195 px worth of space! In 2013 this layout worked because the space was 221 pixels wide.

@Mattel

@Mattel on 13 in laptop

@Mattel on 13 in laptop

@Cher

Cher is really messin up all over. Her background doesn’t fit on big or small monitors. I still believe in life after love though.

@cher on 13 in laptop

@cher on 13 in laptop

@DDLovato

Demi Lovato’s twitter background almost fits inside the 195 px. Beautiful design, but the size is too small.

@ddlovato on 13 in laptop

@ddlovato on 13 in laptop

@JillScott

So close! Kinda…

@JillScott on 13 in laptop

@JillScott on 13 in laptop

@John Legend

I love the art, but it doesn’t show all your curves and all your edges.

@JohnLegend on 13 in laptop

@JohnLegend on 13 in laptop

@KylieMinogue

Though the left side fits perfectly, the right side doesn’t.

@kylieminogue on 13 in laptop

@kylieminogue on 13 in laptop

@Cosmopolitan

Cosmo made good on the width of their design, but not on the height.

@cosmopolitan on 13 in laptop

@cosmopolitan on 13 in laptop

@CageTheElephant

This artwork is the best I’ve seen, but it doesn’t fit.

@cagetheelephant on 13 in laptop

@cagetheelephant on 13 in laptop

@4EverBrandy

Tsk Tsk Tsk Brandy. Almost doesn’t count. Check the right side of your design.

@4everBrandy on 13 in laptop

@4everBrandy on 13 in laptop

Is your design not centered?

This method is actually OK. Everything fits on small and large screens, but on a larger screen the artwork is pulled away from the center.

@Oatmeal

looks great on a 13 inch laptop

@oatmeal on 13 inch laptop

@oatmeal on 13 inch laptop

…but on a 21 inch monitor…

@oatmeal on 21 in iMac

@oatmeal on 21 in iMac

This happens by aligning the image to “Left” under the twitter design settings.

@RobynKonichiwa

@RobynKonichiwa on 13 inch laptop

@RobynKonichiwa on 13 inch laptop

@RobynKonichiwa on 21 inch iMac

@RobynKonichiwa on 21 inch iMac

@AdamLambert

@adamlambert on 13 in laptop

@adamlambert on 13 in laptop

@adamlambert on 21 in iMac

@adamlambert on 21 in iMac

@MichaelJackson

@MichaelJackson on 13 in laptop

@MichaelJackson on 13 in laptop

@MichaelJackson on 21 in iMac

@MichaelJackson on 21 in iMac

@MariahCarey

@MariahCarey on 13 in laptop

@MariahCarey on 13 in laptop

@MariahCarey on 21 in iMac

@MariahCarey on 21 in iMac

@MBsings

@MBsings on 13 in laptop

@MBsings on 13 in laptop

@MBsings on 21 in iMac

@MBsings on 21 in iMac

@NBCTheVoice

@NBCTheVoice on 13 in laptop

@NBCTheVoice on 13 in laptop

@NBCTheVoice on 21 in iMac

@NBCTheVoice on 21 in iMac

@FLOTUS

@FLOTUS on 13 in laptop

@FLOTUS on 13 in laptop

@FLOTUS on 21 in iMac

@FLOTUS on 21 in iMac

@BarackObama

@BarackObama on 13 in laptop

@BarackObama on 13 in laptop

@BarackObama on 21 in iMac

@BarackObama on 21 in iMac

@Shakira

@Shakira on 13 in laptop

@Shakira on 13 in laptop

@Shakira on 21 in iMac

@Shakira on 21 in iMac

You get the idea. Though it looks decent, it could be better.

Who is doing Twitter right?

@iloveLoudNoises (Follow us!)

Here’s ours (@iloveLoudNoises):

@iloveloudnoises on 13 in laptop

@iloveloudnoises on 13 in laptop

@iloveloudnoises on 21 in iMac

@iloveloudnoises on 21 in iMac

This is achieved through using our template, then setting the twitter background color to match the image background color- while adjusting the alignment to be centered. Be sure to set your link color as well. Access your settings from the Twitter Design Settings page.

Here are some twitter pages LoudNoises has designed recently:

 @DrGreene

@DrGreene on 13 in laptop

@DrGreene on 13 in laptop

@DrGreene on 21 in iMac

@DrGreene on 21 in iMac

@IRMCA1

@IRMCA1 on 13 in laptop

@IRMCA1 on 13 in laptop

@IRMCA1 on 21 in iMac

@IRMCA1 on 21 in iMac

@lifentco

@lifentco on 13 in laptop

@lifentco on 13 in laptop

@lifentco on 21 in iMac

@lifentco on 21 in iMac

Please contact us for more info on designing your social media profiles.

Here are some other people who do Twitter design right:

@Visa

@visa on 13 in laptop

@visa on 13 in laptop

@visa on 21 in iMac

@visa on 21 in iMac

The image is very large, at 2259 by 1228 px it is centered on the page, and will look nice on both large and small monitors.

@God

@God in his 13 inch laptop

@God in his 13 inch laptop

@God is giving @Satan a run for his money because God has a background image that is large enough for even the largest monitors

@God on a 21 inch iMac

@God on a 21 inch iMac

@ZacEfron

Zac has a pretty perfect page. His artwork is centered, hugging the center content even when on a large monitor.

@ZacEfron on 13

@ZacEfron on 13 in laptop

@ZacEfron on 21 in iMac

@ZacEfron on 21 in iMac

@DrCarlSagan

This unofficial account for Carl Sagan is using an almost seamless star background and tiling it in twitter design settings.

@DrCarlSagan on 13 in laptop

@DrCarlSagan on 13 in laptop

@drcarlsagan on 21 in iMac

@drcarlsagan on 21 in iMac

@ATT

ATT uses an image of a pattern that is large enough to fit the largest monitors.

@ATT on 13 in laptop

@ATT on 13 in laptop

@ATT on 21 in iMac

@ATT on 21 in iMac

@SteveAoki

This is just great.

@steveaoki on 13 in laptop

@steveaoki on 13 in laptop

@steveaoki on a 21 in iMac

@steveaoki on a 21 in iMac

@TacoBell

Taco Bell uses a large collage type image that works on all size monitors.

@TacoBell on 13 in laptop

@TacoBell on 13 in laptop

@TacoBell on a 21 in iMac

@TacoBell on a 21 in iMac

@TIME

Time uses a large image with a pattern. Well done.

@TIME on 13 in laptop

@TIME on 13 in laptop

@TIME on 21 in iMac

@TIME on 21 in iMac

@TMobile

T Mobile uses a wacky image, and tiles it. It isn’t quite large enough, but the design of the image works decently when tiled.

@TMobile on 13 in laptop

@TMobile on 13 in laptop

@TMobile on 21 in iMac

@TMobile on 21 in iMac

@LLCoolJ

LL uses a collage pattern background and tiles it. That works for all sizes.

@LLCoolJ on 13 in laptop

@LLCoolJ on 13 in laptop

@LLCoolJ on 21 in iMac

@LLCoolJ on 21 in iMac

@LenaDunham

Lena is cute and quirky enough to just take a small image and tile it. This is actually really popular in music profiles such as @MileyCyrus, @LilyAllen, @yelyahwilliams, and even @OneDirection.

@lenadunham on 13 in laptop

@lenadunham on 13 in laptop

@lenadunham on 21 in iMac

@lenadunham on 21 in iMac

Lets not forget our Header Feature

To have a completely designed profile, three images need to be uploaded: your profile image, header image, and background image. We have created three templates for you to use in Photoshop. Adobe Illustrator doesn’t have a good export rendering ability, and your image is likely to turn out fuzzy or blurry. Photoshop is the best option based on our experience and research. Each template includes directions on how to export all images.

How to do it right

It is very important to make sure your image looks good on any size monitor, from 13 inch notebooks, to 27 inch iMacs. The image should be seamless, immersing the viewer in your magical brand. Sizing issues can cause unwanted distraction, and lack of design cohesiveness can create trust issues for your brand.

Background sizes- Remember Macbook Retina Display Users:

The 15 inch macbook Retina display is 2880 by 1800 px. (Amazing) This is currently a size twitter accepts (they used to shrink large images) however twitter does this weird thing where it chops off the top 5 pixels of the image. Don’t worry, our template is marked appropriately.

2880×1800 px Centered Background Images

Here is the best solution we currently have for sizing issues.

1. Design a 2880 by 1800 px background image that has a solid color on its outer most edges.

2. In twitter design settings, set your profile background color to match the hex value of the solid color in your image.

3. If you are creating patterned image, or want to have a large photograph as your background you can implement a radial vignette or gradient that makes the edges one solid color.

Alright, alright — make with the freebies!

Remember these basic rules

  1. The safest size image is 2880x1800px.
  2. Match your image background hex color with a chosen twitter background color (to make it seamless). Our template is to make sure your important design content stays within the macbook size.
  3. Use JPEG Mini or another image shrinking program to shrink the size (in MB) of your JPEG photo so it doesn’t take too long to load for users.
  4. Design around the twitter content in the center.
  5. Choose center alignment in the design settings on Twitter

With these rules in mind, we want you to take advantage of our free design templates, in both Adobe Illustrator and Photoshop:

Related Posts from LoudNoises:

  • Fix your Facebook Profile? (Free Template) Click here.
  • Does your Google Plus need a lift? (Free Template) Do that here.

Follow us on Twitter: 

Comments

  • http://www.ginzametrics.com Ray Grieselhuber

    Awesome post, guys. I’ve done a few backgrounds before and could never find anything online that pulled everything together this nicely.

    • Michelle Godfrey

      Thanks Ray. I found myself thinking the same thing when designing the LoudNoises twitter page. I couldn’t believe how many people were doing it wrong, or ALMOST right. A lot of us don’t have access to different size monitors so its understandable. Glad you benefited from it!

  • http://twitter.com/JulieChrisHume Julie Hume

    Ages ago I tweeted about this… and now I am finally getting around to thinking about it but… can’t use your template because I don’t have Adobe Illustrator. Any chance of a GIMP friendly format? Pleeease….

    • PaulIsLoud

      Hey Julie, thanks for the tweet, and for your interest. We’ll add this today and add another comment here when it’s available!

      • PaulIsLoud

        Hey Julie, we’ve just uploaded a .psd version of the file – hopefully suits your needs. The post has been updated with the link, but for easy reference here you go: http://bit.ly/VQCxM2

  • http://twitter.com/DCBlueStar DC Blue Star

    Your download link for the .psd is broken.

    • PaulIsLoud

      Fixed, thanks for pointing that out!

  • http://trafficblogcafe.com/ Jaime Jay

    Thank you for this awesome tutorial and sample layouts… this really helped me!!

    • PaulIsLoud

      Glad you found them useful. Would love to see how you use them, feel free to drop a link to your profile once it’s updated.

      • http://trafficblogcafe.com/ Jaime Jay

        Thanks, I will… Have a great one!

      • http://trafficblogcafe.com/ Jaime Jay

        I finally finished my clients twitter page… thanks for your help… http://www.twitter.com/flysandguides What do you think?

  • http://www.pixeldesignprint.com/ Graphic Designing Company

    Thanks for the sharing awesome design and tutorial

  • http://www.pixeldesignprint.com/ Graphic Designing Company

    Its a good design and good work

  • http://twitter.com/jantheuer Jan Theuer

    Nice article! very helpull ! here is the result: https://twitter.com/jantheuer

    • PaulIsLoud

      Cool Jan, dig it!

  • 300poundsandrunning

    Nice article this is great

  • Facebook User
    • PaulIsLoud

      Looking good AnnArborNights, thanks for sharing. Glad the template was helpful!

  • Sportto Berns

    We’re in the middle of a major company brand refresh and this along with the Google Plus and Facebook examples and direction have helped a great deal. Many thanks for your help here!!!!

    • PaulIsLoud

      Glad to hear it Bernard. When you’re done drop the links here. Would love to see what you come up with, and your work may inspire other readers.

      • Sportto Berns

        Yes. Will do for sure!

  • Waterless Co.

    Thank you so much for these!! I am trying to upgrade our look on our twitter page as well as mine personally so this is extremely helpful!!

    • PaulIsLoud

      Cool, let us know how it goes!!

  • De Klein

    hi great site but i do have one question…above you talk about The safest size to create your image is 2880 by 1800 px, yet in your template the size is 1250×615. is that so you set the hex color as close the back ground as possible? i am basically trying to recreate the Mcdonalds style above. textured background with a sidebar of information. maybe i am just not reading this correctly and i need more coffee…

  • Justin Welch

    I’m using a 13″ macbook pro, resolution 1600×900, and most if not all of these examples have backgrounds cut off on the edges, text hidden by the newsfeed, etc. I’m thinking the best route is to only use images in the background, and save any text for the header image.

    • MichelleisLoud

      :) That works too!

      • elektray

        Thank for the great article! Twitter suggests a maximum background of 2048×1707. See link here https://twitter.com/PageTemplate

        You are instead recommending using a size of 2880 by 1800 px… I am confused!

        • MichelleisLoud

          That page you linked to is actually not affiliated with twitter, it hasn’t been updated since March. I would not say it is a good source. Their suggestion might work, but twitter also might cut it off.

          Our recommended size is 1920x1200px. NOT 2880×1800, I think there was a misread :) Let me know if I can help you further! Thanks!

  • Justin Welch

    I’m using a 13″ macbook pro, resolution 1600×900, and most if not all of these examples have backgrounds cut off on the edges, text hidden by the newsfeed, etc. I’m thinking the best route is to only use images in the background, and save any text for the header image.

    • MichelleisLoud

      :) That works too!

  • elektray

    Thank for the great article! Twitter suggests a maximum background of 2048×1707. See link here https://twitter.com/PageTemplate

    You are instead recommending using a size of 2880 by 1800 px… I am confused!

    • MichelleisLoud

      That page you linked to is actually not affiliated with twitter, it hasn’t been updated since March. I would not say it is a good source. Their suggestion might work, but twitter also might cut it off.

      Our recommended size is an image of 1920x1200px with a twitter background color set to a hex value that matches the image edge. Or a radial gradient on the image that fades to your chosen background hex in twitter settings. We do NOT recommend 2880×1800, as twitter will resize the image or cut it off. I think there was a typo in the top of the post but it has been changed! :) Let me know if I can help you further! Thanks!

  • http://barancezayirli.com/ Baran Cezayirli

    That was a great article. I used it to change my twitter background. Thanks!

    • David Heatley

      Really appreciated the refresher! And they way you laid out this lesson was really generous, clear, simple. Thanks a lot! I just created this for a client after re-reading your post. https://twitter.com/nyjazzacademy

      • http://www.loudnoises.us/ Paul at LoudNoises

        Looks great David, you nailed it.

    • http://www.loudnoises.us/ Paul at LoudNoises

      Hey Baran, you bet. Want to drop us a link to your profile?

      • http://barancezayirli.com/ Baran Cezayirli

        Sure. Thanks:) http://twitter.com/BaranCezayirli. I just didn’t include my link not to be like a spammer :) I hate when people do that to get more followers:)

        • http://www.loudnoises.us/ Paul at LoudNoises

          Well we’re always happy to check out the designs that people have done or improved as a result of information we’ve shared, great to know that we’re helping people!

          I noticed you mentioned Arduino. Have you messed with the Spark Core at all?

          • http://barancezayirli.com/ Baran Cezayirli

            I am just new at Arduino. Essentially i was developing mobile games but in my new venture i think about adding Arduino to the equation :) But i check out right now and it looks really promising for me.

          • http://www.loudnoises.us/ Paul at LoudNoises

            Yeah I jumped in on the Kickstarter a few months ago, been fun to watch the project chug along. People have already put together some node.js libraries that should be fun to play with

  • http://barancezayirli.com/ Baran Cezayirli

    That was a great article. I used it to change my twitter background. Thanks!

    • http://www.loudnoises.us/ Paul at LoudNoises

      Hey Baran, you bet. Want to drop us a link to your profile?

      • http://barancezayirli.com/ Baran Cezayirli

        Sure. Thanks:) http://twitter.com/BaranCezayirli. I just didn’t include my link not to be like a spammer :) I hate when people do that to get more followers:)

        • http://www.loudnoises.us/ Paul at LoudNoises

          Well we’re always happy to check out the designs that people have done or improved as a result of information we’ve shared, great to know that we’re helping people!

          I noticed you mentioned Arduino. Have you messed with the Spark Core at all?

  • David Heatley

    Really appreciated the refresher! And they way you laid out this lesson was really generous, clear, simple. Thanks a lot! I just created this for a client after re-reading your post. https://twitter.com/nyjazzacademy

    • http://www.loudnoises.us/ Paul at LoudNoises

      Looks great David, you nailed it.

  • Noelia Córdova Rivera

    Great article! Quick question: I’m using the Illustrator template and exporting the image as jpeg but it looks pixelated once I upload it, any reason for that?

    • http://www.loudnoises.us/ Paul at LoudNoises

      Hey Noelia, is it specifically for Twitter, or have you experienced this using our templates for the other networks?

      • Noelia Córdova Rivera

        I have experience this using both templates (Twitter and Facebook).

        • MichelleisLoud

          Hi Noelia, I just wanted to suggest using the photoshop templates, Illustrator is now known for having exporting rendering issues- photoshop is pixel perfect so it is easier to get a better result when exporting! Currently our template is being updated due to the new twitter layout- should be done in the next few days. I’ll let you know when they are updated,

  • Kertis

    Has anyone had issues with their sweet center-aligned backgrounds in Chrome?
    Looking through all the posts below, the backgrounds look great in Firefox and Safari (and probably others) but in Chrome they are off a bit. I’ve tested this on a coworkers PC as well as my Mac and it looks like Chrome renders Twitter with a 590px header image as well as different dimensions for the left content area. Thoughts?

    • http://www.loudnoises.us/ Paul at LoudNoises

      Hey Kertis, will look in to Chrome alignment this week and follow-up with you.

  • Greta Alms

    Definitely the most intuitive tutorial on customizing the twitter profile page that I have ever seen! Thank you so much for taking the time to give as many examples as you did and for sharing a template.

    • http://www.loudnoises.us/ Paul at LoudNoises

      Thanks Greta! We really enjoyed putting together these posts and keeping them up to date.

  • Gerry Felipe

    This was great for me for a while, and I love it! But they just changed the design =( maybe you guys will have a template for the new design? ;)

    • MichelleisLoud

      Hi Alan we are aware of the new twitter look and feel- though not much different we are working on a new template, should be done in the next few days- I’ll get back to you when we have updated the article and the template! Thanks!

      • Gerry Felipe

        Not Alan =P but thanks for the timely response. You guys are great at what you do!

  • Alan

    Hi, thanks for this great article.

    I just have one question : how do you know the distance you should have around the center ?
    (Sorry i’m french)… I mean, I have my 1920x1200px on Photoshop, where I can start my design ? (how many px from the center ?

    Thank you for your answers

    • MichelleisLoud

      Hi Alan we are working on a new template, should be done in the next few days- I’ll get back to you when we have updated the article and the template! Thanks!

  • http://www.explainedwell.com/ Steven Blake

    Brilliant article thanks but can’t open .ai file in my old version of photoshop elements! Any tips or any chance of a copy in .psd?

  • Jain Lemos

    Thanks for the fantastic help! I could still do some tweaking but it’s miles better than before.

  • http://www.parajunkee.com/ Parajunkee

    You did a lot of work on this! Thanks so much.

  • Tierney Millhollin

    This tutorial is awesome but I am still having some problems optimizing my images without them looking pixelated. Do you have any advice for this?

  • De Klein

    how awesome are you all! okay this webpage goes into my design toolkit, thanks for the reply!

  • MichelleisLoud

    Of course! I’ll update you when we have more!

  • Yvonne Stolterfoht

    uhm I have the ecaxt same question 7 months later ;) Is there a new template somewhere? Great summary here by the way! Thank you :)

  • http://www.urbanfly.co.uk urbanfly

    Hoping for a new template too as this is close but seems like Twitter’s changed again!

Previous post:

Next post: