Description

Importing your designs into Intuiface is made easy by the Photoshop import feature. Just follow a simple configuration step in Adobe Photoshop then drag & drop the design file onto Composer. No more painful exports, layer by layer, for your graphic designer. No more manual updates when a new version of the design is created.

You can even import designs created with Adobe Illustrator. Export your .ai file into a .psd format, then import your .psd file into Composer as described below.

Video Summary

Process

Prepare your Photoshop file

NOTE: We recommend limiting image size to 4K (3840x2160) pixels.

The only thing you have to do in Photoshop (or Illustrator) is give a name to each layer and group you want to import. The addition of a name will determine whether a layer or group will be converted into an image and then inserted into an experience by Composer.

• Every layer or group with a name finishing with .png will be imported
• Exceptions:
  • sub layers/groups which are invisible in Photoshop
  • sub layer/groups with a name finishing with .exclude

In the sample above (click image to enlarge):

• 3 images will be exported: the background and 2 groups
• For the pressed state (1st group), the "home icon right" won't appear in the exported image because of the .exclude at the end of its name
• For the released state (2nd group), the "home icon right" won't be exported because it is not visible (eye icon is unchecked)

NOTE:

• Imported layers will not retain their positional relationship to each other.
• Limit your file workspace to a manageable size to avoid import failure. A size equivalent to FullHD is known to work.

Import the .psd file into Intuiface Composer

In Composer you can either use the File -> Import file(s) menu item or simply drag & drop your .psd file into Composer. In both cases, your imported images will appear in the Content library. In the latter case, the images will also be inserted in the current scene.

Update the Photoshop file & re-import

If you / your designer creates a new version of the psd file, simply re-import it into your experience using the same import instructions above. You will be asked if you want to replace or duplicate the previously imported images.

All assets and controls using images derived from imported psd files will be automatically updated, across all scenes, in your experience.

Supported formats

To avoid requiring a local installation of Photoshop for psd import, the import process imposes some design restrictions. Here are the supported .psd features:

• Color Modes:
  • Grayscale
  • RGB
• Color encoding
  • 8 bits
• Layers & Groups
• Masks
  • Layer Mask
  • Clipping Mask
• Color modifiers
  • Opacity
  • Fill
• Effects
  • Stroke
    • Fill = Color
    • Position = Outside / Inside
  • Color overlay
  • Drop Shadow
    • Blend mode
    • Opacity
    • Angle
    • Distance
    • Layer knocks out drop shadow

If you encounter any issues with one your psd files, please contact our Support Team and send us your file.

NOTE: The last version of Photoshop officially supported was 2024 v25.12.0 but try to keep your Photoshop updated to the current version.