AnimHuT
  • Articles
    • Other Topics
    • Picture Of The Day
    • Review
    • Viral Videos
  • Contest
  • Freebies
    • Brushes
    • Font
    • Icons
    • Infographics
    • Patterns
    • Photoshop PSD
    • Textures
    • VECTORS
    • Wallpaper
  • Inspiration
  • Photography
  • Themes
    • Plug-ins
    • WordPress Themes
  • Tutorial
    • After Effects
    • Codex
    • Flash
    • Illustrator
    • Photoshop
      • Text Effects
    • Quick-Tip
Home » Illustrator » Create Vector Twitter bird in 5 steps
Mar05 39
Create Vector Twitter bird in 5 steps

Create Vector Twitter bird in 5 steps

Posted by Sri Ganesh.M in Illustrator, Tutorial

email
print

Today we show you how to create a twitter icon bird in illustrator. Twitter is a powerful micro blogging, which crossed above 10th billionth tweets two days before. So tribute to the twitter we go through how to make them. We have already given the icon pack, this tutorial request from readers/friends asked me to write –this bird drawn using with pen tool. So digg in to the tutorial.

Tutorial Details :

1. Software Used : IllustratorCS4
2. Tools : Pen tool(p) and Gradient Tool
3. Time Duration : 20 minutes – 30 minutes
4. Total Steps : 5
5. Attachments : Source file with Tutorial Pdf and Icons
6. ICON License : Personal and commercial purpose.
No Re-distribution.

Final Output :

Steps :1 Drawing a shape using the PEN tool

open a document in illustrator. ( Ctrl+N ) or file -> new.
take a pen tool (P) and try to make a shape like this. Don’t worry if you don’t get the same shape. We are not using any default shape to make this , so the shape bit differs. And you can get even better shape ;) .

the nodes

i used 4 nodes to make the shape


Now the shape look like this, the minimum nodes giev you more curvy.

review of the first step

Step 2 : Adding the Gradient color to the body

fill the shape with radial gradient. ( G ). The values are :

add the gradient color

step:2

Note : if you don’t have CS4 version just select from the gradient tab and put the values !

step :3 Making twitter Eyes

How about adding simple eyes to the bird.
Draw a circle (ellipse tool – L ) and drag it . if you need perfect circle click on the art board and it ask for the width and height.now circle with radial gradient tool . mode: Greyscale give the values . here the number determines the value.

step :3 making of eyes easy step

Step :4 making of beak

Make a shinny beak for the bird ! Draw a triangle look and the following image show you clearly the values added.
Take radial gradient tool and fill the shape with yellow colour and give the values, as show in the image.

twitter beak tutorial

step : 4 making of beak


Mode: web RGB . Now draw a white ellipse shape and reduce the opacity to 66%. Now place the beak correctly.

Step : 5 Making Wings using pen tool

Make wings now , starting with a pen tool and make a leaf like shape(as shown below ) an fill it with linear gradient tool ( G ) same color as used in twitr body ! – Only the location changes .

Location =”25” and “50.3” and the angle is “ -161 “

adding twitter wings

step:5 draw wings with pen tool


Now copy the wings and paste behind the body of the twitr. ( ctrl+C and ctrl+F) and drag it to back ground.
We did! But wait if you need some highlights draw a small shapes above the shape and reduce the opacity. Preview:
adding highlights and shadow

optional : adding highlights and shadow

we finished our tutorial; it’s time for your feedback. Please say your thoughts in the comment form, we like to hear from you. Your suggestion makes us to improve the quality of the blog thank you!


Download the Pack

Icons


Want to pass EX0-101? Join 642-436 course for all your 642-974 exam needs.

0

About Sri Ganesh.M

