Import Photoshop Files

Summary

This lesson explores how to import layered Photoshop (PSD) files into Rive. Rive recognizes the layer structure and provides tools for bulk formatting and quality optimization of the contained images. The tutorial highlights the critical role of layer naming and warns about the potential loss of animation data when replacing files with inconsistent names.

Step by Step

1. 00:04
   Preparing and Importing

   Save your PSD with properly named layers, then drag the .psd file into Rive's Assets Panel.
2. 00:21
   Managing Asset Properties

   Expand the PSD in the panel to see individual layers. You can check file metadata and adjust quality or format (WebP/PNG/JPEG) for all layers at once.
3. 01:01
   Hidden Layer Rule

   Note that any layers hidden in Photoshop at the time of saving will be excluded from the Rive import.
4. 01:10
   Adding to the Artboard

   Drag individual layers or the entire PSD onto the artboard. Dragging the whole file creates a group containing all layers in their original layout.
5. 01:30
   Risks of Replacing Files

   When using Replace, Rive matches layers by name. If a layer's name was changed in Photoshop, the layer and all its keyframes will be deleted upon replacement.
6. 02:04
   Consistency Tip

   Always ensure layer names match exactly between the original and the replacement PSD to preserve your animation work.
7. 02:14
   Adding New Content

   If you need more layers, it is safer to import them as separate image files or a new PSD rather than modifying the original linked file's structure.

Notes About Current Rive

• Hierarchy Preservation: Importing a PSD is the fastest way to bring complex, layered illustrations into Rive while maintaining their spatial relationships.
• Animation Safety: Replacing a PSD mid-animation is a high-risk move; verify all layer names in the Assets Panel before finalizing the swap.
• Bulk Optimization: Use the global quality settings in the Assets Panel to significantly reduce your final .riv file size before deployment.