{"id":124710,"date":"2019-01-22T04:30:40","date_gmt":"2019-01-22T03:30:40","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/photoshop-and-justinmind-integration\/"},"modified":"2025-01-30T12:56:19","modified_gmt":"2025-01-30T11:56:19","slug":"photoshop-and-justinmind-integration","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/photoshop-justinmind-integration","title":{"rendered":"Int\u00e9gration de Justinmind avec Photoshop"},"content":{"rendered":"<p>Justinmind est int\u00e9gr\u00e9 \u00e0 l&rsquo;\u00e9diteur de photos et de graphiques Photoshop. Gr\u00e2ce \u00e0 cette int\u00e9gration, vous pouvez g\u00e9n\u00e9rer des prototypes enti\u00e8rement fonctionnels et interactifs \u00e0 partir de vos fichiers Photoshop et les personnaliser dans Justinmind.<br \/>\n<video style=\"max-width:820px; width:100%; padding:20px 0px\" class=\"lazyload\" preload=\"auto\" muted=\"\" width=\"100%\" height=\"100%\" loop=\"\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/justinmind-photoshop-integration.png\" playsinline=\"\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/justinmind-photoshop-integration.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/justinmind-photoshop-integration.png\" alt=\"Int\u00e9gration de Justinmind dans Photoshop\">Int\u00e9gration de Justinmind dans Photoshop<\/source><\/video><br \/>\n<a href=\"https:\/\/d2ld3he4yll0xl.cloudfront.net\/prototyper-plugins\/psd_to_justinmind.zip\">T\u00e9l\u00e9chargez le plugin Justinmind pour Photoshop et suivez les \u00e9tapes ci-dessous pour commencer.<\/a><\/p>\n<h2><a id=\"setting-up-your-justinmind-plugin-for-photoshop\"><\/a>Configurer votre plugin Justinmind pour Photoshop<\/h2>\n<ol>\n<li><a href=\"https:\/\/d2ld3he4yll0xl.cloudfront.net\/prototyper-plugins\/psd_to_justinmind.zip\">T\u00e9l\u00e9chargez le plugin pour Photoshop.<\/a><\/li>\n<li>D\u00e9compressez le fichier pour faire appara\u00eetre un dossier.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15415\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/01\/Zip_file_contents.png\" alt=\"Contenu du fichier zip du plugin Photoshop\" width=\"1035\" height=\"640\"><\/li>\n<li>Dans Photoshop, lorsque le fichier que vous souhaitez exporter est ouvert, acc\u00e9dez au menu Fichier, puis \u00e0 Scripts, et cliquez sur Parcourir. Dans le navigateur de fichiers, s\u00e9lectionnez le dossier du fichier .zip, choisissez le fichier .jsx \u00e0 l&rsquo;int\u00e9rieur et cliquez sur \u00ab\u00a0Ouvrir\u00a0\u00bb. Une autre bo\u00eete de dialogue appara\u00eet pour vous permettre de s\u00e9lectionner la destination de sortie souhait\u00e9e pour le fichier g\u00e9n\u00e9r\u00e9. Vous verrez alors le processus d&rsquo;exportation dans une bo\u00eete de dialogue, qui dispara\u00eetra une fois le processus d&rsquo;exportation termin\u00e9. Enfin, un fichier .vp compatible avec Justinmind sera g\u00e9n\u00e9r\u00e9.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15417\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/01\/Script_progress_bar.png\" alt=\"Barre de progression de l'exportation\" width=\"1309\" height=\"793\"><\/li>\n<\/ol>\n<p>Le fichier .vp g\u00e9n\u00e9r\u00e9 convertira tous les calques de votre fichier Photoshop en \u00e9l\u00e9ments et composants individuels dans Justinmind. Tout le texte de votre design Photoshop sera conserv\u00e9 en tant que texte modifiable dans Justinmind. Tous les autres \u00e9l\u00e9ments seront convertis en images .png.<\/p>\n<h2><a id=\"how-to-work-with-your-photoshop-file-in-justinmind\"><\/a>Comment travailler avec votre fichier Photoshop dans Justinmind ?<\/h2>\n<p>Ouvrez le fichier .vp dans Justinmind et commencez \u00e0 travailler. Vous verrez tous les calques de votre fichier list\u00e9s dans la palette Outline et sur le Canvas. Cliquez sur un \u00e9l\u00e9ment et consultez la palette Propri\u00e9t\u00e9s pour voir les diff\u00e9rentes fa\u00e7ons de personnaliser votre design.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15419\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/01\/psd_in_justinmind.png\" alt=\"psd export\u00e9 dans Justinmind\" width=\"1572\" height=\"903\"><br \/>\nVous pouvez maintenant commencer \u00e0 ajouter des fonctionnalit\u00e9s \u00e0 votre prototype, comme des liens vers d&rsquo;autres \u00e9crans.  <a href=\"https:\/\/www.justinmind.com\/fr\/aide\/creez-premier-projet\">  En savoir plus sur la fa\u00e7on de d\u00e9marrer avec votre nouveau prototype Justinmind.<\/a><\/p>\n<div><strong>Remarque :<\/strong> le plugin g\u00e9n\u00e8re un prototype d&rsquo;appareil Web. Si vous souhaitez travailler avec un autre type d&rsquo;appareil, vous devrez le modifier manuellement dans Justinmind. Vous pouvez changer le type d&rsquo;appareil en s\u00e9lectionnant l&rsquo;\u00e9cran de base dans la palette Outline, puis dans la palette Properties, sous General, choisissez un autre appareil dans la liste d\u00e9roulante.  <\/div>\n<h3>Autres moyens de d\u00e9marrer avec votre fichier Photoshop<\/h3>\n<ul>\n<li>Ouvrez Justinmind et, dans la bo\u00eete de dialogue qui s&rsquo;affiche, choisissez de commencer \u00e0 partir d&rsquo;un autre fichier .vp. S\u00e9lectionnez le fichier .vp qui a \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9 \u00e0 l&rsquo;aide du plugin.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15430\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/01\/ImportOtherVpFile.png\" alt=\"D\u00e9marrer \u00e0 partir d'un autre dialogue de fichier vp\" width=\"867\" height=\"532\"><\/li>\n<li>Importez le fichier .vp dans un autre prototype. Pour ce faire, ouvrez le fichier .vp que vous souhaitez importer, puis allez dans le menu Fichier, s\u00e9lectionnez Importer et s\u00e9lectionnez Prototype. Choisissez le fichier .vp g\u00e9n\u00e9r\u00e9 \u00e0 importer et \u00e9liminez toutes les parties ind\u00e9sirables du prototype qui ont \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9es, telles que les sc\u00e9narios et les mod\u00e8les. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer l&rsquo;importation.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15434\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/01\/ImportPrototype-1.png\" alt=\"Dialogue d'importation d'un prototype\" width=\"867\" height=\"592\"><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Justinmind est int\u00e9gr\u00e9 \u00e0 l&rsquo;\u00e9diteur de photos et de graphiques Photoshop. Gr\u00e2ce \u00e0 cette int\u00e9gration, vous pouvez g\u00e9n\u00e9rer des prototypes enti\u00e8rement fonctionnels et interactifs \u00e0 partir&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8436,8457],"tags":[],"class_list":["post-124710","post","type-post","status-publish","format-standard","hentry","category-guide-de-lutilisateur","category-integrations"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124710"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124710"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124710\/revisions"}],"predecessor-version":[{"id":125131,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124710\/revisions\/125131"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}