Banner Studio

Visual Editor

Work in a full-screen banner editor with an overview canvas, editable layers, a properties panel, timeline and multi-format artboards.

01

Layer-Based Design

Build banners by stacking layers — text, images, buttons, rectangles, and background elements. Each layer has its own position, size, rotation, opacity, and animation properties. Drag the canvas rotation handle, hold Shift for 15-degree steps, or flip a visual layer horizontally or vertically in the properties panel. Rotation and flips support undo and remain in exported artwork. Reorder layers by drag-and-drop in the sidebar, lock layers to prevent accidental edits, and toggle visibility to focus on specific elements. The layer system mirrors what designers expect from tools like Figma or Photoshop, but outputs production-ready HTML5.

02

Multi-Format Artboards

See named sizes together on a dotted overview canvas, with square and portrait layouts above landscape formats. Choose Edit size or Single edit to focus on one artboard; return to All layouts from the toolbar or Escape. Single edit changes only that size, while All layouts updates linked content across sizes. Each artboard keeps its own position, size and timing. When imported layers share a source identity, text, fonts, colours and asset choices update across those sizes as one undoable edit. The full-screen editor opens without the agency dashboard navigation and keeps the timeline and inspector close to the canvas. Add formats at any time, and use AI auto-resize when a new layout needs a starting point.

03

Insert Media and MotorStack Assets

Use Insert to upload or choose images, videos and audio, add text, buttons and shapes, or browse MotorStack. Videos become playable video layers with thumbnail strips on the timeline. Select a video to preview its source, replace it, or choose clip start and end points in the right sidebar. Rectangle layers support ellipses and blur, preserving supported soft shadows from imports in the editor and HTML exports. Trimming keeps the layer’s placement and animation, supports preview and cancel, and can loop the selected clip. Replacement follows the layout editing scope and resets the old trim. Audio becomes a timeline track. Replace images while retaining their layout and animation. Crop images with draggable corner handles or arrow keys, apply the crop to the current layout, and undo or cancel. Browse available OEM images and documents from the Assets panel. Browse colour images across a brand, or choose a model for gallery and interior photos. Search by model, grade, colour and image name, with separate image and document filters. Add a supported image to the library with an explicit action, or download a PDF separately. Source warnings and failed imports remain visible with retry controls. Importing media does not assign it to a dealership or change existing artwork; choose a library image when you want to place it on the canvas.

04

Properties Panel

Edit fonts, spacing, position, rotation and opacity. The editor selects an unambiguous matching client or MotorStack brand kit when a project opens, with manual kit selection available. Its Brand font tab uses the managed font files and declared weights; new text and buttons start with that kit’s heading font. Existing artwork is styled only when you apply a font or kit. Text Effects preserves your font and animation with editable depth, bevel, lighting, shadows and reviewed AI textures. Transparency surrounds the lettering. Save client or agency recipes. Depth simulates 3D.

05

Autosave and Keyboard Shortcuts

Choose a light or dark workspace with an independent saved preference; artwork keeps its original colours. Find projects in the shared agency and full-screen library using visual previews, searchable Clients, Folders and Tags tabs, pinned All clients and Unassigned entries, nested folder breadcrumbs, and grid or list views. Active filters stay visible when switching tabs. Canvas and title edits save after a short pause. Saved status confirms the project and its versioned viewer snapshot are stored; the signed-in saved viewer refreshes as revisions arrive. Failed saves remain visible and retry without discarding local edits. Full keyboard shortcut support for professional workflows — arrow keys for pixel nudging, Shift+arrow for 10px jumps, Delete to remove layers, Cmd+D to duplicate, Cmd+Z/Shift+Cmd+Z for undo/redo, and bracket keys for layer reordering. Shortcuts are discoverable in the editor and match conventions from popular design tools so there is no learning curve.

Ready to see it in action?

Get Started