Elements - Shape

Another type of basic element you can add to your graphic template is a "Shape" element ["text" element as well as "Image" element were previously discussed]. Clicking on the shape element icon will create a new layer within your graphic template. Once you click to add the shape element, a dropdown will appear below the icon with shape options. After selecting a shape it will populate in your canvas on the graphic template builder. Selecting the shape in your builder [or from the layer list] will make a new menu appear on the right sidebar where you can adjust the position, size, color fill, and many other attributes.Basic Graphic Element - Shape

Before we dive into the formatting details, let's start on the left sidebar of the builder. Now that you have selected your "Shape" element and it is in your builder, look under "Layers". We will walk through some ways to customize each layer. Basic Graphic Element - Shape 1

 
  1. Double click to rename your layer. Carefully naming your layers is important because when you produce with your templates in Producer, you will edit your template based on the layer names. 
  2. Click the 3 vertical dots on the right side to open additional options. On this dropdown you can:
    1. Lock or unlock the layer
    2. Check whether or not you want this layer to be editable. If this box is checked, you will be able to update or change the text within Tagboard Producer. If the box is unchecked, you will not be able to make any changes to the text layer in Tagboard Producer.
    3. Rename, duplicate, or delete the layer.
  3. Hide or unhide your layer with the eye icon.

 

Size and Placement 

Once you add a shape layer, the individual layer will have a series of customization on the right rail. Let's walk through those, from top to bottom:

  • Position: Everything on your canvas works with a drag and drop workflow, or in the upper right corner you can set an exact X and Y axis.

  • Size: Click on the shape and drag the corners to adjust the size, or set exact width & height in the right rail. Between the width and height numbers is a lock. When locked, your shape will maintain the original aspect ratio. When unlocked, you can control the height and width independently of one another.

  • Snap To: Use this feature to snap your text to one of nine exact locations on the canvas (center, center-top, center-bottom, center-left, center-right, bottom-left, bottom-right, top-left, top-right)

  • Nudge: Click to move the shape layer one pixel at a time, to get exact placement.

  • Transform: This allows you to skew the shape with a horizontal or vertical slant, and/or rotate your shape up to 360 degrees.

You can hold shift + click on several layers to select multiple layers at once. If multiple layers are selected, you will see additional options in the right rail for size and placement:

  • Align: Align all selected layers (Left, Center, Right, Top, Middle, Bottom)

  • Distribute: You need to have at least three layers selected to use distribute. This will allow you to make the horizontal or vertical spacing between selected layers even. Best practice of this is to first align the layers, and then distribute the spacing. 

  • Nudge: Perfect your graphic placement by nudging the selected layers up, down, right, or left, one pixel at a time.

Style

  • Opacity: On a scale of 0-100% set the transparency of your text layer. 0% will be completely transparent, 100% will be completely solid.
  • Rounded Corners: If you chose rectangle as your main shape, you can select to round individual corners.
  • Background Color: Choose whether you want the background color to be solid or a gradient. If gradient option is selected you can set the degree you want the gradient change to happen (180 is top to bottom, 90 is left to right).
  • Background Image: You can also select an image from your media library to add to your shape. Once the image is selected you can select whether you want the image to fill the entire space (and potentially crop parts of the image), or fit the image to the shape. 
  • Border: Checking this box drops a border around your shape. You can adjust the width (pixels) of the border and color.
  • Shadow: checking this box will give your shape a drop shadow.
    • X: Adjust the shadow on the horizontal axis, left and right.
    • ​Y: Adjust the shadow on the vertical axis, up and down.
    • ​Blur: Adjust how harsh or feathered you want your shadow to be.
    • Spread: Adjust the width of your shadow
    • Color: Set the color of your text shadow
  • Blur image: If you don't want your shape to be crystal clear you can increase the number to gradually increase the blur.

Animation

  • Animate In: Select from the dropdown menu how you want your text to animate onto the screen. The duration (set in milliseconds) determines how long your animation will last. The delay determines how long after selecting this graphic, the individual layer will begin to animate.
    • Easing will allow you to change the acceleration of the animation, to be smoother or more natural. select from the dropdown to make a smoother and more realistic animation. The two most common easing options are "ease in", meaning the animation will start slowly and accelerate, and "ease out", where the motion will start quickly and decelerate.
  • Animation Out: Select from the dropdown menu how you want your text to animate off the screen, followed by same customizable options as above.
  • Looping Animation: If you check this box you can set a layer of the graphic to continue animating a certain way while the graphic is displayed on screen. 

 

Now that you're all set with the "Shape" element, you can move on to the next element to add your graphic template. Next up is the "QR Code" element. If you're finished, you're ready to produce with your templates. Feel free to take a look at "Getting Started with Producer" if you're not already familiar or you can head to Producer to begin building out your playlist in order to take your content live.