Just because you’re using vector does not mean, that you design must be flat:
The Design was done in Adobe Illustrator, exported to svg and then re-constructed dynamically in my look and feel class. It’s quite involved - but well worth it in my opinion. Now I have realistic looking knobs that can be used at any size.
EDIT: And as an added bonus, it’s not to hard to export screenshots to PDF for inclusion in your user manuals - this way even your screenshots are searchable and look beautiful in all sizes
PixelPacker : Super Thanks for your input, and your graphics look excellent! If your code is not proprietary, I’d very much like to see what you are doing and use any classes you may have developed, If it’s somewhere “in between” be happy to know the price.
What I did was to auto.generate a c++ class from the SVG file that contains the definitions for all the paths and gradients and is able to draw the whole thing. Then I split the draw method up into different parts (draw_knob_scale(), draw_knob_lower(), draw_knob_handle()) and modified them so that rotation is applied correctly. For example the shape of the knob rotates, while the highlight-gradient stays fixed.
If I had to do it again (and I probably will at some point), I’d try to use Drawable::createFromSVG() and then modify the resulting hierarchy of Drawables before calling paint() on it.
The key to success here is a clean design in illustrator that does not use additive blending and is structurally simple.
If you’re interested I can ask the artist who did the design if he’s available.
I don’t understand what you mean by hybrid. What I meant is the following: if you rotate the knob, the gradient rotates with it. What I did is to rotate the gradient in the opposite direction so that it stays fixed. So it’s still all vector.
Despite that: graphics with not much detail, like highlight gradients and drop shadows might just look fine when scaled up, as they are quite smooth to start with.
Howdy. I like your thorough questions. It appears this is an old post but based on your questions I would recommend you getting a c++ book. You want to understand what object oriented programming is about. specificaly, look into inheritance and subclassing. These are ways to take some code and extend it.
I have removed my previous comment as at the time I was burnt out from reading doco and endless posts trying to understand the philosophy of modern plug-in UI design.
For some reason I thought you were only supportive of flat UI design where in actual fact it’s vector based design which is your ethos.
Anyway I’m much the wiser now and ready to flex my design skills in JUCE.
So are you saying after making the knob designs, you hand coded the drawing dimensions into the Slider look and feel member functions within the JUCE frame work?
I’m not prepared to answer most of your question, but these are both definitely using vector graphics. Mostly seems like just shapes and gradients to me! Some spots on that UAD plugin (and many other UAD plugins) have fake little scratches which I suspect to be a mostly transparent image overlay, but you really don’t need to use images to get this sort of look.
You might ask “but it will take me so long to design knobs this good looking” True, but if you can design them in indesign, you can also (probably) render them in JUCE using mostly standard JUCE classes. If you intend to create a filmstrip by taking photos of an actual knob, sure. Perfectly replicating a real knob is going to be much easier with a camera, some good editing skills, and a filmstrip. But that’s not really ever done in commercial plugins, and could only possibly look worse than spending some time designing good skeuomorphic knobs.
My point is not that I want to do things the old way (filmsstrip is just what I first came across) and am happy to learn the modern methods of creating vector based UI elements. (I’ve been reading a lot this evening and much more up to date on modern UI graphics methodologies).
My point is if I was to create my own (or get a designer) to create industry standard vector assets. I don’t see anything in the documentation on how to implement my own ui content.
It seems I need to develop my own code and it feels as though I am hacking the framework which may break in future updates.
Not at all, you need to write your own code because you’re customizing the framework! Most likely all you need to do is override one of the LookAndFeel classes, then provide an instance of that LAF to your sliders/buttons/etc. But to create custom behavior, you need to write custom code! If you do this right, you won’t write anything which would break in updates. Basically, most JUCE drawing code is done with a Graphics& instance that you draw onto with Graphics:: methods, or methods provided by other classes which take Graphics& as arguments. The API for Graphics is very unlikely to remove any functionality, as that would likely break most in-progress JUCE projects. It has been largely the same API for a very long time at this point (although implementations sometimes do change, which is good! That’s what an abstraction like Graphics is for).
You really don’t need to look far to find this: most widget classes have LookAndFeelMethods which describe what you can customize about them. In the JUCE codebase, there are 4 look and feels, which you can look at for examples.
You’re not hacking the framework by using it! You need to write code to use it. No reason to fear that.
Ok that’s fantastic information, thank you.
I think it’s my past IT experience (I’m an IT systems engineer and not a software engineer by background) that’s given me the mindset of not altering code that is not supported by the vender per say. I have been burnt before with patches.
Also sorry I had the impression that the philosophy of JUCE was flat UI only. I realize now this is not the case, and it’s actually Vector design only, which with clever design techniques like Pixel has done above, you can achieve very impressive UI assets that really pop.
Anyway that is great news.
As you can most likely tell, I’m a newbie to this field and am somewhat ignorant but I’m not here to be spoon fed.
I’ll brush up on my C++ and get my head heavily into the frame work and doco.
