Hello! Today it is time to learn new logo design techniques from our Olympic logo series. We’ll be creating a modern and technological piece of design – logo of winter Olympic games in Torino of 2006. According to my research, this logo is one of the favourite logos among designers all over the world due to its simplicity yet freshness and uniqueness. Let’s see how it is done in illustrator.
Getting Started
1. Fire up Adobe Illustrator (as always, I use CS3 version) and create a new document 1000×1000 px RGB mode. Turn on Smart Guides (Ctrl+U). Choose a Rectangle tool (M), click on the artboard and draw a rectangle 550×770 px. Make it blue fill with no stroke.
Drawing Circles
2. Now, create a circle 100×100 px, make it default colors – white fill and black stroke. Position it’s center on the corner of blue rectangle (Smart guides will indicate intersection of points). Now go to Effects>Distort & Transform>Transform. Change Horizontal move field to 110 px, enter 5 copies and click OK. You’ll get a row of 6 circles.
3. With the original circle selected, again go to Effects>Distort & Transform>Transform. Click Apply new effect button, change horizontal move to 0 px, while changing Vertical move to 110 px. Enter 7 copies and apply. You’ll have now 6×8 circles exactly matching blue rectangle.
4. Select original circle and go to Object>Expand Appearance. Now you’ll have group of separate circles. Select rectangle and circles, change stroke to none. Now, open Pathfinder panel (Shift+Ctrl+F9) and press Subtract button to subtract circles from rectangle, press Expand. You’ll have a compound shape like on the image below – it’s the base of our logo.
5. We need to crop the shape properly now. To do it, draw a figure with Pen tool (P) that will cut our main shape. Make anchor points in the center of circle holes, the exact form of this shape is drawn on the image below – it’s easier to follow visually than explain it.
Cropping it
6. When the top shape is ready, send it below main blue figure (Ctrl+[), go to Pathfinder panel and hold Alt and press Intersect button. Voila! We are almost ready with it. You’ll have something similar to this:
Transforming the Shape
7. We are now left with a basic shape, but our objective is to distort it. I’ve tried many methods, but the most effective appears to be Free Distort effect. Select the shape and go to Effects>Distort & Transform>Free Distort. Here you’ll see a bounding box that can be distorted by moving 4 corner points. Transform it similar to the image below and apply the effect.
8. I was not completely happy with the shape. If you too want to make it more perfect, select it and choose Free Transform tool (E). We need to move upper-left corner down and a bit to the right, while moving lower corners outwards. To do it, press a mouse button at the needed corner, and press Ctrl. The cursor will turn into an arrow and you’ll be able to move corners separately. Adjust the shape to have something like this:
Polishing the Shape
9. When your shape is ready, expand it (Object>Expand Appearance) and ungroup it (Shift+Ctrl+G). I also changed a fill color to lighter blue. Now, if you want the shape to be even more like original logo, you can make sharp corners. Select every pair of points that originally were two separate circles (see the image below) with White arrow (A) and bring them together with Object>Path>Average (Ctrl+Alt+J). Make this for every 24 pair of points if you want the shape to look perfect.
Drawing the Olympic Rings
10. Okay, now you can finalize the logo with a set of Olympic rings. (theclickreader) I’ve promised you once to show how to create correct overlapping rings – we’ll do it today. First, create a circle 120×120 px, make it blue 12 pt stroke and no fill. Now, rotate the ring with Move tool by 45 degrees holding down Shift (or you can do it with Rotate tool), so that anchor points on the circle form a “X” shape rather than “+” shape. Finally, grab Scissors tool (C) and cut the circle in every point.
11. Select the ring (that consists of 4 separate shapes) and while Move tool is selected, click Enter. In Horizontal field enter 140 px and press copy. Now press Ctrl+D to transform again. Now select two of three rings (the leftmost ones), again press Enter and enter 70 px in Horizontal field and -70 px in Vertical field, click Copy. If you did everything right, you’ll have a set of 5 Olympic rings. Change their stroke color to blue, yellow, black, green, and red.
12. Now, all you have to do is to select the appropriate ring sections and arrange them bringing either to front (Shift+Ctrl+]) or to back (Shift+Ctrl+[). Refer to the image below. Of course, you might think it was too much to cut them in every point, but this way it’s easy to arrange parts. There are other ways to overlap rings, and you can share your favourite method in the comments. When you are ready with the rings, group them together.
13. Position the rings below the blue shape. Now, all we have to do is add text. Original logo had some nice modern font, so if you have anything similar to it you can use it. I took Bolster Bold typeface. Type Torino 2006 with black text (T) and position it between blue shape and rings. Here it is! The logo is ready.
Conclusion.
Today we recreated a brilliant Olymplic emblem – logo of Torino 2006 Olymppic games. This work is amazingly clean, modern, and very original. Although it seemed little tricky, we managed to complete it with Adobe Illustrator effects, pathfinder panel, and fantasy. Stay tuned for new tutorials!
To download the source file for this tutorial, you will need to login as a member.
Sign up today to access all exclusive members content!
Thanks, i got some tips about ring section bringing either to front.
Good, only that little “t” of Torino
Thanks buddy for your nice tuto. 🙂
Dear Berg,Thanks a lot for your tuto.
I’m very pleased to uncover this great site. I want to to thank you for your time for this fantastic read!! I definitely enjoyed every part of it and I have you saved to fav to check out new information on your blog.
I really like your blog.. very nice colors & theme.
Did you create this website yourself or did you hire someone to do it for you?
Plz reply as I’m looking to design my own blog and would like to find out where u got this from. thank you