Twitter has unveiled some new opportunities for visual branding in a new asset, called the Header (think Facebook and Google+), that is uploaded once and appears on the “Me” page of your twitter.com site, the mobile browser site, and in Twitter-made mobile apps.

Used to be (last week), you had a closely cropped mugshot as your profile pic (or avatar), and a tall, thin patch of visual branding that frequently had text details you couldn’t fit into your bio, that you knew would get obscured by the tweets panel if your user shrank the window enough. A good example is that of Phil Gerbyshak, the guy who put me up to writing this post.

New Rules

As of yesterday, by default, your twitter.com pages won’t visibly change. However, your profile page in new mobile apps will feature a rectangular header consisting of, from top to bottom, your profile pic in a rounded white border, then your name & bio, centered, in white Helvetica, all on a generally dark default background image (brushed aluminum on my iPad) that is covered with an HTML5 gradation that blends to about 75% black at the bottom. (See diagram at top.)

The good news is, you can customize the background art. But note that when you do, mobile people get a better visual branding from you, but it’ll also show up in your twitter.com non-mobile profile page too. Not to worry!

Ordinarily, for people with a simple logo or icon who are happy with the text of their bio for all their contact info, my advice has been to go with a rendering of that logo in a square tile, for repeating in the background. Mine is a good example. Now, you can have more content in your Header image, to the upper left and right. It’s less space than a big tall rectangle on the left, but on the upside, it’s visible in any browser or app! And you can put a nice, non-nutritive art piece or photo in the entire background. Or that tiled logo. (I doubt Phil Gerbyshak will give up that wonderful tall left panel, but he’ll have to think of a header that is a sort of stripped-down version of it.)

Let’s Make a Header Image

Between the choices of Photoshop and Illustrator, I choose Illustrator, since scaling of vector assets is what this app is all about. The result can be saved directly to a .png with a keyboard combo (all 3 modifier keys plus S).

A screenshot from twitter.com shows the Header area is 520×260, and a screenshot from my iPad 2 (pre-retina-display) shows 626×313, but Twitter says minimum (not maximum) of 1252×626 (which makes sense, since that’s probably the iPad 3’s dimension). So let’s use that size. Understand, whatever art you had in full size in your left-margin art on your twitter.com page needs to be expanded to 240% to fit the minimum, if you want it to optically match what you had. (Which is why resolution-independent vector and type is so good.) For instance, on my own Twitter page, the fabric background texture I also wanted in the Header needed to get scaled up on my Illustrator board, so when the HTML scaled it down on the Web page, it matched the background.

Remember, resolution will suffer as different apps on different devices reduce this art to coarser pixel resolution. So make new text and elements in these about twice as legible as they need to be. (My fabric won’t look too spiffy on an iPad 3.)

The best way to know your exact “play area” is to get a screenshot of the type as it appears in the new Header, to see the text the way it’ll appear in all its instances and uses. But wait: the full-width version of your bio panel on the “Me” page looks radically different from the Header will! So here’s what you do: the uploading of a photo as a Header photo is the only way to turn on the Header feature (menu under grey gear icon, Settings; then menu on the left, Design; then Change Header button). So for now, upload any old image (easily replaced later), take a screenshot, place it into your Illustrator board, scale it by 240%, match the corners, and fit your artwork around those words. (Not much room left, if your name is Archangelo Spumoni.)

With such a precise placement of your profile pic in top center, you might be tempted to do some tricks like dropshadows. I advise against it; the pic will be in a slightly different place and size on twitter.com than on your mobile app. (See diagram.) Best not to crowd the square with content anyway, for aesthetic purposes, though you can have things whiz behind the profile pic, like car headlight beam in the Header art I made for Christine Cavalier, @PurpleCar. She also has a logo on the left and a slogan on the right, which may fit your branding just fine.

Enjoy! Let me know how you do! And of course, what demo would be complete without a complimentary downloadable template? Here’s one for you, in Illustrator CS1 (done on a Mac, but should open in Windows), with items on layers.

If you’ve been here before, you may notice the addition of a mailing list. (Except for now, till I figure out why, it’s only on the home page.) Yes, I’ve come one step closer to the 21st Century! I will make your subscription worth the while. Join now, before you forget.