[vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1446651561836{margin-bottom: -10px !important;}”]

Photoshop files upload

[/vc_column_text][vc_column_text letter_spacing=”” css=”.vc_custom_1474972722274{margin-right: 5% !important;}”]

You can import your Photoshop “PSD” files directly into Racontr. To do this, follow this tutorial step by step.

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1446651687866{margin-left: 5% !important;}”]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top=””][vc_column width=”5/6″][vc_single_image image=”123″ img_size=”full” alignment=”center”][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_btn title=”Download the script” color=”peacoc” align=”center” i_icon_fontawesome=”fa fa-hdd-o” link=”url:https%3A%2F%2Fracontr.wpengine.com%2Fwp-content%2Fuploads%2F2015%2F04%2Fracontr_psdtoracontr-.zip||” button_block=”true” add_icon=”true”][vc_column_text letter_spacing=””]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.

1. Click the “PSD” button
2. a pop-up displays.
3. Click “PSD script / Script PSD and documentation”
4. A file in zip format downloads to your computer
5. Grab it and “unzip” the file
6. In the folder you will find the file “racontr.jsx”

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”401″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446651798260{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]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.

1. 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.

2. For example, if your background images or your pictos/pictograms are composed of several layers, merge them to have only one layer.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”404″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446652252286{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]

1. There you have it, the script is completed;
2. a folder was created in the location of your “psd”. In this folder you will find an ?image? folder and a file: “elements.xml”.
3. 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”.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”407″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446652755236{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]Your Psd model is now prepared and ready to be exported. We will now run the script.

1. To run the script, go to file
2. then in “Script”
3. 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.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”410″ img_size=”full” css=”.vc_custom_1446652720429{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]

1. Click PSD and then, in the pop-up window, click “Drop files” and then find the file you just zipped.
2. You can also click drag your zipped file in this area.
3. This may take some time, when the page appears in your scenario the operation is over. This page is named after your psd.
4. 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![/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”413″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446652630128{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”sidebar-1″][/vc_column][/vc_row][vc_row padding_top=”0″ padding_bottom=”0″][vc_column][vc_empty_space][vc_single_image image=”132″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/3″][vc_empty_space][vc_column_text]

More
tutorials:

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]