HomeDiscordGitHub
Edit

Your own inventory preview icons

How to add custom preview images by using a custom .inkatlas file

Summary

Uploaded: ??? by manavortex Last documented update: Mar 18 2024 by yellingintothevoid

This guide will teach you how to make custom inventory preview icons.

Technically, this guide is a subsection of the ArchiveXL item additions guide, but you can use it to make any kind of preview item.

The guide below will teach you how to make preview icons. While it's a technically a subsection of the ArchiveXL item additions guide, you can use the steps below to make any kind of preview item.

Difficulty Level: You know how to read and can either edit images or make use of the corresponding guide. While the process is easy, it also is, unfortunately, quite tedious!

Wait, this is not what I want!

The required files

If you downloaded the example project (Getting the files), the preview is already hooked up. Otherwise, download the template archive for your kind of template (kindly provided by Apart).

Go away with your examples, I'll do everything by hand!

Okay, you do you. Here's how:

Finding the files by hand

  1. search in Wolvenkit for icons > .inkatlas

  2. Pick one of CDPR's icon files (look inside first, you want the right kind of icon — weapons have different icons than equipment) and add it to your project

  3. Right-click on the file in the asset browser and select "find used files"

  4. Find the .xbm file and add it to your project as well

  5. Move both of these files to your custom folder, as you don't want to overwrite game default icons

  6. Optionally: Re-name them. This guide assumes that they're named preview_icons.inkatlas and preview_icons.xbm

You should now have a structure like this:

tutorial  
    ops           
          - my_tshirt_factory.csv 
          - translation_strings.json  
          - preview_icons.inkatlas       <<<  
          - preview_icons.xbm            <<<

Taking preview pictures

You have two options on taking preview pictures. Both are relatively tedious, since you have to do it by hand. This is not a step-by-step, but you can find a few pointers here:

Blender

You can export your mesh with all its materials to Blender and take your preview pictures there:

In-game

This part of the guide is a bit longer, since it tells you how to get decent-quality preview pictures. If you don't care for that (you should, but we all hate it), you can skip ahead to Hooking up the inkatlas.

Overview of the Process

The idea is to combine mods that make V invisible and a ReShade filter called DepthAlpha.fx to create in-game screenshots of your item where the background is transparent. This means you don't have to spend a lot of time painstakingly removing the background manually in Photoshop. The screenshots taken with DepthAlpha.fx only need a little bit of cleanup (Creating The Actual Icon), but can be basically directly imported into the .xbm file containing your icons.

Using ReShade is, of course, entirely optional, but teaching how to mask out objects in Photoshop is outside the scope of this tutorial.

Prerequisites

Invisible V by manavortex or the Invisibility Cap and Shoes by PinkyDude

Optional, but highly recommended:

AMM & AMM Props - PhotoStudio

ReShade

DepthAlpha.fx (make sure to set up the depth buffer properly)

AppearanceCreatorMod or Equipment-EX

The Process

Preparation:

Start the game

  1. Equip the invisibility garment and the item you want to create icons for.

    1. To switch through appearances on-the-fly, you can use AppearanceCreatorMod while V is in the center of the camera.

    2. Alternatively, you can save outfits for all colour variations of your outfit In Equipment-EX:

Lighting:

Optional: Finding a good spot

If you can't be bothered, you can simply teleport to the window of Saburo's office:

Game.GetTeleportationFacility():Teleport(GetPlayer(), ToVector4{x=-1349.5053710938, y=138.80358886719, z=545.84600830078, w=1}, ToEulerAngles{roll=0, pitch=0, yaw=0})

Make sure to have some decent lighting on your item.

See the long version

  1. Enter Photo Mode and build a black photo booth around V that looks like the one in the screenshot above using AMM. The AMM Props - PhotoStudio are very useful for this.

  2. Save your photo booth as an AMM preset to create similar looking icons across all your mods.

  3. It's also very useful to make sure the angle of the camera in relation to V remains similar across all your icons:

    1. Exit photo mode and look at the lower edge of your photo booth.

    2. Align the edge with the bottom of your screen, to ensure V is positioned parallel to the photo booth (this will make more sense later).

    3. Enter photo mode again and rotate V to about +15 in the Pose tab.

  4. Add some area lights to the scene. The goal is to highlight the shape of the item. So aim for deep shadows, lots of contrast, and prominent contours. In the screenshot below, there are four lights: two from each side behind the item as rim lights, one at a roughly 45° angle in front and above the item as key light, and one of very low intensity directly in front of the camera to fill in shadows.

Sometimes, it can be helpful to disable RTX to create icons. The screenshot of item on the left in the image below was taken using Path Tracing and DLSS, the one on the right using rasterised lighting without DLSS:

  • If your item is a jacket, the shadows on the inside can look broken with RTX.

  • If your item is jewellery made from glossy metal, you might get unwanted reflections with RTX.

  • If your item features fine textures, you might want to disable RTX, so that you can also disable DLSS/FSR without burning up your graphics card.

  • If your item is a piece of clothing made from glossy material, you might want RTX reflections.

