Intermediate Tutorial


Customizing Host Clothing


30 minutes

Posted on: May 31, 2018

Learn Sumerian
Customizing Host Clothing

Tags

hosts
materials
customization
clothing
logo,

In this tutorial you will learn about:

Clothing Customization

By following this tutorial and using the (.psd) files we provide, you will be able to create the texture maps needed to customize the clothing for your Amazon Sumerian Host. We’ll create a Color (Diffuse) texture for the base color of the item of clothing, and a Color (Diffuse) and textures for a custom logo.

You’ll learn about:

  • How to create your own Diffuse texture maps for clothing color.
  • How to create and place your own logo or design onto the Host clothing by using diffuse maps.
  • How to connect these maps to the Host through the Material component.

Prerequisites

Before you begin, you should have completed the following tasks and tutorials:

Note: All Female files will work for all female Hosts and the Male files work for all male hosts. For this exercise, we’ll use the Female_Custom_Hoodie.psd file to update the Cristine Hoodie Host.

Step 1: Set up the Diffuse Texture for the Clothing

  1. When you first open Female_Custom_Hoodie.psd, it looks like this.

    In Photoshop, we want to turn off the Logo layer in the Layers panel by clicking the eye icon.

  2. Start adjusting the main color of the hoodie by turning on the Custom Color layer under the Diffuse folder. Then click on the color swatch for the Custom Color. This opens the Color Picker, where you can choose the base color for your hoodie.

    We’ve chosen a lavender color for the base. Because the Custom Color layer is set to Overlay in the blending properties, the Diffuse texture retains all of the detail information present in the default Host texture. Now the texture should look like this.

  3. From here, you can move through each layer in the Diffuse folder and set the colors you want for the hoodie. You can change the Custom color, Ties Cloth color, Ties Metal color, Sides color, and Inside of Hood color. Click the color swatch next to the corresponding layer and adjust the color in the Color Picker. After adjusting the colors, we have created a Diffuse texture that looks like this.

    Note: If you can’t achieve the color you want for a layer, try changing the blending option for that layer.

  4. Save your Diffuse texture. The .psd file is sized at 4096 x 4096 so that you can produce a high-textile density image, if necessary. The Hosts Diffuse textures are 2048 x 2048, and you might want to size yours to the same. You can do that from the main menu bar under Image, and then select Image Size.

  5. Save the file as a .jpg file, and set your Texture Compression as needed to achieve the texture quality and size you want. For example, we often save a .jpg file as High Quality (9 out of 12).

Now you have the Diffuse texture for the hoodie!

When adding a custom logo, make sure to use a .png with a transparent background!

  1. Create the Diffuse texture for the custom logo. Hide the Diffuse (hoodie) folder by clicking the eye icon and collapse this layer. Show the Logo folder by clicking the blank box next to the folder.

    Due to some recent updates, remove/delete the yellow and blue color swatches and move your logo into the Logo-Diffuse layer. Your layers and file should look like this.

  2. Place your logo within the green boundary boxes. These boxes denote the front and back of the hoodie and are safe areas in which to place your custom logo. In this tutorial, we’ll use an AWS logo, but you can use a logo you choose. The logo is placed into the appropriate area on the front of the hoodie and can be shown by hiding the Diffuse folder that’s nested within the Logo folder.

    Note: What’s important is that the logo is 100% opaque and the background, or whatever isn’t meant to be the logo, is transparent. The placement of the logo is key in this step.

    Your texture now looks like this.

  3. Hide the Place Logo Here layer so that all that’s visible is your logo. Your texture should now look like this.

    The Sumerian Hosts use a logo Diffuse texture size of 1024 x 1024. If you want to resize Diffuse texture, do that now, then save the file as a .png file. In the .png Options dialog box that appears, choose Smallest / Slow under Compression, and None under Interlaced. Choose OK.

Your Photoshop layers should look like the following:

Once you have saved your logo texture as a .png (we saved it as Female_Custom_Hoodie_LogoDiffuse.png), the texture files will be complete. Next, we’ll move into Sumerian.

Step 4: Placing the Texture Maps in Sumerian

  1. From the Sumerian Dashboard, create a new scene using the Default Lighting template.

  2. Choose Import Assets, and then import the Cristine Hoodie asset.

  3. The Cristine Hoodie asset should load into your scene and look like this.

    Note: The logo might already be applied, but for this tutorial, it will show the texture not applied.

  4. To change the Diffuse Color of the hoodie you will select the fm_hoodie_grey material under the Cristine Hoodie asset in the Asset Panel.

  5. In the Inspector panel in the Material component, under Color (Diffuse), choose the Texture folder and browse to your hoodie Color (Diffuse) texture.

    The tutorial hoodie now looks like this.

  6. Navigate to the fm_hoodie_customLogo material within the Asset Panel. Then select the fm_hoodie_customLogo material.

  7. In the Inspector panel in the Material component, under Color (Diffuse), choose the Texture folder and browse to your hoodie logo Color (Diffuse) texture (in our case, Female_Custom_Hoodie_LogoDiffuse.png).

Now your hoodie is complete!

You can use the method we described in this tutorial for any of the custom clothing options that Sumerian provides.

Now publish and share your scene!

You should now have a much better understanding of Materials and customizing a Sumerian Host’s clothing. To learn more, check out the following tutorials:

Back to Tutorials

© 2019 Amazon Web Services, Inc or its affiliates. All rights reserved.