Skip to main content

PSD Import

Got a beautiful design in Photoshop? Import it directly into HyperTheme! This guide will help you prepare, import, and work with Photoshop files.

What is PSD Import?​

PSD Import lets you bring layered Photoshop files into HyperTheme while preserving:

  • Individual layers
  • Layer names
  • Layer order (stacking)
  • Transparency
  • Individual layer images

Think of it as: Converting your Photoshop mockup into an editable, animatable HyperTheme project!

Why Use PSD Import?​

Advantages:

  • Design in familiar tool (Photoshop)
  • Bring complex layouts quickly
  • Preserve layer organization
  • Skip manual asset slicing
  • Faster initial setup

When to use:

  • Complex multi-layer designs
  • Professional mockups
  • Existing Photoshop files
  • Team workflows (designer → theme builder)

When NOT to use:

  • Simple themes (faster to build directly)
  • Highly dynamic content (better built in HyperTheme)
  • Need special layer types (text, video, etc. - add after import)

Before You Import: Preparation​

Critical step: Properly preparing your PSD file makes the difference between smooth import and frustration!

The Golden Rule: RASTERIZE EVERYTHING​

Most important requirement:

  • ALL layers must be rasterized before import
  • Vector layers will cause import to fail
  • Smart objects must be rasterized
  • Text layers must be rasterized

How to rasterize in Photoshop:

Method 1: Rasterize All at Once

  1. Save a copy of your PSD (keep original!)
  2. Select all layers (Ctrl+A or Cmd+A)
  3. Layer → Rasterize → All Layers
  4. Save as new PSD file
  5. Import this version

Method 2: Rasterize Individual Layers

  1. Select layer
  2. Right-click → Rasterize Layer
  3. Repeat for each layer
  4. Save

Method 3: Flatten Smart Objects

  1. Select smart object layer
  2. Layer → Smart Objects → Rasterize Layer
  3. Repeat for all smart objects

What Gets Rasterized​

Must rasterize:

  • ✅ Text layers
  • ✅ Shape layers
  • ✅ Smart objects
  • ✅ Vector masks
  • ✅ Adjustment layers (flatten with image)

Already rasterized:

  • ✅ Pixel layers (from images)
  • ✅ Painted layers

PSD Preparation Checklist​

