2. Create a small rectangle about 20 x 25 px, rotate it to about 30 degrees and position it over the top-left corner of the shield. Now, choose a Reflect Tool (O) and Alt-click at the middle of shield, choose Vertical axis and click Copy. The rectangle duplicate will appear on the top-right shield corner (if you missed, you can move it to place with arrow keys). Now, select all 3 shapes, open Pathfinder panel and press Unite button, then click Expand to create one single shape. Fill it with white and make stroke black 3 px width. Now duplicate this layer by dragging to New button in Layers panel. Lock the first original layer and name it OUTLINE.

3. Name the second new layer we just copied SEA, select the shield and go to Object > Path > Offset Path, enter -12 px for offset and apply. The new smaller shape will appear. Now select the original shield on this layer and delete it, and hide the smaller shield for now (Command + 3). We will need this shape later on this layer as a mask, but for now we want it hidden. Also, you may want to turn off the grids (Shift + Command + “).

4. On the SEA layer, create a rectangle (M) 450 x 100 px on the top part of shield on the background layer. Make it 2 pt black stroke and change it’s fill to pattern: navigate to Window > Swatch libraries > Patterns > Basic Graphic > Lines, and choose “10 lpi 30%” pattern. Don’t close this pattern library yet.

5. Create another rectangle (M) exactly under the first one, this time make it 450 x 200 px. Apply 2 pt black stroke to it, and choose a pattern fill from Basic Graphics Lines library – this time “10 lpi 20%”. Now, grab the Rotate Tool (R), click Enter, and check Pattern box and uncheck Object box. Insert 90 for angle and apply. This way we will be able to rotate the pattern and keep the object itself intact.

6. Now, take a Line Tool () and draw a line at the bottom of underlying shield, it should be more then 400 px long and black 2 pt stroke. Now, go to Effects > Distort & Transform > Transform, and apply the settings shown in the image below. Enter vertical move 10 px, and enter 13 for number of copies. If the result looks like the image below, you can expand the effect: go to Object > Expand Appearance, then twice press Command + Shift + G to ungroup, and finally group the lines back (Command + G).

7. With the group of lines selected, choose a Warp Tool (Shift +R). You need to deform the lines so that they look like waves – use any tool from this deformation group to achieve the result. You can change the tool settings by pressing enter and altering options. Also you can try changing the tool size by Alt-dragging it (to constrain proportions, Shift + Alt + drag). Now, you can lock both rectangles and group of lines in the layers’ panel for convenience.

8. The next step is to draw the clouds. You need one larger cloud on the right and smaller one on the left. To make them, create several circles from 10 to 100 px diameter with Ellipse Tool (L) that cover one another, then press Unite in Pathfinder panel (Shift + Command + F9) to combine them in one shape, press Expand. Do the same for second cloud, then fill both clouds with white and apply black 2 pt stroke.

9. To add more details to the clouds, create a circle (L) about 30 x 30 px with no fill and 2 pt black stroke, then take Scissors Tool (C) and cut it in three anchor points to have one-half and 2 quarters of circle. Then place these parts on the clouds to emphasize detail, transforming and duplicating them, to achieve results similar to image below. Finally, group left and right clouds with associated details to get 2 groups.

10. The last thing to do on this layer is masking. Remember the offset shield we created before? Unhide it (Alt + Command + 3), select it and bring it to front (Shift + Command + ]) so that it is on top of all object on this layer. Now, in the Layers panel, choose the SEA layer (it should become blue), go to panel flyout menu ofand select Make Clipping Mask command. Now the entire layer with many objects will be only visible where the mask (the offset shield) is. To make a black border around it, simply apply black 2 pt stroke to the topmost Clipping Path shape. You can lock this layer now.

11. Create new layer and name it BOAT. Now, we’ll make a boat similar to that from original emblem. For this, create two curved lines with Pen Tool (P) or Pencil Tool (N), as on the image below. Make them no fill and black 8 pt stroke. Now in the Appearance panel for every line add second stroke, change it to white color 4 pt width. Finally, in the Stroke panel choose Round cap for both lines.

12. Select both new lines, and go to Object > Blend > Blend options, choose Specified steps for spacing and 15 for number. Now, press Alt + Command + B to make blend. You’ll have a nice blended lines. Now, to create the boat shape, draw an open path over a blend that resembles boat. Select the shape and blend and press Command + 7 to create clipping mask. To make boat rorders, choose a Clipping path we just made in the Layers panel (on top of Clipping group) and assign it to 2 pt black stroke. Lock the boat group.

