Tools Menu & Utility Features

The Tools menu contains essential utilities for working efficiently in HyperTheme. From capturing screenshots to managing your view, these tools help you create and preview themes professionally.

Tools Menu Overview

Access via: Top menu bar → Tools

Available tools:

• Take Screenshot
• Zoom In
• Zoom Out
• Fit to Screen

Plus keyboard shortcuts for each!

Take Screenshot

Capture the current state of your canvas as an image.

What It Does

Takes a screenshot of:

• Current canvas view
• All visible layers
• Current aspect ratio
• Exact frame shown on screen

Saves to:

• Project files (automatically)
• Accessible from project edit page
• PNG format with timestamp
• Full resolution capture

How to Use

Via Tools Menu:

1. Click Tools in top menu
2. Select Take Screenshot
3. Screenshot captures automatically
4. Loading indicator shows progress
5. Saves to project when complete

Via Keyboard:

• No dedicated shortcut by default
• Use menu access

During Playback:

• Screenshot button appears during animation preview
• Click camera icon to capture specific frame
• Perfect for capturing animated moments

Use Cases

Documentation:

• Record theme development progress
• Create before/after comparisons
• Share work-in-progress with team
• Build portfolio of themes

Marketing:

• Generate preview images
• Create promotional materials
• Show theme features
• Social media posts

Debugging:

• Capture problematic frames
• Document bugs or issues
• Compare different settings
• Track changes over time

Client Work:

• Show progress to clients
• Get approval on designs
• Present multiple options
• Create deliverables

Screenshot Tips

Best practices:

✅ Pause animations first

• Pause at exact frame you want
• Ensures clean, non-blurred capture
• Control what gets captured

✅ Turn off grids

• Grids don't show in screenshot anyway
• But good habit to disable first
• Shows your intention clearly

✅ Use Fit to Screen

• Ctrl+0 before screenshot
• Captures entire theme
• No cropped edges

✅ Consider aspect ratio

• Switch to desired aspect ratio first
• Each aspect ratio needs separate screenshot
• Capture all supported ratios

Common mistakes:

❌ Screenshot while animating

• Might capture mid-frame blur
• Unpredictable results
• Pause first!

❌ Forgetting current zoom

• Captures what's visible on screen
• Zoomed in = cropped screenshot
• Always Fit to Screen first

Technical Details

Process:

1. Captures current canvas state
2. Converts to PNG blob
3. Adds timestamp to filename
4. Saves to project files
5. Shows completion status

Timeout protection:

• 10-second maximum capture time
• Prevents hanging on large themes
• Error message if timeout occurs

Concurrency protection:

• Only one screenshot at a time
• Button disabled during capture
• Prevents multiple simultaneous captures

File naming:

• Auto-generated timestamp
• Format: screenshot_YYYYMMDD_HHMMSS.png
• Ensures unique filenames
• Chronological sorting

Zoom Controls

Manage your canvas view for detailed work or overview.

Zoom In

Make canvas larger for detail work.

Access:

• Tools → Zoom In
• Ctrl + Plus (+)
• Ctrl + Mouse Scroll Up

Use when:

• Precise pixel-perfect adjustments
• Working on small elements
• Fine-tuning positions
• Detailed inspection

Tips:

• Zoom centers on canvas center
• Can zoom WAY in (very high magnification)
• Use sparingly - easy to lose perspective
• Return to 100% frequently to check overall look

Zoom Out

Make canvas smaller to see more.

Access:

• Tools → Zoom Out
• Ctrl + Minus (-)
• Ctrl + Mouse Scroll Down

Use when:

• Need to see entire theme
• Working on layout
• Checking overall composition
• Navigating to off-canvas elements

Tips:

• Helps find "lost" layers that moved off screen
• Good for checking balance
• Easier to see relationships between elements
• Can zoom out to see beyond canvas edges

Fit to Screen

Reset zoom to show entire canvas.

Access:

• Tools → Fit to Screen
• Ctrl + 0 (zero)

The most-used zoom command!

Use when:

• Starting work session
• After zooming in for details
• Before taking screenshots
• Checking overall composition
• Preview full theme

Behavior:

• Calculates optimal zoom level
• Fits entire canvas in viewport
• Centers canvas in view
• Accounts for panels (left/right)
• Always shows complete theme

Pro tip: Press Ctrl+0 constantly. It's your "reset view" button!

Zoom Workflows

Detail Work Workflow

1. Fit to Screen (Ctrl+0) - See whole theme
2. Identify element needing work
3. Zoom In (Ctrl+) - 2-3x until comfortable
4. Make adjustments with precision
5. Fit to Screen (Ctrl+0) - Check how it looks in context
6. Repeat as needed

Why this works:

• Easy to lose perspective when zoomed
• Constant context checking prevents mistakes
• Balance detail work with overall view

Layout Workflow

1. Fit to Screen (Ctrl+0) - Always start here
2. Place elements at rough positions
3. Zoom In slightly (1-2x) - If needed for precision
4. Fit to Screen (Ctrl+0) - Check composition
5. Adjust and repeat

Why this works:

• Layout is about relationships
• Too zoomed in = can't see relationships
• Mostly work at fit-to-screen for layout

Inspection Workflow

Finding problems:

