Helmo Graphics
Unleash your vision. Create, animate, and publish professional HTML5 broadcast overlays — lower thirds, tickers, scoreboards, and more — all from your browser.
34 articles
Getting started
Learn what Helmo Graphics can do and build your first overlay.
- What is Helmo Graphics?Overview of the Helmo Graphics visual editor and the broadcast overlays you can create with it.
- Starting a graphic: Pick from Library vs Start from ScratchChoose a ready-made template package from the library or begin from an empty canvas when you create a new graphic.
- Create a graphics package with AI (Helmo Graphics skill)Describe your show to an AI assistant using the Helmo Graphics skill, then import the package file it writes into the editor.
- Your first graphic: step-by-step tutorialBuild a simple lower third from scratch: create the graphic, add a subcomposition and elements, animate it, deploy it and test it.
- Understanding the composition hierarchyHow Compositions, Subcompositions, Groups and Elements fit together, and why one subcomposition per overlay matters.
Editor interface
Get to know the Graphics Editor layout and panels.
- Navigating the Graphics Editor interfaceA tour of the Graphics Editor: composition tree, canvas, inspector, toolbar, onboarding tour and the help cluster.
- Understanding the Composition Tree panelBrowse and organize your overlays, groups and elements in the Composition Tree, and learn how tree order sets z-order.
- The Property Panel: editing element propertiesUse the Property Panel (labeled Inspector in the editor) to change colors, fonts, sizes, positions and animation settings.
Working with elements
Add and customize text, images, and other visual elements.
- Adding a Text elementInsert and configure text elements for titles, names and labels, including live data binding.
- Formatting text: fonts, size, color, alignmentTypography options for text elements: custom fonts, size, shrink to fit, color, alignment, shadow and letter spacing.
- Adding an Image elementAdd logos, photos and backgrounds with an Image element, from a URL or from Drive, and control how the image fits.
- Applying image filters & effectsApply non-destructive filters such as blur, brightness, contrast and saturation to image and video elements.
- Resizing and positioning elementsDrag, resize and align elements on the canvas, lock aspect ratio, and control layering and rotation with exact values.
- Adding shapes: Rectangle & CircleUse Rectangle and Circle elements for backgrounds, bars and badges, with solid or gradient fill and corner radius.
- Adding a Video elementAdd stingers, backgrounds and replays with a Video element and its playback controls.
- Adding an Audio elementPlay stingers, beds and sound effects on your output with an Audio element, with triggers and Helmo Control.
- Adding a Crawler (ticker)Add a scrolling Crawler for news, scores and rolling updates, with loop, nonstop mode and live data binding.
- Adding a Progress BarVisualize polls, timers, fundraising goals and vote shares with a Progress Bar element.
- Adding a GIFAdd looping animated GIF or WebP graphics for reactions, badges and motion accents, and combine them with animations and masks.
- Grouping elementsGroup several elements to move, animate and mask them together as one.
- Helmo List: data-driven listsRender standings, leaderboards and line-ups from data with a Helmo List, in data list or repeater mode.
Subcompositions and animations
Organize overlays into layers and bring them to life.
- What are subcompositions and why they matterSubcompositions are the overlays you bring IN and OUT during a live show; learn what each one contains and how many you need.
- Creating and naming subcompositionsAdd new overlays, name them clearly, organize them by logic layer, and rename or delete them.
- Understanding overlay states: IN, OUT, PreviewHow the IN, OUT and Preview states affect what is visible on the live output, and where you change them.
- Understanding IN/OUT animationsHow entrance and exit animations work, how to set presets, duration and delay on a subcomposition.
- Choosing animation presets (52 available)Browse the library of ready-made IN/OUT animation presets by style and preview them in the editor.
- Update animations: animate value changes liveAnimate an element when its value changes on air, using UPDATE IN/OUT presets with a sequential swap or crossfade.
- Masks: Clip, Knockout & FillUse shapes or text to clip, knock out or fill other elements, and understand target versus source.
Live data and styles
Make graphics update themselves and stay on-brand.
- Helmo Sources: bind live data to your graphicsBind clocks, counters, JSON feeds and Google Sheets to elements so your graphics update themselves.
- Helmo Presets (Styles): reusable styles across elementsDefine a style once and connect it to element properties so a whole package updates when the preset changes.
Output and deployment
Publish your graphics and add them to your broadcast software.
- Deploying your graphic for live useDeploy to generate the Output URL, understand Deploy versus Deploy + wipe on air, and learn how redeploying works.
- Adding the Output URL to OBS as Browser SourceStep-by-step OBS Studio setup: add your Output URL as a Browser Source at 1920x1080 with a transparent background.
- Adding the Output URL to vMixStep-by-step vMix setup: add your Output URL as a Web Browser input and use it on an overlay channel.
Troubleshooting
Fix common issues with graphics and output.