Practising my GUI design skills (4th attempt)

DSP, Plugin and Host development discussion.
RELATED
PRODUCTS

Post

scuzzphut wrote:Why not just render your knobs to bmp, use trentstich and then convert to PNG? You can have your mask image as a seperate file. Am I missing something?
I didn't realise TrentStitch was BMP only, my bad :oops: But like scuzzphut says, you can stitch your knobs as BMPs, stitch your alpha mask as BMPs, then load into *insert you image editor here* and apply the alpha mask. Then save as PNG. That works for me :)

Shif.

Post

I'm not sure how long anyone will survive that needs two years hand-drawing
you'll see that the secret is just to spend time on it. If you see something and you wonder 'how did he do it?', another question should be 'how long did it take to him, and am I ready to spend that much time?'

Post

scuzzphut wrote:Why not just render your knobs to bmp, use trentstich and then convert to PNG? You can have your mask image as a seperate file. Am I missing something?
That's probably the easiest solution. It never even occurred to me to do it like that :oops:.

- Niall.

Post

OK, here's my third attempt - boxes to delineate the different sections, different title font and a slight gradient in the background.
Image
I'm not convinced about the label font though :?, suggestions?

- Niall.

Post

Besides, I had a good laugh at the suggestion to hand-draw bevels.
Well, no doubt it can be done if you're very good at drawing, and you have a very good wacom tablet :!: ...and then it's probably the most flexible solution...buuut, for mortals Photoshop bevels offers great posibilities. :)
what are you using to stitch png's together
If you use Photoshop, take a look at my Knob Render. It animates and stitches PNG's from inside Photoshop.

http://www.otiumfx.com/knobrender.php
Image

Post

Fonts can make a big difference..... I like the new design ...and if you now take some funky fonts it will still look not to steril....

I just bought three fonts from Blambot yesterday.... they have awesome stuff ....check it out http://blambot.com/menu.html

cheers,
mully

Post

rune_lh wrote:
Besides, I had a good laugh at the suggestion to hand-draw bevels.
Well, no doubt it can be done if you're very good at drawing, and you have a very good wacom tablet :!: ...and then it's probably the most flexible solution...buuut, for mortals Photoshop bevels offers great posibilities. :)
what are you using to stitch png's together
If you use Photoshop, take a look at my Knob Render. It animates and stitches PNG's from inside Photoshop.

http://www.otiumfx.com/knobrender.php
yeah RUNE's tool is awesome.... and if you use the JEWEL library (sorry for bringing it up so often nowadays but it's superb) from stefan-kuhn.net you can use pngs with transparency and much more....

I really like Photoshop and I made all my GUIs using it solely....

cheers,
mully

Post

multree wrote:yeah RUNE's tool is awesome.... and if you use the JEWEL library (sorry for bringing it up so often nowadays but it's superb) from stefan-kuhn.net you can use pngs with transparency and much more....

I really like Photoshop and I made all my GUIs using it solely....
I'm pretty happy with Paint Shop Pro actually - the only downside for me is not having any way to do actions like Photoshop does, which would make knob desing a lot easier. As for Jewel, it does look pretty amazing, but is it going to be cross-platform? At the moment VSTGUI - despite it's limitations - looks like the best bet for cross-platform GUIs (imo - especially since it got support for PNGs w/transparency).

- Niall.

Post

NiallM wrote:OK, here's my third attempt - boxes to delineate the different sections, different title font and a slight gradient in the background.
Image
I'm not convinced about the label font though :?, suggestions?

- Niall.
For a face that sterile looking, I would like to see cooperplate light for the small text & gothic for the title. I think that would look smooooth..

Post

It's much better now.
:)

You could add a white line (with curved corners) all around the plate.

Post

NiallM wrote:OK, here's my third attempt
I like the cleaner looks better. Photorealistic is okay by me too, if it's done well. I agree that "tricky" fonts should be left for special effects.

