> ## Documentation Index
> Fetch the complete documentation index at: https://pitchprint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to create templates using SVG shapes

> Draw and save a phone case shape as an SVG, then upload it to a new design and lock it as a clickable image mask.

From this article you will learn how to create a design template using an SVG shape.

\[Lets use a cellphone case as example.]

**Part 1: Creating the SVG**

<Steps>
  <Step title="Design the shape on the phone cover">
    You will need to design the shape on the phone cover, as seen below:

    <Frame>
      <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/59e46df0042863379ddcb128/file-IKT7d1nVl6.png" alt="Cellphone case outline with the artwork shape drawn on the cover" />
    </Frame>
  </Step>

  <Step title="Save the design as an SVG">
    Now you can save this design as an SVG - ( [How to save your SVGs for use in PitchPrint](/docs/tutorial/how-to-save-your-svgs-for-use-in-pitchprint))
  </Step>
</Steps>

**Part 2: Creating the design template on PitchPrint**

<Steps>
  <Step title="Start a new design">
    Select/create a category for your design and then click on **New Design**:

    <Frame>
      <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/6527b69e25f843047502428e/file-UnzRRh3J4S.png" alt="Design category in the admin with the New Design button" />
    </Frame>
  </Step>

  <Step title="Name the design and submit">
    Next you will have to give the design a name and then click **SUBMIT**:

    <Frame>
      <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/6527b6cc25f843047502428f/file-O4vqLTSS6l.png" alt="New design dialog with the design name filled in and the SUBMIT button" />
    </Frame>
  </Step>

  <Step title="Set up your canvas">
    Now you need to set up your canvas:

    <Frame>
      <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/6527b7011ec9493542047a90/file-tiKj2adwy7.png" alt="Canvas setup panel in the editor" />
    </Frame>
  </Step>

  <Step title="Upload the SVG and add it to the canvas">
    Now you can upload your SVG onto PitchPrint, Once its upload you can just click on it and it will appear on your canvas:

    <Frame>
      <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/6527b73c74982009a94e6fb6/file-fLrTWNZ7Nb.png" alt="Uploaded SVG shape placed on the design canvas" />
    </Frame>

    NOTE: By selecting the SVG on the canvas you can check the sizing and setting in the sidebar.
  </Step>

  <Step title="Enable Transform Lock and Clickable Image Mask">
    The last two things you will need to do: is to put Transform Lock on (so that the client can't move the shape) and to put Clickable Image Mask on (Now your client can insert their design into the shape)

    <Frame>
      <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/6527b7de74982009a94e6fb7/file-8TqbysGROw.png" alt="Item sidebar with Transform Lock and Clickable Image Mask switched on" />
    </Frame>
  </Step>
</Steps>

## Related articles

<CardGroup cols={2}>
  <Card title="Creating Designs Using SVGs" icon="bezier-curve" href="/docs/tutorial/creating-designs-using-svgs">
    Get started with using SVG files to build designs in PitchPrint.
  </Card>

  <Card title="How to save your SVGs for use in PitchPrint" icon="floppy-disk" href="/docs/tutorial/how-to-save-your-svgs-for-use-in-pitchprint">
    Export and save PitchPrint-optimized SVG files from Adobe Illustrator.
  </Card>

  <Card title="How to create an SVG for use as a Mask" icon="vector-square" href="/docs/tutorial/how-to-create-an-svg-for-use-as-mask">
    Prepare a single-path SVG that can be used as a photo mask.
  </Card>

  <Card title="How to create a clickable mask" icon="mask" href="/docs/tutorial/how-to-create-a-clickable-mask">
    Turn a shape into an image placeholder customers can click to insert images.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.