• jan@cosmigo.com

Color ramping via HSB? Blue-shifting/Yellow-shifting


#1

Hi Everyone!

There’s this tutorial about creating color palettes by manipulating HSB.

Mr. Beeston created this awesome web based color palette creation tool based on that very same tutorial above.

I know i can just use and rely on the tool until the site is dead, but that could be a problem in the future.
I tried to reproduce this via PM’s HSL color ramping but the results are very different. Needless to say, RGB color ramping would not reproduce the desired results as well.

I’m not sure if i’m doing something wrong or it’s just the nature of ramping via HSL.
How can i reproduce this style of creating a color theme besides manipulating the HSB manually, one by one, index-by-index in the color palette?


#2

HSB and HSL are similar but not identical, so this might be the reason why the results differ. From http://colorizer.org:

HSL is similar to HSB . The main difference is that HSL is symmetrical to lightness and darkness. This means that:

  • In HSL , the Saturation component always goes from fully saturated color to the equivalent gray (in HSB , with B at maximum, it goes from saturated color to white).
  • In HSL , the Lightness always spans the entire range from black through the chosen hue to white (in HSB , the B component only goes half that way, from black to the chosen hue).

In one of the latest updates (if not the latest) PMNG introduced advanced color manipulation tools in the color editing dialog. This new menu also allows editing colors in HSL or HSB, and has some new color scale algorithms which can be used to automatically generate the examples from Mort’s tutorial.

The new interface contains a lot of new features packed into a single dialog, so it might take a while to experiment with all the various possible combinations and controls interactions to realize how much you can achieve with that.

By the way, Mort’s tutorials on YouTube are among the best I’ve ever found, he’s really good at what he’s doing.


#3

PS: From my experiments with creating color scales/ramps, I’ve found that usually the best results can be achieved using the Lab color space. But this is not a golden rule, since the human perception of colors is biased we see certain colors better than others, so depending on the actual colors you’re working with one color space might give better results than others.

Some color spaces tend to perform better with color algorithms with colors that are either very bright, dull, pastel, etc. This is why PMNG added all these new color spaces to the advanced color editing dialog (including LCh, which produces some interesting color results).


#4

@jan.cosmigo: probably the new colors interface deserves a video tutorial on its own to show the powerful things that you can achieve with it.


#5

Thanks for the advice, I’m checking out the other color spaces right now based on your suggestions.


#6

Sure… I won’t keep you from doing one :grin:
Larger tutorials are planned for 2020. Until then only some smaller tips/tricks videos are planned,
I need to get the next release done with the long awaited typical floating selection tool set (including lots of internal refactoring)


#7

Unfortunately I’m not very good at video compositing (I did some video editing for a documentary in the past, but I struggled, didn’t have the right tools nor the know-how).

There are some presentation tools that might be easier to use. In the past I had tried a free tool to create tutorials, but it was Flash based, so it wont’ be any good today.

Today there are some tools to create HTML5 based presentations, leveraging the canvas and other new features of modern browsers. Some of these tools also allow creating a video for YouTube from the presentation once it’s ready, although they are mainly designed for website presentations. So far I’ve only seen commercial tools of this type though, but I’m sure there must be some open source equivalents too (not my field, so wouldn’t know about them).

Still, mixing video captures from the application with voice-over, over-impressing keyboard and mouse clicks, and other similar stuff that makes a tutorial easy to follow, all require some expertise which I don’t have. Other than that, if I can help I’d be glad to.

All of MortMort’s tutorials are really good quality, and you can see him speaking in over impression to the application interface or illustrations, and he also creates nice intros with jingles, special sound FXs, and other cool stuff that show he know what he’s doing.


#8

Regarding tutorials… I’m the type that favors short concise straightforward tips/tricks vids, rather than long ones. Vids are great tools that aid in expressing what’s hard to convey via words in a documentation. But i think a lot of people forget that point.

Long video tutorials tend to have sections.

  • intro,
  • will sometimes apologize for having a bad quality of something in the vid or some other technical issue
  • rabble on about theory or whatever
  • emphasize why theory is important
  • feature content 1,
  • feature content 2,
  • feature content 3,
  • feature content 4,
  • feature content infinity,
  • more babbling
  • outro

When all i wanted to check out was only the how-to on feature content 4, or maybe feature content 3. Most times you have to painstakingly find that in the playback time. And 99% of tutorial content creators out there won’t even put section timestamps.

To make things even harder, most long tutorial vids will have a title that outlines the general content of the vid. Which 100% makes sense. But, when i want to recall that tutorial vid that teaches how to do feature content 2 or something, this adds an extra layer of searching yet again. A worse version of this is when the title is something like “How to feature content 5”.

So yeah, short vid tutorials? 20 seconds long? 10 seconds? 30? A short gif? That’s fine. Sign me up pls!


#9

@cageburner I agree with your view on videos being short and focused on a specific topic only. After all, it’s better to have multiple short videos and create a playlist.

When I have some free time I’ll do some research to see which free and open source tools are available in the wild to create video tutorials — and of course, we’ll need to find tutorials on how to use these tools, and some tutorials on creating good tutorials (meta-tutorials)!

It might take some time for me to carry out the research because lately I’m struggling with free time. But if we were to create some public repository for sharing the tutorials assets it might lead to an easier collective effort…