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.

SignageStudio Scene Editor

Name: SignageStudio
Rating: 4.8 (1250 reviews)
Author: MediaSignage

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
PDF	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

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

Component	Description	Features
Twitter/X	Tweet display	Hashtag, user, search
Instagram	Photo feed	User, hashtag
Facebook	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

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

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

Design Without Limits

Editor Interface​

Workspace Overview​

Interface Panels​

Creating Scenes​

New Scene Setup​

Resolution Presets​

Working with Components​

Adding Components​

Component Categories​

Media Components​

Text Components​

Data Components​

Widget Components​

Social Components​

Layout and Design​

Positioning Elements​

Alignment Tools​

Layer Management​

Using Grids and Guides​

Multi-Zone Layouts​

Creating Zones​

Zone Types​

Zone Configuration​

Styling and Effects​

Text Styling​

Shape Styling​

Image Effects​

Animation and Transitions​

Entrance Animations​

Exit Animations​

Continuous Animations​

Transition Between Items​

Templates​

Using Templates​

Template Categories​

Creating Custom Templates​

Preview and Testing​

Preview Modes​

Testing Checklist​

Keyboard Shortcuts​

Frequently Asked Questions​

Next Steps​