I made a simplified HUD for myself and decided to turn it into an easy-to-use template so you guys can use it too 🙂
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: IM#6715
Table of Contents
!! If you use this Template, you must credit me in your post and give it the tag Simple HUD !!
- 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/Paint.net 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: https://www.uhdpaper.com/ (Just search for the skin name or champion)
Embed a youtube video if you have one, if not, delete the section.
Just download the whole folder and extract the Hud Template.zip 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.
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.
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.
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.
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”.
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 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 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.
Now on how to install the HUD.
First of all open up LCS-Manager and click on the 3 lines to create a new Mod
Fill out the Information and simply drag and drop the UI.wad.client folder into the “Files” window.
Now just check the square in front of your new Mod and press on “Run” in the top right corner. Done 🙂
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.
Editing the Shop buttons
Use the .psd file “Shop Icon template.psd”
All the 4 different shop buttons in the file should use the same image, so I created shop icon template.psd for you to make the shop button once and import it 4 times:
Place your shop image however you want
Then make sure to disable the red layer that says “DELETE BEFORE EXPORTING” and export as .png.
Lastly just place it inside the shop buttons. It should fit perfectly.
04.01.2021 First release
- ImprovedScoreboard image style
- AddedBetter gold sheen on Metallics (can be turned off by turning off the layer style)
- Fixedinconsistent Alpha on Scoreboard
- AddedNew simplified circle
- FixedWeird Metal overlap on the scoreboard
- ImprovedSmall metal icons
- AddedStats, Masteries and Eternals on the HUD circle are now editable (see Ahri image above)
- ImprovedLevel-up icons
- ImprovedScoreboard Champion Hover
- AddedBorder for activatable items to recolorable channels
- FixedRiot’s overlapping Health Bar on enemy focus
- FixedLots of small changes & some fixes
- AddedSkill level indicator circle to recolorable channels
- Fixed scoreboardatlas.psd now exports as .dds properly again
- Fixed improved Riot’s misalignedment on perksatlas and statspanel_atlas
- ImprovedQuite a lot of stuff. It’s now the final version of the Template, unless Riot changes how the HUD works or anyone reports bugs.
- AddedTemplate to make one image to place in all 4 shop buttons so they work easily, clarified blue, red and green layers to be disabled on export
- Improvedsome .psd files
- AddedNow comes with all files for the in-game shop