KnobMan/SkinMan Examples

DSP, Plugin and Host development discussion.
Post Reply New Topic
RELATED
PRODUCTS

Post

Very nice Hills93!
Image
stay juicy!

Post

Hi,
I update the previous file with more knobs, switch, and fader. I created a scaled down version of the knobs so that only the knob is used, no extras or shadows. As before all .psd and knobman files are provided.

Link to file:
http://www.box.net/shared/353k819pax

Image
GUI designers a resource list of artists: http://sukaudio.blogspot.com/

Post

Thank you, Hils

Post

I forgot a knob, so here are some extras that didn't make it into the last post...

http://www.box.net/shared/ry9a2kzav6


Image
GUI designers a resource list of artists: http://sukaudio.blogspot.com/

Post

I've been trying to come up with a widget set I can use from plugin to plugin to give them a consistent look. Usually, I get frustrated by my limited graphics chops, but I was looking at Acon Digital Media's plugins, and their user interfaces are fairly simple, but yet elegant and useable.

So I decided to set my sites lower. I tried to use Acon's approach as an inspiration for my widget (without ripping off their look). Here's what I've come up with so far:

Image

I think there's probably too much blue. So I may change the color of some of the widgets, e.g. the slider thumbs. But the controls are very clear and simple, which is my goal.

Post

Hlis93 wrote:Hi,
I update the previous file with more knobs, switch, and fader. I created a scaled down version of the knobs so that only the knob is used, no extras or shadows. As before all .psd and knobman files are provided.

Link to file:
http://www.box.net/shared/353k819pax

Image
Simply GREAT Hlis93!

Thank you for share those!

Cheers,
Rene
Image
DSP with attitude

Post

Leslie Sanford wrote:I've been trying to come up with a widget set I can use from plugin to plugin to give them a consistent look… So I decided to set my sites lower.
Hi Leslie,
I think a consistent look is a good idea not every plug needs a one-of-kind, fancy, and full blown GUI. Simple and clear is always perfect for most users. However setting your sites lower…Never! :D! Personally, please take with a grain of salt, I feel the example that you have posted is a bit too plain and makes things a little difficult to visualize in terms of a full plugin. Simple and effect doesn't have to mean lack of interesting details to keep it looking well guided as well as special and unique yet easy to edit. I think there is to much blue imho it doesn't allow me to visualize parameters effectively perhaps some variations in hue around parameter groups to help lead the eye. Other then my 2cents I think its fine and should serve you well to get that GUI in and done quickly.

Anyway, I liked the idea and thought is would be a good chance to try out Skinman again. I haven't spent much time on it as I mostly use Photoshop for background images but given this I thought I would give it a go. I download the current version, I think its 0.94. I only had an hour to do the background and panel elements so I didn't do much, I had a bit of trouble since I don't know what all the controls are and couldn't find some things I would have like to used to adjust various details. In the end this is what I have. It's easy enough to change around for multiple things I think. Anyway here is the file if anyone is interested:

Link to files: http://www.box.net/shared/msa24su4r7

File contains:
Skinman (0.94) file
Knobman files

Image
Last edited by Hlis93 on Mon May 04, 2009 4:43 pm, edited 2 times in total.
GUI designers a resource list of artists: http://sukaudio.blogspot.com/

Post

Really nice stuff Hlis93! I'm digging those controls :love:

Leslie, I think you're on the right track. I'm guessing the hard part is keeping it simple, but retaining the elegance. If you can do that you should be on a winner.

Post

Image

Wow! That's impressive! :) I'm amazed that you haven't used SkinMan very much recently. I downloaded the file and studied how you assembled things. I've been using SkinMan for awhile, but I saw a few approaches you used that I hadn't thought of before. Very nice.

Thank you for posting this example. I will learn a lot from it. I think collectively we've reached the point with KnobMan where it's not too hard to come up with decent knobs and so forth. The next step (at least for me) is becoming more proficient at creating the overall look of a GUI in which all the elements come together well.

Panel elements, dividers, labels, and so forth are the next conquest for me. I've had more than one occasion where I create a nice widget in KnobMan, and the question becomes what to do with it next? Simply dropping it on a solid color rectangle in SkinMan just doesn't do much. So your example is appreciated. I'm looking forward to studying it more thoroughly. :D

Post

I've played around with my blue themed widget set a little more. I've made all of the elements smaller. My current project is a "super" filter plugin. Here's one possible GUI using my widget set:

Image

Still too much blue, probably. Maybe changing the color of the knobs with help.

Post

I changed the knob colors in each section to give it some variety:

Image

I also adding a texture to the background.

I started on doing a version using Hlis93's widget set:

Image

Post

I got inspired by SOS's article on Modulars and tried to emulate the Doepfer knob and switches. I also tried another attempt at Skinman, sorry to say but I find Photoshop to much easier to use for background images.

File contains
.psd
.knob
.skin

Link to file: http://www.box.net/shared/90dqg2uk29

Image
GUI designers a resource list of artists: http://sukaudio.blogspot.com/

Post

Great job Hlis93, can I use one of you knob for NUSofting?

Post

liqih wrote:Great job Hlis93, can I use one of you knob for NUSofting?
yes these uploads here to the examples area are all open source. I think open source is the term I want not sure, you can do anything you want with them basically.
GUI designers a resource list of artists: http://sukaudio.blogspot.com/

Post

Leslie Sanford wrote:
Image
I like this one more! This one is much cleaner, the color changes on the knobs aren't working for me and I really don't like the texture on background imho. If I may make a few suggestions on things you might want to try out before you get fustrated with layer upon layers of adjustments in skinman...

The knobs are good, they are straight forward. Perhaps reduce the size of the blue rec on the switch and reduce the amount of grad on the red lamp, tighten the beveling on it as well. Tighten the beveling on the faders knobs, for the smoother beveling add another layer with the more extreme settings and reduce the transparency and adjust with the contrast, this might also work on the drop down menu toggles as well. Not much I can say on skinman I barely know anything about it. Perhaps shoten the box so it just surrounds the readout display, something much simplier might be much more effective for the plugs name...a simple line leading to it or perhaps a white rounded rec with a low transparency beneth it extending to edge of the plug.

I don't feel it's the actual style of the skin so much as the panel elements themselves need to be tighter and more compact. It might help in making the panel elements more pronounced and bring everything together in the way you're looking for...perhaps. Its hard for me to externalize what I'm thinking as I don't think all that much when I'm doing it for myself... :)
GUI designers a resource list of artists: http://sukaudio.blogspot.com/

Post Reply

Return to “DSP and Plugin Development”