#StopWarInUkraine Save the children

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers

Reconstruct the Twitter Icon Using Circle Shapes

Article by Pictonic in Design & Illustration -

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.

  • <h3><strong>Step 1 - create basic shapes</strong></h3>

    <h3><strong>Step 1 - create basic shapes</strong></h3>

    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.

  • <h3><strong>Step 2 - create the tail</strong></h3>

    <h3><strong>Step 2 - create the tail</strong></h3>

    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.

  • <h3><strong>Step 3 - create the head</strong></h3>

    <h3><strong>Step 3 - create the head</strong></h3>

    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.

  • <h3><strong>Step 4 - shape the feathers</strong></h3>

    <h3><strong>Step 4 - shape the feathers</strong></h3>

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

  • <h3><strong>Step 5 - bottom feather</strong></h3>

    <h3><strong>Step 5 - bottom feather</strong></h3>

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

  • <h3><strong>Step 6 - middle feather</strong></h3>

    <h3><strong>Step 6 - middle feather</strong></h3>

    Do the same process again for middle feather.

  • <h3><strong>Step 7 - top feather</strong></h3>

    <h3><strong>Step 7 - top feather</strong></h3>

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

  • <h3><strong>Step 8 - combine feathers</strong></h3>

    <h3><strong>Step 8 - combine feathers</strong></h3>

    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.

  • <h3><strong>Step 9 - Add wing to body</strong></h3>

    <h3><strong>Step 9 - Add wing to body</strong></h3>

    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’.

  • <h3><strong>Step 10 - clean and combine head to body</strong></h3>

    <h3><strong>Step 10 - clean and combine head to body</strong></h3>

    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!

  • <h3><strong>Step 11 - lower beak</strong></h3>

    <h3><strong>Step 11 - lower beak</strong></h3>

    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.

  • <h3><strong>Step 12 - create upper beak</strong></h3>

    <h3><strong>Step 12 - create upper beak</strong></h3>

    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!

  • <h3><strong>Step 13 - Done!</strong></h3>

    <h3><strong>Step 13 - Done!</strong></h3>

    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!