Building Blocks - Interface Pitfalls / Tips & Tricks

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

  1. Brett Lavallee

    Brett Lavallee NI Product Owner

    Messages:
    1,006
    Here I will list a few things I’ve learned while making blocks interfaces. I will go over a few mistakes to avoid, and will also give a few hints on how to make interesting backgrounds. If anyone has anything else to add, that will be great as well.

    The main lessons I will go over are:

    Moving layered controls without disrupting their layers
    Preventing panel objects from overlapping each other
    Properly moving modulation sliders
    Increasing label sizes
    Background creation

    Edit: you may want to check the overview for patch 6.03 before reading this thread, since there were changes to the image layering system since then.
     
    Last edited: Mar 6, 2018
    • Like Like x 7
    • Informative Informative x 4
  2. Brett Lavallee

    Brett Lavallee NI Product Owner

    Messages:
    1,006
    The knobs and controls used in blocks feature complex, layered parts, that are often invisible. Since attempting to click and drag these controls will disrupt their layout, I will teach you a better method to move them.

    First, right click your block and select “Instrument Structure in Other Pane.” Then, go into your block's “Panel” macro. Find the corresponding macro for the control you want to move; select it, and then, without de-selecting it, click the “Unlock Panel” icon (the padlock,) and use your keyboard's arrow keys to move the control. This moves the entire control, with all its parts, all at once.

    Forum Post Picture 1.png

    Because of the nature of these layered controls, you should be careful anytime your panel is unlocked. I have made it a habit to avoid clicking anywhere on my blocks, so I don't move their invisible parts. It’s hard to tell when you have messed something up, and Edit > Undo doesn’t always fix these type of movements. For that reason, it is a good idea to save your work before unlocking your panel.
     
    Last edited: Jan 1, 2016
    • Like Like x 5
    • Informative Informative x 1
  3. Brett Lavallee

    Brett Lavallee NI Product Owner

    Messages:
    1,006
    The second lesson I will share here is how to avoid overlapping panel elements. When placing controls close together, text, shadows, and mouse over areas can be trimmed to avoid this problem. Controls should respond immediately upon first clicking them, if they don’t, it’s a sign that you might have overlapping elements.

    MM post.png
    Here I have a block that uses a text object for its title, positioned closely to the A/B mod buttons. Even though it looks nice, there is a problem. The invisible part of the text object is overlapping the A button, preventing it from being clicked.
    Forum Post Picture 2.png
    The solution is this; Make a habit of minimizing the size of every text object you use. Simply reduce the width and height until the text begins to disappear, or a scroll bar appears, and then increase the object’s size one pixel at a time until it looks correct. It may seem tedious, but this removes the unnecessary invisible part of the object, which makes it a lot easier to prevent overlaps.

    The second culprit of these mistakes is shadows. Usually, they can be trimmed with the same method as text, and much less trimming is needed. However, with certain knobs the shadows act as “anchors” for the other layered parts, and messing with them can cause unwanted effects. In some cases the shadows can simply have their visibility turned off, which changes the look of the control, but is favorable to overlapping elements.

    Because of these annoyances, the best method of shadow-creation is to draw them on the background image itself, which you can see has been done on the new West Coast blocks.

    Another good thing about trimming texts and shadows is that it enables you to place knobs closer to the edge of your blocks.
     
    Last edited: Dec 29, 2015
    • Like Like x 3
  4. Brett Lavallee

    Brett Lavallee NI Product Owner

    Messages:
    1,006
    The third lesson is very easy, how to properly move the mod sliders. Often when positioning knobs you will find yourself wishing the mod sliders were on the other side of the control. Fortunately this is very easy to do, without clicking and dragging them, which would ruin the knob. In the block’s Panel macro, find the macro for your control and open it. Inside you will see a macro called Mod A/B. Selecting this enables you to move both the A and B sliders at one time, using the same movement method from my first lesson.

    Forum Post Picture3 sliders.png
     
    • Like Like x 2
  5. Brett Lavallee

    Brett Lavallee NI Product Owner

    Messages:
    1,006
    Fourth lesson: Increasing your control's label size. This is done within the knob's first Label/Value macro, where you will see the second Label/Value macro. This is the stacked macro that determines the maximum size of the objects within it. Increasing its width and height enables you to increase the size of your text.
    Forum Post Picture 4 label size.png
     
    • Like Like x 1
  6. Brett Lavallee

    Brett Lavallee NI Product Owner

    Messages:
    1,006
    For creating custom backgrounds, Efflam Le Bivic has uploaded a great tool to the User Library. This uses the free program "Blender 3D" to create the beautiful lighting and gloss effects featured in the factory blocks. I highly recommend using this tool if you want to create your own backgrounds, it is very fast and easy. To get interesting results from this process, try feeding the template with noisy patterns or strange art, the results can be stunning.

    Here is the link to Efflam's project: http://www.native-instruments.com/en/reaktor-community/reaktor-user-library/entry/show/9017/
     
    Last edited: Dec 29, 2015
    • Like Like x 2
    • Informative Informative x 1
  7. Brett Lavallee

    Brett Lavallee NI Product Owner

    Messages:
    1,006
    This next lesson was learned through an experiment: gaining panel objects from the factory blocks using screenshots. This is how I have been making a lot of my blocks lately. It allows me to add graphics, titles, and shadows directly to the background, and still match their factory looks exactly. This is also how you can make factory blocks larger. You can even cut out objects such as the Monark block's borders and apply them to other background styles. Just be sure you save all the images you use as .PNG files, which are very high quality, and allow them to be viewed at different resolutions and still be sharp.
    Here are some of the results I've gotten from this process so far. Monark Bg 1.png Monark 116 Border.png BG - Metal 1.png BG - Monark Black.png
     
    Last edited: Dec 29, 2015
    • Like Like x 1
  8. Brett Lavallee

    Brett Lavallee NI Product Owner

    Messages:
    1,006
    I would also like to point out another great resource on the user library that I have been using; Cal Scott's "Quilts of Chaos." These are incredibly beautiful, high quality images made through mathematic means. You can see them in his most recent ensemble uploads, but you might have also found them in some of my own work, although I use them a little more subtly.

    Here is a link to the first of four quilt collections: http://www.native-instruments.com/en/reaktor-community/reaktor-user-library/entry/show/9241/

    AI cal.png Cal's version of my "Alien Intellect" block. See the face in it? I do...
     
    • Like Like x 2
  9. Brett Lavallee

    Brett Lavallee NI Product Owner

    Messages:
    1,006
    Last edited: Jan 2, 2016
    • Like Like x 3
  10. Thala

    Thala NI Product Owner

    Messages:
    577
    Thanks Brett. this will help new block builders.
    mostly of these steps i had to lern the hard way too... losing saves etc.
     
    • Like Like x 1
  11. Brett Lavallee

    Brett Lavallee NI Product Owner

    Messages:
    1,006
    Thanks for reading. Same here, all lessons learned through trial and error.. Hopefully this saves others the trouble.
     
    • Like Like x 1
  12. Atomatic

    Atomatic New Member

    Messages:
    9
    Thanks for infospiration.
    I´m a new Reaktor user. The GUI elements I find a bit confusing, thanks for the cool tips.

    Happy patching, Tom
     
    • Like Like x 1
  13. davedove

    davedove NI Product Owner

    Messages:
    55
    hey Brett
    you bin bizzy tday
    :)
     
    • Like Like x 1
  14. minblue

    minblue NI Product Owner

    Messages:
    29
    Very useful & informative. Thanks very much for taking the time to put this together, Brett.
     
    • Like Like x 1
  15. Exiannyc

    Exiannyc NI Product Owner

    Messages:
    174
    Thanks for sharing your hard won knowledge Brett.
     
    • Like Like x 1
    • Informative Informative x 1
  16. bbeasley

    bbeasley New Member

    Messages:
    18
    Thank you for sharing this knowledge, Brett. Your trick for moving layered elements is perfection!
     
    • Like Like x 1
  17. bbeasley

    bbeasley New Member

    Messages:
    18
    Hey Brett, I've gotta couple questions if you don't mind. I am trying to relocate the Mod A / B sliders from the right side of a knob over to the left side. I've combed through various views of the macro and its properties, but haven't had any luck in finding a position adjustment.

    And my other question is in regards to sizing blocks. In Panel view, under the Info tab my block's size property is set to 190 px wide by 240 px high. However, if I take a screeshot of it and open in Photoshop to use as a guide for the design, the block is actually 208 px wide by 252 px high. Any thoughts / best practices for sizing blocks and creating size-specific designs?
    Thanks!
     
    • Like Like x 1
  18. Brett Lavallee

    Brett Lavallee NI Product Owner

    Messages:
    1,006
    For the mod sliders, moving the stacked macro called 'mod a/b' should usually do the trick. It's found in the control's first layer.

    252 px seems correct, I'm not sure why the Block's info tab always gives a smaller number. Overlaying your screenshots over a finished background file that you know is correct (such as Efflam La Bivic's recent uploads) should help determine if they are the right size.
     
    • Like Like x 1
  19. minblue

    minblue NI Product Owner

    Messages:
    29
    This has had me scratching my head from the beginning with Blocks, but here's a capture from page 12 in the Framework manual that (doh!) finally cleared it up for me:

    =========================================================
    Region capture 2.png
    =========================================================

    Hope this helps.
     
    • Like Like x 1
    • Informative Informative x 1
  20. bbeasley

    bbeasley New Member

    Messages:
    18
    Thanks Brett and Miniblue, that works perfectly.
     
    • Like Like x 1