Blackmagic Forum

Hello all: I'm new to Fusion I've searched through the forums and YouTubes and can't find out to make a rectangle with a border. I'm trying to re-create a project I made in AE for a lower 3rd using a red rectangle with a white border.

I've made a red rectangle in fusion, but how do I add a border to it?

Thanks in advance!

Tolbert

There are so many ways to this. You can put the red rectangle you have right now into a BC tool with the brightness all the way up to 1 with a rectangle mask with 'solid' unchecked and a width set to the width you want. Or you could duplicate the BG tool you used to create the red rectangle and set it to white and then use the same mask in the same way as my first example.
Those are just 2 ways to get you started.

I've attached a png of the file I'm trying to recreate in Fusion. I get the red rectangle pretty close and I've made a white one (a copy of the red one) now when I scale it things get weird.

Please find one potential way to do it here.

Code: Select all

{
   Tools = ordered() {
      Red_BG = Background {
         NameSet = true,
         Inputs = {
            GlobalOut = Input { Value = 100, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 0.517647087574005, },
            TopLeftGreen = Input { Value = 0.0392156876623631, },
            TopLeftBlue = Input { Value = 0.0784313753247261, },
         },
         ViewInfo = OperatorInfo { Pos = { 440, 115.5 } },
      },
      Rectangle1 = RectangleMask {
         Inputs = {
            MaskWidth = Input { Value = 1920, },
            MaskHeight = Input { Value = 1080, },
            PixelAspect = Input { Value = { 1, 1 }, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Center = Input { Value = { 0.5, 0.162305379263974 }, },
            Width = Input { Value = 0.786167400599962, },
            Height = Input { Value = 0.157665463579174, },
            CornerRadius = Input { Value = 0.278, },
         },
         ViewInfo = OperatorInfo { Pos = { 550, 115.5 } },
      },
      Black_BG = Background {
         NameSet = true,
         Inputs = {
            GlobalOut = Input { Value = 100, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
         },
         ViewInfo = OperatorInfo { Pos = { 440, 181.5 } },
      },
      Merge1 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Black_BG",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Red_BG",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
            EffectMask = Input {
               SourceOp = "Rectangle1",
               Source = "Mask",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 550, 181.5 } },
      },
      Instance_Rectangle1 = RectangleMask {
         SourceOp = "Rectangle1",
         Inputs = {
            BorderWidth = Input { Value = 0.00269, },
            Solid = Input { Value = 0, },
            StartEndRenderScripts = Input { },
            EffectMask = Input { }
         },
         ViewInfo = OperatorInfo { Pos = { 715, 115.5 } },
      },
      Merge3 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Merge1",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "White_BG",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
            EffectMask = Input {
               SourceOp = "Instance_Rectangle1",
               Source = "Mask",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 825, 181.5 } },
      },
      White_BG = Background {
         CtrlWZoom = false,
         NameSet = true,
         Inputs = {
            GlobalOut = Input { Value = 100, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 1, },
            TopLeftGreen = Input { Value = 1, },
            TopLeftBlue = Input { Value = 1, },
         },
         ViewInfo = OperatorInfo { Pos = { 825, 115.5 } },
      }
   }
}


A variation on Robert's method, with a little easier control over additional elements Merged into the lower third:

Code: Select all

