Create an unique twitter bird for your website

Untitled-2Twitter birds became one of the most recognizable characters on the web. Everyone has a twitter and we all love twitting. In this tutorial I'll explain you step by step how to draw an unique twitter bird holding your website logo, or a photo of yours if you want.


Final Image Preview

twitter-bird_final

Step 1: Body

Open Illustrator and create a new document. We'll start from drawing bird's head so select the Ellipse Tool (L), draw an ellipse and slightly rotate it counter-clockwise.

1

Now select the Pen Tool (P) and start tracing a body-like shape.

2

Then draw some feathers.

3Select the feathers shape and the body shape an click on the Unite button in the pathfinder panel.

4

Step 2: Beak

Draw the beak now.5Using Scissors Tool (C) divide this path into  two parts by clicking on the edges of the beak like you see below.

6

Give both paths an orange to yellow gradient.

7

Step 3 : Eye

For the eye draw an ellipse, fill it with black, no stroke and rotate it a bit just like we did with the head path. Don't forget about highlight.

8Step 4: Wings

Using Pen Tool (P) Draw a wing path as you can see below and apply a gradient to it with the colors you like.

9Right-click on it, go to Transform -> Reflect and check Vertical. Rotate it сlockwise a bit.

10Why we reflected it? To create the right effect, we'll reflect it again after applying the effect we need. So, go to Effect -> Distort & Transform ->Transform and use these settings:

11

You should end with a path like this:

12Nice! Go to Object -> Expand Appearance, right-click on the wing, go to Transform -> Reflect, check the Horizontal and click OK. Here is our wing.

13Now draw another path for the second wing.

14Now apply the same transform effect but this time enter these values:

15

With our new wing created go to Object -> Expand Appearance.

16

Isolate this group by double clicking on it or right-click and select Isolate Selected Group. With the wing isolated pres Shift+E to Select the Eraser and erase the part we don't need.

17

Press Esc button on your keyboard to exist isolation mode and adjust both wings position.

Step 5: Body Details

Select the body path, make it no stroke and give it the same gradient you used for the wings.

18With your body path still selected press Ctrl+C and Ctrl+F to make a copy. Select the Pen Tool (P) and draw a random path intersecting bird's body.

19By Shift clicking select this path and the top copy of the body path and in the pathfinder panel click on the Intersect button.

20Give the resulting shape a gradient with a little brighter colors than gradient of the body.

21Step 6: Head

Select the head path, make it no stroke and give it a radial gradient from a bright blue to that dark blue from the body gradient. Adjust the gradient in that way so head edges will blend with the top of the body.

22Step 7: Tail

For the tail I've drawn an open path with the pen tool and Using Eyedropper Tool (I) applied the same gradient as bird's abdomen path.

23

Step 8: Legs

Select the Pen Tool (P) and try to draw a leg.

24Make a copy of this path and place it under the body path.

25With your Pen Tool draw a path for bird's paws and apply the same gradient as we used for beak. Move it under the leg copy that we've just made.

26Copy this path and move the copy under the second leg.

27

Step 9: Your Logo

Import your website logo or any other image that you want and place it under bird's paws.

28Enjoy your new twitter icon!

twitter-bird_final

Share This Post
  • Digg
  • del.icio.us
  • StumbleUpon
  • Facebook
  • LinkedIn
  • Design Float
  • Mixx
  • Twitter


Subscribe to the AiMonkey RSS Feed to stay up to date with the latest vector tutorials and articles.

                                               
  • beautiful

    thanks
    raj
    from madras

  • Awesome. But the transform doesn’t seem to work for me.
    http://img121.imageshack.us/img121/1296/twitters.png
    Any Ideas what I am doing wrong?

  • These setting don’t apply to any path, try to increase the Horizontal Move value or just play with the settings. I checked them again in my illustration and they worked fine for me so try to find yours if my correction doesn’t help you. Good luck.

  • That’s awesome…
    Looks like I’ve got really good tutorial this time. Thanks.

  • The quality of the info is what keeps me on this site, thanks!

    Have a nice day. :)

  • Happy to read that! thanks a lot!

  • nice post. thanks.

  • I love it. Very nice!

  • cool tutorial. I really enjoyed it.

You can follow any responses to this entry through the RSS 2.0 feed.

About aiMonkey

Aimonkey.com is a blog dedicated to Adobe illustrator tutorials and design. aiMonkey and all content is completely designed and maintained by Alexandru Siminitchi and Ilie Ciorba.

Hire us

Like our site and tutorials? Hire our team to help you with your next design project! Use Contact Page to provide us some details.

Suggestions

Want to join our resources list? Head on over to the Contact Page and send us a request. You can ask any kind of tutorials from us. If you have any suggestions or feedback on how we can improve our site for you then don't be shy, contact us.