Adding Images

Learn how to add, manage, and adjust images in your storyboard beats.

Adding Images to Beats

Method 1: Drag and Drop (Recommended)

The fastest way to add images:

1. Open your file explorer (Windows Explorer, macOS Finder)
2. Find your image file
3. Drag the image from file explorer
4. Drop it directly onto a beat node

Works with:

• Single images
• Multiple images at once (creates beats automatically)
• Images from desktop, folders, or cloud storage

Method 2: Browse Button

For a traditional file picker:

1. Click a beat to select it
2. In the Properties Panel (right side)
3. Click the Browse button
4. Choose an image file from your computer
5. Image loads into the selected beat

Method 3: Paste from Clipboard

Quick workflow from other apps:

1. Copy an image in another application (Ctrl+C / Cmd+C)
   • From Photoshop, web browser, etc.
2. Select a beat in EmberBoard
3. Paste with Ctrl+V (Cmd+V on Mac)
4. Image appears in the beat

Tip: This is perfect for screenshots or images you're working with in another app.

---

Supported Image Formats

EmberBoard supports all common web image formats:

Format	Extension	Notes
PNG	.png	Best for graphics, screenshots, transparency
JPEG	.jpg, .jpeg	Best for photos, smaller file size
GIF	.gif	Animated GIFs show first frame only
WebP	.webp	Modern format, excellent compression
SVG	.svg	Vector graphics (limited support)

Recommended:

• Use PNG for storyboard sketches and graphics
• Use JPEG for photographs
• Use WebP for best balance of quality and file size

---

Image Size Guidelines

File Size Recommendations

For best performance:

• Ideal: Under 2MB per image
• Maximum: 5MB per image
• Large projects: Keep images under 1MB each

Why size matters:

• Browser storage has limits (~50-100MB)
• Larger images slow down playback
• Export files become very large

Resolution Recommendations

For most projects:

• 1920 × 1080 (Full HD, 16:9)
• 1080 × 1920 (Vertical, 9:16)
• 1080 × 1080 (Square, 1:1)

Storyboard sketches:

• 800 × 450 or smaller is fine
• Doesn't need to be high-res

Tip: Resize images before importing to keep project size manageable.

---

Adjusting Images in Output Window

Once an image is loaded, you can zoom and position it in the Output Window:

Zooming

• Scroll wheel up - Zoom in
• Scroll wheel down - Zoom out
• Zoom levels: 1.0x, 1.5x, 2.0x, 2.5x, 3.0x

Panning

When zoomed in:

• Click and drag to reposition the image
• Move it to frame the important part

Reset

• Click the Reset button (appears when zoomed/panned)
• Returns to default zoom and position

Use case: Crop into a specific part of a wider image without editing the file.

---

Replacing Images

Replace in Properties Panel

1. Select the beat
2. Click Browse button
3. Choose new image
4. Old image is replaced

Replace via Drag and Drop

1. Drag new image from file explorer
2. Drop onto beat that already has an image
3. Confirms replacement
4. New image replaces old one

Undo if Needed

• Ctrl+Z to restore previous image
• EmberBoard remembers your last 50 actions

---

Removing Images

Remove from Beat

1. Select the beat
2. In Properties Panel, click Remove Image button
3. Image is removed, beat remains

Note: You can have beats without images (script-only beats).

Remove Beat Entirely

• Delete or Backspace key
• Removes the entire beat (image + script + everything)

---

Multiple Images Workflow

Adding Many Images at Once

Drag multiple files:

1. Select several images in file explorer (Ctrl+Click / Cmd+Click)
2. Drag them all into EmberBoard Node View
3. EmberBoard creates a beat for each image automatically
4. Arrange them in the order you want

Perfect for:

• Importing existing storyboard frames
• Photo sequences
• Reference images

Batch Processing Tips

1. Name files sequentially before importing:
   • 01_opening_shot.png
   • 02_hero_enters.png
   • 03_close_up.png
2. Drag all at once
3. EmberBoard preserves filename order
4. Beats are created in sequence

---

Image Storage

Where Images are Stored

In browser (auto-save):

• Images stored in IndexedDB as blob URLs
• Automatically saved with your project
• Limited by browser storage quota

In project files (manual save):

• Images embedded as base64 data
• Included in .emberboard file
• No external dependencies

Both systems:

• Store full original image
• Maintain quality
• No compression loss

---

Troubleshooting Images

Image Won't Load

Error message in Output Window:

Possible causes:

• File format not supported
• File corrupted or incomplete
• File too large (>10MB)
• Browser storage full

Solutions:

1. Check file format (PNG, JPG recommended)
2. Try smaller file size (resize/compress)
3. Re-export image from source app
4. Clear browser cache and try again

Image Looks Pixelated

Image appears blurry or low quality

Causes:

• Source image resolution too low
• Over-zoomed in Output Window

Solutions:

• Use higher resolution source image
• Export at 1920×1080 or higher
• Reset zoom in Output Window

Storage Quota Exceeded

Can't add more images - storage full

Solutions:

1. Reduce image file sizes (resize before importing)
2. Remove unused beats
3. Save project file and clear browser storage
4. Use smaller image format (JPEG instead of PNG)

Image Appears Stretched

Image doesn't fit properly in frame

Cause:

• Image aspect ratio doesn't match project setting

Solutions:

• Crop image to match aspect ratio before import
• Or use zoom/pan controls to frame it properly
• Adjust project aspect ratio (Settings menu)

---

Best Practices

Before Importing

1. Resize large images to 1920×1080 or smaller
2. Compress photos (use "Save for Web" in Photoshop)
3. Name files descriptively (hero_reveal.png not IMG_1234.png)
4. Organize in folders by scene/sequence

During Workflow

1. Add placeholders early (grey boxes, simple sketches)
2. Replace with final art later
3. Use zoom/pan instead of re-editing files
4. Color code beats for easy visual organization

File Management

1. Keep original high-res images separate
2. Create web-optimized versions for EmberBoard
3. Back up image sources before importing
4. Save project files regularly

---

Next Steps

• Organize beats on timeline →
• Export your storyboard →
• Troubleshooting guide →