# GUI Width and Height



## derstefmitf (Oct 28, 2014)

Hi Guys, 

so I created an instrument and set the ui_height_px to 540px. As far as I know, the built-in instrument header is 68px high and the total width is always 633px. So now when I create my GUI in Illustrator (or any other pixel based graphic program) I have to create a file with a background of 608px, right? 

Are these facts correct? 

In summary: 

- Predefined total GUI width: 633px
- predefined instrument header height: 68px

I have the feeling that the header is not exactly 68px high, because when I take the positions out of Illustrator and set up my knobs, buttons, labels accordingly, they seem to be put off by 1-2px. 

Thanks. 

Greetings, 

Stefan


----------



## geronimo (Oct 28, 2014)

This is explained in the following tutorial _ 
68 px seems to be the right size _


http://www.youtube.com/watch?v=aasmMHSTWYI&index=2&list=PLfBGa_6LaIB97CpbWTJmFY4zKTnaRhlOR (http://www.youtube.com/watch?v=aasmMHST ... zKTnaRhlOR)


But I felt the same as yours .


----------



## derstefmitf (Oct 29, 2014)

Thanks. 68px is correct. I tested it, but thanks for the link, because thus I discovered that the predefined GUI width is 632 instead of 633px. Good to know. 

Best regards,

Stefan


----------



## d.healey (Oct 29, 2014)

If you have Photoshop you can use the ruler tool to take accurate measurements of an image. 

I've just done some tests in Kontakt 4 and 5. The default position for a control is 71px from the top of the header. However if you move the control to 0px,0px it will be 68px.

For your wallpaper the visual header is 68 pixels. So if you make a wallpaper that is 418 pixels high it will perfectly fit a ui_height of 350 pixels. 350 + 68 = 418.

Here's a test. Load the attached skin as a wallpaper in Kontakt. It is 632x418px. Set your instrument's height to 350px and make_perfview. There is 1px blue line at each edge of the skin and you'll see that each of these hit the edges of the Kontakt instrument perfectly. Now if you add a label to the instrument it will be positioned by default at 71px from the top. If you move the label to 0,0 using the move_control_px() command it will be 68px from the top.

When using the move_control() command (not the px version) a position of 1 on the Y axis will again be 71 pixels from the top. - I always position in pixels rather than grid squares.


----------



## mk282 (Oct 29, 2014)

In case of multiple scripts used (tabs), make sure you account 25 px more on the bottom.


----------



## derstefmitf (Oct 29, 2014)

Thanks guys, I got the hang of it. It was actually my mediocre Illustrator skills that caused some trouble, but now everything looks fine. I also use the px positions instead of grid systems. 
I must say, I begin to see how much work it is to create a good looking GUI, but I dig good looking GUIs, so I just have to develop a good workflow. 

Cheers, 

Stefan o-[][]-o


----------

