[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_1448451830457{margin-bottom: -10px !important;} »]

Importer ses PSD dans Racontr

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

Il est possible d’importer vos fichier photoshop & PSD directement dans Racontr. Pour cela, suivez pas à pas les étapes de ce tutoriel.

[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »90px »][vc_column_text letter_spacing= » » css= ».vc_custom_1474889213335{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 letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_btn title= »Télécharger le 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= » »]Pour importer vos PSD dans Racontr, vous devez exécuter un script dans Photoshop.

Rendez-vous dans la partie Scénario de votre projet.

1. Cliquez sur le bouton « PSD »,
2. une pop-up s’affiche.
3. Cliquez sur « Script PSD et documentation »
4. Un fichier au format zip se télécharge sur votre ordinateur,
5. récupérez le et « dézipper » le fichier.
6. Dans le dossier vous trouverez le fichier « 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 letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]Avant de lancer le script sur votre maquette, il faut respecter certaines règles, et s?assurer que le fichier .PSD est propre.

Vous avez réalisé votre maquette Photoshop.

Travaillez votre maquette à la taille réelle, en 72 Dpi et en mode calorimétrique RVB.

1. Pour que l’export vers Racontr soit optimal, assurez vous de n’avoir aucun dossier ou sous dossier dans la fenêtre des calques.

Évitez d’avoir trop de calques dans votre maquette.

2. Par exemple si vos pictos ou image de fond sont composés de plusieurs calques, fusionnez-les pour n’avoir qu’un seul calque.

[/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. Voilà le script est terminé,
2. Un dossier à été crée à l’emplacement de votre « psd ». Dans ce dossier vous trouverez un dossier « image » et un fichier « elements.xml »
3. Sélectionnez le dossier à la racine, et zippez-le.

Une fois fait, retournez dans la partie Scénario de votre projet Racontr, nous allons importer notre « 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= » »]Votre maquette Psd est maintenant préparée et prête à être exportée, nous allons maintenant exécuter le script.

1. Pour lancer le script, allez dans fichier
2. puis dans « Script »
3. Allez chercher le fichier que nous avons précédemment téléchargé : racontr.jsx.

L’opération peut prendre un peu de temps, attendez que le script se termine : une fenêtre pop-up doit apparaître à la fin de l’opération.[/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. Cliquez sur PSD puis dans la fenêtre pop-up, cliquez sur « Drop files » puis allez chercher le fichier que vous venez de zipper.
2. Vous pouvez aussi cliquez glissez votre fichier zippé dans cette zone.
3. L’opération peut prendre un peu de temps, quand la page apparaît dans votre scénario c’est que l’opération est finie. Cette page porte le nom de votre psd.
4. Double cliquez sur cette page, et voil? les calques de?votre ??psd?? ont ?t? import??. Dans l??diteur de page, ils sont tous?dispos?s?dans le bon ordre et la mise en page des ?l?ments a ?t? respect?

Vous pouvez maintenant animer votre 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]

Plus de
tutoriels :

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

• Charger des médias
• Préparer ses médias
• Remplacer un média
• Supprimer un média

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

• Importer une vidéo
• Importer un son
• Créer un rectangle
• Créer un calque d’action

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