Welcome to the most slick user interface feature of XXHighEnd !
With this, you will be giving your XXHighEnd player a look within a couple of seconds that makes you not want to operate Unattended Playback Mode anymore. Or at least you wil be happy to use Alt-x to see your creation again.
Yes, after that couple of seconds you will say WOW to yourself and be completely satisfied. But dive into the Gradient Designer once again, and again within two seconds you will shout WOW. And again, and again. The possibilities are endless; The looks you will be making too. And watch what others made of it.
So here is the manual to it ? no way. There's nothing but the ToolTips on the sliders in there, and even that won't tell you a thing. It is all elementary stuff for which no manual can exist. Great ?
Yes. You will see. And the fun : you won't be knowing what you are doing at all.
WOW.
What *is* needed though, is your general knowledge of what can be achieved and what can be combined. Or how to combine it. So, be sure to carefully read the below elementary features, which go beyond the Gradient Designer alone. You will see ...
First a few preparations :
The screenshots you'll see below are taken from an XXHighEnd screen scaled with a factor 1.40. This is not important at all, but it may make you understand better why you see things differently from what you see on your own screen.
Notice this screen is from the Skin Settings function, which is assumed known to you by now (
Skinning).
Next is is crucial (for following this tutorial) that you set the slider in the left of XXHighEnd all the way to the bottom :
because notice that whatever happens next in this tutorial takes what you see above as a base. It will look similar to what you received from your XXHighEnd 0.9z-7 install. Also try for yourself what happens when you briefly set that slider one position up and take notice of the fact that whatever you'll see on your XXHighEnd screen is taken over in the Gradient Designer for a base. In this case (picture above) watch the prominen diagonal stripes.
- Get there by means of the [ S ] button :
This is what you will see
As you can see, 5 colors are available to us to make up a "gradient". Notice that a gradient is something like one color floating into a next with a certain amount of strength. So, 5 colors and the colors can be created as well as the strength of them.
- In the above picture you see all the color sliders in a middle position. This tells nothing different than that no color has been selected; Let's select the first color :
See ? now the color sliders have adapted to the color chosen. Notice that this actually is from a before setting and in this case it was done by us at Phasure's.
Here the rightmost color slider has been dragged down all the way. This is the Alpha Blending slider. Let's say it takes out the brightness of a color. But see the XXHighEnd screen above ? that adapted right away.
Here the Red slider was put up all the way (the Alpha slider being back at full output (with no output (0) the color won't show at all).
And put down all the way. So what's left is a Blue and Green.
Here we selected the third color
and put down the Red of it.
That's how to work with the color sliders.
So what about this part ?
Look at those checkboxes both checked now. All went black of it.
Now watch out : here the button under the mouse pointer was clicked, but next the UpArrow key was used to set it one step higher. This is important because otherwise you would not be able to make this one step, and this can be important at times. Btw, this now happend to XXHighEnd :
And using one more UpArrow :
So what happens is that those middle checkboxes position the angle of the gradient colors in exactly 45 degrees which make cancel all out. Ticking up that slider one position and the colors are shown as they are, and doing that another time and they will start to blend (last picture).
Here you see a few ticks more on that same slider. Quite cool already eh ?
Notice that we didn't touch the other 3 of those sliders yet. But this happens with 6 or so ticks upwards on the slider you see under the mouse pointer :
Watch that slight change of blend towards the left.
This time we gave 2 ticks upwards on the slider you see now under the mouse pointer. See ? the boundary of the blend moved towards the middle.
- On to something else :
Here the lastly used slider was set back so that went horizontally again and now the slider under the mouse pointer was given two ticks down. Cool ? maybe. But now watch what we are going to do :
What we did for starters with the before setting was creating a repeating gradient with the height of about a button in XXHighEnd. And what you see here is a small cut out of that which we can save into a folder of our choice.
Like in the XXImages sample folder under your 0.9z-7 XX folder.
So there it is now.
What's next ?
Well, next is that we'll grab that little image via the Skinsettings function. Remember, you already read the tutorial about that ...
What we will do is set it as the background image for our buttons ...
So, click the button under the mouse pointer above, browse to the folder you just stored the image in (could be that sample XXImages folder) and get it in ...
Ouch, what a mess.
Yep, but this is because we used the Gradient Deigner merely to create us an image for the buttons, while it is still applied as a general background. Now, remember we checked those both checkboxes towards the start of this tutorial ? when you uncheck them and check them again we are back at black and this comes from it :
Aha.
But see that red above and under the button image ? that is not what we created. But still it is what we implied. This is because of this color denotation in the Skin Settings :
Here you see it when we made that green.
And with a somewhat better matching orange for Texts.
- Hey, look at that Usher Coverart; that's somewhat orange as well. Hmm ... can we use that ?
Let's indeed put that slider one position up;
No effect is to be seen anywhere. But why ? we set our Gradients to be black all over. Okay ...
This time we only moved up the slider under the mouse pointer a little, and this now is the result;
Let's try to make something out of that.
Here the same slider was used to first enlarge the gradient repeat distance. Fine.
Here the slider at the bottom under the mouse pointer was slided to the left.
Now the left slider was moved almost to the right. Just so that a little yellow remains.
That yellow color must be color number 5. Here Red and Green are all up, so that must be yellow. Right ?
With green removed, red remains.
A little trying brought is to remove the Red from color 1.
While checking that checkbox you see here we bind the movement of the sliders above it to echother. Moving either of them can be seen as mainting the aspect ratio - or better, the angle between how the gradients work out. So, when moving either slider, the distance between the gradients remain, but the total angle varies. With that checkbox unchecked, the angle of the whole lot varies, but the gradient (repeating) distance changes as well. Anyway :
With (mind you !) the slider at the left set back to the lowest position, it now looks like this.
Move either of those sliders down, until the red line starts to cross the Playback buttons :
Or even further until you see this :
Went too far ? well, sort of;
The Alpha blending of the blue now masks out button images. Okay, so what to to about that ?
We may remember that we ended with adjusting the main blue color of our gradient. The checkbox for that color 1 is still checked. And hey, the Alpha slider is at max. This means "nothing to see through". Okay, so we bring that down :
Hey, that worked.
- Let's save our work in a Gradient Preset file :
Ok.
But also save it to the XXHighEnd form now, assumed we are satisfied somewhat.
After this we can quit XXHighEnd and the Gradient settings we just applied will reappear. When we don't do this, we will be back where we started (but can load our saved Gradient Preset file).
With some trial and error on the four sliders in the left, you can end up with this :
Just copy the settings you see at first and next notice that it may take quite some effort to make it look justified *if* you want that red line through the buttons as well.
After saving this to XXHighEnd again, this is how it looks without the Gradients applied (watch the top position of the slider in the left) :
and see that now the buttons do not blend with anything.
But with that slider in the 3rd or 2nd) position the Gradients are applied to the screen though now through the Coverart's colors. The buttons remain untouched.
Yep, that happens when a white Cover comes along.
Or one that contains green.
... with the slider in the 2nd position.
And this happens when we fire up the Gradient designer from that Coverart created Gradient. A complete new base to further manipulate.
Like chosing the 2nd color and slide up Red and Green already brings this. Save that to XXHighEnd, set the slider at the left in the 1st position, drag down the Alpha slider for that 2nd color to make the Playback buttons visible and here you are :
This really is 2 seconds of work once you have some base to work with. And after another two seconds you may have this :
where all what happend was selecting a red (!) button background from the Skin Settings function, which show as orange because green plus red is orange(like).
See ? they *are* red, as long as they are not blended with another color (which only the slider in the left at position 1 does).
Gradients off ? still cool.
Yea, true those red buttons still have that green background, because we selected that, remember ?
And so on ...
- Why not put out album to play and do something with *that* eh ? Okay, let's do this :
Yep, switched on the WallPaper Coverart and made a screenshot of it. And from the part I liked.
Ah, you guessed that we were gonna do something like that, right ? This is in Skin Settings.
Suit yourself.
Back at slider position 1. Watch closely ...
So the world is at your feet.
Or your Oister of course.
Or even more Oister.
Or an illusion.
- Here's a little trick, which assumes the Coverart pane (at the right) not being in use :
We applied our self-made green button image there to the Coverart Background Image (in Skin Settings), and now it looks like a closed louvre door.
This is done with applying it to empty Coverart areas only. When this is unchecked, and assumed the Library Area is never empty, watch out :
It really can be too much of it. But of course this is with this image meant for buttons, while you can apply anything you like.
At this moment there's one issue known, and this is the Alpha Blending which doesn't work out properly on a Remote Desktop. This can exhinit only when the little slider in the left is at the bottom position, hence when your Gradients work out in their fullest power, which includes alpha blending;
It is a bug in Remote Desktop which makes show up the Alpha channel (hence rightmost color slider in the Gradient Designer) as some rough mixing of colors which look like 8 bit colors or so. This only applies to the form's general background, and not to other areas where the same is applied (like the Playposition Slider at the bottom). Now, completely dependent on what colors your Gradients contain (and how the Alpha blending has been applied) this may not look good at all. So, once you are using a remore control, you may be better off with the slider position of that little slider in the left at 2, 3 or 4. On the other hand, what may look bad on a laptop as a remote, works out far better on a Tablet. Well, you will see.
