If you’re on twitter and reading this blog, chances are you’ve already customized your profile with a cool twitter background. In this tutorial, we’ll create one of our own around a central mascot: a highly detailed twitter bird, that you’ll have to draw yourself! Get ready to do much more than clicking in this artistic tutorial!

Introduction

When creating a twitter background, there are various things to take into consideration. The biggest problem is the fact that you can’t center align an image in your twitter profile. So give up any ideas you may have about wrapping graphics around the body. You can either create a tile-able design, or left align the image. Since the body size doesn’t change according to the resolution it’s being viewed at, you also have to worry about keeping your main content visible over multiple screen sizes, and fading out your illustration seamlessly.

If your text goes too far to the right, many people may not be able to read it. If your illustration is highly detailed and ends after only 250 pixels, it will look odd on large screens, because it does not fade out to the right and bottom. And lastly, you’re working in web format so think about your file size when designing it.

To cope with all these requirements, we’ll create a relatively small background that will align to the left side and fade out toward the bottom and right. And by fading out, I don’t mean erasing half of the image, but gradually using fewer and fewer elements. It’s a common practice for twitter backgrounds to include a short bio and links to where the person can be found online.

My own background does not have these, because I feel that the profile bio is visible anyway on the right and you also get to chose one link that people can use. I link to my portfolio, where there are multiple links of my online presence, in case anyone is interested. Anyway, for the sake of making this more practical, there’s a short bio (in this case total bogus due to lack of inspiration) and a couple of links.

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $19/month. You can view the final image preview below or the full-size image here.

Step 1

The first thing to do here, is to draw the mascot, a twitter bird. There are lots of cute, bright and shiny twitter birds out there so I wanted one that was not only different, but that represented my style. After all, a twitter profile is all about the owner.

The process seen below is very stretched out, but can be shortened. I don’t want you to think that this is only way you should do it, but in case you don’t have a lot of experience with line art, it’s good to take your time, and get every stage right. In time, after becoming more experienced, a simple doodle can be enough to get you started in Photoshop.

For now though, start by getting a regular piece of paper and drawing out a few basic sketches of the bird. Focus on getting the posture right, and don’t worry about the details. those will be covered later.

Step 2

As you may notice, the position of the legs in the screenshot below is not identical to the final result. As a matter of fact, I changed them at every stage because it’s a bit difficult to make them look natural and aesthetic at the same time. Just trace a rough image of your bird in this first stage.

Step 3

Now you’ll need some tracing paper. It’s basically a semi-transparent paper that allows you to draw something on top of a reference image, in this case our rough sketch. I used two pencils: a 2B, and an 8B. The higher the number, the softer the tip. I used the 2B to trace the outlines and 8B to draw shadows. The eraser is cut in half, so that you can use the sharp edge to erase small areas. That’s helpful for adding highlights.

I also slipped an extra sheet of tracing paper in between to make the rough sketch less visible. If your image has too much contrast, it’s a good idea to fade it out more so you don’t get confused.

Step 4

Use the pencil to trace the outline of the bird. You can now start to worry about the details.

Step 5

You should now have completed the general outline of every part of the bird.

Step 6

Begin to add shading, so that the bird looks 3D. Notice that the shadows are very basic, and don’t need to look very realistic. This is only a part of the whole process, and not a final image so don’t worry about making it look great. All you need to do is clearly define shapes and lighting.

This part is important because all the shadows will become continuous lines in the future steps. Blank spaces are highlights and parallel lines are shadows. Make the lines more distant and shorter, and the human eye will perceive it as a gradient. This is basically a hand drawn halftone screen.

Step 7

Grab another piece of tracing paper and place it over the pencil sketch you made. This time we’ll use this one as a reference for the final, line art bird.

Step 8

Now all you have to do is draw parallel lines across the shadows. In order to fade them out, just draw the lines shorter and shorter.

Step 9

Remember that you can fade out the outline too, not just the shadow lines.

Step 10

This time, be very careful about all the details. Make those shapes look like real feathers, not simple curves.

Step 11

Continue this process across the head and body. Make sure to leave out enough highlights.

Step 12

Like I said, the feet went under one final modification. I wanted something in between an attack position and low level flying.

Step 13

I made the second wing generally darker than the first. That makes the drawing look more dynamic and realistic. Casting an equal light over the entire bird can make it look less interesting. Even if the posture is too symmetric, you can always rely on lighting to spice it up a bit.

Step 14

And there it is, all done. Perhaps a bit too tall and stretched, but it doesn’t matter since you can’t see it all in the twitter background anyway.

Step 15

Scan it or take a photo of it and put it in Photoshop. Go to Image > Adjustments > Levels and boost up the contrast considerably. Darken out the lines, but bring up some of the highlights too.

