Copy

right

© G

MAR

K Lt

d. 2

011

1

Creating a Scalable Vector Graphic for a Geometric Icon

www.gmark.co

20M

AY20

11

Title Learning Objectives Acknowledgements Using this Tutorial Ribbon Customization| | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

What Are We Going To Learn• How to create an amazing looking icon that is

scalable without loss of resolution• How to use several key PowerPoint tools:– Ribbon customization– Shape alignment– Shape size control with Shift / Ctrl / Alt keys– Shape combining– Shape point editing– Shape fills, gradient fills and semi-transparent fills

• At the end, we’ll introduce the Circlify add-in

Title Learning Objectives Acknowledgements Using this Tutorial Ribbon Customization| | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Acknowledgements• Icon Source

– The icon we are going to use is the one created by Harvey Rayner in 2006 for the SVG (Scalable Vector Format)• http://www.pattern.co/svg_logo

– Thank you to Harvey for supporting this tutorial.– The icon is copyright W3C so the content of this tutorial may not be

copied without prior permission from W3C

• Slide Show Navigation– The navigation at the top of the slides in this tutorial has been created

with the ActivePrez addin for PowerPoint:• http://www.gmark.co/ActivePrez

Title Learning Objectives Acknowledgements Using this Tutorial Ribbon Customization| | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Understanding the Tutorial• There are 3 steps we will follow:

– Customise the PowerPoint UI– Draw the icon geometry– Colour the resulting icon shapes

• In each step, the parts are colour coded as follows:

Red the part being worked onGreen part already added and that will be part of the final shape #1Blue part already added and that will be part of the final shape #2Grey part of the geometry relating to positioning which is not part of

the final shape set

• Alignment points between shapes are indicated with one or more of the following icons:

Title Learning Objectives Acknowledgements Using this Tutorial Ribbon Customization| | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Before Starting• It’s a good idea to have to tools that you use often,

available at a single click.• You can do this by customizing the ribbon*.• Highlighted are the tools we will use the most:

*in PowerPoint 2010, click File / Options / Customize Ribbon

Align Object Center

Align Objects Middle

Combine Shapes

Title Learning Objectives Acknowledgements Using this Tutorial Ribbon Customization| | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

The Icon to be Created

Next Back

Vision - Think about the icon you want to create and sketch something on paper before startingHere is the completed original artwork for the SVG logo

Source Icon Geometric DNA|

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Geometric DNA of the Icon

Next Back

Geometric DNA – Work out how to build the icon using shapes and guide linesHere is original geometric DNA of the SVG icon. We will use the next 19 slides to recreate this in PowerPoint.

Source Icon Geometric DNA|

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

STEP 1 – Create custom guide linesTo do this:(a) Draw the vertical line by holding the Shift key before the first point is clicked and then click the second point(b) Do the same for the horizontal line(c) Do the same for the two diagonal lines, making sure that you use the Shift key to snap the line to 45 degrees(d) Click Ctrl-A to select all the lines on the slide(e) Check the Align to Slide and Align Selected Objects checkboxes(f) Click the Align Objects Center and Align Objects Middle buttons

Next Back

HideHelp

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 2 - Draw a squareTo do this:(a) Click Insert / Shapes / Rectangle(b) Click where one of the corners is to start(c) While holding the Shift key, drag to the approximate size showDon’t worry if the square is not exactly the size above of if it is not exactly centred on the slideas we’ll deal with that later.

HideHelp

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

STEP 3 - Copy the square at 45 degreesTo do this:(a) Select the first square (shown in green here)(b) Press Ctrl+D to create a duplicate(c) While holding the Shift key, drag the green rotate handle to rotate the shape by 45 degrees(d) Click Ctrl-A to select all the shapes on the slide(e) Check the Align to Slide and Align Selected Objects checkboxes(f) Click the Align Objects Center and Align Objects Middle buttons

Next Back

HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 4 – Copy the 45 degree square and enlarge itTo do this:(a) Select the 45 degree square(b) Press Ctrl+D to create a duplicate(c) This part requires lots of fingers! While holding the Shift and Ctrl and Alt keys (Shift to maintain aspect ratio, CTRL to

enlarge equally around the center point, ALT to give fine control), drag one of the corners so that the sides just touch the corners of the first square

(d) Click Ctrl-A to select all the shapes on the slide(e) Check the Align to Slide and Align Selected Objects checkboxes(f) Click the Align Objects Center and Align Objects Middle buttons HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 5 – Draw a circle tangential to the outer squareTo do this:(a) Select to Circle shape tool(b) Hold down the Shift and Ctrl keys(c) Click in the center of the screen and drag the circle to intersect with the outer square

HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

(a) (b) (c) (d)

Next Back

