Hello & greetings ! What is the “JUCE recommended image format” for creating custom GUI graphics such as sliders, knobs, and buttons that can be moved or rotated? Specifically, we are looking for advice on which file format is optimal among JPG, PNG, SVG, or X. We haven’t been able to find any official guidance from JUCE on this topic.
Moreover, should these images be prepared as a filmstrip or as separate images for each position of the component? How should we communicate to our graphic designer friend about the required format and specifications for creating these graphics?"
From my experience there are two ways you can implement custom sliders knobs and buttons:
Number 1: Using Filmstrips (Like a png or jpg) which containg all the frames for your knob/slider. I’ve personally used this method before and alongside tools like KnobMan or Knob Studio the process is actually quite simple. You can choose to use seperate images but that will just make a mess of your .jucer project.
EDIT: If you do choose to use a FilmStrip, JPEGs and PNGs are pretty similar to the eye of a producer so it shouldn’t be a huge issue, just stick with the defaults and change things if you need to
Number 2: Using svg files for your knobs / sliders and drawing them using custom LookAndFeel classes. I haven’t used this way before but from what i’ve heard, it allows for a lot more resolution when you want to make your plugins / software resizable. The main downside to this is that you either have to have the knowledge to create the designs using something like inkscape or Adobe Illustrator or you have to pay someone else to do it (although you might have that covered by the looks of it)
From a developers standpoint, i find the filmstrip methods a bit easier as you can just read an image file and change the section you show based on the sliders value. With the SVG images it might be a bit more difficult but feel free to take that with a grain of salt.
Best of luck making your software and I how it turns out well!
Hi there! I was also searching for an answer to the same question. I am currently trying to determine which way is more commonly used and which one is better overall.
Since there are no classes that make this work out of the box for any kind of image based knob in the JUCE library, I don’t think there is any official recommendation. I’d say it depends a lot on the aesthetic you are aiming for.
In times where display resolutions increase more and more, vector graphics are the modern approach to achieve crispy looking graphical results on every resolution and UI size in case of a resizable UI. Still, you cannot create photo-realistic vector graphics because of the limited complexity of an SVG which is more or less a bunch of instructions on how to draw some shapes is limited to some extent. Even worse, the JUCE SVG renderer only supports a subset of the SVG standard, so you are limited especially when it comes to shadows etc. This is why I ultimately wrapped a third party SVG renderer for my private open source plugin project when I found out that the SVG assets from my graphics designer just looked totally off using the JUCE stock renderer. On the other hand, if you go for a modern flat design, the JUCE SVG renderer gives you all you need. We use it all over the place in our sonible plugins.
Now if you want a more photorealistic user interface, pixel graphics might be a better choice. The downside here is in order to adapt to different display resolutions you either need multiple versions of the images rendered to different resolutions or you need to rescale them at runtime which may or may not look professional. I would also not recommend this approach if you are aiming for a resizable UI.
So there are limitations and unique possibilities with both approaches. Still, if you can achieve the graphical results that you are looking for with SVGs, I’d recommend you to chose that approach.
