Photoshop files upload
You can import your Photoshop “PSD” files directly into Racontr. To do this, follow this tutorial step by step.
First step: Download script .JSX & documentation
To import your PSD to Racontr, you must run a script in Photoshop. Let’s start by going to the scenario of your project.
We will get the script in the Script section of your project.
- Click the “PSD” button
- a pop-up displays.
- Click “PSD script / Script PSD and documentation”
- A file in zip format downloads to your computer
- Grab it and “unzip” the file
- In the folder you will find the file “racontr.jsx”
Photoshop, preparing your template
Before running the script on your template/model, you must follow certain rules and make sure the “psd” file is clean.
You have created your Photoshop template.
Work your template in actual size, 72 dpi and in RGB calorimetrical mode.
- For the export to Racontr to be optimal, make sure you don’t have any folders or sub-folders in the layers window.
Avoid having too many layers in your template.
- For example, if your background images or your pictos/pictograms are composed of several layers, merge them to have only one layer.
- There you have it, the script is completed;
- a folder was created in the location of your “psd”. In this folder you will find an ?image? folder and a file: “elements.xml”.
- Select the folder to the root, and zip it.
Once done, return to the scenario of your Racontr project and we will import our “psd”.
Launch the PSD Script
Your Psd model is now prepared and ready to be exported. We will now run the script.
- To run the script, go to file
- then in “Script”
- and on browse. Go get the file we downloaded earlier: “racontr.jsx.”
This may take some time; wait for the script to finish: a pop-up window will appear at the end of the operation.
Import the “Zip” to Racontr
- Click PSD and then, in the pop-up window, click “Drop files” and then find the file you just zipped.
- You can also click drag your zipped file in this area.
- This may take some time, when the page appears in your scenario the operation is over. This page is named after your psd.
- Double click on this page, your “psd” have been imported. In the page editor, you will find them all and in the right order, the layout of the elements has also been respected.
Now you can animate your page!