Modding:Creating Item Icons

From Baldur's Gate 3 Wiki
Revision as of 13:43, 26 February 2024 by CommanderStrawberry (talk | contribs) (Created page with "== Dimensions == An item Icon has 3 dds parts, all perfect squares. === Tooltip Icon === This is 360x360px icon in the best quality it will be seen, when you hover over the item in the inventory. It has a fade gradient from the bottom. === Controller Icon === This is a 144x144px icon. It will be seen by people who play the game with a game controller. It is the same as the above, but it has no fade gradient. === Icon Atlas === This is a 64x64px square tile that will...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Dimensions

An item Icon has 3 dds parts, all perfect squares.

Tooltip Icon

This is 360x360px icon in the best quality it will be seen, when you hover over the item in the inventory.

It has a fade gradient from the bottom.

Controller Icon

This is a 144x144px icon. It will be seen by people who play the game with a game controller.

It is the same as the above, but it has no fade gradient.

Icon Atlas

This is a 64x64px square tile that will be seen in the inventory and hotbar.

It is part of an atlas. This part requires code

Folder Structure of Icons

Tools to Create Icons

- The Modder's Multitool has an atlas converter.

- Invisible Head and Body

- Custom Backgrounds

- Chroma Key Droppable Object

- Visible Shields - if you have made a shield, this will make it visible in the respec screen.

- Mod Builder will generate LSX code and folder structure for you.

Basic guide to create icons

  • Install the Custom Backgrounds background mod
  • Put the clothes or the weapon on your character, and enter the respec screen via Withers.
  • Alternately, you can edit the equipment.txt of a class to have your outfit as its starting equipment, and start a new game to look at the character in the CC
  • Screenshot
  • Paste your screenshot into your image editing program.
  • Select and Remove background
  • Create border around object (edit > stroke) > (still selected) Gaussian blur. You can also experiment with colour layers.
  • Add the fade gradient. You should have 2 different .PNG versions of the icon, one with the fade out and one without.
  • Size correctly, and save as .DDS

Compression

Save your icons in .DDS DTX5, No Mipmaps. (Mipmaps are only needed for things that move closer and further to the camera, they will only make your icons blurry)

Notably you will need to name your atlas .dds NOT .DDS. (or to match whatever you have written in your .lsx code)