Graphics

 View Only
Back to discussions
Expand all | Collapse all

Creating an Edge on a Quad shape

  • 1.  Creating an Edge on a Quad shape

    Posted 09-15-2021 14:53
      |   view attached

    #XPression

    I want to create a headline of text on a coloured Quad, is there a way I can create a quad which has an edge on it which can be a colour?

    Cheers

    Phil



    ------------------------------
    Phil Hewson
    Freelancer
    ------------------------------


  • 2.  RE: Creating an Edge on a Quad shape

    Posted 09-16-2021 07:18
    Hi Phil,

    There is, unfortunately, no edge/border setting for a quad you can enable (as far as I know) so you need a work-around and there are several ways you can do this.

    I myself would prefer to create the contents of the quad including the edge in Photoshop (or similar application), save it as PNG with transparency and use it as a material. If, for whatever reason, that won't do, you can create a second quad just underneath the quad with the yellow bar, make this quad slightly bigger and assign it a material/color that suits you. Or, if this also is not sufficient, you can add a Drop Shadow effect to the quad. You do this by selecting the "Effects"-tab of the quad, open the Effects-menu at the right side of your screen and drag the "Drop Shadow" effect (in "Keying") to the Effects-tab of the quad. You than can modify the properties in the Effects-tab of the quad so it is no longer a drop shadow, but an edge. The downside of this is that you can't control the size of the edge in pixels, but only percentages, which means that if you have a rectangular quad (not square), the edge is uneven.

    Hope this helps.

    Kind regards,
    Gerard

    ------------------------------
    Gerard de Vries
    Solution Architect Live Graphics & Virtual Graphics
    EMG
    The Netherlands
    ------------------------------

    Original Message


  • 3.  RE: Creating an Edge on a Quad shape

    Ross Staff
    Posted 09-16-2021 07:25
    Try these settings on a drop shadow. 

    It can sometimes be enough. 

    Alternatively, my preferred method create a copy of the shape you want to have a boarder and make it slightly larger, you can then use visual logic to either scale or pass larger size to the object behind. 


    ------------------------------
    Simon Redmile
    Senior Graphic Programmer & Designer
    Ross Video
    United Kingdom
    ------------------------------

    Original Message


  • 4.  RE: Creating an Edge on a Quad shape

    Posted 09-17-2021 09:39

    Thanks both for the help, it's appreciated  

    What I need to do is to create a panel which has text on and autoscales with the text. I need to apply a colour to the face and a colour to the edge of the panel, which can be changeable. 

    I've tried the script option but when it autoscales when I type the left/right edges of the panel stretches out and doesn't have a even edge all around it

    Cheers

    Phil






    ------------------------------
    Phil Hewson
    Freelancer
    ------------------------------

    Original Message


  • 5.  RE: Creating an Edge on a Quad shape

    Posted 09-17-2021 10:15
      |   view attached
    Hi Phil,

    Attached you should find an XPF which basically executes what Simon and I explained: the yellow bar scales with the text and the edge, i.e. quad underneath the yellow bar, sizes with the yellow bar up to the point that the text width is capped by the AutoSqueeze of the text (I just added that as 'a bonus' since you probably also want that as well ;-) ).

    Kind regards,
    Gerard

    ------------------------------
    Gerard de Vries
    Solution Architect Live Graphics & Virtual Graphics
    EMG
    The Netherlands
    ------------------------------

    Attachment(s)

    xpf
    Gerard, EMG.xpf   21 KB 1 version
    Original Message


  • 6.  RE: Creating an Edge on a Quad shape

    Posted 09-20-2021 04:51
      |   view attached
    Hi Phil,

    As a response to you DM a new version of the XPF which has the text (and quads) aligned to the left.

    Kind regards,
    Gerard

    ------------------------------
    Gerard de Vries
    Solution Architect Live Graphics & Virtual Graphics
    EMG
    The Netherlands
    ------------------------------

    Attachment(s)

    xpf
    Gerard, EMG V2.xpf   21 KB 1 version
    Original Message


  • 7.  RE: Creating an Edge on a Quad shape

    Posted 09-22-2021 03:37
    Hi Gerard

    This is great, many thanks for your help.

    Just out of curiosity if I were to make the face colour transparent it wouldn't work as in reality its two quads on top of each thus the 'Edge" quad would become a solid block?

    All the best

    Phil



    ------------------------------
    Phil Hewson
    Freelancer
    ------------------------------

    Original Message


  • 8.  RE: Creating an Edge on a Quad shape

    Ross Staff
    Posted 09-22-2021 04:57
    If you just want an edge only you'll need to make one of the quads a mask.

    ------------------------------
    Simon Redmile
    Senior Graphic Programmer & Designer
    Ross Video
    United Kingdom
    ------------------------------

    Original Message


  • 9.  RE: Creating an Edge on a Quad shape

    Posted 09-22-2021 08:54
    Hi Phil,

    As Simon says: if you only want the edge then the top quad should have a mask material.

    If you, however, want the bar to be semi-transparent you would need a third quad in between the 2 quads you have now and that quad should have a mask material. This means the new quad will cut a hole in the quad for the edge, which mean that if you make the top quad/bar semi-transparent, you won't see the quad for the edge underneath. Alternatively you could also, instead of creating the 3rd quad for the mask, split the quad of the edge into 4 separate quads; one for each edge, and align those 4 quads around the top quad and position/size them using Visual Logic. As with a lot of things: multiple solutions can lead to the result you want and it is up to you to choose the solution which suits you best.

    Kind regards,
    Gerard

    ------------------------------
    Gerard de Vries
    Solution Architect Live Graphics & Virtual Graphics
    EMG
    The Netherlands
    ------------------------------

    Original Message


  • 10.  RE: Creating an Edge on a Quad shape

    Posted 09-23-2021 04:58
    Thanks Gerard and Red - all sorted and the heading GFX works perfectly.

    All the best

    Phil

    ------------------------------
    Phil Hewson
    Freelancer
    ------------------------------

    Original Message


  • 11.  RE: Creating an Edge on a Quad shape

    Posted 09-24-2021 09:48

    A simple way to achieve that is working with a "Slab" object. You just have to activate the "Front Bevel" checkbox and apply a material to its "Bevel face" to make the border. You can adjust the border size in the "Front Bevel" ​settings. It's important to set the Z size of the object near 0 to avoid 3D-related issues.

    It technique is useful if you need just the border (only apply a material to the bevel face) or even if you need a border and fill of the rectangle (assigning a material to the "Face" also).

    I will try to send you a demo project.

    Hope it helps you.

    Regards



    ------------------------------
    Nicolás Noé
    Freelancer
    ------------------------------

    Original Message


  • 12.  RE: Creating an Edge on a Quad shape

    Posted 09-24-2021 10:03
      |   view attached
    Here is the example project.

    ------------------------------
    Nicolás Noé
    ------------------------------

    Attachment(s)

    xpf
    Slab Headline.xpf   16 KB 1 version
    Original Message


  • 13.  RE: Creating an Edge on a Quad shape

    Posted 09-27-2021 11:35
    Thanks Nicolás - this is great too.

    All the best

    Phil

    ------------------------------
    Phil Hewson
    Freelancer
    ------------------------------

    Original Message


  • 14.  RE: Creating an Edge on a Quad shape

    Posted 03-02-2023 15:15

    Hi all. My first post!

    So much great info here.

    I use borders on images a lot too. Are there any plans to implement borders/edges for shapes within Xpression?



    ------------------------------
    Mark Isbell
    ------------------------------

    Original Message


  • 15.  RE: Creating an Edge on a Quad shape

    Ross Staff
    Posted 03-02-2023 15:19

    You can use drop shadow effect to make a boarder. 

    Apply drop shadow, change settings so its solid, it has no offset and is over 100% in size. 



    ------------------------------
    Simon Redmile
    Senior Graphic Programmer & Designer
    Ross Video
    Bristol United Kingdom
    ------------------------------

    Original Message


  • 16.  RE: Creating an Edge on a Quad shape

    Posted 03-03-2023 10:54

    That seems to do the trick thanks Red!

    Apologies for missing your original message above suggesting the same. 



    ------------------------------
    Mark Isbell
    ------------------------------

    Original Message