13. Now, when the main boat is ready, grab a Line Tool () and create a set of ropes and rope ladder. Make them 3 pt black stroke, and group them. Now, select the Pen Tool (P) draw 2 sails with white fill and black 2 pt stroke. Group them too.

14. To complete the boat, let’s define the bow and stern. Create two rectangles (M) on the left and right boat ends, add lines () as shown on the image below and group the shapes. To create a bottle, create a small rounded rectangle and even smaller simple rectangle, align them vertically and unite in Pathfinder panel. Place the bottle on the right of the boat.

15. The last objects left are the paddles. Use the Pen Tool (P) to draw a paddle. As usual, make it white fill and 2 pt black stroke. Now, Option+Shift+drag the paddle to the side to duplicate it keeping the baseline. Repeat the duplication, press Command + D three times to get 5 evenly spaced paddles. Group all paddles. The only problem here is that the bottom part of paddles should be hidden under one of sea waves. So go back to the SEA layer and copy the wave you need from appropriate group, then paste it on BOAT layer over the paddles group. Then continue the wave line with Pen Tool (P) to cover the paddles, and make a clipping mask of it (Command + 7). You can lock the BOAT layer now.

16. Create a new layer and name it DETAILS. Now with Line Tool () create a 3 pt black line going from the middle of shield around 40 px long. Then select the Pen Tool (P) and add a shape on the image below with white fill and 2 pt black stroke. Now, with the Rectangle Tool (M) create a rectangle about 60 x 35 px. Add two smaller rectangles on top and subtract them from the first one to get a crown shape. Move bottom anchor points closer with Direct Selection (A) to get a perfect shape.

17.We have the last detail left on this layer. Create a simple ornament as shown on the image below – you can use Pen Tool (P) for it or, like I did, create ellipses and modify them using Direct Selection (A) tool. You’ll need 5 elements for the ornament – top, bottom, left, right, and center. Left and right elements are actually the same object, but mirrored with Reflect Tool (O). When it’s ready, group it and place on the top-left part of emblem. Then Alt+Shift+drag it to the right to copy it and constrain the baseline. You can lock this layer now.

18.Create a new layer and name it TEXT. Now we need to type the proper phrases here. First one is “L’E OLYMPIADE PARIS 1924″ – I used 64 pt black Castellar font to imitate the fontface of 1920-s. Make sure it is in upper case (Type – Change case – UPPERCASE). I also reduced the first “e” letter in article and lifted it’s baseline, similar to original. Put this phrase on the upper part of emblem. The second phrase is “COMITE OLYMPIQUE FRANCAIS”, also in uppercase, black 32 pt Bookman Old Style fontface. Place this phrase below the first one. You may want to choose different fonts if you want, however.

19. Congratulations – the logo is completed! Today we completed an interesting task – using almost no effects and applying only 2 monochrome colors to recreate an emblem that is more than 85 years old! It is not very difficult with the help of Adobe Illustrator tools and commands but this unique emblem of Paris 1924 Olympic Games made me think that in every period of time there was a place for creativity, fantasy, and good design.

[The article is for Basic Members only. Login or sign up now to read the whole article.]
[The article is for Premium Members only. Login or sign up now to read the whole article.]

Related posts:

1. Olympic Logo Tutorial #2: Lillehammer 1994
2. Olympic Logo Tutorial #5: Los Angeles – 1984
3. Olympic Logo Tutorial #4: Mexico-68

Getting Started

1. Open Adobe Illustrator (I always use CS3 version, but you can use any other) and create a document 1000 x 800 px, RGB mode. Turn on Smart guides (Command + U) – they will be very helpful today. Now you can turn on Grid (Command + ‘) like I did – in this case adjust it’s size to 40 px with 10 subdivisions in Edit > Preferences > Guides & Grid. Now let’s start creating major objects. We’ll begin with constructing the main shapes and composition, and then we’ll dress them in custom patterns. The main element is star, so let’s make it.

Grab a Star Tool and drag a star holding down Shift to put it on the baseline, and Alt to make it proportional – this is important, as this is the exact shape we need. Leave it’s appearance basic – white fill and black stroke. Now, here is another important step – resizing the star precisely. Open Transform panel (Shift + F8) and, with star selected, press a small chain on the right. Now in height field (H) enter 408 px, and the size will be changed proportional – this is the exact height we need.

