Clothing Designer

The Clothing Designer is a texture editor for FiveM clothing that shows your work on the real model. You open a drawable (.ydd or .ydr) with its .ytd texture files, or start from a game template, paint on the model or on the flat texture with layers, and export new .ytd files named the way the game expects. It is meant for server owners and clothing makers who want a new colourway, a logo on a top or a whole set of variations without a Photoshop and OpenIV round trip.

What it is for

A typical job: you have a hoodie in your clothing pack and want a police, EMS and gang version of it. Normally you export the diffuse from the .ytd, paint it blind in an image editor while guessing where the UV islands land, convert it back to DDS and import it again. Here you paint straight on the 3D model (strokes go through the UVs into the texture), see the result live, add one texture slot per variation, and export every .ytd in one zip.

Everything runs in your browser. The files you drop are read locally and nothing is uploaded.

Quick start

1. Open the tool. The start screen has Choose files, Choose folder and a row of game templates.
2. Drop the drawable and its textures, for example jbib_004_u.ydd with jbib_diff_004_a_uni.ytd, jbib_diff_004_b_uni.ytd and so on. A whole stream folder works too. If the folder holds several drawables you get a list (Pick the drawable to edit) showing vertex and texture counts; the textures are matched to the one you pick by name.
3. No files at hand? Click a template on the start screen or in the Templates tab.
4. Pick the Brush (B), choose a colour in the tool rail on the left and paint on the model or on the texture panel.
5. Press Save (Ctrl + S) to keep the project in this browser.
6. Press Export, set the drawable number and gender, and click Export all (.zip).
7. Copy the stream/ files from the zip into your clothing resource.

Supported files

Binary files must be the legacy RSC7 resources FiveM uses. The highest LOD of the drawable is shown. Textures embedded in the drawable itself (common for props) are found too; if the diffuse is embedded, the export writes it as a separate .ytd and a warning under Drawable details says so.

Addon names with a collection prefix, like mp_m_freemode_01_mypack^jbib_004_u.ydd, work the same as plain names. Files that do not follow the freemode naming at all open as Other drawable and keep their own file and texture names on export.

The workspace

The header shows the project name (click it to rename), the gender, and the item code like jbib_004. Unsaved appears when you have changes that are not saved. On the right: undo, redo, the keyboard shortcut list, full screen (Esc leaves it), Save and Export.

Below the header is the options bar for the active tool, the tool rail on the left, the two view panels in the middle and the sidebar on the right. The status bar at the bottom shows the cursor position in texture pixels, the UV island under the pointer, and vertex, triangle, geometry and UV island counts.

3D preview

The model with your texture as it is right now. Drag on the model to paint (with a painting tool active), drag the background to orbit, right drag to pan.

Ped clothing is shown in its bind pose without the body. Hats and glasses are turned upright for the preview only. The shading is a preview, not the game’s ped shader.

Texture panel

The texture at full size with the model’s UV layout on top, so you see which part of the image lands where. Hover the model or the texture to highlight a UV island.

Pan with Space + drag, Alt + drag (move tool) or the middle or right mouse button. The wheel zooms. Drag the divider between the panels to give one more room (25% to 75%), or hide a panel with its minimize button and bring it back from the thin bar at the side.

Tools

