Skip to main content

Assets & Library

Your Library is where all your creative ingredients live - images, videos, audio, and more. Think of it as your theme's pantry. Let's learn how to stock it, organize it, and use it effectively.

Understanding the Library​

The Library is in the left panel (Library tab). It's your asset browser and manager.

What lives here:

  • All uploaded images
  • All audio files
  • All video files
  • Anything you import

What DOESN'T live here:

  • Text layers (created in-app)
  • Shapes (created in-app)
  • Metadata elements (dynamic)

Uploading Assets​

The Standard Upload​

Method 1: File Menu

  1. Click File → Upload
  2. Or select Upload in the Library tab
  3. Select file(s) from your computer
  4. Click Open
  5. Wait for upload confirmation
  6. Assets appear in Library

Method 2: Drag and Drop (if supported)

  1. Open your file manager
  2. Drag files directly to Library area
  3. Drop to upload
  4. Assets appear after processing

Pro tip: Upload multiple files at once! Select several in the file picker.

Supported File Types​

Images:

  • PNG (best for transparency)
  • JPG/JPEG (best for photos)
  • GIF (animated possible)
  • WebP (modern format)
  • SVG (static, self-contained artwork; see SVG Image Detail)

Video:

  • MP4 (most compatible)
  • WebM (good compression)
  • MOV (usually works)
  • AVI (larger files)

Audio:

  • MP3 (most common)
  • WAV (higher quality, larger)
  • OGG (good compression)
  • M4A (Apple format)

Special:

  • PSD (Photoshop - special import process)

Import from PSD​

Photoshop files get special treatment!

How to import:

  1. File → Import from PSD
  2. Select your .psd file
  3. Wait for processing
  4. Each layer becomes a separate asset

Important requirements:

  • All layers must be rasterized in Photoshop first!
  • Layer → Rasterize → All Layers (before saving)
  • Vector layers will cause import to fail

What gets preserved:

  • Layer names
  • Layer order
  • Individual layer images
  • Transparency

What doesn't transfer:

  • Layer effects (shadows, glows, etc.)
  • Blending modes
  • Adjustment layers
  • Smart objects

Best practices for PSD import:

  1. Organize layers in Photoshop first
  2. Name layers clearly
  3. Rasterize everything
  4. Save a copy (keep original)
  5. Import the rasterized copy

Library Organization​

Preview System​

Click any asset to preview it:

  • Image preview appears
  • Video preview (might autoplay)
  • Audio preview (play button)

Why preview?

  • Remember what assets look like
  • Find the right one quickly
  • Check quality before using

Finding Assets​

Visual scanning:

  • Scroll through Library
  • Thumbnails show content
  • Click to preview full size

Search (if available):

  • Type filename or keywords
  • Filters results
  • Faster than scrolling

Sorting:

  • By upload date (newest/oldest)
  • By type (images, video, audio)
  • By name (alphabetical)

Pro tip: Name files BEFORE uploading for easier searching!

Asset Naming Strategy​

BEFORE uploading, rename files on your computer:

Bad names:

❌ IMG_20231015_0042.png
❌ Screenshot 2024-01-10 at 3.47.22 PM.png
❌ final_v2_FINAL_REAL.png
❌ untitled.jpg

Good names:

✅ logo_main.png
✅ background_stars.png
✅ wheel_item_pacman.png
✅ sound_menu_hover.mp3
✅ video_background_matrix.mp4

Naming patterns that work:

By function:

  • logo_, background_, button_, icon_

By category:

  • wheel_, ui_, effect_, text_

By system/theme:

  • nes_, snes_, arcade_, modern_

With numbers:

  • particle_01, particle_02, particle_03
  • Keeps them in order!

Consistent structure:

[category]_[description]_[variant].ext

Examples:
bg_space_01.jpg
bg_space_02.jpg
wheel_mario_selected.png
wheel_mario_unselected.png

Using Assets​

Adding to Canvas​

The drag method:

  1. Find asset in Library
  2. Click and hold
  3. Drag onto canvas
  4. Release to place
  5. Layer created automatically

After adding:

  • Asset becomes a layer
  • Appears in Layers tab
  • Can be transformed
  • Can be animated

