---
title: "Garment editor mockup | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/designers-manual/mockups/ps-mockups/editor-mockups/garment/"
---

# Garment editor mockup

> A tutorial explaining how to create a Customer's Canvas mockup for Design Editor to personalize a T-shirt.

In this tutorial, you will learn how to create 1500x1500 mockup images for a T-shirt that will be displayed in the Design Editor. We are going to get everything we need to configure an editor with a mockup:
- Down mockup JPEG image visualizing a T-shirt.
- Up mockup PNG image used to clip elements that go outside of the design area.
- Design location coordinates.

## Prerequisites

This tutorial assumes that you have Adobe Photoshop.

Although not required, you may want to read the [how to create editor mockups](https://customerscanvas.com/docs/hub/designers-manual/mockups/ps-mockups/editor-mockups/how-to-create-editor-mockups.md) article for a better understanding of the process.

## Step 1. Prepare a product image file

The first thing we need to do is prepare a good product image. The design area should be flat and occupy a decent space to make it look good in the editor. We will go with the following image.

![Cards with different trim styles and texture.](images/tshirt-image.png)

[Click to download a full-size image](pathname:///files/dark-red-tee.png)

Create a new file in Photoshop. Our target pixel size is 1500x1500, so use the following parameters:

- **Width** to `1500` pixels
- **Height** to `1500` pixels
- **Color mode** to `RGB color`
- **Background contents** to `Transparent`

Don't change the resolution at this point; we will adjust it later.

Once you set these parameters, just drag an image from the file explorer to the new file, adjust the size, and then press `Enter`.

## Step 2. Calculate the physical size

To continue, you need to know the exact specifications of the print area and have an idea of how the artwork is located on the product. If you don't know exactly, consult your printing provider. For example, let's assume that your artwork will be 11x11 inches.

We need to draw a rectangle of the same aspect ratio on the mockup. In our case, it will be a square. Put it exactly where you think the artwork is located and resize it accordingly.

![Print area ratio.](images/print-area-ratio.png)

Now you need to measure the length of the design area and find its proportion to the full mockup. In our case, the design area width is 500px, which means that the full mockup is three times larger than the print area. It means that the full mockup's physical size should be 11*3 inch = 33 inches. The resolution of the mockup file should be 1500 / 33 = 45.454545 DPI.

Let's set this physical size.

1. Open **Image** > **Image Size...** menu or press `Ctrl+Alt+I`.
2. Clear the **Resample** checkbox.
3. Make sure that the necessary units are selected near the **Width** and **Height** boxes, in our case, **Inches**.
4. Enter 33 in **Width**.

The **Height** and **Resolution** will be automatically recalculated. The **Resolution** will equal the 45.454545 figure we have calculated above.

## Step 3. Remember the design location

The design location is just the top-left corner of a design area. Customer's Canvas expects this value in points. Here are the instuctions on how you can determine them:

1. Select a rectangle depicting the design area.
2. Click **Edit** > **Free Transform** or press `Ctrl+T` to enter the transform mode.
3. On the toolbar, right-click **X** box and choose **Points**. Write down the value.
4. Do the same for **Y**.

![Getting coordinates from the toolbar.](images/tee-location-toolbar.png)

Alternatively, you can open the **Info** window (**Window** > **Info** or press `F8`), hover over the top-left corner of the design area, and write down **X** and **Y**. If the current units are not points, click **Edit** > **Preferences** > **Units & Rulers** > **Type** and ensure that the **Rulers** dropdown is **Points**.

![Getting coordinates from the Info window.](images/tee-location.png)

:::warning
Make these calculations after you have specified a final image size (see Step 2).
:::

## Step 4. Save the down mockup

Hide the rectangle representing the design area. To do this, choose this layer and click the eye icon in the **Layers** list or use the `Ctrl+`, hotkey.

Click **File** > **Save As** or `Ctrl+Shift+S` and select JPEG as the file type. Choose a file location and configure the JPEG properties as you like. The recommended JPEG quality is 8.

Your down mockup file is ready.

[Click to download the mockup](pathname:///files/tee-mockup-down.jpg)

## Step 5. Save the up mockup

Our goal is to make the portion of an image that corresponds to the design area transparent. Here is the quickest way to do it:

1. Hold the `Ctrl` key and click the design area rectangle in the **Layers** panel. It will create a selection of the same size as this layer. Note, there is no need to make the layer visible for this step.
2. Select the mockup image layer. Make sure that the selection is still there.
3. Press `Del`.

It will delete the selected part of the design and make it transparent.

Now let's save our up mockup as a PNG file. It is important to use PNG to keep transparency.

Click **File** > **Save As** or `Ctrl+Shift+S` and select PNG as the file type. Choose a file location and configure the PNG properties as you like.

Your up mockup file is ready.

[Click to download the mockup](pathname:///files/tee-mockup-up.png)

## Result

After you configure the mockups in Customer's Canvas, the editor will look like this:

![T-shirt mockups in Design Editor.](images/tee-in-editor.png)

:::note
The editor configuration depends on how you use Customer's Canvas and is the subject of separate articles.
:::

:::tip
The process described above works for most product types, however, some certain products have their nuances. Let's see how to prepare mockups for [cards with different trim styles](https://customerscanvas.com/docs/hub/designers-manual/mockups/ps-mockups/editor-mockups/trim-styles.md).
:::