preview
How to create a Twitter bird in Photoshop Tutorial
By kamarashev on 1/10/10
In Photoshop | 5 Comments

How to create a Twitter bird in Photoshop Tutorial

The Twitter bird has become an iconic image and has been replicated many times, here is our version of the little fella. Using Adobe Photoshop CS4 we will be showing you how to create one from scratch using some simple techniques. Here is what the finished image will look like :

Step 1

To start us off, create new document 1280px by 1024px 72dpi

Step 2

There will be quite a few steps here so everything must be layered and grouped well.

Create a new group and name it body. Then with the Ellipse Tool make an ellipse and apply the Blending Options shown below.

Step 3

Create another group and name it Eyes. Click on the Elipse Tool and make a ellipse again this time smaller. Make it in White #ffffff.

With the “Move Tool” Rotate the Ellipse to the right by 5 degrees.

Apply the Blending Options below. After that click the right button on the ellipse layer and duplicate the layer.

Make the duplicated ellipse smaller with the “Move Tool” again and Flip it Horizontally by going to Edit -> Transform Path -> Flip Horizontal.

In the layers window, drag and drop and move the duplicated ellipse layer below the original layer.

Step 4

In this step we`ll continue creating the eyes. Use the Ellipse Tool again and create two ellipses one black and one white. Make the white one smaller than the black one and placed over the black one.

Apply the Blending options, shown below to the white ellipse then duplicate both black and white and make them smaller and move them over to the left.

Step 5

In this step we’ll make the eyebrows. Create a new Group and name it “Eyebrows”. Then from tools menu select the” Pen Tool” and make custom shapes that looks like an eyebrow, use the image below as a guide – it doesnt matter if they aren’t exactly the same.

When you’re done go to Layer -> Duplicate Layer… after that go to Edit -> Transformation Path -> Flip Horizontal.

Move the duplicated eyebrow over the left eye with the Move Tool and scale it down a little bit. I scaled it to 107px by 52px.

Step 6

In this step we`ll make the tuft of feathers and the front.

Create a New Group and name it “Forelock” We will use again pen too to make a custom shape, use the image below as a guide again.

After the shape is made, with the  left mouse button drag and drop the forelock group below the body group.

Step 7

In this step we`ll make the Stomach.

Create a New Group and name it “Stomach”.

Click on the “Ellipse Tool” and create an ellipse around 140px wide and 175 px high. Use #458af0 color.

Then go to Layer -> Duplicate Layer… Change the duplicated layer color to White #ffffff and scale it down to 126px width and 158px height.

After that change the Opacity to 50% and the Fill to 0%. Apply the Blending Options shown below.

Step 8

In this step we’ll create the twitter bird’s beak.

Click on “Pen Tool” and set the color to #f2d616 than create a custom shape, shown below. Do the same with the other two parts of the beak, so the beak is made up from 3 parts of different colors, shown below.

After these 3 are done, Create a new layer by clicking on the Create New Layer button on Layers Tab.

Then go to the Tools panel and Click on the “Brush Tool”. Set the size to 3px, hardness to 100% and color to #a17c07.

Next Draw two semicircle shapes like these on the image below, these are the nostrils (do beaks have nostrils?!).

Step 9

In this step we`ll create the wings.

Make a new group called “Right Hand”. Click on Pen Tool and create the figure shown below. Use color #458af1.

After you are ready with that go to Layers -> Duplicate Layer… Make a new group “Left Hand” and put the duplicated layer there.

Go to Edit -> Transform Path -> Flip Horizontal and then scale the left hand down and move it to the left. With left mouse key, in the layer window, drag and drop the left hand group below the body group.

Step 10

In this step we’ll create the feet.

Make a new group and name it “Feet”. Click on the Pen Tool and create the right foot, follow the image below as a guide. Use #f2d616 color.

Next select the foot layer and click Layer -> Duplicate Layer… then Edit – Transform Path -> Flip Horizontal.

With the Move Tool move the left foot to the left.

At the end grab the Feet group and drag and drop it below the Body group. This way the feet will go under the body ellipse.

Step 11

In this step we’ll create the tail.

Make a new group and name it “Tail”. With the “Pen Tool” create 3 shapes similar to these on the image below.

Apply the Blending Options given. After that move the Tail group below the Body group.

Step 12

In this step we’ll create the bird’s shadow.

With the “Ellipse Tool” make a big black circle. Set the Fill to 0 and apply the Blending Options shown.

Go to Layer -> Smart Objects -> Convert to Smart Object then go to Layer -> Rasterize -> Smart Object.

Next with “Move Tool” squash the circle down so it becomes an ellipse and set Opacity to 30%

Step 13

Finally I’ll show you how to put some subtle shadows around the bird to give it a feeling of depth.

I’ll show you how to it for one part of the bird and you can use the technique on the rest of the parts. We’ll shade the body shape first.

Go in to the Body group and create a new layer. Make sure that the layer is above the body shape layer.

Then hold SHIFT and click on the body shape. This will make a new selection the same shape as the body area.

Now click on the Brush Tool and set the size to 100px and the Hardness to 0: also set the Opacity to 10%.

With this selection now you can paint with the brush only inside the selection.

Select the new empty layer that we made earlier and use the brush at the edges of the selection.

Repeat that for the rest of the birds grouped areas: The Beak / Hands / Feet and Forelock.

Here is the finished bird :

Here we have the finished bird, using some basic Photoshop tools we have created a nice cartoony-looking illustration that you can use in your webdesigns.

About the Author
Vasil Kamarashev is a 25 year old Freelance designer, currently living in Bulgaria in Europe.
  • forum option binaire
    June 21, 2012 @ 2:27 am

    I believe one of your ads initiated my web browser to resize, you may well want to get that on your blacklist.

  • alarm systems perth 
    June 25, 2012 @ 7:51 am

    I had been wondering if you ever thought of modifying the page layout of your website? Its very well written; I love what youve got to state. But maybe you could include a a bit more in the way of written content so people could connect to it better. You have got a great deal of text for only having one or two photos. Maybe you could space it out better?

  • orange county private investigator
    June 26, 2012 @ 12:52 am

    It appears to me that this website doesnt load up on a Motorola Droid. Are other people getting the same problem? I like this web site and dont want to have to skip it whenever Im gone from my computer.

  • buy fridge freezer
    June 30, 2012 @ 3:34 am

    Dude. This site is cool! How do you make it look like this ?

  • business bookkeeping services
    June 30, 2012 @ 6:37 pm

    Do you have a spam concern on this website; I also am a blogger, and I was asking yourself your scenario; weve got developed some great techniques and we are looking to trade options with other people, be certain to fire me an e-mail if interested.

  • Gravity Forms
  • Premium WordPress Apps

Enter your email and we will send you exclusive freebies and notifications of new posts.

We are looking for talented tutorial writers, web / graphic desigers & photographers to share their wisdom with our readers.

Earn recognition and get paid per tutorial,
please get in touch with us.