# User Guide

### Installation

1. Import the Icon Generator package into your Unity project.
2. Ensure all necessary scripts and resources are located in the `Assets/Icon Generator` folder.

> 💡 **Important:** Do not change the folder name to avoid potential export issues.

3. If your project uses the Built-in o HDRP rendering channel, import the package located at (../Icon Generator/).

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2Fjp3xxKIg8kIJDqEo25pc%2Fimage.png?alt=media&#x26;token=fc6843ff-f07a-401b-870f-abd5018cee07" alt=""><figcaption></figcaption></figure>

### How to Create an Icon

{% stepper %}
{% step %}

### **Select Your Model**

In the Unity hierarchy, choose the 3D model you want to convert to an icon.

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FrK8l08Iq22knTFusahsi%2FCaptura%20de%20pantalla%202024-12-14%20112449.png?alt=media&#x26;token=8503dee1-33ab-4d8b-9b12-9c280db08476" alt="" width="261"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **Open Icon Generator**

* Right-click on the model
* Navigate to: Latin Tools > Convert To Icon

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2F4MGZN25sbOsrPxlxzFVs%2Fimage.png?alt=media&#x26;token=a5010961-fddc-4ade-8a79-bd46d1121498" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2F41orblCN3tQT2Vly8rYE%2Fimage.png?alt=media&#x26;token=3259f4fe-23cf-432d-ae1d-26083539d38c" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **Configure Icon Settings**

The editor window will open, allowing you to customize your icon.

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FYbb59PThBfytChQxQnqs%2Fimage.png?alt=media&#x26;token=781fce08-d52d-4b86-a7ae-976f14d8f21a" alt=""><figcaption></figcaption></figure>

### Preview Resolution

* Set the desired icon resolution

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FiWjISyqdLRc337YRJQZ4%2Fimage.png?alt=media&#x26;token=b50e25bf-d8d9-489b-b7c8-a09682d97037" alt=""><figcaption><p>To the right, there is a button with a list of resolutions to help you work faster and more efficiently.</p></figcaption></figure>

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2F8KuJAR1hRNmJfODyJi8b%2FCaptura%20de%20pantalla%202024-12-14%20112600.png?alt=media&#x26;token=614289ff-eea0-4dff-a216-81d2f05b8d87" alt="" width="269"><figcaption></figcaption></figure>

* Alternative method: Right-click on the "Icon Generator" text at the top of the editor window

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FWxv8KNcmOcRfX0tBgAKU%2FCaptura%20de%20pantalla%202024-12-14%20112611.png?alt=media&#x26;token=bfee2084-8f3d-4bcf-91b2-198408a9f83c" alt="" width="314"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **Editing Options**

Use the following sections to customize your icon:

