LogoLogo
WebsiteBlogForumsSign up
  • Welcome
  • How Ready Player Me works
  • FAQ
  • 👩‍💻Integration Guides
    • Overview
    • Unity
      • Quickstart
      • Avatar Creator Integration
        • WebView Avatar Creator
          • Avatar Creator for Android & iOS
          • Avatar Creator for WebGL
        • Build your own Avatar Creator
          • Start with the sample
          • Elements
            • Asset Selection Element
            • Color Selection Element
            • Template Selection Element
            • Body Shapes Selection Element
            • Gender Selection Element
            • Avatar List Element
            • Photo Capture Element
            • Signup Element
            • Login Element
            • Logout Element
          • User Management
      • Load 2D Renders
      • Avatar Loader Window
      • Setup Multiplayer
      • Setup for XR (Beta)
        • Setup the Player Avatar
        • Setup Meta Movement SDK
        • Setup Final IK
        • Setup XR Hands
          • RpmHandDriver script
        • Facial Animations
        • VR Avatar Creator
      • Animations
        • Ready Player Me Animation Library
        • Mixamo Animations
      • Optimize
        • Avatar Configuration
        • Avatar Caching
        • Defer Agents
      • Code Samples
        • Loading 3D Avatars
        • Loading 2D Avatars
        • Avatar Creator (WebGL)
        • Avatar Creator (Desktop)
        • Avatar Creator (Mobile)
        • Distance-based LODs
      • Troubleshooting
        • Editor UI Window Issues
        • Avatar loading issues
        • iOS issues
        • WebGL issues
        • Firewall issues
        • Updating the SDK
          • Unity SDK 3.0.0 Migration guide
          • Unity SDK 4.0.0 Migration guide
          • Unity SDK 5.0.0
          • Unity SDK 7.0.0
          • WebView 2.0 Migration
        • Package installation issues
      • Help us improve the Unity SDK
      • FAQ for Unity
      • Early Access Features
    • Unreal Engine
      • Quickstart
        • Import SDK Manually
      • Avatar Creator Integration
        • Build your own Avatar Creator
          • Sample Structure
          • Customization Guide
        • WebView Avatar Creator
      • Load Avatars
      • Animations
        • Ready Player Me Animation Library
        • Loading Mixamo animations
        • Mannequin animation retargeting
        • Blender FBX export to UE
        • Oculus Lipsync integration
      • Optimize
        • Avatar configuration
        • Avatar caching
        • Avatar preloading
      • Code Samples
        • Unreal Engine 5 samples
        • Lyra project integration example
        • VR Avatars
        • Unreal Engine 4
      • Troubleshooting
        • Project compilation issues
        • Missing materials on built applications
        • Avatar loading issues
        • Animation issues
        • Unreal SDK breaking changes
        • Avatar lighting issues
        • Updating from earlier versions
          • Unreal SDK 3.0.0 Migration guide
        • Auto LOD issues
      • Help us improve the Unreal Engine SDK
      • FAQ for Unreal Engine
      • Early Access Features
    • React
      • Quickstart
    • React Native
    • iOS Native
    • Android Native
    • Web Integration
      • Quickstart
      • User Management
        • Guest Accounts
        • Account Linking
      • Avatar Creator integration
      • Optimize
    • API Integration
      • Quickstart
      • Custom Avatar Creator
      • User management
        • Ready Player Me Account
        • Anonymous Accounts
    • UX/UI Guidelines
      • Summary & quick tips
      • UX and UI guidelines and essentials
        • Foundation for good user experience
          • Layout
          • Colors
          • Typography
          • Icons
          • Dark mode and light mode
        • Mobile best practices
          • Layout
        • Making Ready Player Me feel native
          • Seamless Avatar Integration
          • Consistent Branding
          • Responsive Layout
          • Performance Optimization
        • Discoverability of the avatar editor
          • Onboarding tutorial
          • Clear navigation
          • Contextual Placement
  • 🖌️Customizing Guides
    • Studio (Developer Dashboard)
    • Avatar Creator Appearance
      • Avatar URLs
      • Avatar Shortcodes
    • Upload and Manage Custom Assets
      • Asset Manager in Studio
      • Configure in Studio
      • Manage custom assets using the API
      • Unlocking assets through API (Beta)
    • Create Custom Assets
      • Fullbody Outfits
        • Checking Skin Weights
      • Tops, Bottoms, Shoes
        • Editing templates
      • Hairstyle
      • Headwear
      • Facewear
      • Glasses
      • Hero Characters
      • Modeling Guidelines
  • 🔃API Reference
    • REST API
      • Authentication
      • Avatars
        • GET - 3D avatar
        • GET - 2D Render of an Avatar
        • GET - Metadata
        • PUT - Equip an asset
        • PUT - Unequip an asset
      • Assets
        • Asset Entity Properties
        • POST - Create Asset
        • GET - List Assets
        • PATCH - Update Asset
        • POST - Upload Asset Files
        • POST - Add Asset to Application
        • DELETE - Remove Asset from Application
        • PUT - Unlock asset for a user
        • PUT - Lock asset for a user
      • Users
        • POST - Create User
      • Auth
        • GET - Token
      • Changelog
    • Avatars
      • Full-body avatars
      • Full-body XR avatars
      • Half-body avatars
      • Morph targets
        • Apple ARKit
        • Oculus OVR LipSync
    • Avatar Creator
  • 🔉Support
    • Forums
    • Licensing & Privacy
