#vyx.resources

// about UI mods

They usually edit one of these two UI files, or both:

GFX files: often edited to add/modify the functionality of a UI.

Examples: More Traits in CAS, Searchable menus/UIs, UI Cheats Extension, TOOL, etc.

Texture (DDS) files: often edited to change the texture of a UI.

Examples: CC wrench icons, main menu/loading screen override, and world map replacements.

Both: UI recolors often edit both files above as text colors are handled by GFX files and the textures are edited separately. Some main menu and loading screen overrides also edit both if there's a new functionality added to them.

// GFX and texture file(s) comes as a set for the UIs they're made for

For example, the main Calendar UI comes with one GFX file (calendar.gfx) and one Texture file (instance # 999522802c8b1c5c). Meanwhile, the Edit Holiday & Plan Event UIs have their own set of GFX & Texture files. This can be further confirmed by checking the GFX file and see which external image it's referencing to in the file.

because of this, it makes it easy to pinpoint which UI mod is causing a glitch, hence the creation of this guide :p

// cause of a UI glitch

Whenever there's a new game update, the GFX and texture set are updated together if a new functionality is added to a UI. With that in mind, when you have a UI mod from the previous patch laying around, you now have one half outdated/modded UI file (i.e. GFX) and one half up-to-date/unmodded UI file (i.e. UI texture) loaded up by the game (or vice versa), and that discrepancy in version is how you get the UI visual glitch!

Here's an example of a UI known to break (guicomponentlibrary.gfx):

There are instances where only the GFX file gets updated and not the textures, causing little to no visual bugs, or in another case, having 2 outdated UI mods from the same set (i.e. custom wrench icon & more traits in cas mod). So even if there seems to be no visual bugs, some UIs may still not function as it's supposed to (mainly after big game updates). Always a good idea to check all of your UI mods.

// list of UI mods and their associated glitches

what you're here for :-) // ⚠️ important note: I'm reproducing these examples using old UI files I exported & edited myself and doesn't reflect the current state of the mods included below. UI mods that haven't been broken since Dec '24 aren't included. Use this only as a frame of reference!

// Convert .DDS files to .PNG in bulk

Oftentimes, you can use S4S built-in export all feature to export all images/swatches at once and give you the .PNGs you need. Sometimes, you can only do so via the batch export button, which only exports them as .DDS files (and they usually need further tweaking if they have alpha/transparency and you want to further edit them). Here's a quick way to convert many .DDS files into .PNG!

tools used: photopea

Batch export all textures that you want to edit from your package file

Using Photopea > click File > Automate... > Convert Formats > select previously exported images and choose PNG as format

Save .zip file and voila! They'll all retain the filename structure that S4S uses for batch export/import :-)

// Convert .PNG files back to .DDS in bulk

Some textures can only work properly if the file format imported is in .DDS. Unfortunately, converting them into .DDS using Photopea's feature wasn't working for me, so instead I found and used this program that does it automatically! (here I am contemplating all the time spent on manually converting files one by one and complained all the way through :'))

tools used: DDS converter

Source Folder: where your .dds files are; Target Folder: where your .png files are saved

To input, just drag and drop the folders into each text box and it will automatically fill in for you their folder paths

Choose the Output Format and Options depending on what you need, and Convert! (Check via S4S to see which settings you need to input.)

For example, some UI-related textures must be imported as .DDS with RGBA8, w/ alpha/transparency and no mip maps. So I selected RGBA as the Output Format, enabled alpha in Options, and disabled everything else.

// Photoshop's Actions for anything that can be automated

I won't get too much into this since there are tutorials using Photoshop Actions for recoloring a base texture/making an all-in-one recoloring set, but it can also be used to apply a set of steps/actions to several texture files, which leads me to the next point/tip:

// Photoshop's Batch feature

Say you have 50+ similar looking but not 100% identical textures that you want to edit, but going to each file and editing them takes a bit of time of your day. Easy fix!

tools used: photoshop/photopea

Create/record actions as usual on one of the files (and make sure it works well/comes out right).

File > Automate > Batch

Select your recently made action > choose source files/folder you want to apply the action to.

⚠️⚠️ Make sure that you don't have the .PSD file of the texture you were editing on in the source folder, or else the batch feature will apply the action on your .PSD file as well and mess it up (guess who learned the hard way? haha)

Choose Destination as either Save and Close (will override) or Folder (makes a duplicate, can be renamed, more safe too).

examples of what I've used it for: - applying different backgrounds for my TidyCAS thumbnails - making previews for my CAS lighting mods - recoloring 30+ ts4 cursors into ts2 style cursors - editing 1000+ texture files for the club gathering icon (only took 20~ minutes) - recoloring 2000+ CAS/BB thumbnails for my Pastel UI by copying an adjustment layer for one color (manually) then letting the action do the rest to my existing icons (pasting and merging the layers together, all automatic)

// Export layers to files

Getting sidetracked a little bit, but if you use an all-in-one recolor action set that applies different color swatches to different layers, you can use Photoshop's Export Layer to Files feature to quickly export them into their own files! I wrote about its features >> here <<

// Photoshop's Layer Comps for everything in general

Honestly? Such an underrated feature and one I'm most excited to use/talk about. With S4S batch feature in mind, layer comps can be used to rename & export your files in the format that S4S uses to batch import them (so you don't need the hassle of manually saving textures, most of the work is done at the initial stage). What's great about this is that you can:

Utilize layer comps for recoloring instead of using photoshop actions + you can easily update them if you make any changes to the base texture/adjustment layer :D

(Better yet, you can create a base .psd file with layer comps for each swatch, then copy that base file whenever you start a new recoloring project. I've tried saving a psd with layer comps (pic below) vs a psd w/ all-in-one action set applied to the base texture then merged, and it's 28mb smaller in size! Very adjustment layer friendly and doesn't require you to make a complicated action set.)

Create multiple variations of your texture in the same .psd/project file and save them as layer comps, instead of trying to remember which layer to show/hide.

examples: - making my eye recolors where I've separated the iris, pupil, and sclera into different layers and enabling/disabling when needed so - making my highlighter set where I've separated different sections of the highlight (forehead, nose, cheeks) into diff layers that I can show/hide - making my custom texture for CAS/BB thumbnails for my Sims 2 UI mod in very few files instead of making different .psd files per icon.

Rename the layer comps to match with the original texture(s) file name, so that they can be used for batch importing later on.

(When you import multiple files into an opened photoshop document (not as individual files), it will keep the filename it has on, and you can copy those filenames as you create new layer comps.)

Last but not least, if you make a new layer or added a layer mask to the base texture, you can add those additions to the existing layer comps by selecting all layer comps > select only the layers you've modified, then click on the eye icon (third from the left) so that it shows up on all layer comps. You can reorder the layer comps anytime you want as well.

// Batch export Layer Comps into files

Now if you went 👀 at its features, then this one's as exciting, because the layer comps you created can be exported with the name that you gave the layer comps with! To export them:

File > Export > Layer Comps to Files

Enable Index if you didn't name the layer comps properly (but have arranged them in the order you want them to show up in). Useful too if you add new layer comps in between and don't want to rename everything else that comes afterwards.

// Bulk Rename Utility

On the occasion that I don't name my layer comps properly (like the hair swatch example), I just use the bulk rename tool to add the necessary prefix/suffix :-) and practically anything else you may need the tool for.

here's an example when the layer comps are exported with index # enabled (starts as 0000).

// S4S batch export & import

// exporting the UI image

While you can access them via S4S then convert them using UI Texture Squasher, here's a quicker way to go about it by skipping the initial file conversion altogether.

Open Sims 4 Image Viewer and go to File > Common Files > UI

To find the wrench icon, filter for 0x09BBBF9DC6153DF9 [1]

To find the CAS swatch icon, filter for 0xD518B5D7A3BBD372 [2]

"0x" must be included or else it won't show up in the filters.

Right click on the image, select Convert as one PNG [3], and save it someplace you'll remember. Use the newly converted file as a base to work with.

🗒️ To use my UI recolors file as a base, you can open these package files in the Image Viewer and export the same images (I recommend having the original as well as my UI recolors to make editing easier):

For the wrench icon, it can be found in the "0_Base UI 2 - GUI - Texture" file from the _CONFIG folder.

For the swatch icon, it can be found in the "CAS - Catalog - Texture" file from the Textures folder.

You can also use the image viewer to explore in-game textures in case you ever want to create texture overrides :-)

// adding in your custom wrench icon

After opening up the exported image in your editing program, find where the wrench icon is and replace it with your custom wrench icon, whether from an image you've saved or drawn. Save the image when you're done.

🗒️ To also apply it to my UI recolors, simply copy & paste over the layer to my UI recolor image. Doing it this way will ensure you don't place it outside of its assigned boundary (otherwise parts of your wrench icon will show up in other UIs if you go over it).

// converting & importing the UI file

Open UI Texture Squasher

Select your edited image to convert it [4}

To make locating it quick initially, Ctrl + Shift + C (windows) on your image to copy its filepath, click Select to browse, and paste in the filepath onto the File name text box.

Once saved, it will save as 2 DDS images [5] but before you import it into S4S, there's a final step to do.

The 2 exported DDS files are Group ID "00064DCA" and "00064DC9"

// removing semi-transparent dark boxes

If you import the converted file as it is, it will produce a semi-transparent box around the wrench icon and on other UIs sourced from the same image. Here's how you can fix it.

Open the 00064DCA DDS file in GIMP

Select the bucket fill tool [6] and set the options to Fill similar colors [7], Threshold to ~9.0 [8], and Fill by method to Red [9] (it will use the red channel which stores the alpha/transparency data and gives a better cleanup).

⚠️ Make sure the foreground color is set to black / #000000 [10] ! This is important as this is used to fix the transparency issue.

Fill in the areas with black on where it should be transparent. You can switch between black or white to see which areas have not been filled yet and fill in the unaffected areas.

Here I'm using blue to show which parts should be filled with pure black.

Go to File > Export As, then choose BC5 / ATI2 as the compression method [11]. Alternatively, you can use Overwrite [12] to replace the image while keeping the compression method.

Ctrl + F2 is a custom shortcut I assigned personally and is not the default shortcut for Overwrite.

Once you've saved your changes, open your package file and import the 2 DDS files into their respective resource [13 & 14].

You can choose to replace my package file for personal use, or if you plan on sharing it, duplicate my file and rename it in a way that it will override my file. (Adding a ! or !! at the beginning of your filename usually works.)

Once you've done all that, check your game to see your new custom wrench icon! :-)

// extras

Here is a comparison between keeping & importing the converted file as is versus doing the clean up in GIMP:

Very subtle semi-transparent boxes can be seen on the wrench icon sprite.

The semi-transparent grey boxes are caused during the image conversion process, producing a #050500 black instead of a pure #000000 black (which is what makes if fully transparent), hence why you'd want to fill in the correct color in GIMP :-)