From the original SynthMaker forum (2004–2014), with its members’ names and dates.
electrogear ·
OK,
I have some graphics editing software, and I want to start designing a GUI with a couple of Oscillator sections and some other sexy bits which I haven't decided on yet. I've designed the keyboard which will go at the bottom of the GUI:
http://www.box.net/shared/45isgw2kgc
but I'm wondering what the best method is of building a GUI? Do you do it all as one image file so that you don't have to load up several images or what? There's also the problem of image sizes - how do I know what size to make my images? Sory if these questions seem a bit vague, but I'm feeling a bit vauge today. 😕 hehe
Cheers - any hints or directions would be greatly appreciated,
electrogear
tention ·
I am drawing all my GUI using the SM gfx primitives, the only images i use are for the name of the plugin (special font etc.).
Try to build as much as you can with the SM primitives, its more flexible than static images...
electrogear ·
Try to build as much as you can with the SM primitives, its more flexible than static images...
yes sure, for simple things like rectangles etc, but is SM very flexible? For example, could I produce things like this:
?
tention ·
Probably, something similar. But what kind of GUI do you want when you use gfx like that?
IMHO the GUI should be functional and intuitive, not just for teletubbies... ;-)
just kidding...
Her a sample of on of my GUIs, completely drawn in SM. And yes, the knobs are dynamically moving, like a stitched bitmap.
electrogear ·
Oi! My great grandmother was a teletubby watch what you say! :P
I didn't mean graphics exactly like that, but I would like to have some subtle 3D elements in there. Something in-between what you showed me there and the 'Alieno' synth designed by Acrobat (which I think is really cool by the way). No offence, but I want something a bit prettier than the graphics you showed me. Do bitmaps etc use considerably more cpu than SM made GUI's?
tention ·
About CPU usage: when i load up one of my plugs it uses 0% CPU, with the stock knobs it did always use around 2%, and if you handle the redraw carefully then it won't use as much as a bitmap, i think. I have build my knobs completely new and it works very well.
About the Alieno-Style: something like that you should better do with gfx than SM, too many curves, it would be too complicated to do that within SM.
About the 'prettier': This is my style, that is your style... and it's just a sample.
electrogear ·
I just made a basic square shape with a gradient across and then laid directly to the left a rectangle with a gradient going the other way merging into the same colour. The line where that 'same colour' meets is clearly visible, even in the exported exe:
tention ·
Yep, that is the smooth drawing. You can handly this by using the clip primitive and it cuts exactly...
Acrobat ·
I LOVE teletubbies, it's completely mind-blowing stuff, I'd never let my children watch that psychedelic delirium. Have you noticed that the "REAL" education excerpts are played twice? Demonic. Anyway yes Alieno is done in photoshop, too many curves. And really nice work, tention..! 😀
tention ·
Acrobat wrote: I LOVE teletubbies, it's completely mind-blowing stuff, I'd never let my children watch that psychedelic delirium. Have you noticed that the "REAL" education excerpts are played twice? Demonic. Anyway yes Alieno is done in photoshop, too many curves. And really nice work, tention..! 😀
Thank you Acrobat. Your Alieno is neat too.
Acrobat ·
anyway your symbol is hard but possible to get. Bumping and shading are just height projections, but will require a geometric calculation in 3D (in geometry, a Z plane and a triangulation) as for curves, maybe we could use the spline in Sambean waveshaper and the PAline "curve" option... 😈
electrogear ·
Yeah sorry tention I didn't mean I didn't like your graphics - the knobs are really cool - and inmpressive that you did it all with SM! I might have a go at doing that some time but, I'm just gonna learn one step at a time for now or I'll never get my first project finished. I built this GUI when I first started using SM:
Would be interested to hear any comments/criticism before I go on to build my new GUI.
Cheers,
electrogear
tention ·
electrogear wrote: Yeah sorry tention I didn't mean I didn't like your graphics - the knobs are really cool - and inmpressive that you did it all with SM! I might have a go at doing that some time but, I'm just gonna learn one step at a time for now or I'll never get my first project finished.
No problem. I think, SMs primitives are very powerful, as long as you know their behaviour. I did a lot of experimenting, and then, step by step you get better and better, and i think, you will too.
electrogear wrote: I built this GUI when I first started using SM.
Would be interested to hear any comments/criticism before I go on to build my new GUI.
Cheers,
electrogear
IMHO you are wasting much space between the groups. The preset 'eye' looks nice, i think if you could use something similar for the groups would be nice too.
rl ·
electrogear wrote: Would be interested to hear any comments/criticism before I go on to build my new GUI.
ok, you asked:
I think the overall look is quite ok.
What I dislike: the UI is not consistent: there are 3 or 4 different type of knobs. at least 2 different drop down selectors, the big wave view has a different colour scheme than the rest of the UI and the adornment labels look a bit like spilled paint buckets 😉 Maybe try to use the same color for the frame.
But on the positive side: the UI has no wooden sidepanels
BTW: I found this site interesting to get some suggestions for colour schemes:
http://www.colourlovers.com/
electrogear ·
the UI is not consistent: there are 3 or 4 different type of knobs
I hear ya! I was thinking to myself it didn't look quite right. Your comments have made a few lightbulbs switch on in my head, cheers 😀
It always helps to hear what other people dislike about something you have made (not just in SM but in any situation).
electrogear ·
OK, I've been working on some new controls. I'd like to know what you think before I go replacing all the controls in my drum VST. I know some of the graphics look a bit blocky, that's due to doing them big in photoshop and resizing them in SM, but they look better when zoomed out.
Cheers,
Mike
😀[/url]
aliasant ·
One ting I think you should try to fix.
The lightning.
On the knobs the light is coming from the top.
On the Faders the light comes from the bottom.
On the control buttons Im not sure were it comes from.
Always use the same angle for all graphics.
Makes it look a lot better =)
electrogear ·
Thanks, I've done that - it looks a lot better now! The streak of 'light' behind the control buttons is irrelevent, I won't be using that in the VST, but I have changed the buttons and sliders so the light comes from the top. I'll post some more graphics in a few days for you to have a look at (if you don't mind). It really helps when people tell me what I've done wrong. I'm not really a graphics man, but I'm getting better at photoshop, although it's more of a chore for me than fun....
Cheers,
Mike
Acrobat ·
I like the rubber buttons!
electrogear ·
Thanks Acrobat,
I have a quick question for you photoshop wizards;
😀
I save the file in photoshop as a PSD file, and also a .PNG file (save for web & devices - PNG 24 w/transparency). Then I import into SM and do a resize (*0.3) using the bitmap(??) resize module. When I used to do this with BMP files it worked fine and the sized down image looks great. When I do this with PNG files it seems to make the quality terrible. Is there any solution to this? Could anybody give me a walkthrough of how they do it?
I need the transparency so I have to use PNG's....
FYI here's an example:
In Photoshop:
Exported from Photoshop as PNG:
Resized in SM:
Thanks,
Mike
Nu Audio Science ·
Just resize it in Photoshop first ?
SM might resize nice but its never gonna compare with Photoshop for obvious reasons
I would think that doing it this way would save on RAM resources in your synth too
Smaller image = Less RAM but SM might export the VST with the resized image so maybe not
Anyway that is how i do it and most other people do it aswell
NAS
electrogear ·
😮
Yeah thanks for that, there's definitely a noticeable difference there:
Now I've got some work to do [sigh...] Thanks :P
Mikey
electrogear ·
P.S. Sorry SM, didn't mean to put you down 😕
Acrobat ·
electrogear wrote: :o
Yeah thanks for that, there's definitely a noticeable difference there:
Now I've got some work to do [sigh...] Thanks :P
Mikey
Well, that's a different interpolation, just like in audio.... 😉
bootsy ·
For designing the controls (knobs, switches, sliders, ...) I can highly recommend the knobman tool (see that knobman thread in the Graphics forum). I've posted there some examples too to get easily started or get some inspiration. It can do so much more than simply rotating knobs, I do almost everything GUI related with it ...
electrogear ·
Cool, I'm having a fiddle with it - finding it a bit difficult to get into at the minute (I need to be in the right mood to do graphic stuff and I don't think I am atm :P). Can you make a rubber effect with it?
electrogear ·
Hey, I've been playing around with that Knobman dooda, it's pretty good. Only thing is, how do you make the saved bitmaps larger? I went to preferences and changed the output bitmap size to 50 x 50. I then went to file -> Export Image and saved it as PNG file. The resultant image was still only 32 wide??
Nu Audio Science ·
When you change the size you have to press the set button 😉
NAS
electrogear ·
Doh... 😊
I like this a lot more now I know how to use it properly 😍
The gear I ripped this off doesn't have pointers on the knobs (or even a dot or line) as it has those knobs where you turn it and it clicks from one position to the next so you might have to turn it 10 revolutions to get from 0 > 100% so there is no visual indication of where the knob is (other than the readout on the screen).
I've tried to make it so that you can see where the knob is using a few different methods, but I can't really decide what to do. Do you think any of these look any good? I don't like the one with a pointer I think it looks daft.
bootsy ·
electrogear wrote: Cool, I'm having a fiddle with it - finding it a bit difficult to get into at the minute (I need to be in the right mood to do graphic stuff and I don't think I am atm :P). Can you make a rubber effect with it?
Whats a "rubber effect"?
bootsy ·
electrogear wrote: I've tried to make it so that you can see where the knob is using a few different methods, but I can't really decide what to do. Do you think any of these look any good? I don't like the one with a pointer I think it looks daft.
From a usability perspective I would recommend:
If you are using the "metaphor" of a real knob you should provide properties of a real one (like clear indications of knobs position, shadow etc).
Otherwise I would better use the complete "artificial" lane like e.g. Ableton did.
electrogear ·
The original knob is just plain circular - no handle/pointer so no shadows... that poses a problem because it looks as though it isn't moving... that's why I added the dots/visual indicator circle around the outside.
electrogear ·
I re-did my controls in knobman like you suggested. That program is really flexible when you learn how to use it properly. What do you think?
Still think I should get rid of the red indicators?
bootsy ·
On my own I would add at least a small notch/line on that circular knob to indicate the knob position. But at the end of the day it's so much personal taste ...
cxvjeff ·
Electro... have you experimented with using KnobMan to create a multi frame knob such as in their examaples that come with the program? How are you implementing those in SM? I've tried with the SweepKnob but had little success. Any help is appreciated.
infuzion ·
electrogear wrote: Still think I should get rid of the red indicators?
They look good; keep them.
electrogear ·
cxvjeff wrote: Electro... have you experimented with using KnobMan to create a multi frame knob such as in their examaples that come with the program? How are you implementing those in SM? I've tried with the SweepKnob but had little success. Any help is appreciated.
Hi jeff,
Yes I've implemented those using the 'animated knob' in SM. Here's a walkthrough of how to do it:
Once you have created your knob in knobman, go to 'Preference' and set the output bitmap size (I use the default 32 x 32 for small knobs, or 50 x 50 for bigger 'main' knobs but it's up to you really). Once you have done this you need to click the 'set' button in the bottom right of the 'Preference' screen.
Now save the bitmap strip by selecting 'ExportImage' from the 'File' menu. Now you can exit knobman and open up SM. Once in SM, go to 'Control' in the menu and select an Animated Knob (the blue one). If you go into the knob (animated knob > knob > interaction > knob > bitmap loader) you can see where the strip loader is, but you don't need to do this, as you can just click on the properties (p) on the front of the module and select the image from there. Once you have loaded the strip, set the width & height to the same as you did when you exported it from knobman.
Done... 😀
@Infuzion: Thanks!! 😀
electrogear ·
Hey, sorry for all the questions, I'm rubbish with GUI stuff:
Which of the three knobs do you think looks best (in terms of it's background). The first is raised, second has an inner bevel, and the third just plain - straight onto the background.
oddson ·
The lack of a knob shadow on #2 makes is look like the knob is down the hole (the strong highlight is not consistant with the lack of shadow). FOr the same reason # looks like the knob is flat.
If you're not using a shadow go with #3.
infuzion ·
electrogear wrote: Which of the three knobs do you think looks best (in terms of it's background).
Depends on what you want to do & how the rest of the GUI looks.
Acrobat ·
electrogear wrote: Hey, sorry for all the questions, I'm rubbish with GUI stuff:
Which of the three knobs do you think looks best (in terms of it's background). The first is raised, second has an inner bevel, and the third just plain - straight onto the background.
I like the second instead, the problem Oddson is showing may be solved giving more space between the black background and the knob itself, the red circles will be more readable too... 🙂
electrogear ·
oddson wrote: the lack of a knob shadow on #2 makes is look like the knob is down the hole (the strong highlight is not consistant with the lack of shadow). FOr the same reason # looks like the knob is flat.
If you're not using a shadow go with #3.
How about this?:
infuzion wrote:
electrogear wrote: Which of the three knobs do you think looks best (in terms of it's background).
Depends on what you want to do & how the rest of the GUI looks.
Well I don't know what I want to do yet, that's why I have asked for opinions, but the knob surround is the first thing I'm addressing. The rest of the GUI FYI looks like this (so far):
It will have a brushed metal effect when I've finished it. Also, the centre of the screen will be split down the middle - samples on one side, synthesis on the other. Also, the knobs will all be the same (as the ones in the bottom right) and the sliders (as shown earlier) will be included.
acrobat wrote: I like the second instead, the problem Oddson is showing may be solved giving more space between the black background and the knob itself, the red circles will be more readable too...
The problem there is that I want it to look as though there is a hole around the knob. With a space between the knob & the black I don't think it will look right.
Acrobat ·
electrogear wrote: The problem there is that I want it to look as though there is a hole around the knob. With a space between the knob & the black I don't think it will look right.
no I mean just a bit more black, less crowd, more distance between the elements will give more legibility to each....
infuzion ·
I am leading towards FX2 on the gray part, FX1 on the black part.
electrogear ·
I think FX2 looks good now I've done what Acrobat suggested. Do you think there's enough distance now Acrobat? Or even more distance like in FX3?
I'm going to go with the FX2 version I think. I'll stick with it for everything - sliders, LED's and displays etc...
bootsy ·
electrogear wrote: I think FX2 looks good now I've done what Acrobat suggested. Do you think there's enough distance now Acrobat? Or even more distance like in FX3?
I'm going to go with the FX2 version I think. I'll stick with it for everything - sliders, LED's and displays etc...
I like the second one too - just maybe a little to much shadow (offset).
Acrobat ·
great, it's going to be a really cool control, one other small thing is maybe just a bit less shadow, also the direction is very vertical, typically most designers use the default photshop which is 120 degrees, I prefer 130.. in any case and any degree, my suggestion is to keep the opacity under 50 percent, 75 is the default and yours seems to be far more, it seems even 80 or 85...
PS: you can even test shadows with SM primitives using an ellipse and a semitransparent color, it's easier, assign a common color with wireless links and try differnt transparency/degree until you find the right one.....
aliasant ·
Acrobat wrote: great, it's going to be a really cool control, one other small thing is maybe just a bit less shadow, also the direction is very vertical, typically most designers use the default photshop which is 120 degrees, I prefer 130.. in any case and any degree, my suggestion is to keep the opacity under 50 percent, 75 is the default and yours seems to be far more, it seems even 80 or 85...
PS: you can even test shadows with SM primitives using an ellipse and a semitransparent color, it's easier, assign a common color with wireless links and try differnt transparency/degree until you find the right one.....
I completely agree with Acrobat.
Its odd but I too use 130° for all lights & shadows. 🙂
One thing might be that the knob itself. The grey round part. Is a bit blurry. Would be nicer of it was a little bit sharper. You can use the photoshop filter Unsharp Mask to fix this. But be gentle. Its very easy to overdo it.
electrogear ·
Hey,
I've made all the suggested changes (except for the sharpening - I gave the gray part a drop shadow instead to define the edge a little more). I've moved onto the slider now. Don't think it looks right though. Needs some more work. Any ideas?
P.S. Thanks guys I wouldn't be able to do this without you! 😀
oddson ·
The knobs are looking very good. If you're OK with nit-picking then I'd suggest there is an aura around the shadow that looks a bit odd.
The highlighting should be independent of the shadow... the shadow should obscure the highlight but not affect it's shape. It looks to me like the highlight makes a detour around the shadow instead.
I think the slider looks fine...
Acrobat ·
electrogear wrote: I've moved onto the slider now. Don't think it looks right though. Needs some more work. Any ideas?
Needs some work too. 😉
1. The moving part is OVER the static, right? so they will have differnt shadow height. You can control shadow height in PS makin it independent from other layers and setting a different zeniths for the light direction. Doing that the pin will really jump up over the coarse.
You don't need to make any tedious calculation just briefly imagine in your mind the real height of elements and assign shadows accordingly.
2. The red indicator is not aligned with the body of the slider, looks a bit too much on the right.
Because of the way they're traced on the screen, vertical and horizontal lines tend to appear thinner than diagonal an curved ones. You can fine-compensate the thickness of the slider in comparison to the knob circles.
3. Since the knob isperfectly circular, I expected the slider to have the same "perfect" profile on top and bottom half circles. They seem a bit "parabolic" instead... but if that's intentional, I would give that profile also to the knob, pushing the sides and making them ogival too.
Circunferences are easier to work with in comparision to other "casual" curved shapes for math reasons, they have 90° tangents easier to connect to with other linear portions of the drawing. You can anyway build a correct curved shape in Illustrator, that will give you no problems when connecting it to other lines.
electrogear ·
Acrobat wrote:
electrogear wrote: I've moved onto the slider now. Don't think it looks right though. Needs some more work. Any ideas?
Needs some work too. 😉
1. The moving part is OVER the static, right? so they will have differnt shadow height. You can control shadow height in PS makin it independent from other layers and setting a different zeniths for the light direction. Doing that the pin will really jump up over the coarse.
You don't need to make any tedious calculation just briefly imagine in your mind the real height of elements and assign shadows accordingly.
There is a problem there. The slider is made in knobman. I'll have a go at making a different shaped shadow but I think it will be pretty difficult to get it looking realistic. I'll get back later. 😀
Cheers,
Mike
electrogear ·
Hey, I had a go with the shadow. I think it looks a little better, but I'm not sure if this is what you were suggesting or not. Also, I made the top & bottom a little less rounded (more like half-round). I wasn't sure if you meant the actual slider-knob or the slider-outer? Anyway, here is the most recent one:
I had a lot of problems getting the shadow wide enough, I had to resize ('zoom% out') and re-position everything in the knobman file to get the extra space to work in, but I think that's how the shadow looks. The more I think about it the more indecisive I get, but lets see how it seems on a fresh mind? Not sure about the aluminum finish at the moment, might change that later on.
also, Oddson - I'm not sure if what you are talking about is an optical illusion? I could decrease the size of the light/shadow cast?
oddson ·
Oddson - I'm not sure if what you are talking about is an optical illusion? I could decrease the size of the light/shadow cast?
I thought it might be... my original message was written with 'if that's really what's going on' statements all through it be it made for hard reading and I knew you'd sort me out if that's what it was anyway.
I would suggest having the highlight extend less than the shadow so it's clearly being blocked by the shadow as currently it looks to me like it's deflected by the shadow.
electrogear ·
Hey, I decided not to go with that curved design that I had before as it wasted too much space and was awkward to do anything with. I still haven't really decided on the design of my GUI, but I think this looks quite good for the sequencer part:
This is just the sequencer part - there are 11 other tabs at the bottom which bring up a different 'page'. The orange/yellow around the outside is temporary. I'd like to design something around the edge that will stay the same on each 'page' of my VST to house the standard controls (such as preset manager, VU Meters, Menu, etc). I'm finding it difficult to come up with any sexy solutions. Any ideas? The sequencer design above doesn't have to stay exactly like that - it could change if needed - I just bodged it together this evening.
Mike
electrogear ·
Hey, I've been working on my knob skills (Nooooo not like that lol!!) and I've designed some new knobs, because I thought the other ones didn't fit with the rest of my GUI. I'm not sure which ones to go with tbh, would be good to hear people's opinions again:
Any knobs that I don't use in my project I will make available for others to use.
Acrobat ·
electrogear wrote: Any knobs that I don't use in my project I will make available for others to use.
So I can tell you the worst and get the best for me... 😉
eh eh no I'm joking, the best is the left one, seriously... 😀
sunsynth ·
Damn Acrobat...
i wanted 2 use this trick 2 because i like the left one 2 😉
electrogear ·
Doh, how do I know you're not bluffing me now??? 😕
Thanks guys
Acrobat ·
electrogear wrote: Doh, how do I know you're not bluffing me now??? 😕
Thanks guys
Well you can trust me now, as if I wanted to cheat you, I would do that in the first place without getting it all so long and mindboggling..
Acrobat ·
...so what did you choose?
Lookin' at them again, 1st and 2nd are equally cool, the only one has quirks is the third, seems a bit strange, it could be perfect for a synthesizer called "Spider" as it resambles the net of those animals.. 🙂
electrogear ·
I think I'm going to go with the first and third, like this:
My ideas keep changing all the time, but this project is now on hold due to bugs that won't be fixed until the new event system comes in.
electrogear ·
Does anybody know when this new events system might be coming in?
Acrobat ·
electrogear wrote: Does anybody know when this new events system might be coming in?
Dunno...wish to know...
Another note for layout: the bottom left selectors could be integrated in the instrument strips:
[KICK] - [name] - [Mute] - [Solo] - [Bars]
in just one line..
How did you manage soloing? I was trying to manage a good soloing in the GrooveBox collaboration but I never got it right.. 😕 🙂
electrogear ·
Acrobat wrote: Another note for layout: the bottom left selectors could be integrated in the instrument strips:
[KICK] - [name] - [Mute] - [Solo] - [Bars]
in just one line..
The image above shows the sequencer 'page' of the VSTi, which is not the main page. Clicking on one of those selectors in the bottom left takes you to that particular piece of kit for in-depth editing. They stay the same on each 'page' of the VSTi, so I can't really integrate them into the sequencer, if I did then there would be 2 buttons on the Sequencer 'page' that did the same thing, which I think would be a bad design. Thanks for the thought though.
Acrobat wrote: How did you manage soloing? I was trying to manage a good soloing in the GrooveBox collaboration but I never got it right.. 😕 🙂
Each of the 'bars' represents a Midi event. The solo buttons just disconnect the midi event module so that the piece of kit is muted. There is some logic attached to each midi event module like this:
🙂
If you want a hand with it I'll gladly help 🙂
electrogear ·
Did you have a look at the above acrobat? Need any help?
Acrobat ·
electrogear wrote: Did you have a look at the above acrobat? Need any help?
sorry seen this just now, no I still have to try your solution, I was workin on other schematics ATM...
electrogear ·
OK No problem 🙂
ARRRRGH! I WANT THESE BUGS FIXED!!!! 🙁
(Referring to the midi trigger audio export problem that has ground the above project to a halt)
Acrobat ·
electrogear wrote: OK No problem 🙂
oh yeah works like a charm - thank you so much!
I've applied to a small audio mixer! Great!
Building the UI now.. ehe heh
A.
😀
electrogear ·
No problemo, glad I could help.
Wrote something here? To have a post removed or your name hidden, write to [email protected].
SynthMaker