GUI Development Question.

[zach.mx]

Hi all, I'm new to the HISE world and am currently in the process of proto-typing my first plugin. I've been working my way through the documentation, watching David Healey's videos, and poking around with a super primitive version of the sample library I'd like to build.

I've made a mock-up wire frame in PenPot (self hosted figma) that I'm currently rebuilding in Hise using Paint Routines, but it got me thinking. At some point later in the process, I'd really like to bring in a friend who is a graphic designer to help with the color palette, layout design, and I imagine he will likely do some texture work.

What would the workflow for doing that be? I imagine something like this?

1. Penpot mockup Exported for Photoshop
2. Design work done in photo shop, layers exported out individually.
3. Rebuild layers + vectors in Hise using Paint Routines and Film strips?

I guess what I'm really wondering is do all textures and images need to exist as film strips?

Happy to take some recs on which of Davids Videos may cover this topic too.

[d.healey]

@zach-mx What do you mean by textures?

[HISEnberg]

@zach-mx There is an image component for anything that is static (say for example your background). You really only need to use filmstrips for dynamic components such as sliders and buttons. Otherwise you more or less have the process right.

It is usually recommended to export your images 2X larger than your UI and scale them down (in order to deal with different displays). If you can use Hise LAF/Painit Routine for anything, it is usually better than using a filmstrip or image. Keep in mind that the z-level works bottom up, so the last component you add to your UI will be "above" the other components. You can rearrange this in the Component List of the HISE interface.

[zach.mx]

@d-healey said in GUI Development Question.:

@zach-mx What do you mean by textures?

The graphic artist I work with will probably add some visual grain/distortion to whatever layout he designs to give it a sort of "vintage" feeling - or something to that extent.

Say a panel is a solid color but utilizes an overlay of paper/metal overlay + grain in photoshop, does that get imported as an image and applied as overlay essentially? I have a very elementary understanding of the paint routines/how hise is drawing interfaces, so maybe I just need to dig into some more of those tutorials, but I'm sort of proto-typing as I go

[d.healey]

@zach-mx You can create a grain effect directly in a HISE paint routine (or laf) by using the g.addNoise function

HiseSnippet 870.3ocsU00aSiDEclz5tzrKHPhm3Iq9jKpJxNanMKHDkl1rDszRzltU7FZ53qiGU6YrlYLkHDR6ekUhef7Of8N1IMIaqJPjVKkHe+3LyQ264d8PshCFiRSnMOcRAPn+h2nIRaZuTlPRFbHgdOuiYFKn8qccvjBlw.wDJcse24ft45jpmu7hCXYLIGl6hPNSI3vqE4B6buC2+ODYY8Ywvoh7Exty9C3JYOUlpD4yZdgjBF+B1X3DlKsFdjWwLoD5i8hi5Dkzky1saTm1bd6t60921iCrjDX2nmrWmtIcRX7v1D5FGEKrJ8HKyBF7POPEOYTp5RY8EblvHNOCbFQjQ3MW6lzKUjEObVwwPHz0GNuTsVco5gdGKhEW4edI69UA7miXwhFswsQone.JQWfRqWSoG3MhqEE14Qb74m8FHwNHVRfknRctjF+C0qmByPZakyt.5qQiqPDraX3N93ea+rlMw9iw5+dl1eHSBYQ9O2eFxwfsmJuPIQifspCukCS8qsLfcHVfr+opzJjPPRojaEJYv3sa9wlaNtUBJJdYVVfMUXbmVvVmOtVLr0134fYvhiOQILPvGYYEorm5G1Jr6N9FNKC5y3XQ8o9sagrkoAL5rC50JLgCTkxXSP3163mqjJdpVkyrBNlltD9DdA3uYbxWIOQYg2HCp3VyO0z++FJI4Fi4pFZUVFnuwvNAu91.FHKyOGz6f03rR3pDwF7xplM99TM75lyBIpjCjB6aJfo18UYwN0f68qqwHS6t3a+0fCYVlS1M0GlWAnsBGcnGBuGGzqEga5cHXtvpJpxcpjfP+IaUz6NSh5jEDAd02wqVhP9vU6B96y1exhFWJhs3juG8yTBIEDiSsNq8QqYhDL8MN8xG805ULWax.mIUwkYL6xCptUXSCf8gklNbS.RivNYwUb+.Sug25z62KEef2PgkmdybrwMvQrC8+AGmty6tdGgKY414Dbcu9ucUWv8Mt95UEiOlY0BTa3cRY9HrSyA71knhw3z.MbpzZ6PmsqBLBjwUFeEelFLxYSmFLZVPRNiqUuiWO841pdmJOHmjUe0YS7yenseDoZhbw5bNtj+cb9xG00.1dUA9qqJvNqJvmrp.2cUAt2pBr62Fn6avurzVslGGaHjiGdT0JLJ8HICUfUpUx+xKqE3N

For other textures you'll need to use images. Either drawing them on panels or using image components.

[zach.mx]

@d-healey said in GUI Development Question.:

@zach-mx You can create a grain effect directly in a HISE paint routine (or laf) by using the g.addNoise function

For other textures you'll need to use images. Either drawing them on panels or using image components.

Amazing. Good to know there's a grain function. The grain + distortion references is really just one example of something he might do. I'm not 100% sure what sort of techniques he is going to utilize. Really just trying to understand how it will all come together so I can give him appropriate direction when the time comes

Appreciate you @d-healey. I have been devouring as many of your videos and using them constantly as I prototype this instrument I'm building. I'm sure I'll have many more questions.

[tonni]

@zach-mx In mobile application development, designing an intuitive and visually appealing user interface is crucial for user engagement. If you're working with a website development company in Dubai, integrating a graphic designer into your HISE plugin development process makes sense. Starting with a PenPot mockup and exporting it for Photoshop allows for detailed design refinements, including color palettes, textures, and layout improvements. Once the design is finalized, exporting individual layers and vectors ensures a smooth transition into HISE. While film strips are commonly used for animations and dynamic UI elements, standard images and textures can also be implemented directly, depending on the design requirements. David Healey’s tutorials on UI design in HISE should provide valuable insights into best practices for handling images, film strips, and Paint Routines efficiently.

[clevername27]

@tonni I'd welcome hearing more from you the forums…

[d.healey]

@clevername27 pretty sure that's a bot post

[mmprod]

@d-healey and it has 4 upvotes

[tonni]

@d-healey No, dear, not a boat. I am just making my post error-free; that's why it looks like a bot.

[d.healey]

@tonni Ah fair enough, just looked sus