Department of Creative Arts
St. Pius X High School

This is what your drawing should look like after completing the above steps.

Tutorial 1 - Coffee Shop Logo 1

What you will learn in this tutorial

- standard tools and properties
- drawing shapes
-fills using bezier
- importing clip art
- text on a curve

- saving and exporting

 

Create Curved Lines for the Background

This is what your drawing should look like after completing the above steps.

  1. Click File menu New.
  2. In File Page Properties set your page size to A4, portrait
  3. In Layer Rename the layer to Outline
  4. In the toolbox select the pencil tool.
  5. In the Pencil Tool properties bar set


  6. In the Fill and Stroke Menu set

  7. On the drawing page, drag the Pencil tool to draw a slightly curved vertical line.
  8. Click Edit Duplicate three times to create three more lines. The lines will be on top of each other.
  9. Use the Selection tool to move the objects.

 

This is what your drawing should look like after completing the above steps.

Arrange the Lines of the Background

  1. Select one of the duplicate lines using the Select tool .
  2. In property bar use the rotate and mirror buttons to change the lines to form the shape shown above.
  3. You can also rotate in Object menu > Transform > Rotate

 

This is what your drawing should look like after completing the above steps.

Create the Top of the Background

  1. Using the Pencil tool draw a line with a loop.

 

This is what your drawing should look like after completing the above steps.

Adding Colour using the Bezier Tool

Create the Bezier shape for the background fill

  1. Open the Bezier tool .
  2. Click along the black lines of the curve of the top. You must make a complete shape with the last node on top of the first node. If you line is snapping hold down the CTRL key to stop it.

Add Colour to the Top

3. With the Bezier shape still selected, set the fill colour to Olive Drab using RGB values

4. To move the fill behind the outline Object menu > Lower

 

 

This is what your drawing should look like after completing the above steps.

Add the Shapes and the First Colour

  1. Click the Bezier tool Lets you draw curves using a connect-the-dots style of drawing. and make sure you are still on the Fills layer
  2. Click the top-left corner of the background to begin the shape.
  3. Click the center of the top line.
  4. Click the center of the body.
  5. Click the center of the left line.
  6. Click the first node you created with the Bezier tool to complete the shape.
  7. On the Fill menu set the colour using RGB
  8. Repeat the steps on the lower-right side of the background to create the second olive square.
  9. To move the fill behind the outline Object menu > Lower

 

This is what your drawing should look like after completing the above steps.

Add the Shapes and the Second colour

  1. Click the Bezier tool Lets you draw curves using a connect-the-dots style of drawing. and make sure you are still on the Fills layer
  2. Click the top-right corner of the background to begin the shape.
  3. Click the center of the top line.
  4. Click the center of the body.
  5. Click the center of the right line.
  6. Click the first node you created with the Bezier tool to complete the shape.
  7. On the Fill menu set the colour using RGB.
  8. Set the colour to Deep Yellow using RGB colours 255, 204, 0
  9. Repeat the preceding steps on the lower-left side to create the second deep yellow square.

 

Create the Diamond Shape

  1. Using the Rectangle tool Lets you draw rectangles and squares., drag to create a square on a blank area of the drawing. To draw a perfect square, hold CTRL as you draw it.
  2. Fill the Square Ruby Red using RGB values 153,0.0
  3. Duplicate the Square using CTRL D
  4. Using the arrows resize the new square.
  5. Fill the Square with RGB values 229,255,229
  6. Set a black outline on both squares in the Stroke Panel

 

 

This is what your drawing should look like after completing the above steps.

Rotate the Squares to Create Diamonds

  1. Using the Select tool draw a box around both squares and from the Object menu Group them together.
  2. Click twice on the grouped squares to get the rotation arrows and rotate.
  3. To move the diamond above the outline Object menu > Raise

 

Add the Coffee Cup Clipart

This is what your drawing should look like after completing the above steps.

To add the coffee cup to the logo, you will import the coffee cup file

First save the following to your N: drive > Tutorial 1

Coffee Cup

To import the coffee cup

  1. Click File menu Import.
  2. Locate the cup.png file that you saved
  3. Drag to center the coffee cup graphic on top of the diamond shape. If the graphic is too large or too small, resize the coffee cup graphic by dragging one of the selection handles.

 

Adding Depth

This is what your drawing should look like after completing the above steps.

A drop shadow gives the illusion that the coffee cup is floating above the rest of the logo, giving the image more depth.

Adding a drop shadow

  1. Select the Coffee Cup
  2. Open Filters Shadows and Glows Drop Shadow
  3. Adjust the shadow to make it look the way you want.

 

 

Add the banner

This is what your drawing should look like after completing the above steps.

First save the following to your N: drive > Tutorial 1

Banner

  1. Click File menu Import.
  2. Choose the filename banner.png.
  3. Drag to place the banner graphic below the coffee cup graphic.

 

 

 

 

Add Text to the Logo

This is what your drawing should look like after completing the above steps.

To make the text follow the curve of the banner, you can use the Bezier tool to create a curved path within the banner and then use the Text tool to add text to the path.

To create a curved path

  1. Open the Bezier tool .
  2. Click the end of the small line at the left of the banner, a black square will appear. Do Not let go of the mouse.
  3. Move to the small line on the left of the banner, click and drag to form a curve. Right click to end the bezier curve

To add text to the path

  1. Type the Text using the Text tool
  2. Set the Font and size in Text menu Text and Fonts. Note: Modify size to match your banner
  3. Select the text using the select tool, hold the shift key and select the bezier curve you just drew.
  4. From the Text menu Put on Path.
  5. From the Object menu Ungroup to separate the line and the text.
  6. Change the stroke paint of the line so that it is not visible.

 

Save 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

To save in svg format

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

To save in website format

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

  3. Click Export

 

Upload the coffeelogo1.svg to your Unit 1 > Coffee1 > SVG Folder

Upload the coffeelogo1.png to your Unit 1 > Coffee1 folder

Save and upload the original coffeelogo1 to your Unit 1 > Coffee1 folder

Insert the Unit 1 > Coffee1 > SVG Folder on your website

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