All Collections
RacontR documentation (English)
Manage your scenario
Photoshop files upload (PSD)
Photoshop files upload (PSD)

Import PSD files into your project

Edouard Williamson avatar
Written by Edouard Williamson
Updated over a week ago

With RacontR you can turn a Photoshop mockup into a project page and animate your different Photoshop layers and add interactions between them.

Here are the different options covered in this section :

  • Script download (for PC and Mac users)

  • RacontR plugin for Photoshop (for Mac users)

1. Script download method

This is the process you need to use if you're a PC user. Mac users have the choice between both processes.

Here is the procedure to follow:

  1. Click the “IMPORT” button (1)

  2. A pop-up displays

  3. Click "Download script” (2)

  4. A zip file starts downloading

  5. Grab it and decompress the file

  6. The decompressed file is a “PSDracontr.jsxbin” file

Note : depending on the Photoshop version you're using, the .jsxbin file may not be supported. In which case you will simply need to change the decompressed file's extension by renaming it .jsx
​ 

Preparing your Photoshop mockup 

Before running the script on your mockup, you must follow certain rules and make sure the PSD file is clean: 

After you've completed your composition, make sure it matches the size you'll be using in RacontR, in 72 dpi and in RGB colorimetric mode.

  1. For the export to RacontR to be optimal, make sure you don’t have any folders or sub-folders in the layers window

  2. Avoid having too many layers in your composition. For instance, if your background images or your pictograms are composed of several layers, merge them in order to have only one layer.

Launch the PSD Script

In Photoshop, once your PSD mockup is optimized and ready for export, you need to run the script.

In your Photoshop menu, search for File > Scrip > Explore/Search and select your racontr.jsxbin file.
The software launches the export process. Once done, it will display a "Export Success!" message.
​

Prepare for upload to RacontR

A folder was created in the root location of your .psd file. Within this folder you will find an "Image" folder as well as an "elements.json" file.

Select the root folder and compress it.

Once this is over, go back to your scenario page in RacontR.

Upload zipped file to RacontR

  1. Click then on "Upload zipped file" and search for the compressed file. (3)

  2. You can also simply drag and drop your compressed file into the pop-up window.

  3. The process may take some time, depending on file size. RacontR will display "Importing medias and creating page, please wait..." Once this is over, a page with the name of your original PSD file will have been created in your page manager. 

  4. Double-click on the newly created page : you will notice that your PSD layers are imported. They appear in the exact same order with the same layout.


You can now animate and create interactions using the different layers on your page.

2. RacontR plugin for Photoshop

The RacontR extension for Photoshop is available for Mac users.

This plugin allows you to connect your RacontR account to your Photoshop software. You can export your work from Photoshop straight to RacontR without going through the above steps. 

Here is how to install the plugin : 

  • Upload the zipped file for the plugin using this link

  • Install the Adobe Suite download management app http://install.anastasiy.com/

  • Launch the Anastasiy app

  • Unzip the plugin file then simply drop it in the Anastasiy window

The plugin is now installed in Photoshop, you will find it in the menu Window > Extension/Plugin > Racontr

Recommendations : 

  • Log out of RacontR before the installation process. When you'll go to your Photoshop "Window - Racontr" menu and use for the first time the plugin, you'll be asked to login to RacontR within the extension

  • Also, make sure you're logged out of Photoshop

Once connected to RacontR in the Photoshop plugin, you'll be asked to specify which project you want to upload your mockup to. You'll find all your RacontR projects listed there.

Once the transfer is completed, you can log back in to RacontR and once on the selected project, RacontR will ask you to confirm the upload and will create a page with your .psd layers
​

Did this answer your question?