This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
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!
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. You can view the final image preview below or the full-size image here.
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.
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.
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.
Use the pencil to trace the outline of the bird. You can now start to worry about the details.
You should now have completed the general outline of every part of the bird.
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.
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.
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.
Remember that you can fade out the outline too, not just the shadow lines.
This time, be very careful about all the details. Make those shapes look like real feathers, not simple curves.
Continue this process across the head and body. Make sure to leave out enough highlights.
Like I said, the feet went under one final modification. I wanted something in between an attack position and low level flying.
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.
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.
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.
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).
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.
Now in a new blank layer underneath the line art, use the Pen Tool (P) to give the bird a background color (#33ccff).
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.
Now draw larger strokes of a bright cyan (#7ff4fe). Make a separate layer for each of these.
Underneath the previous one, paint even larger highlights with a slightly darker cyan (#4de2ff).
A final highlight color will be a few gray accents (#ddded9).
Now use a bright yellow (#f5e456) to color the beak and add some shadows as well, with a darker yellow (#bcb833).
To finish the bird, fill in the beak with the same dark blue, and draw the eye. Use white, and the same dark yellow.
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).
Give its background a lighter shade (#edeedb).
Now just draw a few thin lines for shadows (#dfe0d0) and highlights (#ffffff).
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 :)
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.
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.
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.
Bring up the Stroke Panel (Window > Stroke) and use the following settings. Don't mind the gray background.
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.
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.
Use different birds with different colors. Try not to overdo it, or overlap them.
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.
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.
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.
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.