How do YOU make beautiful plugin gui's?

[kurt6string]

Aloha,

I could use some advice on how to create one of those super snazzy looking gui editors for my plugin. What tools and techniques have worked best for you folks? Is it a combination of skills with the painting tools AND tweaking the look-n-feel drawing? What works for you? How about techniques that work cross-platform?

Thanks,
Kurt

[TheVinn]

A nice crisp hinted font embedded in your plugin is a good start.

Other than that, to get shadows try transparent blends with starting color = RGBA(0,0,0,64) to ending color = RGBA(0,0,0,0). You can make hilights with a blend, color range RGBA(255,255,255,64) to RGB(255,255,255,0). Drop shadow effects are helpful as well. Less is more, a light touch can make something like really professional.

I work up path based layers in Photoshop to get a rough idea of how I want things to look then I write straight juce::Graphics code to render the same layout. A lot of what makes a good UI is adding depth and dimension through the use of hilights and shadows.

Try looking at a lot of different plugins for ideas, and try to imagine what the Juce code would look like. Linear blends, radial blends, shadows, and transparency effects applied to rectangles, circles, arcs, and arbitrary paths, possibly with a clipping region, are the building blocks.

You ask about cross-platform techniques. If you do all of your drawing via juce::Graphics then it will work on every platform automatically (that’s the primary benefit of using Juce!).

[Kevin]

Hire a good graphist

[kurt6string]

Thanks for the insights folks…anybody else? And, I appreciate the details you provided Vinn. I wish I could afford a good graphist but alas, it’s just me…

[Kevin]

If you have some times to spent I think Vinn’s advises are great.
I am not sure about what is the best between doing everything in software or doing some nice png with Photoshop then integrate them into your software.

btw: you may find some cheap (free) graphist on KVR forum

[andrewj]

Hi Kurt - it depends on what you mean by beautiful, and how high your standards are!

As far as I’m concerned there are two approaches worth considering: soft-rendered (as alluded to by Vinn) & pre-rendered.

For an easy and free way to generate pre-rendered controls, take a look at g200kg’s Knobman. With a little bit of practice you can make some good looking stuff with that, and you can find packs of other people’s designs in various places (including the SynthMaker forums). If you want to take it further, you can use photoshop or a 3D rendering package (take a look at this article at Variety Of Sound). If you take this route then you’ll need to load the pre-rendered image strips into your project as binaries and adapt drawRotarySlider or drawLinearSlider to draw the right part of your bitmap strip.

With my plugins I’m avoiding the bandwagon of photo-realistic rendering / retro yumminess for the following reasons:

[list][]my plugins aren’t emulations[/]
[]my plugins are software, so I don’t want them to look like hardware[/]
[]pre-rendered controls can’t be re-sized without compromising something[/]
[]detailed pre-rendered controls can lead to a big file size[/][/list]
I prototype in KnobMan so I can easily refine the design. Doing this also gives me an insight into how to set up my paths, fills, blends etc. to get the look I’m after.

[kurt6string]

Thanks for the help guys, I appreciate it.

[Soilworker]

20 years of experience as a graphic designer and UI designer have helped me a lot. If I didn’t have these skills, I would hire somebody.

[rbocquier]

I prototype in KnobMan so I can easily refine the design. Doing this also gives me an insight into how to set up my paths, fills, blends etc. to get the look I’m after.

That’s fine for knobs. For buttons, I use… The Jucer, with a button project.

[Exponential_Audo]

I’m a pretty serious amateur photographer, so I feel most at home with Photoshop. My GUI work there consists mainly of vector work with some bits of photo in here and there. The format I use for most of my GUI work is the PNG file. I like to use shadows and such, and it’s easy to generate pngs with appropriate transparency. My source files tend to have lots of layers, sometimes with some masking or adjustment layers in between. Oftentimes the way you can blend layers will give you some neat ideas.

The downsides of PNGs are twofold. For one, there’s file size. I’ll typically end up with several megabytes of graphics files for a plugin. This day and age that hardly matters. The more important downside is resolution. Juce will let you rescale images easily enough, but most the the time upscaling doesn’t look very good–no fault of Juce, I hasten to say. So you have to take resolution into account. I’d very much like to experiment with vector export, but I don’t know the best export tools (SVG is not well-supported by Adobe) and I don’t know how well Juce supports the import (others can surely speak to that). Also because of the masking I use, I don’t know how well that would translate into pure vectors anyway.

