Building Blocks - Interface Pitfalls / Tips & Tricks

Discussion in 'Building With Reaktor' started by Brett Lavallee, Dec 29, 2015.

  1. Ken88

    Ken88 NI Product Owner

    Messages:
    194
    How to make perfect borders for your blocks (I found this somewhat tricky to figure out)

    Download @Efflam @ NI 's templates, here

    https://www.native-instruments.com/en/reaktor-community/reaktor-user-library/entry/show/9479/

    1. Decide what block width you want - for example 8.

    2. Then open any one of his templates in the 8 folder as a file in your image editor (Photoshop here).

    Example Screen Shot.jpg
    3. Use the spreadsheet to figure out how large your background should be - for 8 the size is 476 by 252.

    Example Spreadsheet.jpg

    4. Paste the background exactly as shown in the upper image. You want the lower and right parts of his template for your borders.
    Save as a PNG file.

    Example Screen shot 2.jpg

    5. Open Reaktor and use the correct template for the size you want. Inside the panel is the special panel image module which should be set to the correct size for the number of blocks that you want (the name is the same as the size in the spreadsheet, the actual width property of the macro is the width-16, height property is height - 12). So for a size 8 block, you would use the 476 * 252 block, which has a width property of 460 and a height property of 240.

    6. Follow all the steps on the above image - I changed the background on "Light Width = 8" In step 4 on the image, using the dimensions on the spreadsheet above.

    Good luck and I hope this helps someone!
     

    Attached Files:

    • Informative Informative x 2
    • Like Like x 1
  2. tenandtracer

    tenandtracer NI Product Owner

    Messages:
    163
    Cheers, glad I could help @Ken88 !

    I've similarly been put off by the infinitely expanding backgrounds which has led me to two different solutions/workarounds. While I'm designing, I usually just have a 'Placeholder' instrument that I place on the end of every row. It's just an empty instrument with a basic background - some simple geometric pattern or something. This ensures that the dimensions of the preceding block remain clear and prevents me from being distracted by my desire to remedy the gross looking block width ;).

    Once I've settled upon a the layout of a block, I take a screenshot which I then use Sketch/Photoshop to design a proper background. Other times I've done this in reverse, designing the layout first, loading it as a background and arranging the controls/panel elements accordingly (then I swap my prototype layout background for a polished version).

    I've attached an example block which demonstrates the configuration/design of a background with 'screws' in each corner.

    I've also included one of my sets of layout templates - it's a basic framework with all of the various block dimensions with the total/functional areas defined - and a small collection of shapes which correspond to the basic knob/slider controls. It contains my source file (made with Sketch - vector software that I now use in place of Illustrator) - an exported EPS, which seemed to open in Illustrator without any issues, and a PDF/PNG reference (not editable, but potentially of use nonetheless).

    There are countless trickybits with Reaktor GUI/design Fortunately, whenever I've encountered some seemingly unintuitive, tedious feature, I've almost always been able to discover/develop some solution or trick to circumvent the problem (often I find a workaround demonstrated within a Native Instruments product).

    I've invested some years in analysis and experimenting (though I'd still consider myself 'Intermediate' - far from expert level). But, if I can save anyone the trouble, I'm more than happy to do so.

    @Brett Lavallee / @bbeasley - Thank you for the kind words and encouragement! As for User Library submission... it's very likely. I've a couple other projects which are the focus at the moment, but I've been developing, organizing and documenting a massive library of controls + design tools/templates with the aim of sharing with the community. Definitely need to parse it out a bit so I don't defeat myself by holding it to unattainable standards ;).
     

    Attached Files:

    • Informative Informative x 2
    • Like Like x 1
  3. Ken88

    Ken88 NI Product Owner

    Messages:
    194
    Thanks @tenandtracer for the last post. I think you and I posted at the same time :)

    Do you think the method I posted is reasonable or do you know a better or easier one?
     
  4. tenandtracer

    tenandtracer NI Product Owner

    Messages:
    163
    Yes, simultaneous posts! Our cosmic energies aligned and stuff.

    The method you posted will get the job done, for sure.
    A few comments/corrections:
    > The background sizes should generally be multiples of 60 - 120/180/240/300/360/420/480/540/600. This ensures that they're designed according to the blocks paradigm.
    > When using borders, value ranges like those you've documented (130-490) are only necessary when you've created a background which is intended for specific context/dimensions. These ranges inhibit the repetition/tiling of the background, which is desirable when one has added labels/shadows and other details which only apply to specific controls or panel elements. Obviously, it'll look bad if such a background extends beyond its intended area and begins to repeat.
    > If the background is a basic, seamless color or texture, it's not necessary to use any border values whatsoever - simply enable horizontal/vertical resizing. However, I understand your initial inquiry was related to preventing these backgrounds from extending beyond their intended range - so you've correctly demonstrated that aspect.
    > Check out the PDF I posted last week - https://www.native-instruments.com/...bed-documentation-and-research-pdf-zip.44881/
    It contains an overview similar to your spreadsheet: Block Size, it's corresponding background, and practical/useable area. These values correspond to the properties of the 'Size' macro and Instrument properties/background.
     
    • Informative Informative x 2
    • Funny Funny x 1
  5. Ken88

    Ken88 NI Product Owner

    Messages:
    194
    Thank you @tenandtracer for reviewing this. I have been very impressed by the work you have done on the interface issues. I hope you are happy that the Broncos won Sunday! ;)

    I got the numbers from Efflam Le Bivic's user library post. He had added a properties setup screenshot for the standard sizes.

    I am looking forward to seeing your tutorials at reaktortutorials :)
     
  6. tenandtracer

    tenandtracer NI Product Owner

    Messages:
    163
    Right you are, Ken - I stand corrected. Thank YOU for sharing your findings :).

    RE: Broncos ... Yay! Go Broncos! Heehee.
    My interest in sports is pretty minimal - but, being a Colorado native, I can't help but appreciate them - especially when they're the underdogs... such a scrappy, passionate (and surprising) franchise.

    In other, on-topic news... Knobman3D has been released! I'm really excited by the new possibilities afforded by this release. It's currently an online-only tool, but editing/rendering is surprisingly speedy. Like... Von Miller speedy (sorry...).

    http://g200kg.github.io/knobman3d/

    Since I've already recorded my series of tutorials using the Knobman standalone (2D) version, I'm going to proceed with polishing/submitting them. However, I'll be sure to create some additional tutorials after I explore this new 3D version.
     
    • Like Like x 2
  7. emm@

    emm@ Active Member

    Messages:
    114
    Also, what I have found useful are two lamps. These can be resized at will on the fly in reaktor - one set to 1 or 2 px wide and whatever high (aligning edges) and one set to 1 or 2 px high and whatever wide (aligning tops and bottoms). These can be grabbed and moved around at will for alignment purposes.
    (edit - I just saw tenandtracer's comment about alignment pics which sort of almost makes this post redundant, but maybe the resize / fully editable aspect of the lamps might be worth keeping in mind as suits you)
     
    Last edited: Feb 11, 2016
    • Informative Informative x 1
  8. emm@

    emm@ Active Member

    Messages:
    114
    I have often found it very useful to enable "Right Mouse Though" (found in object > Properties > Function > Mode) on certain overlays (e.g. mouse area, invisible image overlay etc) when building (and in finished). This means I can get straight to the element I need in structure rather than have two things happen - 1. no response to right mouse click, or 2. open the invisible element in the structure and have to re-navigate to the functional object I want to access.
     
    • Informative Informative x 3
  9. herw

    herw NI Product Owner

    Messages:
    6,417
    Overlapping panel elements are very strange, mysterious and sometimes buggy and non logical escpecially when using stacked macros.
    NI has to develop a layer-framework for this.
     
  10. bbeasley

    bbeasley New Member

    Messages:
    18
    Any of you guys know what's up with this "KNB-SHADOW_M" that completely freaks out when in use? I like it as an option because it's a heavier shadow and gives more contrast to white knobs and white backgrounds. But when you adjust the knob it's applied to it seems to reveal a clipping mask of some kind, as well as the mouseover area of the label & value field (see attached). Perhaps this is some sort of interactivity used to benefit another usage? Or…?
     

    Attached Files:

  11. mosaic_

    mosaic_ Guest

    No idea why, but turning off image resizability for the shadow fixes it for me.
     
  12. bbeasley

    bbeasley New Member

    Messages:
    18
    An odd shadow this one. Turning off resizability keeps it from revealing its mask for me as well. Unfortunately it also turns it into the more subtle version of KNB-SHADOW_M and not the darker version it was. Gonna go the old fashion route and let this shadow work through its issues alone I suppose.
     
  13. sellotape

    sellotape NI Product Owner

    Messages:
    345
    I often have trouble to get all the controls in the correct blocksize. It's mostly the shadow or the mod-slider which makes the gui bigger. Putting the mod-slider too close to the control makes it unusable because you always click the shadow or the modring. So here is what i did to fix this:

    1st put the shadow and may be the scale on your background image
    shadow & scale in bg.jpg
    2nd put the modring in a seperate macro.
    modring.png

    now you can move the modslider closer to knob and save some space ;)
    slider.png
     
    • Like Like x 1
    • Informative Informative x 1
  14. Brett Lavallee

    Brett Lavallee NI Product Owner

    Messages:
    1,006
    A lot of the issues talked about in this thread have been improved in patch 7.0.3! The ability to group panel elements and assign them to different layers are among the new features! Check out this video for more information.
     
    • Like Like x 2
  15. Paule

    Paule NI Product Owner

    Messages:
    7,325
    Is there some one who got a PNG file from knobman3d? Handle the download button exported nothing!
     
  16. Flintpope

    Flintpope New Member

    Messages:
    3
    You the man!
     
    • Like Like x 1
  17. bbeasley

    bbeasley New Member

    Messages:
    18
    +1
    Never been able to get an export out of Mr. Knob 3D!
     
  18. Paule

    Paule NI Product Owner

    Messages:
    7,325
    bbeasley, wrote a short note on KVR forum but the author don't answer.
     
  19. Jonathan Tremblay

    Jonathan Tremblay NI Product Owner

    Messages:
    393
    cool thread!
     
    • Like Like x 2
  20. Kostas K

    Kostas K NI Product Owner

    Messages:
    23
    Just wanted to say that this is a VERY informative thread.
    Helped me a lot to make my first blocks
     
    • Like Like x 2