Multiple uses:

  • Same asset can be used multiple times
  • Drag it again for another instance
  • Each instance is a separate layer
  • Modify each independently

Asset Properties on Canvas​

Once on canvas, you can modify:

  • Position: Move anywhere
  • Scale: Resize (hold Shift for proportions)
  • Rotation: Spin any direction
  • Opacity: Make transparent
  • Tint: Color overlay
  • Animations: All animation types available

Important: Modifying on canvas doesn't change the Library asset!

Asset Optimization​

Image Optimization​

Before uploading:

Resolution:

  • 1920x1080 for 16:9 backgrounds
  • Match your target resolution
  • Don't upload 4K if you need 1080p
  • Downscale large images first

File size:

  • Compress images
  • Use tools like TinyPNG, ImageOptim
  • Target: <500KB for most images
  • Backgrounds can be 1-2MB

Format choice:

  • PNG: Logos, graphics with transparency
  • JPG: Photos, backgrounds without transparency
  • JPG is smaller, PNG is higher quality

Optimization tools:

  • Photoshop "Save for Web"
  • Online: TinyPNG, Compressor.io
  • Desktop: ImageOptim (Mac), FileOptimizer (Windows)

Video Optimization​

Videos are LARGE. Optimize before uploading!

Resolution:

  • Match target display size
  • 1920x1080 for full-screen 16:9
  • 1280x720 if file size is an issue
  • Don't upload 4K video for small display areas

Compression:

  • Use H.264 codec (most compatible)
  • MP4 container format
  • Bitrate: 3-5 Mbps for 1080p
  • Lower bitrate = smaller file, lower quality

Duration:

  • Shorter loops = smaller files
  • 5-10 second loops work great
  • Consider static image instead if video doesn't add much

Optimization tools:

  • HandBrake (free, powerful)
  • FFmpeg (command-line)
  • Adobe Media Encoder
  • Online: CloudConvert

HandBrake quick settings:

  • Format: MP4
  • Video codec: H.264
  • Framerate: Same as source (or 30fps)
  • Quality: RF 20-23 (lower = better quality)

Audio Optimization​

File size matters:

  • Audio files can be surprisingly large
  • Compress for web delivery

Quality settings:

  • 128 kbps: Acceptable for most uses
  • 192 kbps: Good quality, reasonable size
  • 320 kbps: High quality, larger files

Format:

  • MP3 most compatible
  • OGG good compression
  • Don't use WAV unless necessary (huge files)

Duration:

  • Loop short clips instead of long files
  • 30-second loop < 3-minute full track

Optimization tools:

  • Audacity (free)
  • Online: Online Audio Converter
  • iTunes/Music app (export settings)

Asset Management​

Deleting Assets​

When to delete:

  • Asset not used in theme
  • Duplicate uploads
  • Wrong versions
  • Cleaning up after experimentation

How to delete:

  1. Find asset in Library
  2. Look for delete button/icon
  3. Confirm deletion
  4. Asset removed permanently

Warning: Can't undo after saving project!

Check first:

  • Is asset used in any layers?
  • Deleting asset breaks layers using it
  • Remove from layers first, then delete asset

Asset Reuse​

Smart workflow:

  1. Upload reusable assets to Library
  2. Use same asset multiple times
  3. Create variations on canvas (different scales, tints)
  4. Efficient file usage!

Examples:

  • One star image, use 50 times at different positions
  • One button, tint different colors for variations
  • One background, use across multiple themes

Asset Replacement​

If you need to update an asset:

Method 1: Delete and re-upload

  1. Delete old asset from Library
  2. Upload new version with same name
  3. May need to re-add to canvas

Method 2: Upload new, swap in layers

  1. Upload new asset
  2. Note which layers use old asset
  3. Manually swap to new asset
  4. Delete old asset

Better method: Get it right before uploading! Preview locally first.

Asset Best Practices​

Before You Start​

Organize locally first:

  1. Create project folder on computer
  2. Subfolders: images, videos, audio, source_files
  3. Name everything clearly
  4. Optimize everything
  5. THEN upload to HyperTheme

Your local folder:

My_Theme/
  ├── images/
  │   ├── background_01.jpg
  │   ├── logo_main.png
  │   └── wheel_items/
  │       ├── item_01.png
  │       └── item_02.png
  ├── videos/
  │   └── bg_matrix.mp4
  ├── audio/
  │   └── menu_music.mp3
  └── source_files/
      └── theme_layout.psd

Upload Strategy​

Batch upload:

  • Upload all assets at once
  • Or by category (all images, then videos)
  • Faster than one-by-one

Test files:

  • Use low-res versions while designing
  • Swap for high-res when publishing
  • Faster preview/iteration

Version control:

  • Keep originals on your computer
  • HyperTheme is not a backup!
  • Can always re-upload if needed

File Size Limits​

Check HyperTheme's limits:

  • Maximum file size per asset
  • Total storage per account
  • Might need to compress large files

Typical limits (verify current limits):

  • Images: 10-50 MB per file
  • Video: 100-500 MB per file
  • Audio: 10-50 MB per file

If hitting limits:

  • Compress more aggressively
  • Split videos into shorter clips
  • Use external hosting (if supported)

Asset Library Workflow​

The Professional Approach​

Phase 1: Preparation

  1. Gather all assets
  2. Organize locally
  3. Optimize all files
  4. Name consistently

Phase 2: Upload

  1. Batch upload by type
  2. Verify uploads completed
  3. Preview assets in Library

Phase 3: Use

  1. Build theme using Library assets
  2. Reuse assets efficiently
  3. Only upload new assets as needed

Phase 4: Cleanup

  1. Delete unused assets
  2. Replace low-res with high-res
  3. Final optimization pass

Quick-and-Dirty Approach​

For experimentation:

  1. Upload whatever
  2. Try stuff
  3. See what works
  4. Clean up later
  5. Organize for final version

Both approaches valid! Depends on your workflow.

Common Asset Issues​

"My image looks pixelated!"​

Causes:

  • Original resolution too low
  • Upscaled too much on canvas
  • Over-compressed

Solutions:

  • Upload higher resolution version
  • Scale down instead of up
  • Use PNG for graphics (less compression artifacts)

"Video won't play!"​

Troubleshooting:

  • Check file format (MP4 with H.264 most reliable)
  • File size too large?
  • Corrupted file? (test locally first)
  • Browser codec support?

"Can't upload file!"​

Common issues:

  • File too large (compress it)
  • Wrong file type (check supported formats)
  • Network issue (try again)
  • Storage quota exceeded (delete old assets)

"Asset disappeared!"​

Reasons:

  • Accidentally deleted
  • Upload failed (check)
  • Wrong project (check project name)

Prevention:

  • Keep originals locally
  • Don't rely solely on cloud storage

"Library is cluttered!"​

Solutions:

  • Delete unused assets
  • Use better naming conventions
  • Consider starting fresh project for new theme

Advanced Asset Techniques​

Texture Atlases​

For many small images:

  • Combine into one large image
  • Use different parts on different layers
  • More efficient than 50 separate files

When to use:

  • Lots of icons
  • Sprite sheets
  • UI elements

Transparent PNGs​

Make the most of transparency:

  • Clean alpha channel
  • No white fringe/halo
  • Export from Photoshop/GIMP properly

Testing transparency:

  • Preview on different background colors
  • Check for edge artifacts
  • Fix in image editor if needed

Seamless Tiling​

For backgrounds that tile:

  • Use seamless patterns
  • Test tiling before uploading
  • Tools: Photoshop's Offset filter, dedicated pattern makers

Verification:

  • Place multiple copies next to each other
  • Shouldn't see seams
  • Adjust if visible lines

Asset Checklist​

Before uploading:

  • Files named clearly
  • Images optimized (resolution, compression)
  • Videos compressed (H.264, reasonable bitrate)
  • Audio compressed (MP3, 128-192 kbps)
  • PSD files rasterized (if importing)
  • Files organized locally (backup)
  • Checked file sizes
  • Tested files locally

Next Steps​

Pro Tip: Your Library is only as good as your organization. Spend 5 minutes organizing NOW, or spend 50 minutes hunting for files LATER! 📁✨