[jpo]

A nice replacement for png is google webp https://developers.google.com/speed/webp/ , a lossy image format format which supports lossless alpha channels. For large images, it is also much faster to decompress than png (because there is less data to decompress).

[TheVinn]

Wow really interesting! I never thought of mixing lossless / lossy that way but it does make sense because the last thing you want is artifacts in a mask.

[Izhaki]

Sorry for jumping in late. Here’s my 2 cents.

To my knowledge most ‘beautiful GUIS’ are made with Photoshop. Particularly you’d need to master:

[list]
[] Most of the graphics is generated using layer effects. You’d need to know them all and their internals (the z-order of their rendering, and which FX wins over which). In fact, you’ll need a phenomenal understanding of these as you will have to know this feature of Photoshop better than 95% of professional graphic designers. The hurdle with effects is that once you learned them by manual, you’d need to study how they are used, for which you need to inspect PSD of various artists (some are free, some for a fee); for example, I’ve learned loads from this guy.[/]
[] Understanding of paths and more importantly vector masks (you’d need this in order to scale your graphics without pixelation, even if you scale by 5 pixels).[/]
[] Opacity and Blending modes are also very importent (and beat me to it, I know what each stands for, but no idea what will happen as I toggle between from one to another, so toggle I am).[/]
[] Rulers and Guides (for layouts). [/]
[] Then you sometimes use brushes.[/]
[] Although not exactly a photoshop feature, you’d need a good understanding of lights and shadows.[/][/list]

I’d start by googling ‘Photoshop UI design’ for a wealth of tutorials (you’ll find things like this one). After you’ve done a dozen tutorials or so, have a look at (my favourite) uiparade.com, you’ll be able to look at designs and understand how they’ve been achieved. Another thing you can do is take photos of desks and rack units and re-create the controls with a photoshop composition.

Then come some basic concepts in graphic design:
[list]
[] Layout. Have a look at the DigiRack EQ - it’s very well laid out, compared to the ugly Logic EQ; and here’s a plugin with no sections and many controls, which would make your eye search whenever you want to tweak something.[/]
[] Contrast - a not so great example would be Soundtoys’ Decapitator - the black knobs fuse with the black background = low contrast; also note the blurry white highlights on the top of the meter - the best designs I’ve seen are sharp.[/]
[] Typography - yes, some fonts are better than others.[/]
[] Colours and Tones[/][/list]

There’s many more, but these are the core ones for GUI. I’m not even getting into usability etc. since you’ve asked about beauty.

A lot of this stuff is about attention to details. If you look at Waves plugins from the last 15 years, they progressed from no attention to details, to attention to details, to hyper attention to details.

Then finally comes the question of what to export and how. For example, if you have 3 buttons, do you export on/off state for all (6 images), or do you export 1 on state, 1 off state, and 3 different labels? Do you export 60 different positions of a rotary pot, or ‘cheat’ with base that has a small round handle which is the only thing that moves?

Allow me to give you an example. The following design took 10 layout drafts, 26 button drafts and approximately 60 hours to make in photoshop (from scratch):

Other than the left/right glows on each buttons and scratch marks, everything in this is vectors and effects.

In this, for example, just how the knob base blends to the surface took an hour of experiments.

The base surface is composed of a pattern texture; on which there’s a (‘white to black’) gradient, on which there is low opacity ‘scratches’ layer (using a brush). Then on top of everything there’s light-complexity layer (to gel the controls and textures to the surface and add some shade complexity).

Each button is made using this composition (on average, you tweak around 3 parameters on each effect):

As for export, the base is exported with all buttons off, but no labels; each label is exported with alpha (ie, no button underneath); then the lit image is not transparent over the button but with alpha on the outer blur, which has to be rendered without the button shadow so when you put it on top you don’t get a bolder shadow; and then the lit label has to bit exported a well (not straightforward - you need to understand blending modes to do this right). The whole thing is 7 PNGs (omitted is the handle of the knob).

Perhaps I’ve went well beyond your interest, but this was just to show that this is complex stuff, yet can be learnt by anyone. If time is not an issue, I don’t see why anyone would fail to do the same thing in 200 odd hours or so, not knowing Photoshop at the onset.

[TheVinn]

Now if IntroJucer could take a layered Photoshop document and produce the corresponding Graphics calls, that would be pretty handy.

[Izhaki]

@TheVinn

