Reconstruct the Twitter Icon Using Circle Shapes

Icons and logos can appear complex to create, but these are often just basic geometric shapes combined together

  • Share on Google
  • Share on Stumbleupon

Icons and logos can appear complex to create, but these are often just basic geometric shapes combined together. Using basic geometric shapes like circle, square and triangle for icon design is very common. It's easy to begin with and allows designers to create simple structures quickly. In this post, I’ll demonstrate how to create the new Twitter icon from simple circle shapes.

You will need: Adobe Illustrator

The new Twitter logo has been improved, now it fits both square and circle frames perfectly.

All the details like feather, tail, head and beak can also be created using circle shapes.

Step 1 - create basic shapes

Our base will be a circle. First create horizontal guidelines to help with alignment and proportions.

We’ll create two basic shapes to use throughout the design, the circle (on the left) and the moon. To create the moon shape, copy the circle and align it to the middle guideline. Then use the ‘Minus Front’ tool to cut out the moon base.

Step 2 - create the tail

Now we will use the circle and moon shapes in two phases:

  • Copy the circle, divide it with the moon to create a torso.
  • Use the moon again with another copied circle, divide it to create a tail. Then use the ‘Unite All’ tool to combine the tail and torso.

Step 3 - create the head

Now the body is roughly done, we can add another circle for the head. To determine how large the head should be, I used the height between the middle and last guideline to create a small circle.

I then used this circle to determine the exact end points for the tail.

Step 4 - shape the feathers

Use the ‘Pen’ tool to tweak the tail for a curvier look. Create more circles to shape the wing feathers.

Step 5 - bottom feather

Use the ‘minus front’ tool to create the feathers by copying and dividing circle bases on top of each other.

Step 6 - middle feather

Do the same process again for middle feather.

Step 7 - top feather

For the top feather, just add another circle on top. The main body will create the boundary for the top wing.

Step 8 - combine feathers

Use the ‘Unite All’ tool to combine all three feathers. Then combine them with the main body using the ‘Divide All’ tool. Don’t include the head part yet, we’ll do that separately.

Step 9 - Add wing to body

Select the tiny bits marked in red circles, under the feathers. Delete these to clean up the wings. Now our wings are in very nice form! Lets add it to the body using ‘Unite All’.

Step 10 - clean and combine head to body

There is a slight misalignment between the body and head, so move the head part slightly to the left until it sticks to body. Then use ‘Divide All’ again to remove extra bits. Last, use ‘Unite All’ to combine the head and we are almost there!

Step 11 - lower beak

Now we are going to add the beak to our silent bird. Again, we’ll use circles for both upper and lower beaks.

Create a couple large circles and use the ‘Minus Front’ tool to create the lower beak.

Step 12 - create upper beak

Use the same process to create the upper beak. You may need to play with nodes to create more detailed or curved shapes, like what we did for the tail. But I'm already happy with result so I left it as it is.

Use the ‘Divide All’ tool to get rid of unnecessary bits. We have a ninja bird!

Step 13 - Done!

Use the ‘Unite All’ and we are done! You’ve created a Twitter logo from scratch using just circles!

Now you’ve mastered the process, try to apply this technique to create other complex icons or logos. Hopefully you’ll find them much easier now!

Awwwards

By Pictonic

Pictonic specialises in premium icon fonts, the library has over 2300 icons including 230 free.

pictonic.co