---
title: "Shapes | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/designers-manual/template-editor/how-to-create-designs/shapes/"
---

# Shapes

> *Shapes* represent design elements like rectangles, ellipses, or more complex figures.

When creating a printed file, shapes are saved as vector elements, which means that they will always be printed in high quality. It is also easy to set the color and stroke for shapes, including in the end-user editor.

In the Template Editor, you will deal with three types of shapes: rectangles, ellipses, and complex shapes based on SVG files. We will learn how to work with all of them below.

## Creating rectangles and ellipses

You can use the toolbox to create a rectangular or circular shape.

![Rectangle](images/shapes/shape.png)

You can also press `R` to create a rectangle or `E` to create an ellipse.

When you have activated a shape tool, click the left mouse button, stretch the necessary frame, and release the button. A rectangle or ellipse will appear in place of the frame. By default, they will be gray, and the stroke will be enabled.

![Shapes](images/shapes/rectangle-ellipse.png)

## Adding a complex shape from SVG

If you need a more complex shape than a simple rectangle or ellipse, you need to create a single-color SVG file, if possible, consisting of a single path.

You can download it from the Internet (the license for this file must allow you to use it in your designs), or use an editor like Adobe Illustrator, CorelDraw, or Inkscape.

:::note
When saving SVG files in Illustrator, uncheck **Preserve Illustrator editing capabilities**, otherwise, Customer's Canvas will not be able to recognize this file.
:::

To add such an SVG to the design, either drag and drop it in the editor, or use the **Image tool** (or press the `M` key). You can either select an image from asset storage or upload one from your computer.

![Image tool](images/shapes/image-tool.png)

## Editing shape properties

As for other types of elements, the shape properties are edited in the properties panel on the **Design** tab.

See how you can work with the following properties:

- [Fill and Border](https://customerscanvas.com/docs/hub/designers-manual/template-editor/how-to-create-designs/fill-and-border.md)
- [Blending Options](https://customerscanvas.com/docs/hub/designers-manual/template-editor/how-to-create-designs/blending-options.md)
- [Text Wrapping](https://customerscanvas.com/docs/hub/designers-manual/template-editor/how-to-create-designs/text-wrapping.md)
- [Overprint](https://customerscanvas.com/docs/hub/designers-manual/template-editor/how-to-create-designs/overprint.md)

Below we will discuss how to perform several common tasks.

### Adding a shape outline

You may want to add a shape as an outline instead of a filled figure. It's quite easy to do.

![Shape filled black](images/shapes/color.png)

1. Upload the SVG file.
2. In the **Fill** section, choose **No Color** as the color.
3. In the **Border** section, set a width other than `0` (for example, `1pt`). If necessary, adjust  the stroke.

![Shape outline](images/shapes/shape-outline.png)

### Adding die-lines

If you make non-rectangular product designs, one of your likely tasks is to introduce die-lines to the design.

Usually, it is a certain shape, painted with a special spot color. Suppose it is called *CUT*. For simplicity, let's assume that our line is a circle (for a more complex shape, you will need to upload it as an SVG).

1. Create a circle and place it where you want.

2. Turn it into the outline as described above.

3. Edit the stroke color. On the **Spot** tab, create a spot color with the name *CUT*. For details, see the [Color Picker](https://customerscanvas.com/docs/hub/designers-manual/template-editor/how-to-create-designs/color-picker.md) section.

   ![Spot color](images/shapes/spot-color.png)

4. If necessary, configure the [Overprint](https://customerscanvas.com/docs/hub/designers-manual/template-editor/how-to-create-designs/overprint.md).

   ![Overprint](images/shapes/overprint.png)

5. If necessary, make the die-lines visible only on the print file. For more details, see [Visibility](https://customerscanvas.com/docs/hub/designers-manual/template-editor/setup-behavior/visibility.md).

### Turning a shape into a placeholder

Sometimes, we need to create a non-rectangular placeholder for photos. One of the simplest ways to do this is to convert the shape into a [Placeholder](https://customerscanvas.com/docs/hub/designers-manual/template-editor/how-to-create-designs/image-placeholders.md). For example, if you want to make a circular placeholder:

![Placeholder](images/shapes/placeholder.gif)

1. Create a circle and place it where you want.
2. Go to the **Behavior** > **Placeholder** tab. Switch the shape to a placeholder.
3. Now we have a placeholder, which, if needed, can be configured as described in the [Image Placeholder](https://customerscanvas.com/docs/hub/designers-manual/template-editor/how-to-create-designs/image-placeholders.md) section.

:::tip
You cab now go further and learn [How to Create Different Types of Barcodes](https://customerscanvas.com/docs/hub/designers-manual/template-editor/how-to-create-designs/barcodes.md).
:::