2. Now Alt-drag the star to the side to make a copy. We’ll get back to the copy later, it will be the backup. Select the original star, grap the Pen Tool (P) and delete the bottom-left endpoint of it – the pen should get minus sign, turning to Delete Points Tool (or you can take this tool from the start). The star will be 4-ended now, without one end. Change it’s fill color to red and stroke to none, and again, Alt-drag it to the right to make a copy – you’ll have one white backup star and two red 4-ended stars.

3. Select one of the 4-ended red stars, change it’s fill to lighter red shade so that you don’t get confused between them. Now, again we need to duplicate it in order to make a larger shape. This time we’ll need a precise positioning, so select the lighter red shape, press Enter with Selection Tool (V) chosen, and insert 100 px for horizontal move, and 0 px for vertical move, now click Copy. The new shape must appear on the right, exactly 100 px from original. We’ll combine them in next step.

4. We need to unite these two shapes, zoom in and make sure the Smart Guides are turned on (Command + U). Our purpose is to join 2 stars in top and bottom points, so we’ll create additional shapes to cover gaps between star ends and then unite. Take a Pen Tool (P) and put first point exactly on top point of one shape (smart guides will indicate “anchor” intersection), then put second one on the second top point, then put third and fourth points in the middle of stars and close the shape. Now do the same with bottom points, creating a shape with Pen tool joining them exactly. Now you’ll have 4 shapes – select them, open Pathfinder panel (Shift + Command + F9) and Alt-click Add button to unite and expand. (I changed the color of shapes to gray in the screenshot, so that you see them).

5. Now, when you have this strange united shape, select it and while choosing Selection Tool (V) click Enter. Here, insert 100 px for horizontal move and 0 px for vertical move, click Copy. We’ll get another shape on the right position. Now change the fill of left one to even lighter red. We change the fill color only to distinct the shapes, we’ll later change it. Finally, take the first 4-ended dark red star and move it to our 2 shapes, you’ll also need to bring it to front (Command + Shift + ]). Aligning the right and top points (with help of smart guides) to get image similar to this.

6. Go back to the star we made in the first step – the white one. Bring it to front (Command + Shift + ]) and Alt-drag it to the red set of shapes in order to make another copy. Align it with the middle red star. We just created the first set of stars that will later be a right part of logo – the red and white shapes. I suggest that you lock all three red shapes and one white star in the Layers panel (or select them and press Command + 2). We’ll work with the remained white star copy – change it’s fill color to blue and stroke to none. Note that I always copy stars in order not to create them again from scratch, but if you forgot to backup the star – simply create it again referring to Step 1.

7. Now. we need to do the same operations with blue star that we made with red one – duplicate it, unite, make copies and align. So, we already have the first blue star, to make the first united shape we need to duplicate it and work with copy, so Alt-drag it somewhere to the side, while keeping the original blue star as a backup. Change the fill color of star copy to lighter shade of blue, now with Selection Tool chosen (V) click Enter and insert 100 px for horizontal move and 0 px for vertical move, press Copy button – you’ll have the second star for our future united shape.

8. Again, just like with the blue stars, we’ll have to combine these two stars with help of additional shapes and pathfinder panel. Only this time we’ll need to join three pairs of points instead of two. Take a Pen Tool (P) and draw three shapes that cover gaps between star ends, be careful – the points must lie exactly on the stars endpoints (again, smart guides will help you). You can draw one single shape that unites all needed points – I made them grey for demonstration, but yours should be the same pink fill color. When you are ready, select all shapes and unite them in Pathfinder panel (Alt-click Add button).

9. Select the resulted shape and again, move it 100 px right with copy like we did before to get the second shape positioned properly. Now you can change the fill color of original left shape to lighter shade. Now, take the original blue star we backup before and bring it to front (Command + Shift + ]), now move it to the other blue shapes. Align it precisely with right and top points – smart guides will help as always. Or you can use Align panel of Illustrator.

10. Now, we have all elements for our composition. Unhide other shapes either clicking lock in Layers panel, or pressing Alt + Command + 2. Now we need to move the first set of 3 red + 1 white shapes to the center of document, and take the set of blue stars and position them so that the rightmost blue star lies exactly on the leftmost blue one. This way we form the main composition of stars. The last we need to do is delete black stroke in middle white star, and finally select the entire group of stars and move them to the top border of your cropping area – again, smart guides will indicate when top points touch top border. This step is needed for proper tiling of pattern fill that we are about to create.

