Skip to main content

Quick Start Guide

Get started with HyperTheme in just a few minutes! This guide will walk you through creating your first animated theme.

Step 1: Create a New Project​

  1. Click File → New Project or use the dashboard
  2. Choose your theme type:
    • Hyperspin Theme - Base level fallback theme (shows when other themes are missing or not applicable)
    • Main Menu Theme - System main menu
    • Game Theme - Individual game themes
    • System Theme - Gaming console/platform themes
    • Collection Theme - Themes for game collections
  3. Select an aspect ratio (16:9 is most common)
  4. Give your project a name
  5. Click Create

Step 2: Add Your First Asset​

Upload an Image​

  1. Click File → Upload (or press Ctrl+U)
  2. Select an image file from your computer
  3. The image appears in the Library tab (left panel)

Add to Canvas​

  1. Find your image in the Library
  2. Click and drag it onto the canvas
  3. Release to place it

Congratulations! You've added your first element.

Step 3: Position and Transform​

Move Your Element​

  • Drag the element around the canvas
  • Use arrow keys for precise positioning
  • Adjust X and Y values in the Properties panel (right side)

Resize​

  • Drag the corner handles to resize
  • Hold Shift while dragging to maintain proportions
  • Use Scale controls in Properties for exact sizing

Rotate​

  • Drag the rotation handle (circular arrow above element)
  • Or enter a Rotation value in Properties

Step 4: Add an Animation​

  1. Select your element on the canvas
  2. In the right panel, scroll through available animations
  3. Double-click an animation (try "Bounce" for your first one)
  4. The animation appears on the timeline at the bottom
  5. Press Spacebar to preview your animation

Amazing! Your element is now animated.

Step 5: Customize the Animation​

With your animation selected on the timeline:

  1. Adjust Duration: Drag the edges of the animation block
  2. Change Speed: Modify the Speed value in Properties (lower = slower)
  3. Add Delay: Set a Delay value to start later
  4. Enable Loop: Check Loop to repeat continuously
  5. Press Spacebar again to see your changes

Step 6: Add More Elements​

Build your theme by adding more elements:

  1. Upload more images or use existing assets
  2. Drag them to the canvas
  3. Use the Layers tab to organize them
  4. Change stacking order by dragging layers up or down

Try Different Layer Types​

Click the buttons in the bottom toolbar to add:

  • Text - Add labels or titles
  • Shapes - Rectangles, circles, and more
  • Video - Animated backgrounds
  • Metadata - Dynamic game information (separate buttons for images and text)

Step 7: Save Your Work​

  • Press Ctrl+S to save
  • Your project saves automatically to the cloud
  • You can close and return anytime

Step 8: Preview Your Theme​

  1. Press Spacebar to play all animations
  2. Press Spacebar again to pause
  3. Use the playback controls at the bottom

Step 9: Publish Your Theme​

When you're ready to share:

  1. Click File → Publish (or press Ctrl+P)
  2. Review your project details
  3. Add a description and tags
  4. Click Publish

Your theme is now live on HyperSpin-fe.com!

Quick Tips​

  • Undo/Redo: Use Ctrl+Z and Ctrl+Y frequently
  • Grid Overlay: Turn on grids (Settings → Grids) for better alignment
  • Zoom: Use Ctrl +/- to zoom in and out, Ctrl+0 to fit screen
  • Hide Handles: Hold Alt+H to temporarily hide selection handles
  • Copy Layers: Select a layer and press Ctrl+C, then Ctrl+V to duplicate

What's Next?​

Now that you've created your first theme, explore more features:

Common First-Time Questions​

How do I delete an element?​

Select it and press Delete, or click the X in the Layers tab.

How do I change the background?​

Click the background button in the bottom toolbar (paint bucket icon) and choose a color, image, or video.

How many animations can I add?​

There's no limit! Add as many animations as you want to each layer.

Where are my files saved?​

Everything is saved to the HyperTheme cloud. Your assets and projects are accessible from any device.

Need Help? Check out the Troubleshooting Guide or explore the full documentation.