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!
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:
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:
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.
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.
Demi Lovato’s twitter background almost fits inside the 195 px. Beautiful design, but the size is too small.
So close! Kinda…
I love the art, but it doesn’t show all your curves and all your edges.
Though the left side fits perfectly, the right side doesn’t.
Cosmo made good on the width of their design, but not on the height.
This artwork is the best I’ve seen, but it doesn’t fit.
Tsk Tsk Tsk Brandy. Almost doesn’t count. Check the right side of your design.
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.
looks great on a 13 inch laptop
…but on a 21 inch monitor…
You get the idea. Though it looks decent, it could be better.
Who is doing Twitter right?
Here’s ours (@iloveLoudNoises):
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:
Please contact us for more info on designing your social media profiles.
Here are some other people who do Twitter design right:
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 is giving @Satan a run for his money because God has a background image that is large enough for even the largest monitors
Zac has a pretty perfect page. His artwork is centered, hugging the center content even when on a large monitor.
This unofficial account for Carl Sagan is using an almost seamless star background and tiling it in twitter design settings.
ATT uses an image of a pattern that is large enough to fit the largest monitors.
This is just great.
Taco Bell uses a large collage type image that works on all size monitors.
Time uses a large image with a pattern. Well done.
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.
LL uses a collage pattern background and tiles it. That works for all sizes.
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.
Remember these basic rules
- The safest size image is 2880x1800px.
- 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.
- 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.
- Design around the twitter content in the center.
- 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: Follow @iloveLoudNoises