Taking the screenshots

  1. To actually take the screenshot, position the Photo Mode camera so that it is rougly parallel to the bottom edge of your photo booth.

  2. Set the Field of View to about 30 to prevent distortion when taking a closeup.

  3. Move the camera so that the item fills the entirety of your screen without cutting off a part of it.

If you're using ReShade:

3.1 Enable DepthAlpha.fx in ReShade. Check Colorize Transparency and adjust the Range until your item is the only visible object in the scene.

3.2 Disable Colorize Transparency and take the screenshot using ReShade (not the built-in Photo Mode).

  1. Switch to the pose tab and cycle through all appearances of your item and take a screenshot of each one (make sure you haven't skipped any!).

You can use AppearanceCreatorMod to switch appearances without changing the tab!

Photoshop

Fixing Jaggy Edges Left By DepthAlpha.fx

  1. Open the first of your screenshots in Photoshop and drop all other screenshots of the item onto the one you've just opened.

  2. Select the newly created Smart Objects, right click them and select "Rasterize Layers".

  3. Select the first layer and hide all other layers.

  4. Go to "Layer" in the menubar at the top of your screen on the left and select "Layer Mask" → "From Transparency".

  5. Create a new colour fill layer and choose a colour that contrasts with your item.

  6. Double click the layer mask on your first layer in the layers window to enter Select and Mask mode.

  7. Make sure your View Mode is set to "On Layers" and play around with the "Global Refinements" until the outline of your item looks smooth.

Smooth <5, Feather <1, Contrast 30-50, and Shift Edge of around -30% works quite well usually. Highly depends on how intricate your item is.

  1. Duplicate the Layer Mask onto your other layers.

  2. From here on out, you can play around with a bunch of Adjustment Layers with Clipping Masks for each of your layers/appearances. I recommend some Levels Adjustments to set proper black and white points, as well as Black & White Adjustment Layers for items that are black, grey, silver or white and so on.

  3. Once you're done with that, select each layer and its Adjustment Layers, right click them, and select "Convert to Smart Object".

  4. Give each layer a meaningful name and save your image as a .psd.

Adjustment Layers
Converted to Smart Objects

Creating The Actual Icon

  1. Open this .psd and import the Smart Objects of your icons into it. The .psd is based on the preview_icons.xbm found in manavortex's Archive XL item additions and guide and can be easily used with projects based on the guide.

  2. With all layers selected in Photoshop, transform them so that the longest side is 158px.

  3. Align each item to the centre of each grey square.

  4. Hide all other layers except your icons.

  5. Now save the image as a .png in the raw folder of your WolvenKit project.

  6. Import the .png into your WolvenKit project with the TEXG_Generic_UI TextureGroup setting and make sure that "Transparency from alpha channel" is enabled.

Hooking up the inkatlas

  1. Open the file in WolvenKit.

  2. Open the list slots.

  3. For the first two inkTextureSlot items, set the value for DepotPath to the relative path of your xbm (tutorial\torso\my_custom_shirt\ops\preview_icons.xbm):

  1. Save the file. If it doesn't update, reload it (Hotkey: Ctrl+R)

  2. You now have a tab "PartMapping", where you can see which texture corresponds to which slot: select it on the left and check the partsName, which corresponds to the entry in the slot's parts array:

Congratulations! You now have preview icons!

Using it

You can now hook up your preview icon(s) to whatever mod you are making.

If you want to use gendered preview icons, check here. In this case, you do not add an icon record to your item.

ArchiveXL: Add it to the .yaml

Check the code box below — the last three lines add a preview icon.

Items.my_custom_shirt_redwhite:
  $base: Items.GenericInnerChestClothing
  entityName: my_custom_shirt_factory_name
  appearanceName: appearance_root_entity_white_red
  displayName: my_shirt_localization_name_white_red
  localizedDescription: my_shirt_localization_desc
  quality: Quality.Legendary
  appearanceSuffixes: []
  icon:
    atlasResourcePath: tutorial\torso\my_custom_shirt\ops\preview_icons.inkatlas
    atlasPartName: slot_01

Please refer to the ArchiveXL guide for an explanation of the other properties, as this page will only hold information about preview icons.

  • atlasResourcePath: relative path to your .inkatlas file

  • atlasPartName: slot name in your .inkatlas file (which you can see in the PartsMapping tab)

Again, please note that indent is crucial here, as it determines the node structure. The first line needs to have an indent of 0, the lines from $base to icon need to have two spaces, and the lines atlasResourcePath and atlasPartName need to have four.

That's it! Time to test!

If you run into any issues with your texture's transparency, please check the textures import/export guide!

PreviousCustom icons and UINextGendered preview icons

Last updated