11. I strongly recommend you to turn on grids (Command + ‘) and adjust it’s size to 40 px with 10 subdivisions in Preferences, so that the smallest grid is 4 x 4 px – the exact size we need. Now, turn Snap to grid option on (View > Snap to grid, or Command > Shift > “) – this will make our task much easier. It’s time to create our patterns – take a Rectangle Tool (M) and create a small rectangle exactly 32 px height and 20 px wide. In relation to grid, your rectangle will equal 5 x 8 divisions. Make this rectangle blue fill and no stroke. Now copy it and paste in front (Command + C and Command + F), change it’s fill to white, and reduce it’s height to 24 px – it’s easy with snap option, simply drag the top border 2 grids down.

12. We’ll make 6 patterns now – 3 blue and 3 red ones. Now alt-drag the rectangles we just made to the side, then reduce the height of top white rectangle to 16 px (minus 2 grids), now again repeat the duplication, and this time reduce top white rectangle height to 8 px (minus 2 more grids). You’ll get three pairs of rectangles – select them all and Alt-drag below to make a copy. Now change the blue rectangles of duplicated group and change their fill color to red. You can drag every pair of rectangles separately to Swatches panel now to save patterns.

13. Now, once we have our patterns ready, and star shapes positioned on top border of our cropping area, we can change the fills of shapes. From left to right, apply blue pattern to blue stars (from thinnest blue pattern on lighter left star, to widest blue pattern on darker red star ). White star will remain white, so move to applying red pattern fills to red stars the same way. When the patterns are applied, select all shapes and group them. Now, press Command + K, and in the general preferences window check “Transform pattern tiles”, so that when we move the stars, patterns move as well. Now just move the group to the center of canvas. Note: If you notice the thin line between pattern tiles when the pattern is applied as a fill, it doesn’t mean you created it incorrectly. It is because of Illustrator anti-aliasing function (you can switch it off in general preferences). Don’t worry, these lines won’t be visible while printing or saving as jpeg.

14. Finally, the stars are completed, we can lock this layer and rename it STARS. Now create new layer and draw a circle (L) 120 x 120 px, make it no fill and blue 10 pt stroke. Now rotate it by 45 degrees and cut it in every point with Scissors Tool (C). Now move this ring 140 px to the right with copy, and again to get 3 equal rings. Lastly, select two left rings of three and move them with copy 70 px horizontally and -70 px horizontally to get a set of 5 Olympic rings.

15. Now change the stroke of all rings except of leftmost to yellow, black, green, and red. Keep in mind that circles are not solid – we cut them in four parts each, so you’ll have to select every path separately. When colors are changed, here comes the tricky part – we’ll make overlapping rings. We’ve made it already in previous tutorials – just arrange the separate parts of rings forward or backward to create overlapping effect. When you have something like the image below – group the rings. Also, you can turn grid off now (Command + ‘).

16. The work is almost ready, we only need to add a text “Games of the XXIIIrd Olympiad Los Angeles 1984″. With Text Tool (T) type this phrase between the stars composition and Olympic rings. Choose black sans-serif italic font – I used 40 pt Myriad Pro Semibold Italic. The emblem is ready!

Conclusion

Today we made an elegant and memorizing Olympic emblem – Los Angeles 1984. This is a modern logo with strong american spirit embodied in blue, white, and red colors and shape of stars. We recreated this emblem precisely with help of custom patterns, exact positioning, and pathfinder panel. Stay tuned for next tutorial of Olympic logo series.

[The article is for Basic Members only. Login or sign up now to read the whole article.]
[The article is for Premium Members only. Login or sign up now to read the whole article.]

Related posts:

1. Olympic Logo Tutorial #2: Lillehammer 1994
2. Olympic Logo Tutorial #6: Paris – 1924
3. Olympic Logo Tutorial #3: Torino 2006

Getting Started

1. Open Adobe Illustrator (I use CS3 version) and create new document 1000×500 px. Make it RGB color mode and turn on grid (Ctrl+’) and snap to grid (Ctrl+Shift+’). Adjust your grid by going to Edit>Preferences>Guides and Grid, make the grid 40 px with 10 subdivisions. Finally, create a rectangle 800×200 px in the middle of artboard, position it to touch the larger grid borders and convert it to guides (Ctrl+5). Lock it – this will make the borders of our type. I would also recommend you to turn smart guides on (Ctrl+U).

Creating the Custom Typeface