Powered by GitBook
On this page

Was this helpful?

  1. Customizing Guides
  2. Create Custom Assets
  3. Tops, Bottoms, Shoes

Editing templates

In-depth template editing guide

PreviousTops, Bottoms, ShoesNextHairstyle

Last updated 1 year ago

Was this helpful?

Step-by-step guide

This guide will explain how to create custom textures using ‘Regular T-Shirt’ as an example.

This is what you’ll first see when opening the .psd file with Photoshop:

To understand what you are seeing, here’s couple screenshots of the shirt 3D model in Blender:

If you look closely, you can see how the texture corresponds to the 3D model. To see how this template texture looks on the 3D model, you can drag and drop the PNG file that is provided in the ZIP to Asset Designer to see how it looks on 3D model there as well.

Now, let’s have a look at the layers and folders present on the Photoshop file:

  • Wireframe: Overlay the wireframe of the polygons of the 3D model. Everything that is inside the space of the polygons will be displayed on the 3D model when applying the texture. This wireframe can be used as a visual guide to know where anything added to the texture will be displayed.

  • Light & Shadow: Folder that contains lights and shadows information.

  • Logos: Folder that contains the Ready Player Me decals on the shirt. There are different layers in the folder that contain the logos depending wether they’re placed on the front, back, right or left side of the asset.

  • Base color: Contains flat colors for each part of the shirt.

  • Background: Just a flat color background.

Naming and order of folders and layers in the templates of different assets may vary, but content will be similar and the procedure the same.

For editing the texture it will be easier to work just with the flat colors. So let’s hide all the layers except for the ‘Base color’ one.

Now, it will be very easy to just select the desired part of the shirt to paint over it. You can use the ‘Magic Wand Tool’ to do so.

With the desired part of the texture selected, let’s create a new layer and paint over it:

Now let’s add the logos’ folder back, but lower the one at the front of the shirt. Also, let’s switch the logo at the back for a new one:

Finally, make the Light & Shadow folder visible again, and export the texture in PNG format using the following options:

To avoid running into errors during upload, do not include metadata or color profile information in the image. Do use full color (24 bits/px), do not use palettes (8 bits/px). Do not include transparency.

Finally, upload the texture to Asset Designer to test the results:

A bit more technical advice is to keep color values . Keep the color values in the 30-240 sRGB luminance range for non-metals and in the 180-255 sRGB luminance range for raw metals.

🖌️
PBR-safe