How create cool GUI

stw · 24 Feb 2011

CoreStyler wrote: Hi people! Im thinking on how to create cool gui's for beginners. i practise with gimp and photoshop but is very diffucult to made some. This is the only gui i made:

how do you work on them? any tips?

The guy who created "Knobman" - which is somehow essential for me to create knobs - did another cool application which is called "skinman" Easy to understand and fast results. You can get it here: http://www.g200kg.com/en/software/skinman.html

trogluddite · 24 Feb 2011

+1 to both of those peices of software, absolutely essential. One other tip - when you're creating backgrounds in GIMP/PS - load in your knob graphics too, then paste them in on new layers - it makes it much easier to see how the final thing will look if you can see it with the controls. Just delete or hide them before saving the final background. Oh, and set your editor package up with a 8*8 pixel 'snapping' grid like SM has - makes spacing everything out way, way easier.

Dozius · 24 Feb 2011

trogluddite wrote: Oh, and set your editor package up with a 8*8 pixel 'snapping' grid like SM has - makes spacing everything out way, way easier.

I wouldn't worry about this, you can place things anywhere you want if you hold ctrl while positioning. Just keep track of the x/y position relative to your overall GUI size and use the hints when placing in SM.

loopeytunes · 24 Feb 2011

hey my knobs...lol

open synthmaker, make your synth, set the layout i.e. knobs, slider etc etc where you want them, print screen, open photoshop, go file new, click ok, press Ctrl+V to paste the screen shot, use the selection tool to select the synth area, copy it and make a new document, use the pen tool in photoshop to create your shapes (layout) and use a gradeint on them to get a cool look or I could do some work for you 😀

Loopey

trogluddite · 24 Feb 2011

Dozius wrote: Just keep track of the x/y position relative to your overall GUI size

He he, that's what I was hinting at - adding and subtracting in my head was never my strong point! 😉 I've always found the grid more of a help than a hindrance, so I prefer to keep life simple and quick. (i.e. I'm just lazy!)

loopeytunes wrote: paste the screen shot

If you put a bright single colour background behind the knobs in SM before taking the screenshot, you can then use the magic wand selection tool to remove the BG in photoshop really quickly - you then have a layer with all your knobs and labels in their correct positions, but your new panel will show through from underneath.

CoreStyler · 25 Feb 2011

loopeytunes wrote: hey my knobs...lol

open synthmaker, make your synth, set the layout i.e. knobs, slider etc etc where you want them, print screen, open photoshop, go file new, click ok, press Ctrl+V to paste the screen shot, use the selection tool to select the synth area, copy it and make a new document, use the pen tool in photoshop to create your shapes (layout) and use a gradeint on them to get a cool look or I could do some work for you 😀

Loopey

i done this for the making of my new synth (still alpha) but i dont know if is better to first draw a GUI in PS, than design and place knobs, selectors... in SM. Maybe that is better because is more simple.

hey loopey maybe i will pay you when i finished my synth if you could works on my synth GUI. I saw your work for CubicAudio:

Very cool. you worked only on GUI? Sorry if i used your knobs. i'm working on knobman for the 2nd gui but when i create it i was not able to make knobs and yours are good. 😉

im only a sound designer who practise with SM. Maybe i will take programming studies at university soon! But a collaboration can be good.

loopeytunes · 25 Feb 2011

Yep just worked on the GUI there 😀

PM me if you want me to do some work for you in the near future.

Loopey

needaname · 25 Feb 2011

This is how i'm doing GUIs:

1) Use vector knobs, delete all the background, outline and so on, just leaving the marker and the sweep (if needed). 2) Open Photoshop, make the full skin and knobs without markers and sweeps (just a background). 3) Move the vector knobs with transparent background each one on the right place of the Photoshopped skin and it's done.

Same thing about labels and everything.

I think Knobman is good, but I need it only if I want the Knob to rotate completely (not only the marker). I attached the Serio3 background as an example.

CoreStyler · 4 Mar 2011

I change some of the knobs new made with knobman