My only concern in this version is specific to your test GUI, and might have nothing to do with whatever product(s) you intend to write: a lot of screen real estate is going to non-functional space. Tasteful, but display area is valuable stuff.

Aw heck, in the end evaluation I don't particularly care what the GUI looks like if the sound makes my fur bristle. ;-) But that's not what you were asking, heh...

Meffy

Post

Why take up so much room for the title and that blank void? I'd personally rather the title was pretty small and less imposing. People will know what it is called well enough. If you just cropped it to only have the boxes and did nothing else, it would look much better.

Thats one of the things I dislike about the Atmosphere GUI - a lot of the space is wasted to a massive title in a crap font, and some pretty useless handles that don't even look that realistic.
Admittedly, you don't want the controls to be cluttered up, and have it look like the designer is some sort of puzzle expert, but you might as well make good use of the space.

On your GUI, the boxes look slightly too small to accomodate the knobs, making it feel like a bit of a squeeze, and the spacing of the knobs from the box outlines is also not consistent, which looks a little odd.

The shape of the boxes is good though.
The gradient also makes the surface look much more interesting - you also haven't overdone it, which is good.

Post

Here's my couple of comments:

1. Are you sure you are using the perfect aspect ratio for this particular plugin? I don't know the right term, though (we Germans say 'Goldener Schnitt', it's by DaVinci AFAIK).
2. I can't figure out why the upper third of the interface is unused. Maybe there's a lot going on inside but that's pure speculation... ;)
3. The 'Another Test Gui' font is by no means meant to be serious, right? It's got nothing to do with the rest. Plus, two lines are one to much and the spacing is much too small.
4. To my opinion, italic fonts are problematic with GUIs. Their intention (as in advertising and logos) is to point to the right, as heading towards something. They imply 'speed' and 'motion'. But here, they're just trying to escape from the screen (to the right). Again the aspect ratio: they quickly fall over the rim, so to speak.
5. The knobs are to big for that small GUI. At first sight it's a sheer crowd of knobs.
6. Due to missing space, the labels under the knobs should be smaller in font size. But then they would be too hard to read and the ratio knob:font would be unrealistic (imagine the hardware: 10cm knob, 3cm font width...)
7. It's personal taste, but I would prefer either all letters in capitals or no capitals for labels. I dislike 'Cutoff', 'Attack' (always appears to me as if grabbed out of a context or sentence) and prefer 'cutoff' or - if the GUI allows for it - 'CUTOFF' (which is more 'vintage'-like as it could have been printed more easily on the plate in former times).
8. The last version has become so 'un-natural' (in a positive way) that I would encourage you to change the knobs to a 'reduced' style (like e.g. Ableton Live or Tracktion). I don't see a reason why the knobs should be realistic here any longer.

That's my two Eurocents (claim: I am by no means a designer).
Sascha
Sascha Eversmeier
drummer of The Board
software dev in the studio-speaker biz | former plugin creator [u-he, samplitude & digitalfishphones]

Post

NiallM wrote:Like the subject says, I've been practising my GUI designing skills recently. Anyway, I've just come up with this hardware-esque design. Comments?
Image

For more examples of my recent GUI efforts, see here.

- Niall at ndc Plugs.
I like, just use less coulourfull colours...

Post

Yeah, I agree there's too much wasted space in the latest version - I was trying to find a way to incorporate the title in a way which wasn't too overpowering. I think I'm going to try two separate GUIs next - one hardware-esque (using the same knobs), and one more obviously software based (the white boxes, maybe the same background). Font choice seems to be a particular weak point for me :? - does anyone have any advice?

sascha : Are you talking about the Golden Ratio? I hadn't thought of using that for a GUI, but that's an interesting suggestion. Personally I find that labels with starting capitals make it easier to comprehend at a glance - I use the same trick for variable names in my code (e.g. ButtonIsClicked).

- Niall.

Post Reply

Return to “DSP and Plugin Development”