File structure:

  • All layers are rasterized
  • Layers are named clearly
  • Layers are in correct order (bottom = background)
  • No hidden layers you want to keep (hidden = won't import)
  • No unnecessary layers (clean up first)

Layer optimization:

  • Delete unused layers
  • Merge layers that don't need to be separate
  • Reasonable layer count (100+ layers might be slow)
  • Each layer is appropriately sized

Image quality:

  • Resolution matches target (1920×1080 for 16:9, etc.)
  • Layers not oversized (no 8000px layers if you need 100px)
  • Transparency preserved where needed
  • Color mode: RGB (not CMYK)

File organization:

  • Layers grouped logically (optional, groups may flatten)
  • Layer names describe content
  • Background at bottom, foreground at top

Naming Your Layers​

In Photoshop, name layers BEFORE importing:

Good names:

✅ Logo
✅ Background_Stars
✅ Wheel_Item_01
✅ UI_Button_Start
✅ Text_GameTitle

Bad names:

❌ Layer 1
❌ Layer 1 copy 3
❌ Rectangle 14
❌ Shape 2

These names transfer to HyperTheme! Good names = easier to work with later.

The Import Process​

Step-by-Step Import​

1. Save your prepared PSD

  • File → Save
  • Make sure all changes are saved
  • Note file location

2. Open HyperTheme

  • Open existing project or create new one
  • Go to theme builder

3. Start import

  • File → Import from PSD
  • Or look for PSD import button/icon

4. Select file

  • Browse to your prepared PSD
  • Select it
  • Click Open

5. Wait for processing

  • Upload takes time (depending on file size)
  • Processing extracts each layer
  • Don't close browser!
  • May take 30 seconds to several minutes

6. Import completes

  • Layers appear in Library and/or canvas
  • Each PSD layer becomes an asset
  • Check Layers tab

What Happens During Import​

HyperTheme:

  1. Uploads PSD file
  2. Extracts each layer as separate PNG
  3. Preserves layer names
  4. Maintains layer order
  5. Adds each layer to your theme
  6. Places layers at original positions

Result: Your Photoshop design now in HyperTheme, ready to animate!

After Import: What to Expect​

Layer Structure​

In Layers tab, you'll see:

  • Each PSD layer as a HyperTheme layer
  • Same names (if you named them)
  • Same order (bottom to top)
  • Positioned as in Photoshop

Example:

Photoshop:              HyperTheme:
┌─────────────┐         ┌─────────────┐
│ Logo        │    →    │ Logo        │
│ Title       │    →    │ Title       │
│ Background  │    →    │ Background  │
└─────────────┘         └─────────────┘

What Transfers​

✅ Preserves:

  • Layer images (as PNG)
  • Layer names
  • Layer order
  • Transparency
  • Position on canvas
  • Layer visibility (visible layers)

❌ Doesn't transfer:

  • Layer effects (drop shadows, glows, etc.)
  • Blending modes
  • Adjustment layers
  • Layer styles (must recreate in HyperTheme)
  • Groups (may flatten)
  • Text editability (text becomes image)

Dealing with Lost Features​

Layer effects:

  • Add equivalent effects in HyperTheme
  • Drop shadow → Use shadow properties
  • Glow → Use glow effect or shader
  • Bevel → Limited options, may need to bake in

Blending modes:

  • Some blend modes available in HyperTheme
  • Set in layer properties
  • May not match Photoshop exactly

Text layers:

  • Become images (not editable text)
  • If you need editable text, add Text layer in HyperTheme
  • Or re-import with different text (requires new PSD)

Working with Imported Layers​

Immediate Steps After Import​

1. Check everything imported:

  • Count layers (match PSD?)
  • Verify layer names
  • Check positions
  • Look for missing layers

2. Organize if needed:

  • Create groups in HyperTheme
  • Rename layers if necessary
  • Adjust stacking order

3. Adjust positions:

  • Fine-tune placement
  • Some positions might be slightly off
  • Use arrow keys for precision

4. Add animations:

  • Now the fun part!
  • Animate layers as needed
  • Build your interactive theme

Common Post-Import Tasks​

Replace rasterized text:

  1. Find text layer (now an image)
  2. Add Text layer in HyperTheme
  3. Position over image
  4. Hide/delete image layer
  5. Now text is editable!

Add effects:

  • Drop shadows on layers
  • Glows and outlines
  • Filters (blur, pixelate, etc.)
  • Shaders for special effects

Connect to metadata:

  • Replace static game names with metadata
  • Swap static box art for metadata images
  • Make theme dynamic

Optimize:

  • Delete unnecessary layers
  • Combine layers if possible
  • Check layer sizes

Troubleshooting PSD Import​

"Import failed!"​

Common causes:

1. Layers not rasterized

  • Most common issue!
  • Go back to Photoshop
  • Layer → Rasterize → All Layers
  • Save and try again

2. File too large

  • Very large PSDs may timeout
  • Reduce file size:
    • Lower resolution
    • Merge some layers
    • Delete unused layers
  • Try again

3. Unsupported features

  • Some Photoshop features not supported
  • Flatten problematic layers
  • Simplify the file

4. Corrupted file

  • Re-save PSD
  • Try exporting as new PSD
  • Check file isn't corrupted

"Some layers are missing!"​

Possible reasons:

Hidden layers:

  • Hidden layers in Photoshop don't import
  • Unhide them, save, re-import

Adjustment layers:

  • May not import (they're not pixel layers)
  • Flatten them with the image below

Empty layers:

  • Layers with no content might be skipped
  • Delete or add content

Groups:

  • Layer groups may flatten or not import correctly
  • Flatten groups before importing

"Layers are in wrong order!"​

Fix:

  • Drag layers in Layers tab to reorder
  • Remember: Top of list = front
  • May need manual adjustment after import

"Positions are off!"​

Causes:

  • Different canvas sizes (Photoshop vs HyperTheme)
  • Artboard positioning in Photoshop

Fix:

  • Manually adjust positions in HyperTheme
  • Use Ctrl+0 to see full canvas
  • Reposition as needed

"Layer effects are gone!"​

This is expected!

  • Layer effects don't transfer
  • Recreate in HyperTheme using available properties
  • Or bake effects into layers in Photoshop before importing

Advanced PSD Workflow​

The Professional Approach​

Phase 1: Design (Photoshop)

  1. Create mockup in Photoshop
  2. Name all layers clearly
  3. Organize layer structure
  4. Get approval/feedback

Phase 2: Prepare for Import

  1. Save copy of original (backup!)
  2. Flatten any complex effects
  3. Rasterize all layers
  4. Clean up unnecessary layers
  5. Verify everything looks right
  6. Save export version

Phase 3: Import

  1. Import prepared PSD to HyperTheme
  2. Verify import successful
  3. Check all layers present

Phase 4: Build in HyperTheme

  1. Add animations
  2. Connect metadata
  3. Add special layers (text, video)
  4. Polish and refine

Phase 5: Test and Publish

  1. Preview extensively
  2. Test with real data
  3. Publish theme

Multiple Designers Workflow​

Designer (Photoshop):

  • Creates visual design
  • Delivers PSD with clear layer names
  • Documents intended animations

Theme Builder (HyperTheme):

  • Imports PSD
  • Adds interactivity
  • Connects metadata
  • Publishes theme

Collaboration notes:

  • Clear layer naming essential
  • Design at correct resolution
  • Document layer purposes
  • Include animation notes

Iterating on Imported Designs​

Small changes:

  • Make directly in HyperTheme
  • Reposition, recolor, etc.
  • No need to re-import

Major changes:

  • Update PSD
  • Re-import
  • May lose HyperTheme-specific work (animations, etc.)
  • Consider making changes in HyperTheme instead

Best practice:

  • Finalize design before import
  • Iterate in HyperTheme after import
  • Only re-import for major redesigns

PSD Import Best Practices​

Do:

  • ✅ Rasterize all layers first
  • ✅ Name layers clearly
  • ✅ Save a copy (keep original)
  • ✅ Clean up before importing
  • ✅ Design at target resolution
  • ✅ Test import with small file first

Don't:

  • ❌ Import without rasterizing
  • ❌ Use excessive layer count (100+)
  • ❌ Leave layers unnamed
  • ❌ Import with hidden layers you need
  • ❌ Expect all effects to transfer
  • ❌ Import without backing up original

PSD Preparation Checklist (Printable)​

BEFORE IMPORT:
[ ] Save copy of original PSD
[ ] Rasterize all layers
[ ] Name all layers clearly
[ ] Delete unused/hidden layers
[ ] Verify resolution correct
[ ] Flatten complex effects
[ ] Check layer order
[ ] Save prepared version

AFTER IMPORT:
[ ] Verify all layers present
[ ] Check layer names
[ ] Verify positions
[ ] Create groups if needed
[ ] Add animations
[ ] Replace text layers with Text layers
[ ] Add metadata connections
[ ] Test extensively

Example Workflow​

Case Study: Game Wheel Theme​

Step 1: Photoshop design

Layers (named):
- Logo_Title
- Wheel_Center
- Wheel_Left2
- Wheel_Left1
- Wheel_Right1
- Wheel_Right2
- Background_Gradient
- Background_Particles

Step 2: Preparation

  • Select all layers
  • Layer → Rasterize → All Layers
  • Save as "GameWheel_Import.psd"

Step 3: Import to HyperTheme

  • File → Import from PSD
  • Select GameWheel_Import.psd
  • Wait for processing

Step 4: Post-import work

  • Add Bounce animation to Wheel_Center
  • Add Opacity fade to Wheel_Left/Right items
  • Replace Logo_Title with Text layer
  • Add metadata to wheel items
  • Publish!

Result: Professional design, animated and dynamic!

Next Steps​

Pro Tip: Import gives you a head start, but the real magic happens in HyperTheme with animations and metadata. Design in Photoshop, bring to life in HyperTheme! 🎨→✨