Vital Skin Designer *Taking Requests*

I’m currently working on my own Vital Skin designer with the goal of making flexible and adaptable themes.

Prototype GUI

The basic idea is you create a set color theme, red/white/black, and then apply filters to those colors to get all the other colors for the theme.

The flexibility and adaptability comes from being able to change 1 color and having everything based off of that color change too. Theoretically, you could create a theme from 1 base color and manipulate it with filters to create all the other colors for the theme, giving you the ability to change the entire vital skin from a single color.

What kind of functionality do you guys want to see in this program? What things about vital skinning could be made easier?

1 Like

very nice hope you get it working soon!

looks like there is all ready lots of stuff possible, so its hard to say what could be use full to add.

if you could change effects or other stuff on its own would be nice. maybe even make own groups on whats changed.

something like this maybe? or is it all ready possible to set it up with the filters?

The idea is you take a color and then with a single filter, you can transform it into any other color, or you layer filters using prefabs.

So yeah, you could get all those schemecolor values using filters, if you know how to manipulate the color. I might add some filter presets to do something like this, but I don’t know much color theory, so if you know how you would get those different values, let me know.

Have a look at my Ableton Vital themes. I include a script that builds them, and it does something similar by defining colors and some lighter/darker versions of them, and then it builds out the theme using a template.

Might be useful, or not, just thought you should take a look in case there is something in there that might help.

Could you link it? Building templates will be a big part of the program so seeing how you did it would be very beneficial!

This is great, the comments at the start will be helpful when making templates! I’ve wondered how the Vital popup logo got it’s colors. Do you think you could put together a sort of short guide covering a couple of the more obscure and unclear areas of vital skinning? Of course, all credits would be given.

I had to struggle through it back then, and I have retained very little, I’m afraid.

I wish you luck, though - anything to make the process easier would be a good tool for the community!

1 Like

had in mind that you can enter numbers into vital skin designer, but that only works up to 99.

anyways for the monochromatic scheme for red #FF0000 is in rgb 255,0,0

its 255/6 --> 42,0,0

but no clue how that could work with hex8 or whats needed.

popup for login or where you change audio device and stuff?
any other missing?

You might want to check with Matt before going any further. It’s possible the new graphics engine may make your skin designer obsolete or require you to rework it significantly.

Or it may not…so probably better to get clarification before putting in any more work.

Good idea, from what I gather about the post, the GUI will differ in performance, not visuals, but I could be wrong.
I’m also making the program so that the color defining and .vitalskin creating are two separate-ish processes with minimal interaction; so even if the method of creating .vitalskins was changed, I’d be able to quickly update the program to support the new ones.

for hex8, you just have to append the AA value on to the end of a hex6 value, I’ve added an Alpha slider to the filter section to achieve this:

Unfortunately displaying transparency is difficult with the UI library I’m working with though, so that might be a problem. If anyone knows how I could calculate a new color value given a color and transparency value, that would be an alternate method I could use.

If I am right in what I’m thinking you mean then you could grab the color HEX from the background then use a return method/function to spit out something using a manipulation of this: t = op * c + ( 1 - op ) * bgc

t = target
op = opacity
c = color of the given color
bgc = the background color (e.g. the programs ui’s color)

Much like: this example

Yeah I’m thinking of doing something like that, but calculating it for the two colors of a transparency grid.