{"id":129001,"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-02-13T19:03:27","modified_gmt":"2025-02-13T18:03:27","slug":"photoshop-and-justinmind-integration","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/integration-justinmind-photoshop","title":{"rendered":"Die Integration von Justinmind in Photoshop"},"content":{"rendered":"<p>Justinmind ist in den Foto- und Grafikeditor Photoshop integriert. Dank dieser Integration k\u00f6nnen Sie aus Ihren Photoshop-Dateien voll funktionsf\u00e4hige und interaktive Prototypen erstellen und diese in Justinmind anpassen.<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=\"Justinmind Photoshop Integration\">Justinmind Photoshop Integration<\/source><\/video><br \/>\n<a href=\"https:\/\/d2ld3he4yll0xl.cloudfront.net\/prototyper-plugins\/psd_to_justinmind.zip\">Laden Sie das Justinmind-Plugin f\u00fcr Photoshop herunter und folgen Sie den nachstehenden Schritten, um loszulegen.<\/a><\/p>\n<h2><a id=\"setting-up-your-justinmind-plugin-for-photoshop\"><\/a>Einrichten des Justinmind-Plugins f\u00fcr Photoshop<\/h2>\n<ol>\n<li><a href=\"https:\/\/d2ld3he4yll0xl.cloudfront.net\/prototyper-plugins\/psd_to_justinmind.zip\">Laden Sie das Plugin f\u00fcr Photoshop herunter.<\/a><\/li>\n<li>Entpacken Sie die Datei, um einen Ordner zu \u00f6ffnen.<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=\"Inhalt der Photoshop-Plugin-Zip-Datei\" width=\"1035\" height=\"640\"><\/li>\n<li>Navigieren Sie in Photoshop bei ge\u00f6ffneter Datei, die Sie exportieren m\u00f6chten, zum Men\u00fc Datei, dann zu Skripte und klicken Sie auf Durchsuchen. W\u00e4hlen Sie im Dateibrowser den Ordner aus der .zip-Datei, w\u00e4hlen Sie die darin enthaltene .jsx-Datei und klicken Sie auf &#8222;\u00d6ffnen&#8220;. Es erscheint ein weiteres Dialogfeld, in dem Sie das gew\u00fcnschte Ausgabeziel f\u00fcr die erzeugte Datei ausw\u00e4hlen k\u00f6nnen. Sie sehen dann den Exportvorgang in einem Dialogfeld, das verschwindet, sobald der Exportvorgang abgeschlossen ist. Zum Schluss wird eine Justinmind-kompatible .vp-Datei erzeugt.<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=\"Fortschrittsbalken exportieren\" width=\"1309\" height=\"793\"><\/li>\n<\/ol>\n<p>Die generierte .vp-Datei wandelt alle Ebenen aus Ihrer Photoshop-Datei in einzelne Elemente und Komponenten in Justinmind um. Der gesamte Text aus Ihrem Photoshop-Design wird in Justinmind als bearbeitbarer Text beibehalten. Alle anderen Elemente werden in .png-Bilder umgewandelt.<\/p>\n<h2><a id=\"how-to-work-with-your-photoshop-file-in-justinmind\"><\/a>Wie Sie mit Ihrer Photoshop-Datei in Justinmind arbeiten<\/h2>\n<p>\u00d6ffnen Sie die .vp-Datei in Justinmind und beginnen Sie mit der Arbeit.<\/p>\n<p>Sie sehen alle Ebenen aus Ihrer Datei in der Konturenpalette und auf der Leinwand. Klicken Sie auf ein Element und sehen Sie sich in der Eigenschaften-Palette die verschiedenen M\u00f6glichkeiten an, mit denen Sie Ihr Design weiter anpassen k\u00f6nnen.<br \/>\n<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=\"Exportierte psd in Justinmind\" width=\"1572\" height=\"903\"><br \/>\nSie k\u00f6nnen nun damit beginnen, Ihrem Prototyp Funktionen hinzuzuf\u00fcgen, z. B. Links zu anderen Bildschirmen.  <a href=\"https:\/\/www.justinmind.com\/de\/hilfe\/einstieg\">  Erfahren Sie mehr dar\u00fcber, wie Sie mit Ihrem neuen Justinmind-Prototypen loslegen k\u00f6nnen.<\/a><\/p>\n<div><strong>Hinweis:<\/strong> Das Plugin erzeugt einen Prototyp f\u00fcr ein Web-Ger\u00e4t. Wenn Sie mit einem anderen Ger\u00e4tetyp arbeiten m\u00f6chten, m\u00fcssen Sie diesen manuell in Justinmind \u00e4ndern. Sie k\u00f6nnen den Ger\u00e4tetyp \u00e4ndern, indem Sie den Basisbildschirm in der Gliederungspalette ausw\u00e4hlen und dann in der Eigenschaftenpalette unter Allgemein ein anderes Ger\u00e4t aus dem Dropdown-Men\u00fc w\u00e4hlen.  <\/div>\n<h3>Andere M\u00f6glichkeiten, mit Ihrer Photoshop-Datei zu arbeiten<\/h3>\n<ul>\n<li>\u00d6ffnen Sie Justinmind und w\u00e4hlen Sie in dem erscheinenden Dialogfeld die Option, von einer anderen .vp-Datei zu starten. W\u00e4hlen Sie die .vp-Datei, die mit dem Plugin erstellt wurde.<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=\"Start aus anderem vp-Dateidialog\" width=\"867\" height=\"532\"><\/li>\n<li>Importieren Sie die .vp-Datei in einen anderen Prototyp. \u00d6ffnen Sie dazu die .vp-Datei, in die Sie importieren m\u00f6chten, und w\u00e4hlen Sie im Men\u00fc Datei die Option Importieren und dann Prototyp aus. W\u00e4hlen Sie die generierte .vp-Datei zum Importieren aus und verwerfen Sie alle unerw\u00fcnschten Teile des Prototyps, die generiert wurden, wie z.B. Szenarien und Vorlagen. Klicken Sie auf &#8222;OK&#8220;, um den Import abzuschlie\u00dfen.<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=\"Dialogfeld Prototyp importieren\" width=\"867\" height=\"592\"><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Justinmind ist in den Foto- und Grafikeditor Photoshop integriert. Dank dieser Integration k\u00f6nnen Sie aus Ihren Photoshop-Dateien voll funktionsf\u00e4hige und interaktive Prototypen erstellen und diese in&#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":[8546,8552],"tags":[],"class_list":["post-129001","post","type-post","status-publish","format-standard","hentry","category-benutzerhandbuch","category-integrationen"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129001"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129001"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129001\/revisions"}],"predecessor-version":[{"id":129174,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129001\/revisions\/129174"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}