Create a geometrical shape in Illustrator

14 Sep 2011

As some of you might know, I really love cycling. Due to my love to this sport I've become a bit of a bicycle addict. While browsing the web I came across this magnificent vintage exemplar. While admiring its beauty I was fascinated by the geometrical shape inside the front chain ring. My brain started to spin, thinking about how to create such shape…

Inspiration

The bike that inspired me to write this tutorial: Chiossi Cycles Maino, especially the crank part /via Cycle EXIF

Inspiration is really everywhere. You just have to open your eyes and open your mind to it. Most of the time it's right in front of you, you just have to see it. Looking at the shape of the crank of the Chiossi Cycles Maino made me want to reproduce it, and do something creative with it. I decided to turn it into a colorful geometrical object, cog included. This way I kept the link with cycling. If you wonder how I did this cog, no worries I'll explain that in an upcoming tutorial. I thought of including this here as well, but this one took already a lot of time to write.

My final result

Once I've drawn this geometrical shape, I thought this would go well on a dark background. That's how the idea was born to create a simplistic wallpaper. Problem was, centering the shape in the middle wasn't exactly what I was after. So I searched for a fitting small cycling quote. That's when I found this beautiful quote from the famous Italian cyclist Mario Cipolini. I could totally relate to what he's saying, a perfect match.

A fragment of the final result

The inside shape is the final result of what we're about to create today. Before I was able to write this in a step-by-step tutorial, I tried out a few things purely based on mathematics, since most people hate to use the Pen Tool. People who follow me on twitter will understand what I'm talking about. First thing I always do is analyzing the shape by trying to deconstruct it into logical parts. One thing was clear to me from the start: it involved one shape that is copy turned at 120° (360°/3). The fact that the 3 elements had to seamlessly connect with each other made me try a few times. So let's get started!

Draw a circle

Start by dragging a horizontal and a vertical guide from the rulers. If your rulers aren't visible, hit cmd/ctrl + R. Secondly, make sure Smart Guides are turned on: View > Smart Guides. You can turn them on and off via the shortcut Cmd/Ctrl + U. Select the Ellipse Tool, hold down the Alt/Option key, and click precisely on the intersection of the 2 guides. In the box that appears enter 100 px in both fields and hit OK.

Draw a vertical line

Select the Line tool and draw a vertical line starting at the guides' intersection point dragging downwards holding down the Shift key. With the line object still selected, hit Cmd/Ctrl + C to have the line in your copy memory.

Create 120° guide

Select the Rotate tool from the toolbox, hold down the Option/Alt key, and click precisely in the guides' intersection point. Enter the value of 120 as degree angle and hit OK. Now hit Cmd/Ctrl + 5 to turn the line into a guide (View > Guides > Make Guides).

Create -120° guide

Paste the line object that you have in your copy memory in front in the exact same position by hitting Cmd/Ctrl + F (Edit > Paste in Front). Select the Rotate tool again, hold down the Option/Alt key, and click again precisely in the guides' intersection point. Now enter the value of -120 as degree angle. hit Cmd/Ctrl + 5 to turn also this line into a guide.

Draw 2nd circle and align vertically center top

Select the Ellipse Tool again to draw another circle, hold down the Alt/Option key, and click somewhere on the vertical guide. In the box that appears enter 50 px in both fields and hit OK. Now select both circles using the Selection tool (black arrow). Hold down the Shift key to select the 2nd circle. Then release the Shift key and click the bigger circle again. You should see a different selection appearance (as shown in the image above), referring that this will be the object the other object will be aligned to. Now select the Vertical Align Top option from the toolbar at the top of your screen (or from the Align palette). Also select the Horizontal Align Center option to be sure the smaller circle will perfectly aligned in the center as well.

Draw a 3rd circle and turn into guides

Now draw a 3rd circle which will be turned into a guide. Select the Ellipse Tool again, hold down the Alt/Option key, and click precisely on the intersection of the 2 guides. In the box that appears enter 66 px in both fields and hit OK. Now hit Cmd/Ctrl + 5 again to turn this circle into a guide.

Add a horizontal guide

Drag a horizontal guide from the top ruler and drag it so it aligns with the bottom of the circle you've just created. With Smart Guides turned on, the guide should automatically snap to this point.

Move a copy of the big circle up

Select the big circle, copy it (CMd/Ctrl + C), and paste it in front, using the shortcut Cmd/Ctrl + F. With the pasted circle selected, drag it perfectly vertical upwards holding down the Shift key so the bottom of the circle snaps to the guide you've previously drawn as shown in the image above.

Rotate towards the intersection

With the new circle still selected, select the Rotate tool from the toolbox and click precisely in the bottom anchor point of the circle. Now rotate the circle manually until it intersects with the intersection point of the circle guide and the guide on the left at -120°, as shown in the image above. The circle should also almost touch the smaller circle.

Resize and align smaller circle with bigger one

I could of course have calculated the exact value of the smaller circle so both are perfectly aligned, but since I didn't, we need to resize it a little bit from the top anchor point. Select the smaller circle, select Scale tool and click in the top anchor point of the circle. Hold down the Shift key and start dragging until the smaller circle touches the bigger one. This is a bit of precision work, so make sure to zoom in if necessary.

Cut and remove path segments

Now we need to remove a big path segment of the bigger circle. To do this select the Scissors tool and click to make a cut in the path where both circles align. To be be sure you don't cut the smaller circle instead, lock the smaller circle first: Object > Lock > Selection or simply hit Cmd/Ctrl + 2.

Draw path segment and close object

Select the Pen tool and click in the anchor point at the top of the shape to continue the path you've just cut, next click on a spot towards the right of the vertical guide. It's important that this point is to the right of this guide. Next, to click in the bottom anchor point to close the shape.

Copy Reflect object

With the new object still selected, select the Reflect tool from the toolbox, hold down the Alt/Option key and click somewhere on the vertical guide to use it as a vertical axis. In the window that appears, choose Vertical Axis and hit Copy.

Unite 3 objects

Unlock the smaller circle by hitting Cmd/Ctrl + Alt/Option + 2. Now select both objects you've just created, plus the smaller circle and choose the Unite option from the Pathfinder palette. All paths should be united and this should be one object.

Copy Rotate at 120°

Almost there now! With the new object still selected, select the Rotate tool from the tool box, old down the Option/Alt key and click precisely in the center point where vertical and horizontal guides cross each other. In the window that appears, enter the value of 120°, check Preview to see what will happen and hit Copy.

Transform Again

To finalize hit the shortcut to (Edit > Transform >)Transform Again, namely Cmd/Ctrl + D. There you have it!

A little treat

You can download the final design of the wallpaper here:

Comments

  1. 1 Dragan Simonovic 14 Sep 2011

    This is fabulous tutorial!

    Thanks Veerle!

  2. 2 Nana Yaw 16 Sep 2011

    Thanks i have always learn alot from you.

  3. 3 els 17 Sep 2011

    Another excellent inspiring tutorial. Thank you for taking the time to do this. Very generous of you.
    The iPad wallpapers are perfect. Such attention to detail. They look equally good horizontally or vertically.

  4. 4 Alessandro Marengo 18 Sep 2011

    Great, Veerle! Another amazing & useful post! Plus, you mentioned one of our best cyclist in Italy, il Cipo!

    ps: what about the wallpaper finishing? Could you please add the final tutorial part? :)

The Deck

Ads via The Deck