You are here: Home » Our Blog » Twitter Beautification: A Bird's-Eye View

Twitter Beautification: A Bird's-Eye View

Posted by Matt Yoder at Feb 08, 2011 |
Filed under:

A simple guide to fixing your Twitter UI after the recent update.

You tweet. And if you're like us, you probably think you're a pretty slick bird. At least, that's what we thought until we saw this:

Twitter Before

#uhoh! Looks like the Twitter UI update left our profile looking a little ruffled. Not to worry, though. We turned our ugly duckling into a beautiful swan, and so can you. Allow us to present the pecking order of Twitter backgrounds.

Before leaving the nest

Before you start changing background images and tweaking colors, consider the basics. We noticed that our logo was smaller than it had to be, which left an awkward white space at the top of our profile. Uploading a larger image gave our profile an instant face-lift.

Twitter Larger Logo

You can upload a new image on the profile tab of the settings page. Don't worry about getting it exactly the right size; Twitter will resize the image automatically if it's too large.

The Swan: Solid Color Backgrounds

The Twitter interface is already fairly busy, so keeping it simple is never a bad idea. Choosing a solid color background that complements your profile image is the easiest path toward an attractive, usable profile.

You can set a background color on the design tab of the settings page. Click on Change design colors, and choose a background color using the provided picker.

Twitter Solid Background

For our swan background, we chose a lighter tint of the green in our logo. In general, it's best to avoid overly bright or saturated background colors, which can distract from your content—and make your followers feel like their eyes are being pecked out!

The Crow: Simple Repetitive Backgrounds

Simple tiled backgrounds are the next step up from solid colors in terms of complexity. They can add visual interest to your profile page, but they also require more planning, preparation and testing. If you're ready to try out your wings, read on.

To create a tiled background, you'll need an image editor like Photoshop, the GIMP or Paint.net. Start with a simple visual element, like a wordmark. For our first crow background, we used our tagline, you are connected.

Twitter You Are Connected

You can adjust the spacing of elements by adjusting the size of your image in the editor. Our first attempt at a tile felt too large, so we reduced the size to about 300 x 150 pixels. In general, simpler designs should be larger and more visually complex designs should be smaller to minimize distracting details.

Once you're happy with your tile, save it and upload it to Twitter by clicking Change background image on the design tab. Be sure to check the tile box so that your image gets repeated. Otherwise you won't have much to crow about!

Be warned that the image uploading interface is a little finicky. Sometimes it allowed us to preview the change without saving it, while other times the change took effect instantly. Moral of the story: check your profile immediately after uploading, and be ready to reverse the changes if you don't like what you see!

Logos can also work as a crow backgrounds—although if you're not careful, they can end up being loud and obnoxious ones. To quiet things down, let the scaling, opacity and saturation tools in your editor be your friends. For our second tiled background, we repeated a version of our icon image at 50% opacity.

Twitter Logo Tile

Regardless of what type of tile you create, be sure to set a matching background color and optimize your image for maximum flight speed.

The Parrot: Advanced Tiled Backgrounds

Once you've mastered simple repetition, you may want to try a more advanced tiled background. In parrot backgrounds, the image wraps from one side of the tile to the other, giving the illusion of seamless repetition.

At Groundwire, we're big fans of the Wordle. So, for our parrot background, we created Wordle-inspired word art from some of our favorite technology and engagement buzzwords.

Twitter Advanced Tile Final

To create a parrot background, start out by marking the edge of your tile with guides in your editor. Then add your graphics and text, allowing some elements to overlap the edges.

Twitter Making Advanced Tile

When a graphic element crosses a guide, crop off the outer part and move it to the opposite edge, making sure to keep it in line with the other half. If you're using text, don't forget to rasterize the layer. Then make like a parrot and repeat, repeat, repeat!

You'll probably have to do some experimentation to get everything to fit without overlapping. Once you're satisfied, crop your tile to the size of the guides and bring your parrot to life!

Like their crow cousins, parrots tend to be on the loud side, visually speaking. We kept our noisy bird from drowning out our tweets by reducing the opacity of the tile to 50%.

The Peacock: Fancy Photo Backgrounds

If you find repetition tiring and you want your Twitter profile to command attention, consider using a photo-based background. Peacock backgrounds can be beautiful—if you're willing to put up with their quirks.

The main drawback of photo-based backgrounds is that you don't have much control over them. (What else would you expect from a peacock?) Twitter sticks your photo in the upper left corner of the window, and there's nothing you can do to move it. Meanwhile, the profile floats in the center, obscuring your prime photographic real estate.

These limitations became clear in our first peacock background, where we tried to use a photo of two Groundwire staff. Our Twitter profile covered both of their faces, leaving our followers to stare at the photo's drab background.

For our second attempt, we chose a photo where the visual interest is more diffuse. Casual observers might see only the scenic backdrop, but curious followers can resize their browser window to reveal the diver hidden beneath the profile.

Twitter Photo Logged In 2

To help the our peacock stand out, we gave the photo a white border and a subtle drop shadow. We found that 1200px was about the right width for our photo background. You may want to experiment with different sizes to emphasize different parts of the photo. Once you're happy, be sure to test your profile logged out, since some users will still see the old, narrower version of your profile.

Twitter Photo Logged Out 2

You can upload a peacock background the same way you would a crow or parrot. Just uncheck the tile box so that your peacock doesn't end up looking like those other birds!

Our Background Swan Song

From swans to crows to parrots to peacocks, there are a flock of options when it comes to Twitter backgrounds. Once you've got your background soaring high, don't forget to fly back over to the Design tab and set matching text, link and sidebar colors. And of course, be sure to tweet about your new creation!

Document Actions
Filed under: