--- title: "Garment preview mockup | Customer's Canvas Hub" canonical: "https://customerscanvas.com/docs/hub/designers-manual/mockups/ps-mockups/preview-mockups/garment/" --- # Garment preview mockup > A video and text tutorial for creating Customer's Canvas preview mockups in Photoshop on an example of a T-shirt. In this tutorial, you will learn how to create preview mockups for a garment in Adobe Photoshop. As a result, you will get a PSD mockup file with a single design area. It will also include several alternative T-shirt layers that can be switched using the Dynamic Image module (requires additional programming). ## Video tutorial The following video summarizes this article. Feel free to watch it in addition to reading the text below. ## Prerequisites A preview mockup should be created with Adobe Photoshop. Customer's Canvas is tested with Photoshop 2021 (version 22) and older. The oldest supported version is Photoshop CS6. You also need the product images. They may be the images prepared by a vendor or you may take your own photos. The images of a product in different colors should have the same size and T-shirts and their print areas should be located at the same coordinates. For this tutorial, you may download the [source images](pathname:///files/t-shirt-images.zip). ## Step 1. Prepare a design placeholder image Before we start working on a mockup image, let's prepare an image that we will use as the foundation for a smart object, which will be a design placeholder. It should have the same aspect ratio as the original design, a small file size, and be easy to understand the boundaries of the design when we build a mockup. Sometimes you may want to have a real design or a grid image, but for this particular tutorial, a solid white rectangle will suffice. The quickest way to achieve this would be the following: 1. Open one of the original designs that meet the printer's specifications. 2. Optimize the size and color space: - In the main menu, click **Image** > **Mode** > **RGB color** - Click **Image** > **Image size** and set: - **Resolution** to `72` - **Height** to `1000` pixels 3. Make the image solid white: - Click **Create a new layer**. - In the main menu, click **Edit** > **Fill**, set **Contents** to `White`, and click **Ok**. - Rename this layer to `Image`. - Delete all other layers. 4. Save the PSD file with the name `Design` or another name you would like to set for the smart object. ![A design placeholder.](images/design-placeholder.png) ## Step 2. Prepare preview mockup file To create a mockup, we need a realistic image of a product and a good idea of its size and print area. We will place a smart object above this image as a design placeholder, and then we can decorate our mockup with shadows, highlights, and texture. 1. Create a new PSD file. Go to **File** > **New document** and set: - **Width** to `1000` pixels. - **Height** to `1000` pixels. - **Resolution** to `72`. - **Color mode** to `RGB color`. 2. Rename the background layer - a default layer added by Photoshop automatically: - Double-click it on the **Layers** panel. - Change its name to `Background`. - Click **Ok**. 3. Add the product photo. For example, an image of a white T-shirt: - Drag an image from the file explorer to Photoshop. - Adjust its size and position to fill the mockup entirely. - Press `Enter`. 4. Add a smart object: - Drag **Design.psd** created during Step 1 from the file explorer to Photoshop. - Adjust its size and position to fit the print area. - Press `Enter`. 5. Add a product texture. The easiest way to do it is the following: - Add a copy of the layer with the white T-shirt at the top of the layer list. - Right-click a layer and choose **Blending Options**. - In the **General blending** section, set the **Blend Mode** to `Multiply` and **Opacity** to `50%`. - Rename this layer `Texture`. 6. Save the result as a PSD file. ![T-shirt preview mockup.](images/preview-mockup-one-tee.png) Your mockup is ready to be uploaded. The only thing you need to jot down is the name of athe smart object where you want to insert the design. If you did not rename it, it will be the same as the name of the file used to create the smart object. You will need it to configure this mockup in Customer's Canvas. ## Step 3. Add alternative product images The mockup we have created during Step 2 is ready to be used with Customer's Canvas. However, it represents only a single color of a T-shirt of. Usually, you will probably want to offer T-shirts of several different colors. Let's see how to modify our mockup to support multiple product colors. Note, it is assumed that you are linking these colors to the product option in your online store. To simplify things, it is highly recommended to follow the naming convention for the layer names. In this tutorial, we will assume that the product option is called **Color** and it has the values **White**, **Dark Red**, and **Black**. 1. Add the remaining product images for each color one by one: - Drag an image of a dark red T-shirt from the file explorer to Photoshop. - Adjust its size and position. - Press `Enter`. - Do the same for the black T-shirt image. 2. Arrange layers and their names in the **Layers** panel: - Ensure that all product images, including the one we have added on Step 2, are arranged next to each other. - Make the group element names the same as your color options - `White`, `Dark Red`, and `Black` correspondingly. 3. Combine these layers to a Group Layer: - Hold the `Shift` key and select all these images in the **Layers** panel. - If you have added any effects to some of these layers, right-click the selection and click **Rasterize layers**. - Right-click the selection again, click **Group from layers**. - Change the group name to `Color` (same as the option name). ![T-shirt preview mockup.](images/preview-mockup-tee.png) ## Result When you complete all the steps, you will get a PSD file like this: [preview-mockup-tee.psd](pathname:///files/preview-mockup-tee.psd). Once you set it up in Customer's Canvas, the result may look like this: ![Preview of a T-shirt in Customer's Canvas.](images/design-preview.png)