XXHighEnd

Ultimate Audio Playback => Scaling and Skinning => Topic started by: PeterSt on June 25, 2012, 01:53:16 pm



Title: 02 | Skinning
Post by: PeterSt on June 25, 2012, 01:53:16 pm
Here is the fun part of XXHighEnd, just for when the best Sound Quality is not enough for you;

Introduction

Real Skinning as such is not really in order, but what you can do with the provisions applied for you, comes close to infinity sufficiently enough. So, apart from the Scaling you can define your own colors for each of the general elements and in addition, but merely, you can create your own gradient backgrounds with generic means that will allow people to find new cool backgrounds in even a year's of time and beyond.
The module for this allows you to make screenshots of whatever it is your art-soul created, and apply that as images for the buttons. Those buttons can be rendered again with colors and really within no more than a few seconds (think 20) you will be having a totally new look from what you created earlier, you being sure that you never want to dive into it again because it looks so way cool now.
An infinite number of "skins" can be saved and shared with other XXHighEnd users.

How to get there

(http://www.stordiau.nl/xxhighend/Skinning00.png)
which brings you to this screen :

(http://www.stordiau.nl/xxhighend/Skinning01.png)
General working

What you see in the last screenshot comprises the colors you will see throughout in XXHighEnd. So, if we, for example, change the Background Color to black

(http://www.stordiau.nl/xxhighend/Skinning02.png)
which you can do via the Get button, all the backrgounds turns to black :

(http://www.stordiau.nl/xxhighend/Skinning03.png)
Wel, wasn't that obvious.

Of course it is the art to have a nice consistent color scheme. So, maybe you want to change the Image Button Background Color to something else now, so it doesn't look so dull :
(http://www.stordiau.nl/xxhighend/Skinning04.png)
this time by means of a "custom color". Click on "Add to Custom Colors" there

(http://www.stordiau.nl/xxhighend/Skinning05.png)
and next click OK. Result ?

(http://www.stordiau.nl/xxhighend/Skinning06.png)
Maybe too much of it.

All right. When making things extreme, let's make the text Color somewhat extreme. Notice that the Text Color can not be defined in Custom Colors.

(http://www.stordiau.nl/xxhighend/Skinning07.png)
Oh dear.
Yea, notice this is saved drirectly. Nothing to do about it. But as we'll see (later) at the Gradient Designer - in there we can save all of our settings explicitly and thus :yes: revert back to them.

(http://www.stordiau.nl/xxhighend/Skinning08.png)
Let's now switch this one on.

(http://www.stordiau.nl/xxhighend/Skinning09.png)
Ah, that's what happened. Hmm, doesn't go much with our green now. So, we'll turn the green into something more matching to that, but besides, these images showing together with the text doesn't fit well. Ok, we can decide to switch off the Text for those buttons (see earlier picture and the textbox for that, but maybe we have a better result if we scale up somewhat, which is what we liked better maybe anyway.

(http://www.stordiau.nl/xxhighend/Skinning10.png)
So let's change the 1.40 into 1.7 and see what happens.

(http://www.stordiau.nl/xxhighend/Skinning11.png)
So, together with some color change of the Text - which is still extreme, yep, that did it.
But wait, see what happened to the left pane ? It was dragged smaller by means of the [ 1 ] button you see at the top (also notice the drag marker on it). So, what happened because of the scaling is that the screen was found to be too large in general, and with thinking that we don't need that left pane with its info, we just dragged it smaller.

Well, this gives you the idea for the basics. But watch out, these are basics only. So, what about something like this :

(http://www.stordiau.nl/xxhighend/Skinning12.png)
Okay, let's try something.

(http://www.stordiau.nl/xxhighend/Skinning13.png)
Yeah, what the heck did I choose there. My secret. But anyway, this doesn't go along much with the blue text. Oh well, we'll see about that later.

(http://www.stordiau.nl/xxhighend/Skinning14.png)
Ok, what's this for then ?

(http://www.stordiau.nl/xxhighend/Skinning15.png)
Oops. Okay, that may sound logical. There already are things like "images" on our buttons. Fine, we'll uncheck what's asked for first. See where the mouse pointer is.

(http://www.stordiau.nl/xxhighend/Skinning16.png)
That brings os back to these first. Now apply an own image to that ...

(http://www.stordiau.nl/xxhighend/Skinning16b.png)
Notice : In your XX folder there's an XXImages sub folder with these samples in it. Later, in the Gradient Designer we'll learn who we can easily make those ourselves.

(http://www.stordiau.nl/xxhighend/Skinning17.png)
Oh wow. Hey, that's starting to look slick now.


All right. That should be enough to get you going.
Now, in the standard settings there's some "gradient background stuff" delivered. You can readily apply it. So, although it is part of the Gradient Designer manual how to make those Gradients yourself, here's what you can do with them once they are created (like how XXHighEnd is delivered to you with a working example - and notice we reverted to the standard settings first, so this does not proceed on what we did in the above) :


Apply your Gradient settings to the Coverart

With the slider you see here at the mouse pointer :

(http://www.stordiau.nl/xxhighend/BlenderSLider01.png)
you can apply your Skin settings to the colors and color-layout of the current Coverart in the left pane.

(http://www.stordiau.nl/xxhighend/BlenderSLider02.png)

See ? that works; The slider is now at position 2 and the Coverart colors adapt to the XXHighEnd screen. Still you can see the general Gradient structure through it.

Slider position 1 (set it at the bottom) doesn't incorporate the Coverart's colors, while position 2 and 3 both interpret the coverart by different means. Per album you may briefly try which one looks best. Position 4 just uses the normal background (though set by you with the Skining feastures we talked through earlier).

(http://www.stordiau.nl/xxhighend/BlenderSLider03.png)
(position 3; see ? still Coverart colors but now differently applied)

(http://www.stordiau.nl/xxhighend/BlenderSLider04.png)
(position 4, top position; no Coverart colors are applied to the Gradient settings)


Have fun !