(Not) Knobs 5

(Not) Knobs 1
(Not) Knobs 2
(Not) Knobs 3
(Not) Knobs 4

For parameters with a low resolution, it might be of advantage to show the steps, so 2 variations on that.

Showing on overlay like in the 2nd row could encourage the user to increase the distance to have more precision (it took a while from my first encounter with radial knobs to taking advantage of this).

I should have mentioned earlier that this is all SVG done with Inkscape. That means the graphics can be adapated to various sizes easily or even be rendered in realtime.  I tried to keep things simple because of this. But now it’s time  for a little experiment, trying to add more ‘realism’ .  Many layers, transparency and blur also mean that this is rather not suitable for realtime rendering.  Caching might do the trick, though 🙂

Finally 2 variations on an overlay while dragging on the distance-based widget. The simple version can lead to nasty aliasing problems, apparently :/

Circulars 08


About thorwil
I'm a designer from Germany. My main interests are visual and interaction design, free/open-source software and (electronic) music.

6 Responses to (Not) Knobs 5

  1. I said this on #lad and I’ll say it again: That blackish knob looks absolutely beautiful. It’s definitely something I hope we will see in Linux audio apps in the future.

  2. Eager to receive the svg’s to implement them in Qt.

  3. thorwil says:

    No problem. Anyone can have them on request. I would have put them up if only WordPress allowed it. But knowing who wants them / has them ain’t bad 🙂

  4. Silver Blade says:

    I agree about the black one! All of them look pretty neat but there’s just something about that one in particular that makes it stand out.

    How difficult were they to make?

  5. thorwil says:

    Silver Blade: How to quantify difficulty? It took a while but was rather straightforward. The dark knob consists of 22 parts, not counting clipping masks, if that gives you an idea 😉

  6. Silver Blade says:

    I’m kinda impressed that this can be done using SVG (up until now I always considered SVG files as being something used for traditional “cheesy” clipart images – now I know otherwise!)

    Yeah I guess each persons interpretation of “difficult” can vary. I’m not much of a graphics editor myself so looking at those I just wondered how it was done 😉