Skip to main content

Grid Overlays & Alignment Guides

Professional composition starts with proper alignment. HyperTheme provides three mathematically precise grid overlays to help you position elements with confidence.

Why Use Grids?​

Grids help you:

  • Align elements consistently
  • Create balanced compositions
  • Follow design principles (Rule of Thirds, Golden Ratio)
  • Build themes that "feel right" even if you're not a designer
  • Work faster with visual guides

When grids shine:

  • Starting a new theme (rough layout)
  • Aligning multiple elements
  • Creating symmetrical designs
  • Following composition rules

When to turn them off:

  • Final pixel-perfect adjustments
  • Free-form creative work
  • During animation preview
  • When they're distracting

Accessing Grid Overlays​

Via Settings Menu:

  1. Click Settings in the top menu
  2. Select Grids
  3. Choose your grid type

Grid types:

  • None - Clean canvas, no guides
  • 10×8 Grid - Standard alignment grid
  • Rule of Thirds - Photography composition
  • Golden Triangle - Advanced mathematical composition

Note: Grids automatically hide during playback and return when paused.

Standard Grid (10×8)​

What It Is​

A regular grid dividing your canvas into 10 columns and 8 rows.

┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐
├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
├─┼─┼─┼─┼─┼─┼─┼─┼─┼─┤
└─┴─┴─┴─┴─┴─┴─┴─┴─┴─┘

Best For​

  • Even spacing: Place elements at regular intervals
  • Systematic layouts: Structured, organized themes
  • Multi-element alignment: Many objects need to line up
  • Symmetrical designs: Mirror layouts left/right or top/bottom

How to Use It​

Finding the center:

  • Center vertical line: 5th column
  • Center horizontal line: 4th row
  • Canvas center: Where these intersect

Creating columns:

  • Use vertical lines to define columns
  • Place wheel items on every 2nd line
  • Logo at center (5th line)

Even spacing:

  • Place elements on grid intersections
  • Skip same number of lines between items
  • Results in consistent spacing

Example layout:

Logo at (5, 2) - Center top
Menu items at (2, 4), (5, 4), (8, 4) - Even row, spaced columns
Metadata at (5, 6) - Center bottom

Tips​

  • Don't feel obligated to use EVERY line
  • Think of it as suggestions, not rules
  • Combine with snapping for precision
  • Use for initial layout, fine-tune later

Rule of Thirds​

What It Is​

Two horizontal and two vertical lines dividing the canvas into nine equal sections. Based on photography composition principles.

     │         │
     │         │
─────┼─────────┼─────
     │         │
     │         │
─────┼─────────┼─────
     │         │
     │         │

Key points: The four intersections where lines cross

The Rule​

Place important elements:

  • On the lines themselves, OR
  • At intersection points

Why it works:

  • More dynamic than center placement
  • Creates visual tension and interest
  • Feels natural to human eyes
  • Used in photography, film, painting for centuries

Best For​

  • Single-subject themes: One main element (logo, character)
  • Horizon-style themes: Distinct top/bottom sections
  • Asymmetric layouts: Off-center but balanced designs
  • Cinematic themes: Film-like compositions

How to Use It​

Primary element placement:

  • Logo at top-left intersection (powerful position)
  • Main character at right intersection (action-oriented)
  • Important info at bottom intersections (stable, grounded)

Dividing sections:

  • Top third: Sky, title, branding
  • Middle third: Main content, wheel, characters
  • Bottom third: Metadata, controls, ground

Example compositions:

Top-weighted:

Logo at top-right intersection
Wheel items span middle third
Metadata at bottom-left intersection

Split screen:

Background image fills left 2/3
Wheel and text on right 1/3
Visual balance achieved

Advanced Usage​

Two elements:

  • Place at opposite intersections (diagonal)
  • Creates visual flow eye follows
  • Natural left-to-right or top-to-bottom reading

Negative space:

  • Leave 2/3 empty for impact
  • Main subject in 1/3
  • Powerful, minimalist effect

