{"id":124708,"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:18","modified_gmt":"2025-01-30T11:56:18","slug":"photoshop-and-justinmind-integration","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/integracion-photoshop-justinmind","title":{"rendered":"Integraci\u00f3n de Justinmind con Photoshop"},"content":{"rendered":"<p>Justinmind est\u00e1 integrado con el editor de fotos y gr\u00e1ficos Photoshop. Con esta integraci\u00f3n, puedes generar prototipos totalmente funcionales e interactivos a partir de tus archivos de Photoshop y personalizarlos en 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=\"Integraci\u00f3n de Justinmind en Photoshop\">Integraci\u00f3n de Justinmind en Photoshop<\/source><\/video><br \/>\n<a href=\"https:\/\/d2ld3he4yll0xl.cloudfront.net\/prototyper-plugins\/psd_to_justinmind.zip\">Descarga el plugin Justinmind para Photoshop y sigue los pasos que se indican a continuaci\u00f3n para empezar.<\/a><\/p>\n<h2><a id=\"setting-up-your-justinmind-plugin-for-photoshop\"><\/a>Configurar tu plugin Justinmind para Photoshop<\/h2>\n<ol>\n<li><a href=\"https:\/\/d2ld3he4yll0xl.cloudfront.net\/prototyper-plugins\/psd_to_justinmind.zip\">Descarga el plugin para Photoshop.<\/a><\/li>\n<li>Descomprime el archivo para ver una carpeta.<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=\"Contenido del archivo zip del plugin de Photoshop\" width=\"1035\" height=\"640\"><\/li>\n<li>En Photoshop, con el archivo que quieras exportar abierto, ve al men\u00fa Archivo, luego a Scripts y haz clic en Examinar. En el explorador de archivos, selecciona la carpeta del archivo .zip, elige el archivo .jsx que contiene y haz clic en \u00abAbrir\u00bb. Aparecer\u00e1 otro cuadro de di\u00e1logo para que selecciones el destino de salida deseado para el archivo generado.A continuaci\u00f3n, ver\u00e1s el proceso de exportaci\u00f3n en un cuadro de di\u00e1logo, que desaparecer\u00e1 una vez finalizado el proceso de exportaci\u00f3n. Por \u00faltimo, se generar\u00e1 un archivo .vp compatible con Justinmind.<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=\"Barra de progreso de exportaci\u00f3n\" width=\"1309\" height=\"793\"><\/li>\n<\/ol>\n<p>El archivo .vp generado convertir\u00e1 todas las capas de tu archivo de Photoshop en elementos y componentes individuales en Justinmind. Todo el texto de tu dise\u00f1o de Photoshop se mantendr\u00e1 como texto editable en Justinmind. Todos los dem\u00e1s elementos se convertir\u00e1n en im\u00e1genes .png.<\/p>\n<h2><a id=\"how-to-work-with-your-photoshop-file-in-justinmind\"><\/a>C\u00f3mo trabajar con tu archivo de Photoshop en Justinmind<\/h2>\n<p>Abre el archivo .vp en Justinmind y empieza a trabajar. Ver\u00e1s todas las capas de tu archivo listadas en la paleta Contorno y en el Lienzo. Haz clic en un elemento y mira en la paleta Propiedades para ver las distintas formas en que puedes personalizar a\u00fan m\u00e1s tu dise\u00f1o.<\/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 exportado en Justinmind\" width=\"1572\" height=\"903\"><br \/>\nAhora puedes empezar a a\u00f1adir funcionalidades a tu prototipo, como Enlaces a otras pantallas.  <a href=\"https:\/\/www.justinmind.com\/es\/soporte\/puesta-en-marcha\">  M\u00e1s informaci\u00f3n sobre c\u00f3mo empezar con tu nuevo prototipo Justinmind.<\/a><\/p>\n<div><strong>Nota:<\/strong> el plugin generar\u00e1 un prototipo de dispositivo Web. Si quieres trabajar con un tipo de dispositivo diferente, tendr\u00e1s que cambiarlo manualmente en Justinmind. Puedes cambiar el tipo de dispositivo seleccionando la pantalla base en la paleta Esquema y, a continuaci\u00f3n, en la paleta Propiedades, en General, elige otro dispositivo del desplegable.  <\/div>\n<h3>Otras formas de empezar con tu archivo de Photoshop<\/h3>\n<ul>\n<li>Abre Justinmind y, en el cuadro de di\u00e1logo que aparece, elige empezar desde otro archivo .vp. Selecciona el archivo .vp que se gener\u00f3 utilizando el 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=\"Iniciar desde otro di\u00e1logo de archivo vp\" width=\"867\" height=\"532\"><\/li>\n<li>Importa el archivo .vp a otro prototipo. Para ello, abre el archivo .vp que quieras importar y ve al men\u00fa Archivo, selecciona Importar y elige Prototipo. Elige el archivo .vp generado para importarlo y descarta cualquier parte no deseada del prototipo que se haya generado, como Escenarios y Plantillas. Haz clic en \u00abAceptar\u00bb para finalizar la importaci\u00f3n.<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=\"Di\u00e1logo Importar prototipo\" width=\"867\" height=\"592\"><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Justinmind est\u00e1 integrado con el editor de fotos y gr\u00e1ficos Photoshop. Con esta integraci\u00f3n, puedes generar prototipos totalmente funcionales e interactivos a partir de tus archivos&#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":[8431,8458],"tags":[],"class_list":["post-124708","post","type-post","status-publish","format-standard","hentry","category-guia-del-usuario","category-integraciones"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124708"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124708"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124708\/revisions"}],"predecessor-version":[{"id":125130,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124708\/revisions\/125130"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}