by Yoru in
2D-Editing Creation Creation Tools Templates Tools Tutorials

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 ๐Ÿ™‚

Here you can find all Skins using the SImple HUD Template

!! If you use this Template, you must credit me in your post and give it the tag Simple HUD !!

Video Tutorial:

Slightly changed up the template again after this video, but not too much ๐Ÿ™‚

Written Tutorial:

Requirements

  • 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 THIS 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:
  • Image you want to use as the main HUD image.

Extraction

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

Usage

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.

Metallics

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 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.

Export

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.

Installation

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 ๐Ÿ™‚

Tips

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

All the 4 different shop buttons in the file should use the same image.

So here’s a tip on how you can easily get the same placement for the image:

Place the first image. I usually start with the top single button. Then place a guideline to either the right or the left side of the image.

Press Control + T while having the image selected to go into Transformation Mode. Then copy the image size.

Now go to edit the first Button of the bottom three. Drop in your Image, go into Transformation Mode again and fill in the image size you copied before to get it down to the same size. Then just move it up to roughly the same height of where your first cutout is and align the right or left side of the image with the guideline.

Now delete that guideline and create a new one on either the bottom or the top of your place image to repeat the same steps of resizing and placing your image. It’s a bit harder to align the bottom ones so you’ll have to just eyeball it a bit.

And done ^^

Changelog

1.0

04.01.2021 First release

1.1

08.01.2021

  • ImprovedScoreboard image style
1.2

09.01.2021

  • AddedBetter gold sheen on Metallics (can be turned off by turning off the layer style)
  • Fixedinconsistent Alpha on Scoreboard
1.3

10.01.2021

  • AddedNew simplified circle
1.4

11.01.2021

  • FixedWeird Metal overlap on the scoreboard
  • ImprovedSmall metal icons
  • AddedStats, Masteries and Eternals on the HUD circle are now editable (see Ahri image above)
1.5

12.01.2021

  • ImprovedLevel-up icons
  • ImprovedScoreboard
1.6

14.01.2021

  • ImprovedScoreboard Champion Hover
  • AdjustedRecall
  • AddedBorder for activatable items to recolorable channels
1.7

17.01.2021

  • FixedRiot’s overlapping Health Bar on enemy focus
1.8

24.01.2021

  • FixedLots of small changes & some fixes
1.9

01.02.2021

  • AddedSkill level indicator circle to recolorable channels
1.10

24.02.2021

  • Fixed scoreboardatlas.psd now exports as .dds properly again
1.11

05.03.2021

  • Fixed improved Riot’s misalignedment on perksatlas and statspanel_atlas

FINAL

28.03.2021

  • 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.

Completely optional: if you enjoy my work you can…

…buy me a coffee ๐Ÿ™‚ (Ko-Fi Donation)

Buy Me a Coffee at ko-fi.com

…directly donate via Paypal ^-^

No Comments

Leave a Reply