Breaking the rule:

  • Once you know it, you can break it intentionally
  • Center placement becomes a CHOICE, not default
  • Rule is guideline, not law

Golden Triangle​

What It Is​

Based on the Golden Ratio (1.618), a mathematical proportion found in nature and art.

╲         ╱
  ╲     ╱
    ╲ ╱
    ╱ ╲
  ╱     ╲
╱         ╲

Creates diagonal lines that divide canvas using golden ratio proportions.

The Math (Optional Reading)​

Golden Ratio: 1:1.618

  • Found in nautilus shells, flowers, galaxies
  • Feels harmonious to human perception
  • Used by artists for thousands of years

How it's calculated:

  • Canvas divided by phi (φ = 1.618)
  • Creates pleasing proportions
  • More complex than simple fractions

You don't need to understand the math to use it!

Best For​

  • Dynamic compositions: Movement and energy
  • Diagonal emphasis: Elements flow diagonally
  • Advanced designs: When you want that "pro" feel
  • Organic layouts: Natural, flowing arrangements

How to Use It​

Diagonal flow:

  • Place elements along diagonal lines
  • Creates sense of movement
  • Eye follows the diagonal path

Triangle sections:

  • Each triangular section can hold content
  • Natural separation of elements
  • Creates depth and layers

Intersection points:

  • Where diagonals intersect = power positions
  • Place most important element there
  • Mathematically "perfect" placement

Example layout:

Logo at top diagonal intersection
Wheel items follow diagonal line
Background elements in opposite triangle
Creates dynamic, professional composition

Advanced Usage​

Leading lines:

  • Use diagonals as directional guides
  • Elements "point" toward focus
  • Guides user's eye through scene

Layered depth:

  • Foreground elements in one triangle
  • Background in another
  • Creates 3D-like depth perception

When to use Golden Triangle:

  • Your theme feels "off" despite good content
  • You want sophisticated, professional feel
  • Standard grids feel too rigid
  • Creating art-focused themes

When to skip it:

  • You're just starting (stick to simpler grids first)
  • Theme is very structured/systematic
  • You prefer centered, symmetrical layouts

Grid Display Properties​

Visual Appearance​

Color: Semi-transparent green

  • Opacity: 50% (visible but not distracting)
  • Always visible above all layers
  • Color designed to contrast with most themes

Line thickness:

  • Adjusts based on zoom level
  • Remains visible when zoomed in/out
  • Always crisp, never pixelated

Automatic Behavior​

During playback:

  • Grids automatically hide
  • Clean preview of your theme
  • Returns when you pause

During editing:

  • Always visible (when enabled)
  • Never exported with theme
  • Only for your reference

Zoom independence:

  • Grid scales with canvas
  • Lines maintain visibility
  • Divisions stay accurate

Combining Grids with Other Tools​

Grids + Snapping​

Perfect partners:

  • Enable grid overlay
  • Enable snapping (automatic)
  • Elements "snap" to grid lines
  • Precise alignment guaranteed

Workflow:

  1. Turn on grid
  2. Drag element near line
  3. It snaps automatically
  4. Release at perfect position

Grids + Rulers​

Double precision:

  • Grids for composition
  • Rulers for exact measurements
  • Use both for pixel-perfect layouts

Grids + Layers Panel​

Organizational flow:

  1. Grid shows visual structure
  2. Layers panel shows hierarchy
  3. Align elements with grid
  4. Organize in layers panel
  5. Result: Visual AND structural organization

Practical Workflows​

Starting a New Theme​

  1. Choose grid based on style:

    • Structured theme? → Standard Grid
    • Single-focus theme? → Rule of Thirds
    • Artistic theme? → Golden Triangle

  2. Block out major sections:

    • Use grid to define areas
    • Logo area, content area, metadata area
    • Rough placement only

  3. Place key elements on grid lines/intersections:

    • Don't stress about perfection
    • Get things "in the ballpark"

  4. Turn off grid, fine-tune:

    • Now adjust by eye
    • Pixel-perfect refinement
    • Trust your instincts

