> For the complete documentation index, see [llms.txt](https://wiki.redmodding.org/cyberpunk-2077-modding/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.redmodding.org/cyberpunk-2077-modding/modding-guides/custom-icons-and-ui/adding-items-preview-images.md). # Your own inventory preview icons ## Summary **Uploaded:** ??? by [mana vortex](mailto:undefined)\ **Last documented update:** Jul 8 2026 **by** [mana vortex](mailto:undefined) This guide will teach you how to make custom inventory preview icons. {% hint style="info" %} Technically, this guide is a subsection of the [ArchiveXL item additions guide](/cyberpunk-2077-modding/modding-guides/items-equipment/adding-new-items.md), but you can use it to make any kind of preview item. {% endhint %} The guide below will teach you how to make preview icons. **Difficulty Level**: While the process is easy, it also is, unfortunately, quite tedious! * You know how to read * You can either edit images or make use of [the corresponding guide](/cyberpunk-2077-modding/modding-guides/textures-and-luts/images-importing-editing-exporting.md). ### Wait, this is not what I want! * If you want to have gendered preview icons, check [here](/cyberpunk-2077-modding/modding-guides/custom-icons-and-ui/adding-items-preview-images/gendered-preview-icons.md). * For a script to generate inkatlas files, check [The Magnificent Doctor Presto's github](https://github.com/DoctorPresto/Cyberpunk-Helper-Scripts/blob/main/generate_inkatlas.py) * To learn more about the files involved, check [Game icons: .inkatlas files](/cyberpunk-2077-modding/for-mod-creators-theory/files-and-what-they-do/file-formats/game-icons-the-inkatlas-file.md) ## Required tools You need at Wolvenkit >= 8.16.2 for this (download [stable](https://github.com/WolvenKit/Wolvenkit/releases) | [Nightly](https://github.com/WolvenKit/WolvenKit-nightly-releases/releases)), as it can generate inkatlas files. ## Raw icon images We will use Wolvenkit's inkatlas generator to create the entire .inkatlas. For that, you need a folder with .png files for each item that you want to import. ### Image dimensions You need to know the correct dimensions for your images: | Item type | Width | Height(s) | | ------------ | ------- | --------- | | Clothing | 130-160 | 76-160 | | Gun | 320 | 80-160 | | Melee weapon | 320 | 60 - 145 | ## Taking preview pictures As of July 2026, you have two options on taking preview pictures. Both are relatively tedious and include manual switching of appearances. ### mana's workflow This is the minimal workflow as used by the world's laziest photographer. For a more elaborate and detailed version, check [#yellingintothevoids-workflow](#yellingintothevoids-workflow "mention") below. #### Prerequisites * [Photo Studio Props](https://www.nexusmods.com/cyberpunk2077/mods/7436) * [Invisible V](https://www.nexusmods.com/cyberpunk2077/mods/8412) * [Appearance Menu Mod](https://www.nexusmods.com/cyberpunk2077/mods/790) * [Appearance Creator Mod](https://www.nexusmods.com/cyberpunk2077/mods/10795) * Photoshop or [photopea.com](https://www.photopea.com/) * **Optional:** (mana is not using this) [ReShade](https://reshade.me/) and [DepthAlpha.fx](https://github.com/luluco250/FXShaders/tree/master) to mask the background (make sure to [set up the depth buffer properly](https://github.com/martymcmodding/ReShade-Guide/wiki/The-Depth-Buffer#verifying-the-depth-buffer-is-set-up-correctly)) #### Prep You only want the item on your preview shot, so let's do the following things: 1. Hide V: strip nekkid, then put on the [Invisibility Cloak](https://www.nexusmods.com/cyberpunk2077/mods/8412) 2. Put on the item that you want to photograph. Pick the darkest available variant. 3. Place a background: Use [AMM](https://www.nexusmods.com/cyberpunk2077/mods/7436) or WorldBuilder to spawn "Photo Studio: Wall Cover" from the [Photo Studio Props](https://www.nexusmods.com/cyberpunk2077/mods/7436) 4. Set the appearance to `white (matte)` 5. Open photo mode 6. Find a good angle. After this, you must not move the camera! 7. Take a screenshot of the dark item against the white background – this will be used later for masking in photoshop. 8. In Windows Explorer, find your screenshot, move it to a folder, and give it the name of your future icon (e.g. `my_chest_item_black`). 9. Switch the surface cover's appearance to `black`. 10. Optional: Add some more light to the scene #### Taking photos You need to take one screenshot per colour variant of your item. This is the tedious part. {% hint style="info" %} If you have sub-versions (e.g. white shoes with black/red/white/green shoelaces), I don't take a preview picture of each (coloured dots are good enough). {% endhint %} 1. Open [ACM](https://www.nexusmods.com/cyberpunk2077/mods/10795) and find your item's components 2. For each appearance in your mesh, set the ACM components and click "load appearance" 3. Take a screnshot of each \ E.g., you already took a photo of `black`, now it's time to do `white`, `red`, `green`, etc. 4. Move all those screenshots to the same folder as the black item 5. Re-name the files to correspond with the icon names (e.g. `my_chest_item_white` etc) 6. `Optional:` Close the game #### Processing the photos 1. Open the black item on the white background in photoshop or [photopea](https://www.photopea.com/) 2. Drag all the other pictures you took on top of it. This will add them as additional layers. 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 your item selected, and the background not selected. 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. You can hold shift while dragging to enforce rectangularity. 11. Select the layers, right-click, and select "Quick Export as PNG"
12. You should now have a bunch of transparent pngs. Now, let's see about [#generating-the-inkatlas](#generating-the-inkatlas "mention"). ### yellingintothevoid's workflow {% hint style="info" %} 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 #inkatl. {% endhint %} ### 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](#creating-the-actual-icon "mention")), but can be basically directly imported into the `.xbm` file containing your icons. {% hint style="info" %} Using ReShade is, of course, entirely optional, but teaching how to mask out objects in Photoshop is outside the scope of this tutorial. {% endhint %} #### Prerequisites [Invisible V](https://www.nexusmods.com/cyberpunk2077/mods/8412) by [manavortex](https://www.nexusmods.com/cyberpunk2077/users/1630319) or the [Invisibility Cap and Shoes](https://www.nexusmods.com/cyberpunk2077/mods/8643?tab=files) by [PinkyDude](https://www.nexusmods.com/cyberpunk2077/users/20892624) **Optional**, but highly recommended: [AMM](https://www.nexusmods.com/cyberpunk2077/mods/790) & [AMM Props - PhotoStudio](https://www.nexusmods.com/cyberpunk2077/mods/7436) [AppearanceCreatorMod](https://www.nexusmods.com/cyberpunk2077/mods/10795) or [Equipment-EX](https://www.nexusmods.com/cyberpunk2077/mods/6945) ### 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](https://www.nexusmods.com/cyberpunk2077/mods/10795) 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](https://www.nexusmods.com/cyberpunk2077/mods/6945):
#### 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. {% hint style="info" %} **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). {% endhint %} 4. 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!). {% hint style="info" %} You can use [AppearanceCreatorMod](https://www.nexusmods.com/cyberpunk2077/mods/10795) to switch appearances without changing the tab! {% endhint %} ### 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. {% hint style="info" %} 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. {% endhint %}

Before / After

8. Duplicate the Layer Mask onto your other layers. 9. 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. 10. Once you're done with that, select each layer and its Adjustment Layers, right click them, and select "Convert to Smart Object". 11. Give each layer a meaningful name and save your image as a `.psd`. | Adjustment Layers | Converted to Smart Objects | | -------------------------------- | -------------------------------- | | ![](/files/VpAXSNvRdpWINJ3f3Ck1) | ![](/files/XsivJ8hG6OdHI5VqYUHs) | #### Creating The Actual Icon 1. Open [this](https://github.com/CDPR-Modding-Documentation/Cyberpunk-Modding-Docs/blob/main/.gitbook/assets/item_icons.psd) `.psd` and import the Smart Objects of your icons into it. The `.psd` is based on the `preview_icons.xbm` found in [manavortex](https://www.nexusmods.com/cyberpunk2077/users/1630319)'s [Archive XL item additions and guide](https://www.nexusmods.com/cyberpunk2077/mods/8268) and can be easily used with projects based on the [guide](https://wiki.redmodding.org/cyberpunk-2077-modding/for-mod-creators/modding-guides/items-equipment/adding-new-items). 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.
## Taking screenshots: photography and editing tips ### **Lighting:** {% hint style="info" %} **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. {% endhint %}
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](https://www.nexusmods.com/cyberpunk2077/mods/790). The [AMM Props - PhotoStudio](https://www.nexusmods.com/cyberpunk2077/mods/7436) 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.
{% hint style="info" %} 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. {% endhint %} ## Generating the inkatlas {% hint style="info" %} If you're missing the menu entry, you need to update Wolvenkit (download [stable](https://github.com/WolvenKit/Wolvenkit/releases) | [Nightly](https://github.com/WolvenKit/WolvenKit-nightly-releases/releases)). {% endhint %} 1. Create an icon for each of your item's colour variants. Keep the [#image-dimensions](#image-dimensions "mention") 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. {% hint style="warning" %} The .png files need to be named exactly like the `atlasPartName` property in the yaml. {% endhint %} In Wolvenkit, select File -> Add Files... -> Generate .inkatlas\ ![](/files/SZk32YOICiKpRT5Msady) 2. Fill the dialogue like this:\ ![](/files/giImqBOpf3tHGOZaJcXf)\\ 3. Click the "Finish" button 4. Wolvenkit has generated two new .png files for you. Import them via the Import Tool. 5. Check your newly-generated inkatlas. You should see a preview, and everything should in general be fine.
{% hint style="success" %} Congratulations! You now have preview icons! {% endhint %}
## Using the inkatlas You can now hook up your preview icon(s) to whatever mod you are making. {% hint style="info" %} If you want to use gendered preview icons, check [here](/cyberpunk-2077-modding/modding-guides/custom-icons-and-ui/adding-items-preview-images/gendered-preview-icons.md). In this case, you do **not** add an icon record to your item. {% endhint %} ### ArchiveXL: Add it to the .yaml Check the code box below — the last three lines add a preview icon. {% tabs %} {% tab title="Dynamic item" %} ```yaml Items.my_custom_shirt_$(base_color): $instances: - { base_color: red_white } - { base_color: blue_black } # other properties omitted for clarity icon: atlasResourcePath: tutorial\torso\my_custom_shirt\ops\preview_icons.inkatlas atlasPartName: $(base_color) ``` {% endtab %} {% tab title="Static item" %} ```yaml Items.my_custom_shirt_red_white: # other properties omitted for clarity icon: atlasResourcePath: tutorial\torso\my_custom_shirt\ops\preview_icons.inkatlas atlasPartName: red_white ``` {% endtab %} {% endtabs %} For an explanation of what this even does, refer to the [ArchiveXL guide](/cyberpunk-2077-modding/modding-guides/animations/animations/archivexl-adding-photo-mode-poses.md). This guide will only explain how to connect the preview icon: * `atlasResourcePath`: relative path to your .inkatlas file * `atlasPartName`: slot name in your .inkatlas file (corresponding to the name of the `.png`) {% hint style="warning" %} 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. {% endhint %} ## That's it! Time to test! If you run into any issues with your texture's transparency, please [check the textures import/export guide!](/cyberpunk-2077-modding/modding-guides/textures-and-luts/images-importing-editing-exporting.md) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://wiki.redmodding.org/cyberpunk-2077-modding/modding-guides/custom-icons-and-ui/adding-items-preview-images.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.