Now if IntroJucer could take a layered Photoshop document and produce the corresponding Graphics calls, that would be pretty handy.

That won’t work, because Photoshop doesn’t save them effects and vector mask layers as bitmaps. It renders them on the fly. I don’t think anyone other than Adobe knows how to do this…

[Izhaki]

@Andrew J

With my plugins I’m avoiding the bandwagon of photo-realistic rendering / retro yumminess for the following reasons:

[list][]my plugins aren’t emulations[/]
[]my plugins are software, so I don’t want them to look like hardware[/]
[]pre-rendered controls can’t be re-sized without compromising something[/]
[]detailed pre-rendered controls can lead to a big file size[/][/list]

Here’s my contrasting view on this:

[list]
[] Us humans like to interact with things that are familiar to us from the real world. Most plugins out there aren’t emulations, yet something that looks real-world is more intuitive to use.[/]
[] What things look like is a major factor in our decision making. Given no exposure to advertising, your choice of which can soup to buy in a supermarket will be based how fancy the can looks. There’s nothing wrong about it, before we get to know people we judge them by their looks - it’s the only way available to us.[/]
[] A good GUI design projects professionalism.[/]
[] A company like Apple has succeeded for largely one reason - user awareness. Part of user awareness means designing attractive products.[/]
[] I’m not sure why you’d need to resize the controls of a plugin.[/]
[] EA’s FIFA 2012 iPhone App is 2.5 GB. Who cares? Who picks a plugin by how big it is?[/][/list]

[TheVinn]

@Izhaki

That won’t work, because Photoshop doesn’t save them effects and vector mask layers as bitmaps. It renders them on the fly. I don’t think anyone other than Adobe knows how to do this…

Eh? Layer effects are trivial. There are the image compositing operators (normal, lighten, multiply, etc…) those are like 20 year old algorithms (and well documented). The rest are mostly variations of path filling and stroking, combined with gaussian blur in its various incarnations.

Everything done in Photoshop layers could be done in a juce::Image using a combination of vector Graphics operations, Gaussian blur, the necessary image compositing functions (which would have to be written) and a few image rendering primitives (these would need to be written as well).

[andrewj]

[quote=“Izhaki”][quote=“Andrew J”]

With my plugins I’m avoiding the bandwagon of photo-realistic rendering / retro yumminess for the following reasons:

[list][]my plugins aren’t emulations[/]
[]my plugins are software, so I don’t want them to look like hardware[/]
[]pre-rendered controls can’t be re-sized without compromising something[/]
[]detailed pre-rendered controls can lead to a big file size[/][/list]
[/quote]

Here’s my contrasting view on this:

[list]
[] Us humans like to interact with things that are familiar to us from the real world. Most plugins out there aren’t emulations, yet something that looks real-world is more intuitive to use.[/]
[] What things look like is a major factor in our decision making. Given no exposure to advertising, your choice of which can soup to buy in a supermarket will be based how fancy the can looks. There’s nothing wrong about it, before we get to know people we judge them by their looks - it’s the only way available to us.[/]
[] A good GUI design projects professionalism.[/]
[] A company like Apple has succeeded for largely one reason - user awareness. Part of user awareness means designing attractive products.[/]
[] I’m not sure why you’d need to resize the controls of a plugin.[/]
[] EA’s FIFA 2012 iPhone App is 2.5 GB. Who cares? Who picks a plugin by how big it is?[/][/list][/quote]

Very good points Izhaki, though I do think it is possible to meet your criteria with GUIs that aren’t photo realistic. However, I might completely change my approach if I find the market telling me they don’t like my GUIs I’m sure they’ll like yours - very, very nice!

[Izhaki]

[quote=“TheVinn”]
Eh? Layer effects are trivial. There are the image compositing operators (normal, lighten, multiply, etc…) those are like 20 year old algorithms (and well documented). The rest are mostly variations of path filling and stroking, combined with gaussian blur in its various incarnations.

Everything done in Photoshop layers could be done in a juce::Image using a combination of vector Graphics operations, Gaussian blur, the necessary image compositing functions (which would have to be written) and a few image rendering primitives (these would need to be written as well).[/quote]

Your’e right. And it seems the PSD file format is publicly available, and it there’s even some C++ libs that should read it.

[IvanC]

Hello Izhaki !

Do you know “must read” books or article on the internet about the basic principles of graphic design you have quoted ?

Thanks a lot !