1. Fit to Screen (Ctrl+0)
2. Preview animation (Spacebar)
3. Notice issues (blur, alignment, etc.)
4. Pause animation
5. Zoom In (Ctrl+) to problem area
6. Fix issue
7. Fit to Screen (Ctrl+0)
8. Preview again to verify
9. Repeat until perfect

Lost Element Recovery

Can't find a layer?

1. Select layer in Layers tab
2. Zoom Out (Ctrl-) repeatedly
3. Keep going until you see it
4. It might be way off canvas
5. Drag back to canvas area
6. Fit to Screen (Ctrl+0)

Zoom Best Practices

Do's

✅ Zoom in for details

• Small text
• Precise alignment
• Pixel-level work
• Quality checking

✅ Fit to screen often

• After every detail session
• Before previewing
• When switching tasks
• To regain perspective

✅ Use keyboard shortcuts

• Much faster than menu
• Becomes muscle memory
• Ctrl+0 is your friend
• Ctrl+Plus/Minus for quick adjustments

✅ Zoom at cursor position

• Ctrl+Scroll zooms where mouse points
• Very useful for specific areas
• Hover over area, then zoom
• Stays centered on that spot

Don'ts

❌ Don't work zoomed in too long

• Lose sense of overall composition
• Make changes that look wrong at normal zoom
• Fit to screen every few minutes

❌ Don't forget current zoom when taking screenshots

• Screenshot captures current view
• Zoomed in = partial screenshot
• Always Fit to Screen first

❌ Don't trust tiny details

• Pixel-perfect at 800% zoom doesn't matter
• If you can't see it at 100%, users won't either
• Fit to screen is "real" view

❌ Don't zoom out too far

• Canvas becomes tiny
• Can't see what you're working on
• Just enough to see whole canvas

Zoom Level Indicator

Where is it?

• Top-right corner of canvas
• Shows current zoom percentage
• Updates in real-time

Reading zoom levels:

• 100% = Actual size (1:1 pixels)
• 200% = Doubled (2:1 pixels)
• 50% = Half size (1:2 pixels)
• Fit = Calculated to fit screen

Why it matters:

• Know your current magnification
• Understand what you're looking at
• 100% = true preview size
• Other zooms = working view only

Combining Tools

Screenshot Workflow with Zoom

Professional screenshot capture:

1. Complete your theme
2. Hide any UI elements (if possible)
3. Fit to Screen (Ctrl+0)
4. Disable grids (Settings → Grids → None)
5. Tools → Take Screenshot
6. Screenshot saved automatically

Result: Clean, professional full-theme capture

Preview with Zoom

Checking animations at different scales:

1. Fit to Screen (Ctrl+0)
2. Play animation (Spacebar)
3. Watch full theme animate
4. Pause (Spacebar)
5. Zoom In (Ctrl+) to problem area
6. Play again to see detail
7. Repeat at various zoom levels

Why: Some issues only visible at certain scales

Advanced Zoom Techniques

Zoom Presets (Mental Bookmarks)

Develop your preferred zooms:

• 25-50%: Full overview, checking composition
• 100%: True size preview
• 200-300%: Detail work on most elements
• 400%+: Pixel-level precision (rare)

Learn what zoom works for what task:

• Everyone develops different preferences
• Stick with what feels comfortable
• Consistency helps efficiency

Two-Monitor Setup

If you have dual monitors:

• HyperTheme on one monitor
• Reference images on other
• Or documentation on second screen
• Zoom HyperTheme to comfortable level
• Compare without switching windows

Zoom for Different Aspect Ratios

Wider aspect ratios (21:9, 32:9):

• Fit to Screen might make theme tiny
• Zoom in slightly after fitting
• Find comfortable viewing size
• Just remember to Fit before screenshots!

Troubleshooting

"I zoomed in too far and can't find my way back!"

Solution:

• Press Ctrl+0
• Instantly back to fit-to-screen
• Canvas centered and visible

"Zoom is really slow/laggy"

Causes:

• Too many complex layers
• Large images/videos
• Heavy filter effects
• Many shader effects

Solutions:

• Hide complex layers temporarily
• Reduce animation count during zoom
• Close other browser tabs
• Zoom less extreme amounts

"Canvas disappeared after zooming"

What happened:

• Zoomed out too far
• Canvas is tiny dot on screen
• Or panned off to side

Solution:

• Press Ctrl+0
• Resets everything
• Canvas returns to center

"Screenshot captured wrong thing"

Common causes:

• Wrong zoom level (not fit to screen)
• Wrong aspect ratio selected
• Grids or guides enabled (though they won't show in screenshot anyway)

Solution:

• Always Fit to Screen (Ctrl+0) first
• Verify correct aspect ratio
• Then take screenshot

Keyboard Shortcut Summary

Quick reference for Tools menu shortcuts:

Action	Shortcut	Alternative
Zoom In	Ctrl + Plus	Ctrl + Scroll Up
Zoom Out	Ctrl + Minus	Ctrl + Scroll Down
Fit to Screen	Ctrl + 0	Tools menu
Take Screenshot	Tools menu	Camera icon (during playback)

Most important: Ctrl+0 - You'll use this constantly!

Next Steps

• Keyboard Shortcuts - Complete shortcut reference
• Interface Overview - Understanding the workspace
• Best Practices - Professional workflow tips

---

Pro Tip: Make Ctrl+0 (Fit to Screen) a reflex action. Press it every time you're about to preview, take a screenshot, or just want to "reset" your view. It's the most useful tool command you'll ever learn! 🔍