2. We will start making the custom font now. In order to exactly recreate the logo, we must enter correct values for every shape. Besides, for some shapes we should consider the stroke width of future letters – it will be 40 px. Anyway, all the calculations are already made, so let’s start with the font.

Grab the Rounded rectangle tool and hit Enter, for width enter 64 px, for height enter 212 px, and make radius 32 px. With Direct Selection (A) select the bottom point and delete it. Now align the shape with rectangle guides as showed below. Now Alt+Shift+drag the shape to copy it placing exactly beside the first one.

3. For the next letter “E” we will use rounded rectangle again. But this time we enter different values, as the shape is different: for width enter 80 px, for height – 160 px, and radius set at 40px. Select the shape you just created and make a copy of it (we’ll use it for some other letters) – simply Alt-drag it away. Now, select the original rounded rectangle and position it 16 px to the right of “M” – it is equal 4 small grid subdivisions. Now select it’s right segment with White Arrow (A) and delete it. Finally, create a horizontal line in the middle of it to complete “E” letter.

4. Let’s move on to the next letter “X”. Take a Line tool () and create a diagonal line that overlaps the borders of our guide rectangle. Now take a Reflect tool (O), click Enter and choose Vertical option, press copy. Now you have two crossing lines that will make a letter “X”. Try to position it like in the image below.

Applying Multiple Strokes

5. I think now it’s time to check if we are making everything correctly. Make sure your shapes have no fill and black stroke. Select any shape you have for now (I choose the small horizontal line in a letter “E”) and make is’s stroke width 40 pt. Now go to Appearance panel (Shift+F6) and select “Add new stroke” in the flyout menu. Make the new stroke white and 24 pt wide. Duplicate the new stroke, make it black and 8 pt wide (img. 5-A). This way we recreate the future font. Now, with the shape selected, go to Graphic Styles panel (Shift+F5) and press New button to create new graphic style. All you have to do now is select all letters and apply new style to them(img. 5-B).

