Changing Your Twitter Header Image (Part 2)

Now that the technical requirements and design considerations for Twitter header images have been covered in Part 1 of this topic, the next step is putting that knowledge to work in creating and uploading a header image to Twitter.

A downloadable Photoshop header template can help you plan, create, and save your header image. It has “helper” layers to show you where the profile photo is positioned, a diagram of image dimensions, sample text you can use to check for readability, and a semi-transparent black gradient layer to test the effect on your header image before you upload it to Twitter.

Photoshop Template

Start by downloading and unzipping the Photoshop header template (created in CS2). When you first open the PSD file, it will look like this:

First opening the Twitter header template

The template's Layers panelIn the Layers panel the Profile photo layer group, Default header layer, and Background layer are visible, as shown by the visibility (eye) icon in the left column. The “helper” groups and layers are hidden.

Measurements Layer Group

Making the Measurements layer group visibleClicking in the layer visibility column of the Measurements layer group will unhide it:

Measurements layer group displayed

The dimensions of the header and the profile photo are displayed to help you plan your header image.

Profile Text Layer Group

There are four sections on your Twitter Profile page that can be filled out to display additional information about you:

Twitter profile settings

  1. Name
  2. Location
  3. Website
  4. Bio (in 160 characters or less)

Revealing the Profile text areas layer group in the template will show you where the text fields will display on Twitter in case you want to take the position of the text into consideration when designing your header image. The numbering in the image below corresponds to the numbered list above.

Profile text layer group displayed

Please note that the Bio text in the template is enough to wrap to three lines. If only one or two lines are needed for the text on Twitter, the Bio section will shorten and the Location and Website section will move up.

Gradient Overlay Layer

To give you an idea of how Twitter’s black gradient will look over your header image, you can make the Black gradient overlay layer visible. For this example, I hid the Default header layer and added a layer with a starburst image.

Testing gradient layer

Making the text layer group visibleYou can also test how the text will look by unhiding the Profile text areas layer group and hiding the shape layers with the yellow thumbnail images.

Viewing the text over the gradient

Here is the final result after uploading the image to Twitter:

Test image after it was uploaded

Compare that with the template version and you’ll see a noticeable lightening and desaturation took place. You’ve been forewarned! Twitter does its own thing with uploaded images so you may need to do test uploads, tweak your image, and try again to get it the way you like.

Note About Header Image Transparency

I was curious about what would happen if parts of the header image were left completely transparent and the image was saved as PNG-24. I created an orange oval on a transparent background to test it:

Header image with transparent background

Twitter “flattened” the image and converted the transparent background to white.

Saving a Header Image Using the Template

Hide the Default header layer.

Add a new layer to the templateAdd a new layer above the Background layer and create your header image on it. In the example shown here, My background layer was created for the starburst image.

Hide the helper layersOnce you’re satisfied with the final image, hide all the layers and layer groups above the layer you’ve created.

In the File menu, choose Save For Web & Devices (or Save For Web in earlier versions of Photoshop). Save in GIF, JPG, or PNG format. Set the options for the format you’ve chosen and then click the Save button.

Uploading a Header Image

There are four ways to get to Twitter’s Profile settings page to change your header:

Clicking on the default avatarWhen the photo with the plus sign is displayed, click it to go directly to the Profile page.

Clicking on the Edit buttonAny time your cursor is over the header area, an Edit button will appear. Clicking on it will take you to the Profile page.

Choosing Edit ProfileClick on the gear icon in the top menu bar to display the drop-down menu and select Edit Profile.

Choosing SettingsClick on the gear icon in the top menu bar to display the drop-down menu and select Settings. Then click Profile in the left sidebar.

Image settings on Profile page

The screen shot above shows the section of the Profile page where the Photo and Header settings are located.

Change header buttonClick on the Change header button. If you don’t already have a header image uploaded, a window will open where you can navigate to the file on your system. Select it and then click the Open button in the file window. (It may be labeled something else, depending on your browser or operating system.)

Select Choose existing image from the menuIf you already have a header image uploaded but want to change it, a drop-down menu will appear when you click the Change header button. Select Choose existing image from the menu. (This means an existing photo stored on your computer.) A window will open where you can navigate to the file on your system. Select it and then click the Open button in the file window. (It may be labeled something else, depending on your browser or operating system.)

Upload header dialog

A window titled Upload a header image will open displaying a preview of the image you selected to upload. It has a slider bar you can use to scale the image. When the image extends beyond the boundaries of the preview frame, you can click and drag it to reposition it within the frame. Once you’re satisfied with the size and position, click the Save button.

Header published successfully messageYour header image will upload to the Twitter server. Upon completion, a message, “Your header was published successfully,” will display.

Save changes buttonClick the Save changes button at the bottom of the page to finish.

Save confirmation messageA message will appear: “Thanks, your settings have been saved.”

Options for navigating to your home pageTo see your new header on your Twitter home page, click “View my profile page” at the top of the left sidebar or Me in the top menu bar.

Removing a Header Image

It’s not necessary to remove a header image before uploading a new one but if for some reason you want to remove it and go back to the default image, follow these steps.

Selecting Remove from the Change header menuClick the Change header button and choose Remove from the drop-down menu.

Header removed confirmation messageThe header will change to the default image and a message above it will say, “No more header for you.”

Leave a Reply