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 $9/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.