STEP 6 – Create a new circle with cross hairsTo do this:(a) On a separate slide, draw a perfect circle (size does not matter)(b) Connect a line between the left and right points of the circle(c) Connect a line between the top and bottom points of the circle(d) Group the circle and lines

HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 7 – Size and position the circle with crosshairsTo do this:(a) Copy/Paste the circle from your previous slide(b) Position the circle so that its center sits exactly on the corner of the inner 45 degree square(c) While holding the Shift, Ctrl and Alt keys, resize the circle so that it intersects with the 5 points shown

HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 8 – Create and position 7 copies of the circle with crosshairsTo do this:(a) Click the circle you just positioned and press Ctrl+D seven times to create the copies(b) Position each of the 7 copies as shown, making sure the intersects are as per the first one

HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 9 – Draw a circle in the center of the illustrationTo do this:(a) Select to Circle shape tool(b) Hold down the Shift and Ctrl keys(c) Click in the center of the screen and drag the circle to intersect with the 8 outer circles(d) Delete the 2 crosshairs from each of the 8 outer circles

HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 10 – Create a guide circle to define the diameter of the 8 inner circlesTo do this:(a) Copy/Paste one of the outer 8 circles without changing its size(b) Position the circle to intersect the 2 inner squares as shown

HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 11 – Create 2 guide lines to assist with the definition of the diameter of the 8 inner circlesTo do this:(a) Create a vertical line(b) Create a 45 degree line(c) Position the lines so that they intersect the inner large circle as shown and are equidistant from

the top and top-right outer circles as shownHelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 12 – Create the first of 8 inner circlesTo do this:(a) Select to Circle shape tool(b) Hold down the Shift and Ctrl keys(c) Click in the center of one of the 8 outer circles, where the corner of one of the 2 inner squares

intersects with one of the guide lines(d) Drag the circle to intersect with the newly placed guide line as shown HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 13 – Create and position 7 copies of the inner circleTo do this:(a) Create 7 copies of the first inner circle just created using the Ctrl-D method(b) Position each one so that the center intersects with the corner of one of the inner squares and guide lines

HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 14 – Create the first of 4 rectangles to join the 8 inner circlesTo do this:(a) Use the rectangle shape tool to create a roughly sized rectangle(b) Rotate the rectangle by 45 degrees as shown(c) Select the rectangle(d) Check the Align to Slide checkbox(e) Click the Align Objects Center and Align Objects Middle buttons(f) While holding the Ctrl key, resize the length and width until the ends intersect as shown HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

Step 15 – Create the other 3 rectanglesTo do this:(a) Use the Ctrl-D method to create 3 copies(b) Rotate each one so that there is one vertical, one horizontal and one rotated by 90 degrees compared to the original one

(hold the Shift key when rotating to snap to steps of 15 degrees)(c) Select the 3 rectangles(d) Check the Align to Slide and Align Selected Objects checkboxes(e) Click the Align Objects Center and Align Objects Middle buttons HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

We now have the completed geometry and now need to combine sets of shapesHelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 16 – Delete unnecessary guidesTo do this:(a) Delete everything that is not blue or green from the previous slide except the central

horizontal and vertical guidesHelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 17 – Combine the inner shapesTo do this:(a) Select all of the blue shapes; 8 inner circles and 4 long rectangles(b) Click the Combine Shapes tool in the custom ribbon(c) Select Shape Union from the list of 4 options

HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 18 – Combine the outer shapesTo do this:(a) Select all of the green shapes; 8 outer circles and outer square(b) Click the Combine Shapes tool in the custom ribbon(c) Select Shape Union from the list of 4 options

HelpHide

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 15a 16 17 18| | | | | | | | | | | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 19 – Color the outer shapeTo do this:(a) Fill the outer shape with solid black(b) Set the outline to None

HelpHide

19 20|

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 20 – Color the inner shapeTo do this:(a) Fill the inner shape with solid white(b) Set the outline to None

HelpHide

19 20|

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 21 – Copy/Paste the outer shape to a new slideHelpHide

21 22 22b 23 24 25 25b 26 27 27b| | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

A B C D E

FG

Next Back

STEP 22 – Create a Freeform ShapeTo do this:(a) Select the Freeform tool from the Insert / Shapes group(b) Click on point A : this is a rough point so accuracy is not essential but it should be on the horizontal center line(c) Click on point B : this must be on the horizontal center line and on the edge of the black shape(d) Click on point C : this must be on the intersection of the horizontal and vertical center lines(e) Click on point D : this must be on the horizontal center line and on the edge of the black shape(f) Click on point E : this is a rough point so accuracy is not essential but it should be on the horizontal center line(g) Click on Point F : this is a rough point so accuracy is not essential but it must be below the bottom of the black shape(h) Click on Point G : this is a rough point so accuracy is not essential but it must be below the bottom of the black shape(i) Move the mouse close to Point A and then double click to complete the shape