6. We have applied multiple strokes and now it’s a good time to adjust the positioning of the letters. Make sure the letters are within the rectangle guide we created in the first step, and that M and E overlap correctly – outer black stripe of one element must overlap middle black stripe of another one. Also, select the X letter and send it to back (Shift+Ctrl+[) to see the border between E and X. Move it so that the middle black stripe of E flows into the outer black stripe of X. They don't have to intersect exactly, but we'll correct it later.

7. Let's continue making the font - create a vertical line with Line tool () to make an I letter. Apply the graphic style we just made to it, and again, position it correctly, so that outer stripes of X and I overlap.

8. Now, take the rounded rectangle we copied when creating E (80px wide, 160 px high, 40px radius) and put it after I letter. Duplicate it and move it to the right. For the first one, select it's right segment with Direct selection (A) and delete it to make C letter. Again, apply the graphic style we made and adjust the positioning like on the picture below - make sure they overlap correctly.

9. We have completed the letters, so let's move on to create the numbers "68". Take the "C" letter and Alt-drag to duplicate it, now grab the Ellipse tool (L) and create a circle 80x80 pixels. Position it so that it forms "6" number with copy of C letter. To make "8" just take two copies of the same circle and align then vertically. Again, apply the graphic style and position all objects to correctly overlap each other.

10. Okay, so the custom font is ready, but if you look carefully you'll notice that the way stripes overlap is far from original, as every stripe has to flow from one letter to another. It is impossible to produce with multiple strokes. We'll need a different approach. Select all the shapes and go to Appearance panel. Delete the two top strokes, so we are left with single black 40 pt stroke. Group all letters and numbers.

11. Now select the group and make a copy (Ctrl+C and Ctrl+F), and change the stroke width of this group to white color 24 pt width. Repeat these steps to make the third group. This time make the stroke black 8 pt width. This way the emblem looks much better with correct stripes' position. The main shape is ready now!

12. You may notice that X is too tall. We will correct it now. Create a rectangle that will crop our letters above all the groups, it must have 200 px height with no fill. Look at the rectangle guide we made in the first step (you hide the guide and grid now). Lock the groups for now so that you won't accidentally select it. Now, go to the flyout menu of Layers panel and choose Create clipping mask option - the rectangle will turn to mask.

Creating Olympic Rings

13. All we need now is the set of Olympic rings. To make them, create a circle 80x80 px with no fill and 8px yellow stroke. Position it over the middle stripe of "6" number, copy it and place it over "8" number and change the stroke to green. Place 3 more rings over these two so that they overlap, make their stroke blue, gray, and red. Now group all the rings. Voila - the logo is complete!

Conclusion

We have completed one of the most outstanding Olympic emblems, Mexico-1968, which involved creating custom type and clever usage of strokes. I think the designers of this logo did wonderful job. This method can be applied to any text and the results will be look nice - as such technique is really timeless.

[The article is for Basic Members only. Login or sign up now to read the whole article.]
[The article is for Premium Members only. Login or sign up now to read the whole article.]

Related posts:

1. Olympic Logo Tutorial #3: Torino 2006
2. Olympic Logo Tutorial #6: Paris – 1924
3. Olympic Logo Tutorial #5: Los Angeles – 1984

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. I've promised you once to show how to create correct overlapping rings - we'll do it today. First, create a circle 120x120 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!

[The article is for Basic Members only. Login or sign up now to read the whole article.]
[The article is for Premium Members only. Login or sign up now to read the whole article.]

Related posts:

1. Olympic Logo Tutorial #2: Lillehammer 1994
2. Olympic Logo Tutorial #4: Mexico-68
3. Olympic Logo Tutorial #5: Los Angeles – 1984

Christmas is coming soon! In this premium tutorial, we’ll create a frosty Christmas window for this holiday season and try different backgrounds for it – starting from simple gradient, to vector landscape, to any winter photos. We’ll be using various effects, two types of brushes, pathfinder and transparency panels, and even one mesh object to create this wonderful holiday scene. You will also learn how to create realistic paper snowflakes from scratch!



Difficulty: Basic-Intermediate tutorial
Requirements: Illustrator 10, CS, CS2, CS3 and CS4

What will you get?

• Instant download of PDF e-book
  
• Detailed step by step tutorial
  
• Learn the techniques to create glass textures
  
• Learn to create realistic paper snowflakes
  
• Comes with Ai file for easy reference
  

Preview Screenshots

[The article is for Premium Members only. Login or sign up now to read the whole article.]

Related posts:

1. Premium Tutorial: Popcorn In Glass Bowl
2. Premium Tutorial: Vector Wine Glass
3. Premium Tutorial: Pirate Ship

Creating the Background

1. Open Illustrator (I use CS3 version) and create a new document 500 px wide and 800 px high. Make it RGB color mode. Now, create a rectangle 500×600 px – it will be our background. Fill it with blue color (I chose to use light blue). Lock this layer and name it “BG”. Create new layer named “Shape”.

Creating a Curve

2. On the newly created layer grab a Pen tool (P) and create a curve like in the screenshot below. Make it no fill and whatever stroke. Turn off the BG layer visibility off for now. Your curve has to consist of 4 corner points – in the beginning, in the end, and two points in every extrema – it is very important!

Cutting the Curve

3. Now take a Scissors tool (C) and cut the curve in two points so that you end up with 3 separate open paths. Don’t move the parts, they need to remain together.

Duplicating It

4. Select the entire curve consisting of 3 separate paths and move it to the right holding down both Shift and Alt keys. This will make a copy and align it with original curve. Now, select the upper-right point of duplicate with Direct selection (A) and move it a bit to the right so that the shape is little wider in this area.

Joining Open Points

5. Probably most of you have guessed that we need to end up with 3 closed shapes. To do it we have to join every pair of curves. First, select the upper-right pair of endpoints with Direct Selection Tool (A) and press Ctrl+J to join them, choose “corner” for the join settings. Do the same now for the bottom-left pair of points – see the image for reference. You’ll have them joined with straight horizontal lines.

Creating 3 Closed Paths

6. We still need to close other pairs of points. To do it easily, I recommend you to select the right figure and hit Ctrl+J – the shape will be closed. Do the same with the left one.

Just select the pair of points you want to be joined and hit Ctrl+J, and do the same with the second pair. Now, you have 3 separate closed paths – I offset them a bit just to show the idea.

Organizing the Shapes

7. Now, make sure you did everything properly – try to fill all three shapes with different fill colors. They have to be separate closed paths. Now, you have to send the left part to back (Shift+Ctrl+D) and the right one to front (Shift+Ctrl+]) to have something similar to image below.

Making Patterns

8. The shape has to be filled with two patterns, so let’s create them. Just draw a small rectangle, fill it with white (change the stroke to none!). Now, copy and paste in front (Ctrl+C and Ctrl+F) and reduce the height of copy to about one-third of original. Fill it with blue color you used for background. Select both rectangles and drag it to the swatches panel.