Troubleshooting Compositions​

Theme feels unbalanced?

  • Turn on Rule of Thirds
  • Check if elements cluster in one section
  • Redistribute across intersections

Too chaotic?

  • Turn on Standard Grid
  • Align elements to regular intervals
  • Creates instant order

Too boring/stiff?

  • Turn on Golden Triangle
  • Move key element to diagonal intersection
  • Add diagonal movement

Grid Best Practices​

Do's​

✅ Use grids as starting points

  • Begin with grid-aligned layout
  • Fine-tune after major placement

✅ Switch between grids

  • Try different grids on same theme
  • See which "feels right"
  • No wrong answers

✅ Combine with your eye

  • Grid suggests, you decide
  • If it looks good, it IS good
  • Grids guide, don't dictate

✅ Turn off for final check

  • Preview without grid before publishing
  • Ensure theme works without visual aids

Don'ts​

❌ Don't become grid-dependent

  • They're training wheels
  • Goal: Develop visual sense
  • Eventually you'll use them less

❌ Don't force every element onto grid

  • Some elements should be off-grid
  • Variation creates interest
  • Grid is guide, not prison

❌ Don't use wrong grid for your style

  • Standard grid ≠ artistic themes
  • Golden triangle ≠ systematic layouts
  • Match grid to intention

❌ Don't forget to turn off before sharing screenshots

  • Grids are for you only
  • Users shouldn't see them
  • Preview clean before showing others

Switching Between Grids​

Quick switching:

  1. Settings → Grids
  2. Select new type
  3. Instant switch, no reload
  4. Compare compositions

Finding your style:

  • Try all three on your first few themes
  • Notice which you gravitate toward
  • Develop preferences over time

Grid preferences by theme type:

Wheel themes: Standard Grid or Rule of Thirds Character showcase: Rule of Thirds or Golden Triangle Minimal/modern: Rule of Thirds Retro/arcade: Standard Grid Artistic/custom: Golden Triangle

Advanced Composition Theory​

Why These Specific Grids?​

Standard Grid (10×8):

  • Even divisions = even spacing
  • 10 is divisible by 2, 5, 10
  • 8 is divisible by 2, 4, 8
  • Maximum flexibility

Rule of Thirds:

  • Dates to 1797 (John Thomas Smith)
  • Proven by centuries of art
  • Backed by psychological research
  • Simply WORKS

Golden Triangle:

  • Found in Parthenon, pyramids, Mona Lisa
  • φ (phi) = most pleasing ratio
  • Mathematical beauty
  • Nature's favorite proportion

Creating Visual Hierarchy​

Using grids to establish importance:

  1. Primary element: Top intersection (Rule of Thirds)
  2. Secondary elements: Other intersections
  3. Tertiary elements: On lines but not intersections
  4. Background: Fill remaining space

Example:

Logo: Top-left intersection (most important)
Wheel items: Middle line (secondary)
Metadata: Bottom-right intersection (tertiary)
Background: Fills all space (supporting)

Learning Path​

Beginner​

Start with Standard Grid:

  • Most intuitive
  • Clear visual structure
  • Hard to go wrong
  • Build confidence

Intermediate​

Graduate to Rule of Thirds:

  • More sophisticated
  • Still easy to understand
  • Immediate improvement in compositions
  • Professional-looking results

Advanced​

Experiment with Golden Triangle:

  • Requires visual sense
  • More subtle improvements
  • Creates "wow" factor
  • Shows mastery

Expert​

No grid:

  • Internalized principles
  • "Feel" for balance
  • Grids only for quick checks
  • Trust your eye

But even experts use grids for:

  • Initial layouts
  • Troubleshooting
  • Complex compositions
  • Teaching others

Next Steps​

Pro Tip: Take screenshots with each grid type during your first few themes. Compare them side-by-side. You'll quickly see which grid style matches your aesthetic! 📐