HelpHide

21 22 22b 23 24 25 25b 26 27 27b| | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

Your shape should now look like thisHelpHide

21 22 22b 23 24 25 25b 26 27 27b| | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 23 – Draw new guide lines to be used to edit the freeform shapeTo do this:(a) Use the Line tool to draw the 4 lines as shown(b) Use the Alt key to finely adjust the position of the end points of the lines

HelpHide

21 22 22b 23 24 25 25b 26 27 27b| | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

12

3

B C DNext Back

STEP 24 – Create a curve in the freeform shapeTo do this:(a) Right click on the freeform shape(b) Select Edit Points to show the 7 points A to G(c) Click on the central point C, right click on this point and select Smooth Point(d) Move the left adjustment handle of point C (the small white marker at the end of a blue line) to position 2(e) Click on point B(f) Move the right adjustment handle of point B to position 1(g) Click on point D(h) Move the right adjustment handle of point D to position 3 HelpHide

21 22 22b 23 24 25 25b 26 27 27b| | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 25 – Delete all guide lines and subtract shapesTo do this:(a) Select all 6 of the guide lines and delete them(b) Select the black shape first and while holding the Shift key, select the red freeform shape(c) Click the Combine Shapes tool in the custom ribbon(d) Select Shape Subtract from the list of 4 options

HelpHide

21 22 22b 23 24 25 25b 26 27 27b| | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

You now have a single shape with a double curved base as shownHelpHide

21 22 22b 23 24 25 25b 26 27 27b| | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 26 – Copy the new shape to the existing inner and outer shapesTo do this:(a) Copy/paste the shape to the slide in step 28(b) Make sure it is perfectly aligned by selection the black outer shape and the new freeform shape

and clicking Align Objects Top and Align Objects CenterHelpHide

21 22 22b 23 24 25 25b 26 27 27b| | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 27 – Fill the new freeform shape with a translucent gradientTo do this:(a) Select the shape(b) From the ribbon, click Shape Fill from the Drawing group(c) Click Gradient followed by More Gradients(d) In the Fill section, set the following parameters:- Fill = Gradient Fill- Type = Linear- Angle = 135- Gradient stop 1 = color: white, position: 0% brightness: 0, transparency: 100%- Gradient stop 2 = color: white, position: 64% brightness: 0, transparency: 78%- Gradient stop 3 = color: white, position: 100% brightness: 0, transparency: 58%(f) Click OK(g) Set the outline to none HelpHide

21 22 22b 23 24 25 25b 26 27 27b| | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

You should now have a completed central element to the iconHelpHide

21 22 22b 23 24 25 25b 26 27 27b| | | | | | | | |

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 28 – Create the background and group the iconTo do this:(a) Draw a square around the shape(b) Fill the square with a colour of your choice (we used RGB 227,136,1)(c) Create a gradient fill with the following parameters:- Fill = Gradient Fill- Type = Radial, From Center- Angle = 135- Gradient stop 1 = color: yellow, position: 0% brightness: 0, transparency: 0%- Gradient stop 2 = color: light orange, position: 30% brightness: 0, transparency: 0%- Gradient stop 3 = color: dark orange, position: 100% brightness: 0, transparency: 0%(d) Click Ctrl-A to select all the shapes on the slide(e) Right click on the objects and select Group / Group(f) Optional: Set the names of the 4 shapes as shown in the screen capture to the right HelpHide

28

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Next Back

STEP 29 - Resize the icon as required – without loss of resolution!HelpHide

29 : Resize 30 : Recolor|

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

Back

STEP 30 – Use your creativity to recolor shapes to creative derivativesHelpHide

Next

29 : Resize 30 : Recolor|

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu

1. Circlify Guide 360.8317, Include: No Shape Source: Oval, Shape Size: 79.30032, Number: 8, Rotate: No

2. PowerPoint create a rectangle width=10.74”, height=1.93” and center on the slide and select it

3. Circlify Guide any value, Include: No Shape Source: Slide Selection, Number: 8, Rotate: Center

4. PowerPoint Use the Combine Tool to Union the 8 circle shapes and 8 rectangles

5. Circlify Guide 360.8317, Include: Yes Shape Source: Oval, Shape Size: 149.5298, Number: 8, Rotate: No

6. PowerPoint Use the Combine Tool to Union the 8 circles and guide and send the resulting shape to the back

Download a Free trial of Circlify now!

Back

Or, you could use the Circlify add-in to create the shape in 6 easy steps

Introduction The SVG Icon Creating Geometric DNA Color the Shapes Creating Reflection Creating Background Variations Circlify| | | | | | |Menu