Step 16

Go to Select > Color Range. Inside the window, click on a black area of the photo so that you have a selection of the black lines. Press OK and copy the selection (Command + C).

Step 17

Create a new Photoshop document that is 750 px in width and 700 px in height, and at 72 dpi. Paste the bird (Command + V), double-click its layer and add a Color Overlay effect. Chose a dark blue (#387ebc) and press OK. Create a new blank layer (Command + Shift + N), click on both layers in the layer menu and merge them (Command + E). That will flatten the Layer Style.

Step 18

Now in a new blank layer underneath the line art, use the Pen Tool (P) to give the bird a background color (#33ccff).

Step 19

For this part it would be best to have a pen tablet, but it’s not completely necessary. You can either use a regular brush, or the pen tool to create the highlights and shadows. I did it with a tablet. In this step, trace the first few highlights with white and make it a clipping mask so it only appears inside the bird.

Step 20

Now draw larger strokes of a bright cyan (#7ff4fe). Make a separate layer for each of these.

Step 21

Underneath the previous one, paint even larger highlights with a slightly darker cyan (#4de2ff).

Step 22

A final highlight color will be a few gray accents (#ddded9).

Step 23

Now use a bright yellow (#f5e456) to color the beak and add some shadows as well, with a darker yellow (#bcb833).

Step 24

To finish the bird, fill in the beak with the same dark blue, and draw the eye. Use white, and the same dark yellow.

Step 25

You’ll have to go back to the drawing board now to paint a few clouds. I used several types of comment boxes for this. This being a social network, comic style shout-outs are right on cue. Trace the outline with a shade of gray (#d0cdbe).

Step 26

Give its background a lighter shade (#edeedb).

Step 27

Now just draw a few thin lines for shadows (#dfe0d0) and highlights (#ffffff).

Step 28

Repeat this process to create a few other types of comment boxes. Combined, these express simple statements, thoughts and exclamations. I try not to shout too much on my profile, so don’t worry, these are purely decorative. I don’t yell at my followers :)

Step 29

It’s time to add a bio and links. The simple small text is Calibri Regular and the headlines are in Rockwell Std Bold. The ampersand is Mrs. Eaves Medium Italic. Use the same colors as the bird.

Quick Tips

Always remember to try out different antialiasing methods when working with type, especially at low resolutions. In the first example, the word is in Sharp mode. Notice that the middle letters seem to buckle and drop below the bottom line. It may be subtle, but it is a mistake.

Not only that, but the letters are not even parallel. Each one seems to have it’s own orientation. To fix this, try an alternative method of antialiasing, in this case Strong. Now the letters have a common orientation and leveled baseline.

While the previous may be a subtle fix, the next is a very common mistake. Uneven tracking can lead to some letters overlapping and others being too far from each other. While you can’t usually notice these bugs at regular small lines of text, large display text will reveal these inconsistencies.

To fix this, you have to manually change the space between each letter. Choose the Type Tool (T), click inside a line of text and drag a selection of the first two letters. Input an appropriate number in the tracking field. When you’ve found just the right space, select the second and third letter and do the same. Go through each space of two-by-two letters until all the tracking is correct. You can see the difference of custom and standard tracking in the above and below instance of the word.

Step 30

Find the vector shape layer where you traced the bird. Click on the Vector Mask thumbnail of the layer to bring up the path. Use the Path Selection Tool (Black arrow) to select the path and copy it (Command + C). Open illustrator, paste the path (Command + V) and press enter in the window that opens up in Illustrator (Compound Shape). Select the stroke color and chose white (it’s black here just so you can see it). Set the Stroke weight to 2 pt.

Step 31

Bring up the Stroke Panel (Window > Stroke) and use the following settings. Don’t mind the gray background.

Step 32

Copy it (Command + C) and paste it (Command + V) in the Photoshop file as a smart object. Repeat the process with the comment boxes too.

Step 33

Using the same headline font, create a few typographic accents around the comment. We’ll also use a variety of birds from the Birds 2 Vector Pack of Go Media’s Arsenal. Just paste them as Smart Objects and give them a Color Overlay with whatever color you’d like.

Step 34

Use different birds with different colors. Try not to overdo it, or overlap them.

Step 35

I also wanted to give the idea of birds carrying messages, so I placed letters around, nearby or held by the actual birds. They are all with one of the three fonts we used earlier.

Step 36

Repeat the motif in the top corner as well. Don’t make it scientific. Keep the orientation random, and not necessarily all in one direction.

Step 37

And then just spread the birds all over the canvas. Remember to fade them out though on the right and bottom by placing fewer and fewer.

Final Image

That’s it! Our twitter background is complete. You can view the final image preview below or the full-size image here.

This is the version I have on my twitter profile.

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.