In this Complex User Interface tutorial we will build a fully functional UI with multiple Screens: main screen, FX screen and about screen. Whereas the FX screen holds a sub menu for two different FX: a LoPass filter and a LoFi FX.

Please accept YouTube cookies to play this video. By accepting you will be accessing content from YouTube, a service provided by an external third party.

YouTube privacy policy

If you accept this notice, your choice will be saved and the page will refresh.

In this article we only create the GUI with a functional Navigation, the FX Knobs are not functional! Refer to the engine par article to let them control the Kontakt engine.

This UI was made with Kontakt 5 so it seems a little over the top compared to nowadays approaches. It is still recommended to read this article if you are new to Kontakt Scripting because it may still help you to understand KSP better. Read more »

If you are missing a detailed list of all Kontakt fonts, here is a little tool for you. This is a simple nki for Kontakt 5 which lets you display all font types on miscellaneous background colors for better readability.

UPDATE: since Kontakt 6 we can now create and use own fonts. Read this tutorial and use our font type generator

Read more »

Unfortunately once the initial wallpaper is set, we can’t alter the image file anymore. Even not by setting different initial wallpapers for each script tab. Because the last applied wallpaper will be the one and only initial wallpaper for the whole instrument.

But we can either offset the initial wallpaper that means moving it via set_skin_offset or we can use a label element to set up multiple backgrounds which is covered in this article. Even dynamically like switching them when hitting a navigation button.

Read more »

The instruments background image is called “wallpaper”. Its’ the basic background texture where all UI elements (knobs, buttons etc) get layered on top. Just to give you an example: we could take our default graphic software and design a realistic synth surface wallpaper (png file) containing “sockets” for some knobs and buttons with detailed shadows, light reflections etc. After that, we can create the individual knobs & buttons and place them exactly inside the designated sockets and areas by layering them on top of our background wallpaper.

Read more »