The tool rail holds the tools and the primary and secondary colour (defaults #d9463b and white). X swaps them. Each tool has its settings in the options bar.

[ and ] change the brush or eraser size. Stay inside the UV island keeps a stroke on the island where it started, which is handy along seams.

Painting on the model stops at UV seams: a stroke that crosses a seam continues on the other island without joining up, so touch up seams in the texture view.

Sidebar

The sidebar has three tabs: Layers, Templates and Saved.

Slots

A slot is one texture variation of the drawable: a, b, c… Every slot has its own layer stack and becomes its own .ytd. Add slot offers Copy of slot a (the current one), Base texture only and Solid primary colour. Below the thumbnails you can change the letter of the active slot and see the texture name it will get on export, for example jbib_diff_004_b_uni. The trash button deletes the slot (the last one can not be deleted).

Layers

The original texture is the bottom layer (Base texture), with an empty Paint layer above it. Paint on the layer above the base so the eraser always brings the original back.

Each row has visibility and lock toggles; double click a name to rename it, drag rows to reorder. The buttons below the list: move up, move down, Duplicate (Ctrl + J), Merge down (Ctrl + E), flip horizontally, flip vertically and Delete layer. The plus button adds a paint layer, the image button adds an image layer. Ctrl + C and Ctrl + V copy and paste a layer.

Layer properties

Every layer has Opacity and Blend: Normal, Multiply, Screen, Overlay, Soft light, Hard light, Darken, Lighten, Color dodge, Color burn, Difference, Exclusion, Hue, Saturation, Color, Luminosity.

• Text layers: the text itself (multi line), font, Size, Weight (300 to 900), colour, alignment (Left, Centre, Right), Italic, outline colour and width, Spacing, Curve (minus 360 to 360 degrees, bends the text over an arc) and Line height for multi line text without curve. Built in fonts are Arial, Arial Black, Impact, Verdana, Tahoma, Trebuchet MS, Georgia, Times New Roman, Courier New, Comic Sans MS, Geist and Geist Mono. The upload button next to the font list adds your own .ttf, .otf or .woff; it is stored with the project. Double click a text layer on the texture to jump to its text box.
• Shape layers: Width, Height, Radius for rectangles, Points (3 to 48) for polygons and stars, fill and outline on or off with colours and outline width.
• Gradient layers: Linear or Radial, start and end colour, each with its own alpha. Drag the two dots on the texture to move the gradient.
• Image layers: show the source size. Drag the corner handles to scale (Shift frees the ratio), the round handle to rotate (Shift snaps to 15 degrees).

Limit to UV islands switches to island picking: click islands on the texture or the model to add or remove them, then press Done. The layer then only shows inside those islands, for example only the sleeves. Clear removes the limit. Rasterize turns a text, shape, gradient or image layer into plain pixels so you can paint on it.

Drawable details at the bottom lists the file, type, LOD shown, shaders, embedded textures, textures from the original .ytd that are kept as they are (normal and spec maps), and any load warnings.

Templates

Freemode clothing from the base game, with the real UV layout and textures. Filter by Male or Female, by category (JBIB, LOWR, FEET, ACCS, TEEF, BERD, TASK, HAND, HATS) or search by name. A template opens with one slot per texture variation. Templates do not include the drawable file itself, see the Output section below.

Saved

Save keeps the whole project (layers, fonts and your original files) in this browser’s storage, with a 3D thumbnail. The Saved tab lists every project with Continue, rename, Download project file and delete, plus Import file to open a .fmcloth and Delete all saved projects. Saved projects stay in this browser only; download a .fmcloth to back one up or move it to another PC.

The page warns before you close it with unsaved changes. Undo keeps the last 80 steps.

Export

Export opens a dialog with two columns.

Drawable

For an Other drawable these fields are hidden and every file keeps its original name.

Texture format

Every texture gets a full mip chain. Normal and spec maps that were inside your original .ytd files are copied as they were. Big textures (2048 px) take a few seconds to encode.

Buttons

• Export all (.zip): every slot as its own .ytd, the drawable renamed to your number and prefix, and a README.txt.
• .ytd, PNG, DDS: only the active slot, as a single file.
• Project file (.fmcloth) with all layers: the editable project.

Output

The zip is named <component>_<number>_<gender>.zip, for example jbib_004_male.zip. With a collection prefix it contains:

stream/mp_m_freemode_01_my_clothes^jbib_004_u.ydd
stream/mp_m_freemode_01_my_clothes^jbib_diff_004_a_uni.ytd
stream/mp_m_freemode_01_my_clothes^jbib_diff_004_b_uni.ytd
README.txt

Props follow the prop naming: p_head_000.ydd and p_head_diff_000_a.ytd, without race suffix. The drawable is your original file, byte for byte, only renamed. Each .ytd holds the edited diffuse under the slot’s texture name plus any other textures that were in the original .ytd for that variation.

When you started from a template the drawable is not in the zip. The README names the game file to copy (for base game items from x64v.rpf/models/cdimages/streamedpeds_mp.rpf/mp_m_freemode_01/, or streamedpedprops.rpf for props) and what to rename it to. Extract it with CodeWalker or OpenIV.

Getting it into FiveM

1. Create a resource folder, for example resources/[clothes]/my_clothes/, with a stream/ folder inside.
2. Copy everything from the zip’s stream/ folder into it. The drawable and its .ytd files must keep matching names: same component, same number, texture letters in order.
3. Addon clothing (with the collection prefix) also needs the ped variation file (.ymt) and usually a shop meta so the item shows up in clothing menus. Build them with the YMT Creator, which reads the file names this tool writes.
4. Add the resource to server.cfg and restart.

A minimal manifest for an addon pack with a shop meta:

fx_version 'cerulean'
game 'gta5'

files {
  'mp_m_freemode_01_my_clothes.meta',
}

data_file 'SHOP_PED_APPAREL_META_FILE' 'mp_m_freemode_01_my_clothes.meta'

ensure my_clothes

FiveM streams everything in stream/ on its own, so the .ydd and .ytd files need no files entry.

Keyboard shortcuts

Shortcuts only work while the pointer is over the editor or it has focus, so the rest of the page keeps normal keys.

Common mistakes

• Gaps in texture letters. Deleting slot b leaves a, c. Use Make a, b, c in the export dialog.
• Mismatched numbers. If you change Number, all files get the new number. Do not mix old and new files in stream/.
• Soft alpha in DXT1. With Auto, any pixel below full opacity makes the slot DXT5. If you forced DXT1, soft edges become hard cutouts.
• Forgetting the drawable for templates. A template export only has .ytd files. Copy the drawable from the game as the README says.

Limitations

• Only the highest LOD is shown and painted. The drawable file is exported unchanged, so you can not edit geometry here.
• The 3D view is a preview, not the game’s ped shader. Check the final look in game.
• Only the diffuse texture of each slot is edited. Normal and spec maps are passed through.
• Gen9 (Enhanced) resources are not read, only the legacy format FiveM uses.

Related tools

• YMT Creator builds the .ymt and shop meta for addon clothing.
• Texture Editor for any .ytd, with format and mip control.
• YTD Optimizer to shrink big clothing packs.
• 3D Tattoo Editor for tattoo overlays on the freemode ped.
• Drawable Studio for materials, lights and painting on CodeWalker XML exports.