9. Now, change the fill of bigger rectangle to blue and the smaller one to white, and drag it to swatches panel. Don’t forget to choose the blue color that is used for background.

Applying Patterns

10. Now select every shape and apply the appropriate pattern fill for each of them. Change the stroke to none. Use the image below for reference.

Positioning the Shape

11. Okay, the shape is almost ready. Select all three parts and group them (Ctrl+G), and rotate it to get something similar to the image below. To make sure the patterns are transformed along with object, go to the flyout menu of Transform panel and check “transform all” option. Once I positioned the shape, I thought the pattern is too small – in this case select the Scale tool (S), hit Enter and check “pattern” while unckecking “object”. I decided to scale the pattern up to 200%. Unhide the bottom layer to see the background.

Drawing the Ice

12. Once you’re satisfied with shape, lock the layer and create a new one named “Snow”. To create the icy surface, take a Pen tool (P) and draw the irregular shape with diagonal upper part. Make it little wider than blue rectangle, and fill it with white with no stroke.

Applying Effect

13. With shape selected, go to Effects>Distort & Transform – Roughen, and enter 3 for effect and 10 for details. Check corner points and click OK. You’ll have the result as in the image below.

Creating a Symbol

14. To make the snow, it’s better to create a symbol. Create a small white circle and drag it to Symbols panel. Check “graphic” option in symbol settings. You can delete the circle now.

Spraying Symbols

15. Now, grab a Symbol sprayer tool (Shift+S) and spray white circles along the border of icy surface. I’d recommend you also resize and move some symbols if you want with appropriate tools of “Symbolism” group (to make symbols smaller, press Alt while applying Symbol Sizer).

Making Snow

16. To turn circles into snow, select the group of symbols and apply Roughen effect again, this time with 20 for effect and 20 for details. Choose corner points, of course. You can adjust settings to your liking, however.

Creating Olympic Rings

17. Now you can lock the Snow layer and create a new one. All you have to do now is draw 5 Olympic rings (100×100 px each) and position them properly. Change their fill color to none and stroke color to blue, yellow, black, green, and red. We won’t exactly repeat the overlapping rings. But if you wonder how to recreate the overlapping effect, I will tell you in following tutorials of the Olympic series.

Adding Text

18. To finalize the composition, add a text Lillehammer ’94″ with serif black font. That is the final effect.

Conclusion

Today we recreated a nice piece of design – the Lillehammer’94 Olympic emblem. With help of patterns, effects, and some patience it was rather simple and fun. We’ll continue observing the best Olympic logos of all times in the next tutorial.

[The article is for Basic Members only. Login or sign up now to read the whole article.]
[The article is for Premium Members only. Login or sign up now to read the whole article.]

Related posts:

1. Olympic Logo Tutorial #5: Los Angeles – 1984
2. Olympic Logo Tutorial #3: Torino 2006
3. Olympic Logo Tutorial #6: Paris – 1924

Today, we’ll start the series with a unique op-art emblem of Munich 1972, one of the favourite designers’ logos of all times. This optical illusion is rather hard to create, but we’ll learn how to do it properly. Let’s get started!

Getting started

1. Let’s open Adobe Illustrator (I use CS3 version) and create new document 1000×1000 px any color mode. We will use precise calculations, so turn the grid on (Ctrl+’) and snap to grid option (Shift+Ctrl+’). Now go to Edit>Preferences>Guides and grid, and set your grid to 50px with subdivisions to 10. Customizing a grid this way will make your work more comfortable. Also, turn smart guides on (Ctrl+U). Now, create an ellipse (L) 600×600 px in the center of your document and turn it to a guide (Ctrl+5) – it is used for reference only. You can lock this layer now and create a new one.

Drawing a small segment

2. You can switch off snap to grid option now (Shift+Ctrl+’). We’ll create a segment of 12 degrees now and position it properly. On the new layer create a line () that goes horizontally from the leftmost point of circle almost to its center (or you can press Enter and write 270px for length and 0 for angle). The line does not have to touch the circle center! See the 2-A image for reference.

Make sure smart guides are on so that you see points and intersections of every object, in particular the center of circle – it’s important. Now grab Rotate tool (R) and Alt-click right point of line, enter “-6″ degrees and press OK. Again, with rotate tool active Alt-click line’s right point and enter “12″ degrees, now press Copy. See the image 2-B for reference.

