by Yoru in
Tutorials 2D-Editing Creation Game Interface Simple HUDs
Click to rate this post!
[Total: 1 Average: 5]

This tutorial will teach you how to use my Simple HUD template to create your own image-base HUD.

If you encounter any issues with this tutorial or you don’t understand part of it, you can ask for help on the Killerskins-Discord server
or you can contact me directly: Yoru#1006

Required tutorials

In order to follow this tutorial you must understand and be able to follow the following tutorial:

Required tools

  • Program: Photoshop, newer versions are better, as old versions don’t support the use of frames, but it will still work with the layer masks only.
  • However: You can also use Photopea to edit the .psd files online and edit the .dds files in gimp/ etc.
  • A bit of Photoshop skills, aka. menuing and adjusting
  • .dds plugin: NVIDIA Texture Tools : Download
  • Intel Texture Works: Download (Option 2)
  • Image you want to use as the main HUD image. Recommendation for high quality LoL splasharts: (Just search for the skin name or champion)

Video tutorial


Due to a change in filetype from .dds to .tex you now need to convert all your .dds files to .tex after editing:

tex2dds by morilli

Written tutorial


Just download the whole folder and extract the Hud created by Google Drive. Keep the file structure.


All the folders are set up in the same way that they are in the UI.wad.client file, so don’t move any files.

You will find two types of files: .dds files and .psd files.

Editing .dds

The .dds files are simple files, where you only have to change the colors:

Just open them per drag and drop in Photoshop and edit the color to your liking.

Editing .psd

PSD-files are set up so that they are easy to edit: All the important editable stuff is in layers.


To change the metal area, called “Metallics” in every file you just have to create a Hue Saturation layer on top of it and change the color to your liking, then create a clipping mask from it.

Background/Color layers

To change the sometimes visible background area you also create a Hue Saturation adjustment layer as a clipping mask over the “Backgrounds” (sometimes it’s also simply called “Colors” layer.

Extra areas

You can also fully edit the area like health or mana bar colors, for that you need to make layers in “Bars”, and stuff like the XP bar, ult indicator and recall color is in “Indicators”.

Replacing Images

Now the interesting part on how to actually replace my preset Battle Queen Diana images. All those images are in frames.

Important note: the RED area means that this part of the HUD will never be visible, so make sure that there is nothing important of you image there. The LIGHT BLUE area means that the image below is visible at times, for example before the enemy has bought any items. The GREEN areas are areas that are never fully visible, but they vary in shape and size. The indicators are not fully accurate, more like a guideline. You will need to switch those off with the eye-icon next to it before you export the image.

You want to click on the right icon of the image which you want to replace.

Then just drag and drop in the image of your liking.

Now you can see the border of your image, drag on the edges to resize it and drag it around to place the image where you like it.

And as a last step just turn the red, green and blue layers invisible.


After you did all your changes you can just simply export it as dds.

To do that, go to File – Save As..

Then you will need to change the Filetype from “Photoshop (*.PSD;*.PPD;*.PSDT)” to “DDS – NVIDIA Texture Tools Exporter (*.DDS;*.DDS)”. Dont Change the name and just press “Save”.

Then the NVIDIA texture tools exporter will open. There you only have to change those two settings:
The format is BC3, in other words DXT5.


Creating Photoshop-Actions for repeating color-changes

As you have to recolor the Metallics and Backgrounds a lot of times to the same color I recommend making a Photoshop action for both layer types.
For that, open up the select the layer you want to edit, then go to the Actions panel and press on the + to create a new one.

It automatically now starts recording what you are doing in Photoshop.

So create a Hue-Saturation-Adjustment-Layer, edit the color to your liking and create a clipping mask from it.

Now go back to the Action panel and click on the Square to stop recording.

Now you can just replay the action and it will do the exact same thing you just did. Always select the layer you want to edit first.

Enjoying our content? Consider supporting our website on Patreon!


 by Foxtrot in 19/06/2022

Hi, I'm trying to install a Loading screen. the Trying to edit srbackground.csscraps.tex but I dont know how to convert it into a DDS. or viceversa to convert a DDS into TEX. Any help, please?

 by TheCactusman in 05/04/2022

I did everything as stated by the guide, but the moment I load it into the CSLOL-manager and run it and start a game of league, nothing changed, I even tried diableing the other mods before running, but still nothing happens.

 by Yoru in 28/05/2022

did you convert the files to .tex

 by PinkyKinky in 08/10/2021

I did everything by your guide, and the background images work perfectly, however where the items+abilities+minimap and other accessories should be, there appears to be a black layer blocking it off. I checked everything, and it's supposed to work but it just wont. Please help I'm desperate.

 by Yoru in 09/10/2021

you are not using the proper dds compression most likely ask for help here:

Comment your feedback or questions here (English only!). If you get any error ask for help on our discord instead: