FREE Combinator 2 graphics asset pack

[ryanharlin]

Ryan just out here casually doing the Lord's work Thanks for getting that header in there. Way cleaner/more accurate than what I made last night. I definitely think having PNGs of all the different types of knob/fader would be great too so you can see how it'll look before you export but this is still a huge help.

Yeah I agree. I actually was trying to get that from the dev team for my own work in After Effects before the video came out but I haven't been successful in wrangling those yet but I'm working on it!

The one thing that gets a little weird with designing your panels entirely in Photoshop with PNG versions of the knobs and faders is that Reason's coordinate system isn't pixel based. It's something else called like a "graphical unit" that the developers use. It has something to do with the scaleable graphics zooming, where you can't place a knob at an exact XY coordinate for 240% because at 160% it would be interpolating its position. You can tell from the way I'm describing it that I don't really understand it yet! But if you nudge a knob or fader around on a Combinator you'll notice that it's not moving +/- 1 pixel at a time. It's more than that. It's moving 1 "graphical unit" at a time. So in order to design in Photoshop entirely we'd all have to understand the conversion system of 1 graphical unit at 250% = X pixels. And then we'd probably want to set up a grid in Photoshop to that grid system and turn on "Snap to Grid" so that moving those temporary knobs and faders around puts them exactly where they'd be in Reason.

OR... the alternative is to just design freely and then load into Reason and go back and forth nudging here and there if it looks off from what you designed in Photoshop in a true pixel-level positioning system.

Everything I've just said might be totally wrong too, so take that with a grain of salt! I'm still trying to understand the technicalities of designing for the new Combinator. When I learn it all and understand it I'll explain it for the other design-minded folks who want to know this stuff.

[ryanharlin]

Thanks Ryan! That would be great! Any live stream planned?

Joey, I have a couple plans for the Combinator. I'm going to make a video all about the Combinator that I've been dying to make for YEARS and now I finally can. It's going to be an overview for people who want to understand it just enough to use it in patches, then it'll go a bit deeper into programming and customizing the combinator as well. Then Mattias and I are talking about a Combinator livestream together where he gives some cool tips on programming it. After that I have in my plan a thing I've been thinking of like a "Combinator Live Build Session" where I just make some Combinators in a livestream format – more like the way that Twitch streamers just work live with an audience to play games or produce a beat. If that's something people want to do with me, then I could do multiple Combinator Build livestreams perhaps. It's all up to what we all want as a community and who tunes in for what.

[nickb523]

After that I have in my plan a thing I've been thinking of like a "Combinator Live Build Session" where I just make some Combinators in a livestream format

I'd tune in for that and hang out in the chat.

Well produced Combinator videos would be really welcome. Over the years since the introduction of RE's users appear to have forgotten the days of the community building device type Combinators. With the introduction of Combi 2 it would be great to get some refresher courses that clue people in on just how much is possible within Reason's modular environment.

Cheers!

[joeyluck]

Thanks Ryan! That would be great! Any live stream planned?

Joey, I have a couple plans for the Combinator. I'm going to make a video all about the Combinator that I've been dying to make for YEARS and now I finally can. It's going to be an overview for people who want to understand it just enough to use it in patches, then it'll go a bit deeper into programming and customizing the combinator as well. Then Mattias and I are talking about a Combinator livestream together where he gives some cool tips on programming it. After that I have in my plan a thing I've been thinking of like a "Combinator Live Build Session" where I just make some Combinators in a livestream format – more like the way that Twitch streamers just work live with an audience to play games or produce a beat. If that's something people want to do with me, then I could do multiple Combinator Build livestreams perhaps. It's all up to what we all want as a community and who tunes in for what.

That sounds great! I'd watch!

[selig]

This is really cool - we could really do with some pixel-accurate images of the header and controls so we can onion skin them into our art packages and lay everything out exactly as it will be in the program. I tried doing a screenshot of a Combi at 200 and 240% but they weren’t 3077 wide. Not sure why that is.

Yeah 3770 is actually 250%. I'm not sure why the app scales to the numbers it does but I'm sure there's a great technical reason.

The magic number you need to know, though, is 4.1667%. If you take a screenshot at 240% in the app and scale it by that much (104.1667% in Photoshop) you'll get a 250% size for laying out in 3770 images.

Ryan, I've found irregularities with any screen zoom setting other than 100 and 200%, in that the x and y axis don't get scaled equally with screen shots (at least on a mac). But if you take screen shots at 200%, and you scale them by a simple 125% then bobs your uncle. This is even more accurate because of scaling by an integer instead of a rounded repeating value.
I've been starting with a white background and a big cross hair using 5px lines. I always start with 3770 x 2070 since I often don't know exactly how big the device will end up, and it's the width that's essential to match 3770 since the height is ignored as far as scaling goes (scaling is proportional, using the width as the "anchor" as I understand it). In fact, having taller backgrounds gives you room for having a border around the editor (check out my B3 Combinator to see that in action), or you can "hide" notes or advanced controls in the part that's not shown by your current size choice. So a 3U device may have extra info (credits, instructions, fine tune parameters) "hidden" that's exposed when you configure the device as 4U. A bit of a hack, but I'll be using it for sure!

[selig]

Ryan just out here casually doing the Lord's work Thanks for getting that header in there. Way cleaner/more accurate than what I made last night. I definitely think having PNGs of all the different types of knob/fader would be great too so you can see how it'll look before you export but this is still a huge help.

Yeah I agree. I actually was trying to get that from the dev team for my own work in After Effects before the video came out but I haven't been successful in wrangling those yet but I'm working on it!

The one thing that gets a little weird with designing your panels entirely in Photoshop with PNG versions of the knobs and faders is that Reason's coordinate system isn't pixel based. It's something else called like a "graphical unit" that the developers use. It has something to do with the scaleable graphics zooming, where you can't place a knob at an exact XY coordinate for 240% because at 160% it would be interpolating its position. You can tell from the way I'm describing it that I don't really understand it yet! But if you nudge a knob or fader around on a Combinator you'll notice that it's not moving +/- 1 pixel at a time. It's more than that. It's moving 1 "graphical unit" at a time. So in order to design in Photoshop entirely we'd all have to understand the conversion system of 1 graphical unit at 250% = X pixels. And then we'd probably want to set up a grid in Photoshop to that grid system and turn on "Snap to Grid" so that moving those temporary knobs and faders around puts them exactly where they'd be in Reason.

OR... the alternative is to just design freely and then load into Reason and go back and forth nudging here and there if it looks off from what you designed in Photoshop in a true pixel-level positioning system.

Everything I've just said might be totally wrong too, so take that with a grain of salt! I'm still trying to understand the technicalities of designing for the new Combinator. When I learn it all and understand it I'll explain it for the other design-minded folks who want to know this stuff.

Hey Ryan, I haven't done the full rabbit hole on this, but I did find that nudging 1x in the Combinator was equal to nudging 5x in my vector based app (Graphic). I set my grid so my nudge is 5 px, and so far it's worked for moving things 10-20 px at a time or so.
It could very well turn out that if I had gone further I would run into the issue you're talking about - further testing is required!
All to say, nudging the same number of "clicks" in both apps has given me precise results, even posted about it somewhere) recently (so I may have to amend that post if/when it turns out it's not totally precise).

[ryanharlin]

Ryan, I've found irregularities with any screen zoom setting other than 100 and 200%, in that the x and y axis don't get scaled equally with screen shots (at least on a mac). But if you take screen shots at 200%, and you scale them by a simple 125% then bobs your uncle. This is even more accurate because of scaling by an integer instead of a rounded repeating value.
I've been starting with a white background and a big cross hair using 5px lines. I always start with 3770 x 2070 since I often don't know exactly how big the device will end up, and it's the width that's essential to match 3770 since the height is ignored as far as scaling goes (scaling is proportional, using the width as the "anchor" as I understand it). In fact, having taller backgrounds gives you room for having a border around the editor (check out my B3 Combinator to see that in action), or you can "hide" notes or advanced controls in the part that's not shown by your current size choice. So a 3U device may have extra info (credits, instructions, fine tune parameters) "hidden" that's exposed when you configure the device as 4U. A bit of a hack, but I'll be using it for sure!

Wow I hadn't thought of the fact that developers could expose the 1u, 2u, 3u sizes to end users as a button and it would effectively make collapsible and expandable panels. Man, I hope they do that. It seems like it's 90% already in place, it would just require opening it up on the end-user side instead of having to click Editor -> Configure -> and messing with a dropdown menu.

[Loque]

Ryan, I've found irregularities with any screen zoom setting other than 100 and 200%, in that the x and y axis don't get scaled equally with screen shots (at least on a mac). But if you take screen shots at 200%, and you scale them by a simple 125% then bobs your uncle. This is even more accurate because of scaling by an integer instead of a rounded repeating value.
I've been starting with a white background and a big cross hair using 5px lines. I always start with 3770 x 2070 since I often don't know exactly how big the device will end up, and it's the width that's essential to match 3770 since the height is ignored as far as scaling goes (scaling is proportional, using the width as the "anchor" as I understand it). In fact, having taller backgrounds gives you room for having a border around the editor (check out my B3 Combinator to see that in action), or you can "hide" notes or advanced controls in the part that's not shown by your current size choice. So a 3U device may have extra info (credits, instructions, fine tune parameters) "hidden" that's exposed when you configure the device as 4U. A bit of a hack, but I'll be using it for sure!

Wow I hadn't thought of the fact that developers could expose the 1u, 2u, 3u sizes to end users as a button and it would effectively make collapsible and expandable panels. Man, I hope they do that. It seems like it's 90% already in place, it would just require opening it up on the end-user side instead of having to click Editor -> Configure -> and messing with a dropdown menu.

Erm..yea, true

[wendylou]

With the new 1U through 6U sizes, the template guides are very helpful. But, wow, with all the custom combinator design possibilities now in Reason 12, making custom backdrops got a bit more involved LOL!

Blade Runner 2021 combinator.jpg (685.84 KiB) Viewed 34765 times

[joeyluck]

With the new 1U through 6U sizes, the template guides are very helpful. But, wow, with all the custom combinator design possibilities now in Reason 12, making custom backdrops got a bit more involved LOL!


Blade Runner 2021 combinator.jpg

Oooh Blade Runner!

I think if you were to adjust the contrast, or place that image as a layer over a black background and then lower its opacity, it would make the rest easier to view and read.

[wendylou]

I think if you were to adjust the contrast, or place that image as a layer over a black background and then lower its opacity, it would make the rest easier to view and read.

Hey, you can't have dystopia without darkness and rain! Seriously, one can use any light or dark image if you place subpanel overlays where the controls are located in order to enhance their visibility, as seen here in an old pre-Reason 12 combinator backdrop:

under-construction.jpg (66.97 KiB) Viewed 34739 times

I was actually referring to the challenges of deciding where to place sub-panel overlays on top of an image such that they line up with the actual control layouts. I suppose the way to do it is to first take a snapshot of the combinator in Reason 12, import it as a layer, then set the opacity to 50% to use a guide to sub-panel layout.

[joeyluck]

I think if you were to adjust the contrast, or place that image as a layer over a black background and then lower its opacity, it would make the rest easier to view and read.

Hey, you can't have dystopia without darkness and rain! Seriously, one can use any light or dark image if you place subpanel overlays where the controls are located in order to enhance their visibility, as seen here in an old pre-Reason 12 combinator backdrop:


under-construction.jpg

I was actually referring to the challenges of deciding where to place sub-panel overlays on top of an image such that they line up with the actual control layouts. I suppose the way to do it is to first take a snapshot of the combinator in Reason 12, import it as a layer, then set the opacity to 50% to use a guide to sub-panel layout.

Oh for sure! I was saying to make it darker, but that works too! I'd put some of those buttons and controls on the police craft lol Or find an image of the spinner vehicle and put knobs on the wheels!

[selig]

find an image of the spinner vehicle and put knobs on the wheels!

Ha Ha - funny you should mention putting knobs on things that spin…started as a way to get a tape reel image into a Combinator about tape emulation, and go a bit more abstract with the concept. Built a nice reel image so had to use it!
Another work in progress, a tape sim effect built off my work on the ART Tape setting:
(on the ART version you're basically adjusting the first big knob here, tape speed)

[joeyluck]

Oh I'm sure the beta testers remember my first combi

aka the one that gave Ryan nightmares lol

[selig]

Just checking back in on the relationship between Combinator pixels and graphics pixels. I just checked and tweaked my TAPE Combinator above, and found the proper spacing to be 720 pixels apart. So I checked the knobs and option-clicked them 9 times (16x9=144) which equal 144 px. and 144 x 5 is indeed exactly 720. Here's the results, it's subtle but the tape reels are now shrunk down so there's no obviously gap between them and the knobs. Looks so much better, and I was able to use math to line them up perfectly.
So in conclusion, as far as I've tested, one Combinator pixel equals 5 high res px, and if you can nudge by grid you can set your grid so that one "click" is equal in terms of alignment in both environments. For those of use who find themselves changing their minds often, it's a god-send!

[Ottostrom]

Just checking back in on the relationship between Combinator pixels and graphics pixels. I just checked and tweaked my TAPE Combinator above, and found the proper spacing to be 720 pixels apart. So I checked the knobs and option-clicked them 9 times (16x9=144) which equal 144 px. and 144 x 5 is indeed exactly 720. Here's the results, it's subtle but the tape reels are now shrunk down so there's no obviously gap between them and the knobs. Looks so much better, and I was able to use math to line them up perfectly.
So in conclusion, as far as I've tested, one Combinator pixel equals 5 high res px, and if you can nudge by grid you can set your grid so that one "click" is equal in terms of alignment in both environments. For those of use who find themselves changing their minds often, it's a god-send!

That is super useful info about the alignment! Thanks for doing the testing for this
Your tape combinator also looks very nice, I hope you're not planning on keeping it for yourself

[ryanharlin]

Someone on YouTube asked for a way to "dabble" in using these graphics without Photoshop and so I made a quickie answer for him about how to do it on a mac using the built in Preview app. Anyone else lacking a photo editor but owning a mac can follow this tutorial.

[wendylou]

I took snapshots of every Combinator type in Reason 12 at 240% zoom to assist in backdrop creation, as you'll be able to see the position of various control elements over your backdrop when using transparency.

https://ln5.sync.com/dl/8d55d7cb0/k3b4g ... f-vjs3v5fv

Seems to help:

blade runner 2021 B.jpg (170.56 KiB) Viewed 34662 times

[wendylou]

Awesome! Nice work! I never owned a reel-to-reel-to-reel-to-reel-to-reel!

[guitfnky]

pretty sweet to see Reason 12 is turning a bunch of musicians into art students.

[wendylou]

8x3 Rotaries dark - just experimenting

4U Orange serpentine.jpg (897 KiB) Viewed 34621 times

8x3 Rotaries dark 4U Orange serpentine.jpg (333.72 KiB) Viewed 34621 times

[selig]

I took snapshots of every Combinator type in Reason 12 at 240% zoom to assist in backdrop creation, as you'll be able to see the position of various control elements over your backdrop when using transparency.

https://ln5.sync.com/dl/8d55d7cb0/k3b4g ... f-vjs3v5fv

Seems to help:

blade runner 2021 B.jpg

I don’t know if I’ve understood you correctly, but it may be more accurate to do screen shots at 200% due to scaling rounding errors. I’ll post further findings soon…

[wendylou]

I took snapshots of every Combinator type in Reason 12 at 240% zoom to assist in backdrop creation, as you'll be able to see the position of various control elements over your backdrop when using transparency.

Seems to help:

I don’t know if I’ve understood you correctly, but it may be more accurate to do screen shots at 200% due to scaling rounding errors. I’ll post further findings soon…

I originally did make 200% snapshots but went back and replaced with 240% snapshots, which I used to test making my 4U 8x3 Rotaries backdrop. But even a 240% snapshot ends up being only 3620 x 1326px – smaller than the recommended backdrop size of 3770 x 1380px, thus, it had to be scaled up to the recommended template dimensions. Nevertheless, the alignment in Affinity Photo seems spot on, as confimed in a new test where I added 3 knob-insert graphics from Ryan's assets on my top row of knobs. I centered the recessed circles inside the detents and they look exactly the same in Reason 12 when the backdrop is added:

4U Orange serpentine-test.jpg (899.56 KiB) Viewed 34535 times

[selig]

Wendy, maybe I misunderstood: what are you using your screen shots for?

[QVprod]

pretty sweet to see Reason 12 is turning a bunch of musicians into art students.

You must’ve missed the PUF days. There were several great looking user mock-ups floating around. Cool to see those can be actual devices (of sorts) now.