Import Photoshop files

    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

    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


    ImportPhotoshop.jpg

    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.

    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.


    PSD-1.jpg


    PSD-2.jpg

    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.


    PSD-3.jpg

    Supported formats

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

    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.