Creating a ‘Twitteresque’ Bird Vector in Photoshop

Introduction

Finished Twitter Bird Vector

In this tutorial I will show you how to draw a very simple but awesome twitter bird vector. I’ve used photoshop to create this but you could just as easily use illustrator as we’re mainly using the pen tool.

This is a fairly basic tutorial and all you’ll need is a very basic knowledge of the pen tool. Have fun!

Step 1: Base

Create a new document, I’ve created mine 575 x 680, but it doesn’t really matter what size it is, you can resize later if need be as it is a vector we are creating. Now select the pen tool and begin to draw the basic body shape of the bird, I based mine on a sketch I had drawn previously. You can copy the shape from a photo or drawing or you can just use your imagination.

Twitter Bird Step 1

When drawing with the pen tool I usually will turn off visibility of the layer in the layers menu so I can see what I am doing better. Once you’ve finished drawing you can turn it back on.

Now we have the basic shape of the body, I used #33ccff as the color, but again you can choose whatever you like. Next I added a slight gradient to the shape just to add a bit of depth.

Twitter Bird Step 2

Step 2: Features

Now we have the basic bird shape, the next step is to add the birds features (eye, beak, legs). The beak is a faily simple triangle-ish shape and is coloured #0f0f0f, again drawn with the pen tool, and with a slight gradient added to give it depth.

Twitter Bird Step 3

The eye is just layers of different coloured circles ontop of eachother to create a ‘beady’ looking eye.

Twitter Bird Step 4

Now the legs. First we need to create the thigh shape, this layer needs to be underneath the body layer and I coloured it with #DBDBDB. This way any overlap will be hidden underneath the body layer. The actual legs again are underneath the thigh and body layers and are positioned to look like they are gripping something and I used #0F0F0F.

Twitter Bird Step 5

Step 3: Shading

The final step is to add a bit of detail and shading, I have kept it fairly simple but you could really go for it and add as much shading as you like. I started by adding a lighter area (#7AD6F5) covering the breast of the bird.

Instead of drawing a whole new shape, I duplicated the body shape layer and adjusted it to how I wanted it, this way the edges will match the body shape.
Then I added the darker areas (#2AB7E6), again by duplicating the body shape and adjusting it by deleting a couple of vertices and adjusting others.

Twitter Bird Step 6

Conclusion

Finished Twitter Bird Vector

The final result is a fairly simple, but good looking twitteresque bird. Hopefully your will have had fun following this tutorial and will have learnt something along the way. The pen tool is a great tool to know how to use, so practice with it as much as you can as it can be trick at first, but once you know what your doing you can do alot with it.

Download the Twitter Bird Photoshop PSD File:

In case you want to compare your results or just tweak my design, here is the finished PSD file of the twitter bird: twitterbird.psd

About the Author

Kyle is a web developer for ink cartridges, a site that sells HP, Epson, Canon, Brother and other ink cartridges and gives out design freebies. Follow him on twitter

More posts by

Website      

  • Prakash Ghodke

    Nice one!! I think myinkblog is back

  • http://blog.27graphics.com 27 Graphics

    Great tutorial and very well written. Thanks for sharing ;)

  • http://www.raoco.net Raoco

    Whau. Great tips there. Very usefull backgrund informaion.

    myinkblog is back !!

  • http://www.eatablegraphics.com/ Rahul

    Good work kyle.

  • http://www.inkcartridges.uk.com Kyle Prior

    Thanks for the feedback guys!

  • http://www.clippingshop.com Clippingshop

    Good looking work..thanks for sharing

  • http://www.logonerds.com Custom Logo

    Thanks for sharing this idea – do you think that twitter logos and that infamous bird are still things that are being looked for by logo clients, or has the twitter phase been overtaken by Facebook?

  • http://www.psd-dude.com PsdDude

    I really like birds and especially twitter birds :) you check out my version http://www.psd-dude.com/tutorials/resources/twitter-logo-with-emo-twitter-bird.aspx
    thanks for sharing the tut :)

  • http://www.gizmocrazed.com/ liaqat

    Great tutorial and very well written. a great share undoubtedly! ;)