Your own inventory preview icons

Summary

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

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

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!

• If you want to have gendered preview icons, check here.

• For a script to generate inkatlas files, check The Magnificent Doctor Presto's github

• To learn more about the files involved, check Game icons: .inkatlas files

Required tools

You need at least Wolvenkit 8.16.2 for this (download stable | Nightly), as it can generate inkatlas files.

Destination path

If you downloaded the example project (Getting the files), you will already find a preview, which we will overwrite:

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

Image dimensions

You need to know the correct dimensions for your images:

Taking preview pictures

You have two options on taking preview pictures. Both are relatively tedious, since you have to do it by hand.

You can find more detail about how to take preview pictures in Blender or In-game further down the section.

mana's workflow

Prerequisites

• Photo Studio Props

• Invisible V

• Appearance Menu Mod

• Appearance Creator Mod

• Photoshop or photopea.com

Taking photos

1. Strip V nekkid, then put on the Invisibility Cloak and the item you want to create previews of

2. Use AMM to spawn "Photo Studio: Wall Cover" from the Photo Studio Props

3. Set the appearance to white (matte)

4. Switch to photo mode. Find a good angle and lighting for your item.

5. Use ACM to set the item's appearance to the darkest variant (e.g. black)

6. Take a screenshot. You will use this for masking.

7. Switch the background color to black

8. Use ACM to cycle through the item's appearances and take a screenshot of each

9. In Windows Explorer, find your item screenshots and move them to a folder

10. Re-name the png to the name of your future icon (e.g. myItem_black). You can also do this later.

Processing photos

1. Open the dark item on the white background in photoshop or photopea

2. Drag all the other pictures you took on top of it. The items must be in the same space!

3. In the Layers panel (bottom right)

   1. create a group and put all the layers inside

   2. Drag the layer of the white background picture to the top, and select it (click on it)

4. Press W to select the Magic Wand tool

5. From the top bar, use the Select Subject button

6. Optional: use the Select and Mask view to fine tune your selection

7. Confirm. You now have a selection that includes only your item.

8. In the Layers panel (bottom right),

   1. select the group (folder) by clicking on it

   2. create a layer mask by clicking on the icon that looks like the Japanese flag

9. The background will now be transparent

10. Use the Crop Tool (Keyboard shortcut: C) to crop a rectangular selection with your icon in the center

11. Select the layers, right-click, and select "Quick Export as PNG"

1. You should now have a bunch of transparent pngs. Now, let's see about Generating the inkatlas.

Blender

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

In-game

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.

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:

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

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.

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!).

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.

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.

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.

Generating the inkatlas

1. Create an icon for each of your item's colour variants. Keep the Image dimensions in mind - if you save your files with the right aspect ratio or in the right size, you won't have to resize them later.

In Wolvenkit, select File -> Add Files... -> Generate .inkatlas

1. Fill the dialogue like this:

2. Click the "Finish" button

3. Wolvenkit has generated two new .png files for you. Import them via the Import Tool.

4. Check your newly-generated inkatlas. You should see a preview, and everything should in general be fine.

Using it

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

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: redwhite

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)

That's it! Time to test!

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