* [General Settings](#general-settings)

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FK6593A1XUohDVM0mBoic%2Fimage.png?alt=media&#x26;token=3b5ba85d-7d84-4d61-a793-3aeefe731f01" alt=""><figcaption></figcaption></figure>

* Image Settings

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FxZsKA4CwXxoqvqaAeCF2%2Fimage.png?alt=media&#x26;token=c154c323-0da7-4e8a-ae3d-7d8fa6e65b80" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Set the icon name and define the final export path for a seamless workflow.

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FcmO37l7w2WId4IXuOiew%2Fimage.png?alt=media&#x26;token=d1734b40-c516-4ded-8297-9af9e9e6bb75" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Hit "Export" to finalize and save your icon!

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FPshBpcKTin3cJIa5wD8L%2FCopia%20de%20Export%20Button%20Icon.png?alt=media&#x26;token=b3af4e15-e609-4c6e-be30-7768758398de" alt=""><figcaption></figcaption></figure>

### **Final results**

***

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2Feg6pRmeEaupXcCXu77hX%2FCaptura%20de%20pantalla%202024-12-14%20113410.png?alt=media&#x26;token=564f7e39-8ab4-4ae2-a96c-322fc6c56d8b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2F8KRKwDl7njMONqi6KBmm%2FCaptura%20de%20pantalla%202024-12-14%20113255.png?alt=media&#x26;token=1468cfb8-483c-406f-87ce-fbf372bd5fa0" alt="" width="218"><figcaption></figcaption></figure>

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FPh4NpHtKcKHJvgODJJVd%2FCaptura%20de%20pantalla%202024-12-14%20113348.png?alt=media&#x26;token=168ea989-8abe-4a86-a7f8-17870c656836" alt="" width="281"><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

***

### General Settings

***

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FK6593A1XUohDVM0mBoic%2Fimage.png?alt=media&#x26;token=3b5ba85d-7d84-4d61-a793-3aeefe731f01" alt=""><figcaption></figcaption></figure>

**Transparent Background:** This option is blocked if the file type is set to "JPG" in the export settings.<

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FVMxzq20erPQuhH2cqIn2%2FCaptura%20de%20pantalla%202024-12-14%20112643.png?alt=media&#x26;token=517418e4-4cab-4ef7-849d-51eb17424dee" alt=""><figcaption></figcaption></figure>

### **Preview Settings**

***

* **Refresh Preview:**
  * Use this button if the view doesn't update after changes
* **Open in Window:**
  * Opens a separate window that continuously updates
  * Mouse events remain active
* **Show Only Capture Objects:**
  * When disabled, shows everything in front of the camera

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2Fu8Xy9usgtLp2r2LOWRo4%2FCaptura%20de%20pantalla%202024-12-14%20112729.png?alt=media&#x26;token=e10797ef-dde7-4c2c-8c73-1462adc9540b" alt="" width="318"><figcaption></figcaption></figure>

Preview Resolution

* If you experience performance issues during the preview, use this option to significantly improve performance.

Scroll Action

* Choose what you want to modify when using the mouse wheel: adjust the Field of View (FOV) or scale the object displayed in the preview.

Auto Position

* Automatically centers the model you're previewing for optimal alignment and visualization.

Position Lock & Rotation Lock

* Select the axis you want to lock while dragging with the right mouse button inside the preview window.

Modify Capture Objects

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FPY0Xr0mySsReJV6USQkq%2FCaptura%20de%20pantalla%202024-12-14%20112824.png?alt=media&#x26;token=d70517b5-200b-49fe-a109-a85a39ed9cc1" alt=""><figcaption></figcaption></figure>

> 💡 Activate/deactivate and modify model position directly in the editor

### **UI MANAGER**

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2Fes2Perfmwwyw7otun40s%2Fimage.png?alt=media&#x26;token=a21088b0-137f-4dfd-b009-f7f258ca0594" alt=""><figcaption></figcaption></figure>

Plane Distance: The plane distance is the distance between the camera and the canvas. It is used to determine the size of the canvas.

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FCp4R1lTDnbJ8XKas8gkB%2Fimage.png?alt=media&#x26;token=5baced96-7e31-43cf-8d80-24c62d0eabca" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FQy3Gg5PbRw68mlf9Nulo%2Fimage.png?alt=media&#x26;token=2ce44394-a21a-44e7-b5bd-63def7283292" alt=""><figcaption></figcaption></figure>

###

### **Animation Preview**

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2F3lRYIlzGf1gIwVT3DcwX%2FCaptura%20de%20pantalla%202024-12-14%20112847.png?alt=media&#x26;token=8bb2a2dc-dada-4fa0-8031-b800b799100f" alt=""><figcaption></figcaption></figure>

* Add your model's Animator
* Use "Find Animator" to locate an animator within the model
* Select animations to preview in real-time

### Monochrome

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FsoFl1tF9zoO50jGASQJR%2FCaptura%20de%20pantalla%202024-12-14%20112905.png?alt=media&#x26;token=ca03e60a-1303-4211-b806-48d39da8159f" alt=""><figcaption></figcaption></figure>

The **Monochrome** feature allows you to apply a grayscale effect to the visual elements of your project. This tool is especially useful for:

* **Assessing Contrast and Readability:** Analyze your visuals by removing color to focus on contrast and clarity.
* **Testing Visuals in a Colorless Environment:** Preview how your assets will appear in a monochromatic setting.
* **Adding an Outline Effect:** Apply outlines to emphasize shapes and edges in your assets.

**Examples of Use:**

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2Fp8RF0zhcGtuY0M0xoT4K%2FCaptura%20de%20pantalla%202024-12-14%20115202.png?alt=media&#x26;token=979c8eb9-48dd-4ae8-bf5b-f90114da1390" alt=""><figcaption></figcaption></figure>

### Outline Effect

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FTqU1UPQn2HKESf7vTNQX%2FCaptura%20de%20pantalla%202024-12-14%20115722.png?alt=media&#x26;token=3231c90a-40bc-451c-bb40-7884a79da940" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FTIybO6jk8eguFSV2hKnS%2FCaptura%20de%20pantalla%202024-12-14%20113022.png?alt=media&#x26;token=b80428d6-114d-4c48-838d-50c9888014df" alt="" width="332"><figcaption></figcaption></figure>

### Glow

Experimental effect, useful in specific cases

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FTO3jnur4PjXCGW8rI3t5%2FCaptura%20de%20pantalla%202024-12-14%20120034.png?alt=media&#x26;token=76a452e8-21f3-4c01-9d33-313cd233db57" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FgTrP1YJWORw8QQ01MHxC%2FCaptura%20de%20pantalla%202025-01-25%20112927.png?alt=media&#x26;token=17fd21db-e4d3-4c2f-a092-1cc0857589c1" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FwmEmQT32IpEmEnhg0cTt%2FCaptura%20de%20pantalla%202025-01-24%20003223.png?alt=media&#x26;token=46ade2f1-8b05-49f5-85a5-7932685f4c5b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FPxBNl51lL1XW9WmKveBo%2FCaptura%20de%20pantalla%202024-12-14%20113050.png?alt=media&#x26;token=6b147885-e381-4381-89e0-2b8b6c0a8d2b" alt="" width="325"><figcaption></figcaption></figure>

* Add a **fade effect** that can be combined with disabled transparency to achieve unique visual results, such as this:

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FQqvSOpVUJn7mzJhEqQ2h%2FCaptura%20de%20pantalla%202024-12-14%20113116.png?alt=media&#x26;token=ee45d78c-fce3-4236-94d0-ecbddaad61b9" alt=""><figcaption></figcaption></figure>

### Preset Manager

***

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FmpcsCwJSyHvJZRSehO4J%2FCaptura%20de%20pantalla%202025-01-25%20163140.png?alt=media&#x26;token=c782eeca-b0d7-46b0-824e-54f204580adf" alt=""><figcaption></figcaption></figure>

The **Preset Manager** allows you to create and save presets, making it easy to reuse your customized settings. You can choose to save presets either temporarily or permanently within the project:

* **Temporary Presets:** These are deleted automatically when the editor window is closed.
* **Project Presets:** These are saved in the directory `.../Icon Generator/Presets` for future use.

> 💡 **Note:** When creating a preset, it’s recommended to use a clear and descriptive name, including unique identifiers, to avoid duplicate or unnecessary presets.

### Export Settings

***

<figure><img src="https://3907550989-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYH8zSxn3d9Ari1ugSpaO%2Fuploads%2FqTZ9R1ekuAsKCEHFDwOY%2FCaptura%20de%20pantalla%202025-01-24%20002815.png?alt=media&#x26;token=ee96bcfc-2be2-4462-9503-e2273c85ee35" alt=""><figcaption></figcaption></figure>

* **Path:**
  * Save icons inside or outside the project
* **Compression:**
  * Select texture compression level
  * Reduces final image file size
  * "Compressed" is usually a good default option
* **Additional Export Options:**
  * **Ping Asset On Save:** Locates saved icon
  * **Auto Open Asset On Save:** Opens the image after export
  * **Enforce Size Multiple of Four:** Optimizes texture dimensions

### Tips

* Use clear, descriptive preset names
* Experiment with different effects and settings
* Check exported icons to ensure desired quality

### Troubleshooting

* If preview doesn't update, use the Refresh Preview button
* Adjust preview resolution if experiencing performance issues

Good luck with your project! 🚀
