# Knob Design - Knobman or Photoshop



## derstefmitf (May 27, 2015)

Hi KSP-Community,

what program do you use to create knobs? I use knobman currently, but usually make the design in Photoshop/Illustrator or Affinity Designer. Then I use some parts of my knob design as single pictures which I load into knobman and then I do all the rest in knobman. I wonder if it wouldn't be easier (especially when I work with an external graphic designer) to stay in Photoshop completely and use some sort of Action/Automation in PS to create all the states of the knob. Does anyone do it this way? If yes, would you be so kind to share the Photoshop Actions/Scripts? 

Any other approaches? I know that some UI Design gurus use 3d programs like Cinema 4D, but I really really don't want to touch these things, way to complex and no time to learn them properly. 

Thanks. 

Cheers,

Stefan


----------



## mk282 (May 27, 2015)

Doing the layers in Photoshop then animating in KnobMan is a very good combination (because Actions for knobstrip animations in Photoshop are so damn slow, KnobMan is the real tool for that job)


----------



## geolito (May 27, 2015)

mk282 @ Wed May 27 said:


> Doing the layers in Photoshop then animating in KnobMan is a very good combination (because Actions for knobstrip animations in Photoshop are so damn slow, KnobMan is the real tool for that job)


thats the best way to go ,photoshop and knobman...perfect combo...


----------



## jesusginard (May 27, 2015)

I do the design in Photoshop and then I do the animations in After Effects. Just set the rotation/whatever animation and export to png sequence.
When I have all the PNG I go to this website to create the strips: 
http://www.cssportal.com/css-sprite-generator/

I've been using C4D lately to create realistic GUIs, but that's another topic...


----------



## derstefmitf (May 28, 2015)

jesusginard @ Wed May 27 said:


> I do the design in Photoshop and then I do the animations in After Effects. Just set the rotation/whatever animation and export to png sequence.
> When I have all the PNG I go to this website to create the strips:
> http://www.cssportal.com/css-sprite-generator/
> 
> I've been using C4D lately to create realistic GUIs, but that's another topic...



This sounds interesting, maybe I'll try that, but also good to know, that I already do it in a decent way. 

One other question, how do you guys retrieve the X and Y positions of the individual controls in your layout, let's say in PS? I would love to have a PS Script that can output these information with the name of the layer it's position.


----------



## jesusginard (May 28, 2015)

I do it with a little script. I declare all sliders and assign the corresponding image. Then: 


```
on init
    declare ui_slider $image(0,1000000) { Control that you want to position }
    declare ui_knob $x(0,633,1) { X value }
    declare ui_knob $y(0,350,1) { Y value }
end on

on ui_control($x)
    move_control_px($image,$x,$y)
end on 

on ui_control($y)
    move_control_px($image,$x,$y)
end on
```


----------