Rebel By Nature =) Founder and Editor of this blog. Share Knowledge and Inspiration through this Blog and vice versa.., This is a blog run by designers for the betterment of designers. You can Find me here : " Google plus " | Twitter | Facebook

  • http://www.webdevelopmentcompany.com Web Development Company

    This was great and VERY easty to follow. Thanks for this quick tutorial.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks for the kind words azterik

  • http://www.admixweb.com Holly

    Great tutorial, as always! Thanks for sharing :)

    • http://www.animhut.com/ Sri Ganesh.M

      thanks holly for your comment :D

      • http://www.taranfx.com Taranfx

        Great stuff, keep publishing Tutorials
        .-= Taranfx´s latest blog ..Google Your Home with Roomba Bot =-.

        • http://www.animhut.com/ Sri Ganesh.M

          thanks for the words :D

  • http://www.orphicpixel.com Mars

    pretty quick tutorial mate, love it
    .-= Mars´s latest blog ..13 Stunning Photograph =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks mars for your comments, your new design is good , liked it :D

  • http://richworks.in Richie

    Nice tutorial. I would have liked a blue bird….
    What about the feet?
    .-= Richie´s latest blog ..The Mystical World of Mandelbrot fractals =-.

    • http://www.animhut.com/ Sri Ganesh.M

      glad yo liked it ! you like the blue color, no problem just add the blue gradient or single color and you done. its a very simple tutorial, using pen tool. i didn’t went to advance steps.
      and legs, i made icons for this in oct09, so keep the originality i made same look like,
      even the original twitter does n`t have legs :P

  • http://webexpedition18.com Nikola Lazarevic

    nice and simple. good tutorial!
    .-= Nikola Lazarevic´s latest blog ..Most Important Design Conferences In 2010 =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks nikola … for your comments :D

  • http://desizntech.info/ Kawsar Ali

    This is really great Sri. I am def trying more Illustrator.
    .-= Kawsar Ali´s latest blog ..Converting Wooden PSD Template to HTML =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks kawsar.. you latest article is so good. thanks for sharing D:

  • http://digitalartempire.com/ Benjamin Rama

    Nice quick tip sri cheers for this ,Ben
    .-= Benjamin Rama´s latest blog ..9 Unique and Exclusive iPod and iPad Brushes for Photoshop. =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks rama for you kinda words

  • http://sexidesign.com Melody

    You and I share a love of twitter bird tutorials :)
    .-= Melody´s latest blog ..America’s Love For The Progressive Insurance Girl =-.

    • http://www.animhut.com/ Sri Ganesh.M

      yes we do :D

  • http://www.famousbloggers.net Hesham @ FamousBloggers

    Interesting, easy and fast tutorial, I have submitted to my bookmark site! Thanks for sharing.
    .-= Hesham @ FamousBloggers´s latest blog ..7 Basic Tips For Designing Your Blog =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks for the comment hesham

  • Pingback: Create Vector Twitter bird in 5 steps | AnimHuT | Tutorialicious.info

  • http://skillz-community.net/ Shurandy Thode

    Nice tut Sri. Voted this one up :)
    .-= Shurandy Thode´s latest blog ..Create a smiley face using only xHTML and CSS =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks for the vote buddy :D

  • Pingback: Create Vector Twitter bird in 5 steps | AnimHuT | twittersRus.info

  • http://myfundoo-blog.blogspot.com/ ishan

    Thanks for this wonderful tutorial……….
    .-= ishan´s latest blog ..Review contest :Earn hundreds of dollors and get exclusive template =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks ishan

  • http://freenuts.com Young

    The twitter bird is beautiful, will learn to draw one later.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks for the comment :D

  • http://www.webdesignmash.com starr

    This is a pretty neat tutorial. Twitter birds rule :)
    .-= starr´s latest blog ..40 Beautiful Anime Illustrations Part 1 =-.

    • http://www.animhut.com/ Sri Ganesh.M

      yes it rule :P thanks for commenting and welcome to animhut :D

  • http://www.thomascraigconsulting.com Thomas Craig Consulting

    Very nice tutorial, just came across your site, very impressive and brilliant content. Added to bookmarks, thanks.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks for the comment thomas

  • http://www.hellboundbloggers.com/about/ S.Pradeep Kumar

    Man, that birdy is really cute. Thanks for this awesome simple tuto Ganesh.. loved it! ;)
    .-= S.Pradeep Kumar´s latest blog ..100+ Resources To Download Excellent Free Fonts =-.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks sam glad you like it

  • Pingback: CSS Brigit |

  • Tutorial Lounge

    excellent training in few steps for create an bird like twitter.

    • http://www.animhut.com/ Sri Ganesh.M

      thanks TL ! even i have to practice more. basically in shadings

  • Pingback: Spotlights on: 30+ Tasty Articles from around the Design Community 01 – Skillz Media and Design

  • Pingback: pringOO speaks » Create Vector Twitter bird in 5 steps

  • Pingback: Pattern Inc » 5 Simple yet Effective Fresh Vector Tutorials

  • Pingback: 5 Simple yet Effective Fresh Vector Tutorials

  • Pingback: 5 Simple yet Effective Fresh Vector Tutorials - Programming Blog

  • http://inzoneinternet.com/ Inzone Internet

    It looks simple but it is actually pretty hard to do. Nice work.
    .-= Inzone Internet´s latest blog ..Ask Me a SEO or Blogging Question! =-.

  • Pingback: 5 Simple yet Effective Fresh Vector Tutorials | Design Reviver

  • http://smashingwebs.com SmashingWebs.com

    Wow.. You got it in a simple way :)
    .-= SmashingWebs.com´s latest blog ..49 Amazing Premium WordPress Portfolio Themes =-.

    • http://www.animhut.com/ Sri Ganesh.M

      Thanks for the Comment ! welcome to animhut

  • http://www.krop.com/ariarsyadi/ Ari Arsyadi

    Very simple and useful tutorial indeed.

  • http://www.92pixels.com Arslan

    thats great ans so fast, Just need to put blue in it :)

Our Advertisers :

Subscribe to AnimHuT (it’s Free)

Add Animhut on  Google plus animhut Free  Email Subscription for design updates animhut on twitter Animhut rss subscription for latest Updates Join our Official  Facebook Page Animhut Flickr Pool

Our Facebook Official Page
Follow @animhut

Archives

Community News

  • 24 Creative Newsletter Designs for Your Inspiration

    Here’s a collection of creative newsletter designs which should give you a ton of ideas and inspiration!

  • Beautiful Examples of Macro Photography

    Macro photography is taking close-up photographs of small object at greater than life size. This is one of my favorite…

  • 50 Beautiful Flowers Photography

    Spring is the time when beautiful flowers blossom and the perfect time to enjoy the beauty of nature. In north,…

  • 10 Websites to Download Free Fonts

    We all now how hard it is to find that perfect font for your graphic design project but whatever your…

  • Effects of User Behavioral Data & User Actions on Google

    Google is using this knowledge to prioritize the search results and to assign the PageRank to Websites. There is a…

●● We Recommended ●●



● Best Web Hosting Review
● Best Web Host Companies
● Review BlueHost
● China wholesale
● factory
● Free Website Design
● Website builder
●Mactheripper
● Coupon Codes
• Freelance Web Designer
• Direct TV Packages
● InternetPhonePackage.com
•Best WordPress Themes
•iPage Web Hosting
● Web Hosting Services
●Youtube to MP3

Search by Tags

ANIMHUT art history Articles caricature character design Contest Daily Photography Daily photos design history digital painting Flickr Freebies Funny Videos google doodles graphic design Icons illustration Illustrator InfoGraphics Inspiration Inspriation mascot Patterns Photography Photogrphy Photoshop Photoshop tutorial picture of the day Poster Project365 Quick-Tip Review roundup sriganesh stock image stress buster Texture Tutorial twitter VECTORS Videos Viral Video Wallpaper Wordpress wordpress theme

Hall of Fame :

Friends

  • AdmixWeb
  • ArtAtm
  • BloggerJet
  • CreativeOverflow
  • DesignModo
  • Designrfix
  • Desizntech
  • Graphik Design Agency
  • Logolitic
  • Orphicpixel
  • premiumpress coupon code
  • Skyje
  • Smashingshare
  • Underworldmagazines
  • Visionwidget
  • Webdesignfan
  • Webexpedition18

Pages

  • DESIGN NEWS
  • Who We are ?
    • Authors
  • | CONTACT |
  • Site Map
  • Follow us
    • Google +
    • Like AnimHuT fan page
    • @animhut (Twitter)
    • StumbleUpon Profile
    • Add me on Facebook

© 2009-2012 AnimHuT | Designed by Elegant Themes | Powered by WordPress| Sherweb