{
   Tools = ordered() {
      Red_BG = Background {
         NameSet = true,
         Inputs = {
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 0.517647087574005, },
            TopLeftGreen = Input { Value = 0.0392156876623631, },
            TopLeftBlue = Input { Value = 0.0784313753247261, },
            Gradient = Input {
               Value = Gradient {
                  Colors = {
                     [0] = { 0, 0, 0, 1 },
                     [1] = { 1, 1, 1, 1 }
                  }
               },
            },
            EffectMask = Input {
               SourceOp = "Rectangle1_1",
               Source = "Mask",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 770, 82.5 } },
      },
      Rectangle1_1 = RectangleMask {
         Inputs = {
            MaskWidth = Input { Value = 1920, },
            MaskHeight = Input { Value = 1080, },
            PixelAspect = Input { Value = { 1, 1 }, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Width = Input { Value = 0.786167400599962, },
            Height = Input { Value = 0.157665463579174, },
            CornerRadius = Input { Value = 0.278, },
         },
         ViewInfo = OperatorInfo { Pos = { 770, 49.5 } },
      },
      Text1 = TextPlus {
         Inputs = {
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            Font = Input { Value = "Open Sans", },
            StyledText = Input { Value = "text", },
            Style = Input { Value = "Regular", },
            ManualFontKerningPlacement = Input {
               Value = StyledText {
                  Array = {
                  },
                  Value = ""
               },
            },
            ShadingGradient1 = Input {
               Value = Gradient {
                  Colors = {
                     [0] = { 0, 0, 0, 1 },
                     [1] = { 1, 1, 1, 1 }
                  }
               },
            },
         },
         ViewInfo = OperatorInfo { Pos = { 770, 148.5 } },
      },
      White_BG = Background {
         NameSet = true,
         Inputs = {
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 1, },
            TopLeftGreen = Input { Value = 1, },
            TopLeftBlue = Input { Value = 1, },
            Gradient = Input {
               Value = Gradient {
                  Colors = {
                     [0] = { 0, 0, 0, 1 },
                     [1] = { 1, 1, 1, 1 }
                  }
               },
            },
            EffectMask = Input {
               SourceOp = "Instance_Rectangle1",
               Source = "Mask",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 880, 82.5 } },
      },
      Merge2 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "White_BG",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Red_BG",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
         },
         ViewInfo = OperatorInfo { Pos = { 880, 115.5 } },
      },
      Transform1 = Transform {
         CtrlWZoom = false,
         Inputs = {
            Center = Input { Value = { 0.5, 0.161111111111111 }, },
            Input = Input {
               SourceOp = "Merge3",
               Source = "Output",
            },
         },
         ViewInfo = OperatorInfo { Pos = { 880, 214.5 } },
      },
      Merge3 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Merge2",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Text1",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
         },
         ViewInfo = OperatorInfo { Pos = { 880, 148.5 } },
      },
      Instance_Rectangle1 = RectangleMask {
         SourceOp = "Rectangle1_1",
         Inputs = {
            BorderWidth = Input { Value = 0.00335717021276596, },
            Solid = Input { Value = 0, },
            StartEndRenderScripts = Input { },
            EffectMask = Input { }
         },
         ViewInfo = OperatorInfo { Pos = { 880, 49.5 } },
      },
      Black_BG = Background {
         NameSet = true,
         Inputs = {
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            Gradient = Input {
               Value = Gradient {
                  Colors = {
                     [0] = { 0, 0, 0, 1 },
                     [1] = { 1, 1, 1, 1 }
                  }
               },
            },
         },
         ViewInfo = OperatorInfo { Pos = { 770, 247.5 } },
      },
      Merge1 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Black_BG",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Transform1",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
         },
         ViewInfo = OperatorInfo { Pos = { 880, 247.5 } },
      }
   }
}


The key point in Robert's approach is the instanced Rectangle with a deinstanced Border Width control. To make an instance of a tool, copy it, then paste with Ctrl+Shift+V (Cmd+Shift+V on MacOS). Then deinstance a control by right-clicking on it and choosing 'Deinstance.' Most of the controls on the two Rectangles will remain linked—you can change the corner radius or size, and both will update at the same time. But the Border Thickness is independent.

I appreciate all of the replies but these two with the code I have no idea what to do with them.

Copy the code, then paste into your Flow view. The nodes will appear.

Thanks again, but I'm not finding "flow view" in Fusion, Resolve help manual, or on Google yet.

Okay after watching a short YouTube intro to Fusion inside Resolve 15, I saw a tool called "flow"! So, I copied the code and made a blank background clip and pasted and holy smokes! It's there!

Thanks so much and have a great weekend!

Tolbert

Here's an update on my simple (not so simple) rectangle in Fusion...

I got the code into Fusion and it worked and I was able to adjust the border width.

Another snag (for me at least) was mixing the font styles with the text tool in Fusion. I'm using Helvetica Neue medium and light. The text tool in Fusion only lets me use one style of text - arrggghh! It's always something.

The text effect in Resolve lets me use multiple styles in one text effect so I'm going that route for now.

Have a great weekend!
Tolbert

tolbertpitman, it's Character Level Styling (mixing the font styles)