Import de document Photoshop (PSD)

Importer vos fichiers Photoshop dans votre projet

Greg avatar
Written by Greg
Updated over a week ago

RacontR vous permet d'importer vos compositions Photoshop sous la forme d'une page de votre projet, que vous allez retrouver dans votre scénario.

Voici les différentes méthodes d'import que nous allons aborder :

  • Méthode avec import de script (pour utilisateurs de PC et Mac)

  • Méthode avec installation de l'extension RacontR pour Photoshop (utilisateurs Mac)

1- Méthode avec import de script

Il s'agit de la méthode pour importer vos compositions Photoshop vers RacontR si vous travaillez sur PC.

Pour les utilisateurs de Mac, vous pouvez choisir cette méthode ou l'installation de l'extension sur votre logiciel Photoshop.

Voici les étapes à suivre pour cette méthode:

Télécharger le script : 

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 « IMPORT » (1)

  2. Une pop-up s’affiche 

  3. Cliquez sur « Download script » (2)

  4. Un fichier au format zip se télécharge

  5. Récupérez-le et décompressez le fichier.

  6. Le fichier décompressé devient un fichier « PSDracontr.jsxbin »

Note : selon votre version de Photoshop, il se peut que le fichier .jsxbin ne soit pas reconnu par le logiciel, il vous faudra dans ce cas simplement renommer le fichier décompressé en lui donnant l'extension .jsx
​ 


Photoshop, préparation de votre maquette (schéma ci-dessous) :

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.

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

Lancer le Script PSD

Votre maquette PSD est préparée et prête à être exportée, nous allons maintenant exécuter le script.

Depuis Photoshop, allez sur Fichier > Script > Parcourir et sélectionnez votre fichier racontr.jsxbin.
Le logiciel va lancer la procédure d'export. Une fois terminée, un message "Export Success!" s'affiche.

Préparer l'import dans RacontR

Un dossier à été créé à l’emplacement source de votre « psd ». Dans ce dossier vous trouverez un dossier « Image » et un fichier « elements.json »

Sélectionnez le dossier à la racine, et compressez-le.

Retournez ensuite dans la partie scénario de votre projet RacontR.

Importer le dossier compressé dans RacontR 

  1. Cliquez sur « Upload zipped file » puis allez chercher le fichier que vous venez de compresser (3)

  2. Vous pouvez aussi cliquer-déposer votre fichier compressé dans cette zone.

  3. L’opération peut prendre un peu de temps selon la taille du fichier. RacontR vous affiche le message "Importing medias and creating page, please wait..." Quand la page apparaît dans votre scénario, l’opération est terminée. Cette page porte le nom de votre fichier PSD d'origine.

  4. Double cliquez sur cette page : vous pouvez voir que les calques ont bien été importés. 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ée.

Vous pouvez maintenant animer votre page et y ajouter vos interactions en jouant avec les différents calques de votre composition.

2- Méthode avec extension RacontR 

L'extension RacontR pour Photoshop est disponible pour les utilisateurs de Mac.

Elle va vous permettre de lier votre compte RacontR directement à votre logiciel Photoshop. Vous pourrez en toute simplicité exporter vos compositions depuis Photoshop sans passer par les étapes décrites plus haut.

Voici la marche à suivre:

  • Téléchargez le fichier compressé de l'extension depuis ce lien 

  • Installez l'application gestionnaire de téléchargement pour les logiciels de la suite Adobe http://install.anastasiy.com/

  • Lancez l'application Anastasiy

  • Glissez-déposez le fichier de l'extension RacontR (préalablement décompressé) dans la fenêtre Anastasiy

L'extension est installée, vous la trouvez en allant sur Fenêtre > Extension > Racontr


Quelques recommandations
:

  • Ne pas être connecté à RacontR lors de l'installation car lorsque vous irez dans le menu de Photoshop "fenêtre" - "extension" et que vous utiliserez l'extension pour la première fois vous devrez vous identifier depuis le plugin

  • Idem, ne pas avoir Photoshop ouvert lors de la manipulation d'installation de l'extension

Une fois connecté à l'extension dans Photoshop, le plugin vous demandera vers quel projet vous souhaitez exporter la composition, vous trouverez la liste des projets créés dans votre compte RacontR.
Lorsque le transfert est terminé, vous pourrez vous connecter à RacontR à nouveau et une fois sur le projet, RacontR vous demandera de confirmer l'import, et créera une page avec vos calques .psd.

Did this answer your question?