Select two touching anchor points of lines with white arrow (A) and press Ctrl+J to join them (choose corner option). Finally, select the two opposite anchor points and press Ctrl+J again to close the path, fill it with black. Look at the 2-C image – that’s what you’ll have for now.

Creating a group of segments

3. Select the segment you created and again grab Rotate tool (R). Now, you have to Alt-click on the center point of circle guide below. We’ll rotate the segment to have a group, but it’s important what angle you enter. If you look at the logo carefully, you’ll see that the angle is a bit irregular, so the segments overlap. Therefore, in the rotation settings window enter 20.7 degrees and click copy. Now you have to press Ctrl+D 15 times so that you end up with 17 segments. Finally, group them (also you can name the group “1″).

Duplicating groups

4. With a group selected again take Rotate tool. Now you can simply click Enter and write “-8.1″ for angle and press Copy. I know these numbers may sound crazy, but believe me – these are the precise angles you have to enter to exactly reproduce the logo. Now press Ctrl+D to transform again. You’ll have 3 groups of segments now, it’s better to organize them properly – name the copies “2″ and “3″. I also suggest that you change the fill for now for convinience – we can change it back to black later. That’s what you’ll have for now.

Creating a spiral

5. The segments we made will be partially masked to create the effect we need – so it’s time to make a mask shape. First of all, I think it’s better to hide segment groups for a while. Take a Spiral tool that is hidden under Line tool. Click inside a circle and enter following values: radius = 290 px, decay = 84%, segments = 8, style = second option (counter-clockwise). Now you have to position the spiral as in the image below – you can scale and rotate it if needed.

Understanding the Shape

6. At this point you’ll have to make sure the spiral is positioned properly. Take a line tool () and create a line that connects two open points of a spiral. Smart guides will indicate intersections, make sure it snaps to the exact point. This way the spiral will be virtually divided into 2 parts. Now unhide the second group of segments and make sure they are overlapped by the outer part of spiral. For the third group, it has to be overlapped by the inner part of spiral. You can rotate, scale or move the spiral to achieve it. If everything is ok, duplicate the spiral shape and hide it for now.

Dividing the spiral

7. While the copy of spiral is hidden, select the original spiral and the line you created in the previous step (make sure it touches open spiral ends). Now got to Pathfinder panel and click Divide (first bottom icon) and ungroup (Shift+Ctrl+G). You will end up with two separate shapes – I filled them with different colors for now. You can see the order of objects in the image.

Applying first mask

8. OK, let’s synchronize the elements in our file: bottom locked layer with circle guide, current layer with 3 groups of segments, hidden spiral, and newly created 2 separate parts of spiral. Unhide the 3rd group of segments, select it together with the inner part of spiral (the yellow one), make sure group is below the shape and press Ctrl+7. This will make clipping group with mask created from the shape. I named the group “inner segments”.

Applying second mask

9. Now just repeat the same – unhide the second group of segments and select it together with the outer shape (blue one), and press Ctrl+7 to make clipping group. I named this group “middle segments”.

Applying the last mask

10. Unhide the first group of segments – you’ll see that it also needs to be masked. That’s when the hidden spiral copy will help – unhide it and fill with 100% black with no stroke. Now select both the segments group and the spiral copy (spiral has to be above!) and go to Opacity panel. Here go to the flyout menu and choose “Make opacity mask”, also uncheck crop option. Now the group will be masked – the spiral appears as a masking object.

Adjusting the color

11. If you did everything properly, you’ll end up with perfect shape where the distance between segments is equal. Now just fill all three groups of segments with the same color – in the layers panel open every clipping group an select the group of segments (make sure you don’t select the clipping path) to change its fill color to black.

Conclusion

12. Now, with Type tool (T) write “Munich 1972″ with sans-serif 100pt font – and the logo is ready! This outstanding Olympic emblem was not easy to create, but we used exact measurements and precise calculations as well as some creativity to reproduce this well-known optical illusion. We’ll continue the series of best Olympic Logos very soon – stay tuned!

(This logo is owned by International Olympic Committe. Logo is reproduced for educational puposes only.)

[The article is for Basic Members only. Login or sign up now to read the whole article.]
[The article is for Premium Members only. Login or sign up now to read the whole article.]

Related posts:

1. Olympic Logo Tutorial #4: Mexico-68
2. Olympic Logo Tutorial #3: Torino 2006
3. Olympic Logo Tutorial #6: Paris – 1924