SignageStudio Scene Editor
Design Without Limits
The SignageStudio Scene Editor is a powerful visual design tool that makes creating professional digital signage content easy. Build complex multi-zone layouts, add dynamic components, and preview your content in real-time.
Editor Interface
Workspace Overview
┌─────────────────────────────────────────────────────────────────┐
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ File Edit View Insert Format Arrange Tools Help │ │
│ │ [Save] [Undo] [Redo] [Preview] [Publish] │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ ┌───────────┬─────────────────────────────────┬─────────────┐ │
│ │ │ │ │ │
│ │ COMPONENT│ CANVAS │ PROPERTIES │ │
│ │ LIBRARY │ │ │ │
│ │ │ ┌───────────────────┐ │ Selected: │ │
│ │ [Media] │ │ │ │ [Label] │ │
│ │ [Text] │ │ Scene Preview │ │ │ │
│ │ [Shapes] │ │ │ │ Position: │ │
│ │ [Data] │ │ 1920 × 1080 │ │ X: 100 │ │
│ │ [Social] │ │ │ │ Y: 200 │ │
│ │ [Widgets] │ └───────────────────┘ │ │ │
│ │ │ │ Size: │ │
│ │ │ │ W: 400 │ │
│ │ │ │ H: 100 │ │
│ │ │ │ │ │
│ │ │ │ Style: │ │
│ │ │ │ Font: Arial │ │
│ │ │ │ Size: 48pt │ │
│ │ │ │ │ │
│ └───────────┴─────────────────────────────────┴─────────────┘ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ LAYERS: [Background] [Image1] [Video Zone] [Text Header] │ │
│ └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
Interface Panels
| Panel | Purpose | Key Functions |
|---|---|---|
| Toolbar | Quick actions | Save, undo, preview, zoom |
| Component Library | Add elements | Drag components to canvas |
| Canvas | Design area | Visual layout workspace |
| Properties | Configure | Edit selected element |
| Layers | Manage depth | Reorder, show/hide |
| Timeline | Animation | Sequence and timing |
Creating Scenes
New Scene Setup
- Go to Scenes → New Scene
- Configure scene settings:
| Setting | Options | Recommendation |
|---|---|---|
| Resolution | 1920×1080, 3840×2160, custom | Match your displays |
| Orientation | Landscape, Portrait | Match mounting |
| Background | Color, image, transparent | Brand colors |
| Name | Descriptive name | Location + content type |
Resolution Presets
| Preset | Resolution | Aspect Ratio | Use Case |
|---|---|---|---|
| HD | 1920×1080 | 16:9 | Standard displays |
| 4K UHD | 3840×2160 | 16:9 | 4K displays |
| Portrait HD | 1080×1920 | 9:16 | Vertical displays |
| Square | 1080×1080 | 1:1 | Social, square displays |
| Ultrawide | 3840×1080 | 32:9 | LED strips, tickers |
| Custom | Any | Any | Special requirements |
Working with Components
Adding Components
Method 1: Drag and Drop
- Find component in library
- Drag onto canvas
- Position and resize
Method 2: Insert Menu
- Click Insert → Component
- Select component type
- Configure in dialog
Method 3: Double-Click
- Double-click component in library
- Appears at canvas center
- Move to desired position
Component Categories
Media Components
| Component | Description | Formats |
|---|---|---|
| Image | Static images | JPG, PNG, GIF, WebP, SVG |
| Video | Video playback | MP4, WebM, MOV |
| Web Page | Embed websites | Any URL |
| Document display | PDF files | |
| Slideshow | Image rotation | Folder of images |
Text Components
| Component | Description | Features |
|---|---|---|
| Label | Simple text | Font, color, alignment |
| Text Box | Multi-line text | Wrapping, scrolling |
| Ticker | Scrolling text | Speed, direction |
| HTML | Rich text | Full HTML/CSS support |
| Countdown | Timer display | Target date/time |
Data Components
| Component | Description | Sources |
|---|---|---|
| RSS Feed | News feeds | Any RSS/Atom URL |
| JSON Data | API data | REST endpoints |
| XML Data | XML feeds | XML URLs |
| Google Sheet | Spreadsheet data | Shared sheets |
| Database | Direct DB connection | SQL Server, MySQL |
Widget Components
| Component | Description | Configuration |
|---|---|---|
| Clock | Time display | Format, timezone |
| Weather | Weather info | Location, units |
| Calendar | Event schedule | Google, Outlook, iCal |
| Traffic | Traffic maps | Location, zoom |
| Stock Ticker | Market data | Symbols |
Social Components
| Component | Description | Features |
|---|---|---|
| Twitter/X | Tweet display | Hashtag, user, search |
| Photo feed | User, hashtag | |
| Page posts | Page ID | |
| YouTube | Video embed | URL, playlist |
| Social Wall | Multi-platform | Combined feeds |
Layout and Design
Positioning Elements
| Method | How | Best For |
|---|---|---|
| Drag | Click and move | Rough positioning |
| Arrow keys | Nudge 1 pixel | Fine tuning |
| Shift+Arrow | Nudge 10 pixels | Faster movement |
| Properties panel | Enter X, Y values | Exact placement |
| Align tools | Menu → Align | Multiple elements |
Alignment Tools
| Tool | Function | Shortcut |
|---|---|---|
| Align Left | Left edges aligned | Ctrl+Shift+L |
| Align Center | Horizontal centers | Ctrl+Shift+C |
| Align Right | Right edges aligned | Ctrl+Shift+R |
| Align Top | Top edges aligned | Ctrl+Shift+T |
| Align Middle | Vertical centers | Ctrl+Shift+M |
| Align Bottom | Bottom edges aligned | Ctrl+Shift+B |
| Distribute Horizontal | Equal spacing | Ctrl+Shift+H |
| Distribute Vertical | Equal spacing | Ctrl+Shift+V |
Layer Management
| Action | Method |
|---|---|
| Send to Back | Right-click → Send to Back |
| Bring to Front | Right-click → Bring to Front |
| Move Up | Layers panel drag up |
| Move Down | Layers panel drag down |
| Lock Layer | Click lock icon |
| Hide Layer | Click visibility icon |
| Rename Layer | Double-click layer name |
Using Grids and Guides
Enable Grid:
- View → Show Grid
- Configure grid size in preferences
Add Guides:
- Click and drag from ruler
- Enter precise position in dialog
Snap Options:
- Snap to Grid
- Snap to Guides
- Snap to Objects
Multi-Zone Layouts
Creating Zones
A zone is an independent content area within your scene.
┌─────────────────────────────────────────────────────────────────┐
│ MULTI-ZONE LAYOUT │
│ │
│ ┌────────────────────────────┬─────────────────────────────┐ │
│ │ │ │ │
│ │ MAIN VIDEO ZONE │ SIDEBAR ZONE │ │
│ │ (1440×810) │ (480×810) │ │
│ │ │ │ │
│ │ Primary content, │ Social feed, │ │
│ │ videos, promotions │ news, updates │ │
│ │ │ │ │
│ │ │ │ │
│ └────────────────────────────┴─────────────────────────────┘ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ TICKER ZONE (1920×270) │ │
│ │ Weather | Time | Scrolling news ticker │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Zone Types
| Zone Type | Use Case | Content Behavior |
|---|---|---|
| Playlist Zone | Multiple items | Rotates through content |
| Static Zone | Single item | Fixed content |
| Dynamic Zone | Data-driven | Updates from source |
| Interactive Zone | Touch content | Responds to input |
Zone Configuration
| Property | Description |
|---|---|
| Position | X, Y coordinates |
| Size | Width, height |
| Background | Color or image |
| Playlist | Assigned content |
| Transition | How items change |
| Duration | Default item time |
Styling and Effects
Text Styling
| Property | Options |
|---|---|
| Font Family | System fonts, Google Fonts |
| Font Size | Point or pixel |
| Font Weight | Light, Regular, Bold |
| Font Style | Normal, Italic |
| Color | Hex, RGB, picker |
| Alignment | Left, Center, Right, Justify |
| Line Height | Spacing between lines |
| Letter Spacing | Character spacing |
| Text Shadow | Offset, blur, color |
| Outline | Stroke width, color |
Shape Styling
| Property | Options |
|---|---|
| Fill Color | Solid, gradient, none |
| Border | Width, color, style |
| Border Radius | Rounded corners |
| Shadow | Drop shadow settings |
| Opacity | Transparency level |
Image Effects
| Effect | Description |
|---|---|
| Brightness | Lighten or darken |
| Contrast | Increase/decrease |
| Saturation | Color intensity |
| Blur | Gaussian blur |
| Grayscale | Remove color |
| Sepia | Vintage effect |
Animation and Transitions
Entrance Animations
| Animation | Description | Duration |
|---|---|---|
| Fade In | Opacity 0 to 100 | 0.5-2s |
| Slide In | From any direction | 0.5-1.5s |
| Zoom In | Scale up from center | 0.5-1s |
| Bounce | Elastic entrance | 0.8-1.5s |
| Flip | 3D rotation entrance | 0.5-1s |
Exit Animations
| Animation | Description | Duration |
|---|---|---|
| Fade Out | Opacity 100 to 0 | 0.5-2s |
| Slide Out | To any direction | 0.5-1.5s |
| Zoom Out | Scale down to center | 0.5-1s |
| Shrink | Collapse to nothing | 0.5-1s |
Continuous Animations
| Animation | Description | Use Case |
|---|---|---|
| Pulse | Scale up/down | Attention |
| Rotate | Continuous spin | Logos, icons |
| Float | Gentle movement | Soft emphasis |
| Shake | Vibration | Alerts |
| Ticker | Horizontal scroll | Text, images |
Transition Between Items
| Transition | Visual Effect |
|---|---|
| Cut | Instant change |
| Crossfade | Dissolve between |
| Wipe | Reveal direction |
| Push | New pushes old out |
| Flip | Page turn effect |
| Zoom | Zoom through |
Templates
Using Templates
- Go to Scenes → New from Template
- Browse template categories
- Preview templates
- Click Use Template
- Customize for your content
Template Categories
| Category | Content Types |
|---|---|
| Corporate | Announcements, KPIs, meetings |
| Retail | Promotions, products, pricing |
| Restaurant | Menu boards, specials |
| Healthcare | Wayfinding, wellness tips |
| Education | Schedules, announcements |
| Events | Agendas, speakers, sponsors |
Creating Custom Templates
- Design your scene
- Click File → Save as Template
- Add name and description
- Select category
- Template available in library
Preview and Testing
Preview Modes
| Mode | Description |
|---|---|
| Editor Preview | In-canvas preview |
| Full Screen | Browser full screen |
| Device Preview | Simulate specific screen |
| Remote Preview | View on actual player |
Testing Checklist
- Text readable at viewing distance
- Images clear, not pixelated
- Videos play smoothly
- Data feeds updating
- Transitions smooth
- All zones displaying correctly
- Timing appropriate
Keyboard Shortcuts
| Action | Windows | Mac |
|---|---|---|
| Save | Ctrl+S | Cmd+S |
| Undo | Ctrl+Z | Cmd+Z |
| Redo | Ctrl+Y | Cmd+Shift+Z |
| Copy | Ctrl+C | Cmd+C |
| Paste | Ctrl+V | Cmd+V |
| Duplicate | Ctrl+D | Cmd+D |
| Delete | Delete | Delete |
| Select All | Ctrl+A | Cmd+A |
| Group | Ctrl+G | Cmd+G |
| Ungroup | Ctrl+Shift+G | Cmd+Shift+G |
| Bring Forward | Ctrl+] | Cmd+] |
| Send Backward | Ctrl+[ | Cmd+[ |
| Preview | Ctrl+P | Cmd+P |
| Zoom In | Ctrl++ | Cmd++ |
| Zoom Out | Ctrl+- | Cmd+- |
| Fit to Window | Ctrl+0 | Cmd+0 |
Frequently Asked Questions
What image formats does the SignageStudio editor support?
SignageStudio supports JPG, PNG, GIF (including animated), WebP, and SVG formats. For best results, use JPG for photographs, PNG for graphics with transparency, and SVG for logos and icons that need to scale. Maximum recommended file size is 10MB per image, though the system can handle larger files.
How do I create a multi-zone layout in SignageStudio?
Create multi-zone layouts by adding multiple container or playlist components to your scene. Position and resize each zone to your desired layout. Assign different playlists to each zone for independent content rotation. Use the alignment tools to ensure precise positioning and consistent spacing between zones.
Can I use custom fonts in SignageStudio?
Yes, SignageStudio supports custom fonts. You can use Google Fonts directly from the font picker, or upload your own font files (TTF, OTF, WOFF) in Resources. Uploaded fonts become available in the font dropdown. Ensure you have appropriate licensing for any fonts you upload.
How do I add animations to content in SignageStudio?
Select any element and click the Animation icon in the properties panel. Choose from entrance, exit, and continuous animation types. Set duration, delay, and easing for each animation. For complex sequences, use the Timeline panel to orchestrate multiple animations. Preview to ensure smooth playback.
What resolution should I use for my digital signage content?
Match your scene resolution to your display's native resolution for best quality. Use 1920x1080 for HD displays, 3840x2160 for 4K, and 1080x1920 for portrait mode. Creating content at higher resolution than your display wastes file size with no visual benefit, while lower resolution will appear blurry.
Try it on your own screens, free
DigitalSignage.com, which publishes this guide, runs a permanent free plan: the first 3 screens are free forever (no credit card, no ads, no time limit), then from $3 per screen per month with volume pricing via a public calculator. The free SignPlayer runs on Windows, Mac, Android and Android TV, Chrome OS, Raspberry Pi, iPad or any modern web browser. Start free · 2026 pricing
Next Steps
- Widgets & Components - Complete component guide
- Scheduling & Playlists - Organize content
- Data Integration - Connect live data
- Player Management - Deploy content
Scene Editor documentation maintained by MediaSignage. For feature requests, contact support@digitalsignage.com