web analytics

Tutorial – Twitter Photo Grid Header


Download the twitter_header.psd file. When you open the file, it should look something like this. The portrait silhouette is where your Twitter avatar image should be position. Close the file for now.

For each of the images to be included in the header, crop and resize the file so that its final dimensions are 177px x 177px square. You will need a total of 27 images.

Open the twitter_header.psd file (if you haven’t already done so) and add your first image to the psd file.

Making sure that the image layer is selected, from the menu bar select Layer -> Layer Style -> Stroke…

In the open dialog, make sure the following settings have been set as in the diagram i.e:

      • Size: 9px
      • Position: Outside
      • Blend Mode: Normal
      • Opacity: 100%
      • Fill Type: Color
      • Color: White

If you need to change the colour, click on the box next to the Color label and change the colour to white.

Once the settings have been changed, click on the Ok button.

Side note: As the above step needs to be repeated for every image, you can speed up this portion of the process by clicking on the Make Default button in the Stroke dialog window before you click on the Ok button for your first image. That way it will save you having to manually change the setting for all the remaining images.

Position your first image so that it lines up with a corresponding black panel. It should snap into place but you may need to use the arrow keys to make micro-adjustments if it doesn’t quite line up.

Repeat the above steps for the remaining 26 images until all the black panels are covered and it looks something similar to this.

Once you’re happy with the images selected and where they’ve been positioned, click on the eye button next to the Avatar and Panel Guide layers to hide them from view.

Save your now completed twitter header by going to File -> Save for Web… You should see this dialog window. Save the file out as either a jpg or png.

Open up your web browser on your computer, load up and login to your twitter profile.

In the settings, go to the Design section. In the bottom half of that page you’ll see the option to Change header. Click on that dropdown box and select Choose existing image and upload your twitter header file.

When the dialog window opens to allow you to scale the image, leave it at its default size and click on the Save button to upload the header.

Once the header has been uploaded, click on the Save Changes button at the bottom of the Design window.

Your header file should now be active and look somewhat similar to this.

The way your Twitter avatar image lines up with the rest of the header should look fine on computer browsers. Unfortunately, for iOS and Android devices (and I would presume other mobile devices as well) the header doesn’t line up properly, which ruins the effect somewhat. The is irrespective of whether the header is viewed by an app or via the mobile browser.

The twitter_header.psd file is calibrated for computer browsers. If you’d prefer to line up the photo grid for some other device, you’ll need to tweak the position of the panels and possibly even the size of the images as well. Feel free to modify and redistribute the file as you see fit.

If you like this tutorial or have any questions, feel free to leave a comment below. For another creative use of Twitter’s header, check out this tutorial at Robert’s Productions.

Follow me on Twitter @theheartoffood.

Leave a Comment

CommentLuv badge

{ 1 trackback }