Department of Creative Arts
St. Pius X High School

Tutorial # 2 - Coffee Logo 2

If you forget how to do some of the steps see Tutorial 1

What you will learn in this tutorial

- polygon tool
- rounding shapes
-fills using bezier
- importing clip art
- text on a curve

- saving and exporting




Create Triangles for the Background

1. Use the Polygon Tool and set the number of corners to 3.

2. Draw a triangle.

3. Set the RGB colour to 255, 204, 0

4. Duplicate the triangle and make it slightly smaller to fit inside the first triangle.

5. Set the RGB colour to 153,153,51

6. Set the Stroke Pen to black

7. Select both triangles and Group them together.

8. Duplicate the group 3 times.

9. Arrange the triangles as shown below



Create the Circles

1. In the toolbox, click the Ellipse tool.

2. Hold down the CTRL key and drag to create a perfect circle.

3. Set the colour to 255, 249, 116 and the Stroke Pen to Black

4.. Duplicate the circle 5 times.

5. Drag the circles to the positions shown above





Creating the Rounded Diamond Shape


To create the outer square


     1. Using the Rectangle tool , drag to create a square on a blank area of the drawing. The square should be smaller than the background, but big enough to cover the middle of the background.


If you want an exact square, you can hold down Ctrl as you draw it.

2   Click the top right node and drag it to curve the corner


3. Fill the square with Orange 255, 102, 0

4. Duplicate the square and drag one of the corner selection handles until the square is slightly smaller than the original square.



5. Colour the smaller square using the RGB values 229,255,229

6. Change the thickness of the stroke pen to make it look like the image below



7. Group the squares together


8. Rotate the Squares


9.Drag the resulting diamond shape on top of the background.


If the diamond shape is too large or too small, resize the diamond by dragging one of the corner selection handles







Add the Coffee Cup and Drop Shadow

See Tutorial 1 if you have forgotton how to do this




Drawing the Banner

This time you are going to draw your own banner using the ellipse tool. 

Draw the rough shape using the ellipse tool, in the Path menu Object to Path

Use the Edit Path by nodes tool to shape the banner

Note: If you need more nodes you can add them using the add node button in the property bar

Adding Text to the Banner

Use a Bezier curve to add text to the Banner (See Tutorial 1)




Saving your Work

Now that you have finished creating the logo, you can save the file for future use. We will save the file in two formats

Save your Coffee Logo in .svg Format

  1. Click File menu Save as
  2. From the Save in list box, choose the N: drive and your Unit 1 Folder
  3. In the Filename box, type coffeelogo2
  4. Click Save.

Save your Coffee Logo in .png Format

  1. Click File menu Export png
  2. In the menu box,choose export as/ Browse to your N:Drive and type coffeelogo2
  3. Click Export

Save the Sample Coffee Logo

Right click on the original coffee logo image and save it to your N:Drive > Unit 1 > Tutorial 2


Putting your Work on your Website

In Google Drive:

Upload your coffeelogo.svg to your Google Drive in Unit 1 > Tutorial 2 Folder

Upload your coffeelogo2.png to your Google Drive in Unit 1 > Tutorial 2 Folder

Upload my original coffee logo to your Google Drive in Unit 1 > Tutorial 2 Folder

On your Website:

Insert the Unit 1 > Tutorial 2Folder on your website using Insert > Drive > Folder

Using a table post the Original Logo and your coffeelogo1.png side by side on the Tutorial 2 page of your Unit 1 Section and label them.