Usuarios de Photoshop: todo lo que necesitas saber para comenzar con Adobe XD
Si eres usuari@ de Photoshop y todavía no has probado Adobe XD, ahora es el momento perfecto para comenzar. La nueva actualización de XD de este mes de Marzo incluye una función fácil e intuitiva para convertir tus diseños de Photoshop en prototipos de app y web completamente interactivos en XD. Su interfaz intuitiva hace que trabajar en ambas aplicaciones sea un flujo de trabajo potente y efectivo que además incluye opciones para compartir tus diseños y recopilar comentarios rápidamente dentro y fuera de tu equipo.
Con la ayuda de Paul Trani, Senior Creative Cloud Evangelist, te invitamos a poner en práctica algunos pasos simples para convertir tus archivos de Photoshop en Adobe XD y aprovechar al máximo el flujo de trabajo de estas dos potentes aplicaciones. Sigue leyendo y aprenderás todo lo que necesitas saber para llevar tus diseños de Photoshop al siguiente nivel.
Comencemos: Importa tus archivos PSD en Adobe XD.
- Descarga Adobe XD como parte de tu suscripción de Adobe Creative Cloud o descarga la versión de prueba gratuita.
- Comienza un nuevo diseño y selecciona Archivo> Abrir (o utiliza el atajo Ctrl+O). Localiza tu archivo .PSD y selecciona “Abrir”.
- Adobe XD importará automáticamente tu archivo Photoshop en alta fidelidad, conservando las capas, efectos, grupos y máscaras. Podrás editar tu contenido del .PSD directamente en XD, y usarlo para crear fondos, iconos y más. Aquí tienes una lista de elementos compatibles al abrir un archivo de Photoshop en XD.
- Usa las herramientas de Adobe XD para continuar diseñando tu app o sitio web
- Activa el modo “Prototipo”, y comienza a conectar tus pantallas entre sí para crear un prototipo totalmente interactivo.
- Ahora tus diseños de Photoshop cobran vida y se convierten en prototipos de app y sitios web completamente interactivos.
“Es tan simple como abrir el PSD directamente en XD, y comenzar a editar. Una vez tienes tus diseños de Photoshop en XD, activa el modo de “prototipo” y añade las interacciones que deseas. Todas las capas se mantienen como capas individuales así que todo se mantiene limpio y ordenado,” comenta Trani.
Todavía más sencillo: Copiar y Pegar tus diseños de Photoshop en Adobe XD.
Si lo que buscas es una manera todavía más rápida para importar tus diseños de Photoshop a Adobe XD, simplemente copia y pega tu proyecto directamente en la app. El flujo de trabajo de “copiar y pegar” te permite mantener capas individuales de una imagen de Photoshop, o copiar y pegar tu diseño completo como una única imagen con todas las capas acopladas. Aquí tienes los pasos para copiar y pegar tu diseño de Photoshop en Adobe XD:
- Desde Photoshop usa la herramienta “Marco rectangular” y selecciona el contenido que deseas copiar en XD.
- Haz clic en **Editar > Copiar **en Photoshop para copiar el contenido de la capa seleccionada, o selecciona **Editar > Pegado Especial **para copiar todo el contenido de todas las capas incluidas en el área que has seleccionado.
- Abre Adobe XD, y selecciona **Editar > Pegar **para pegar la capa que has copiado en Photoshop o pegar el diseño completo en XD como bitmap.
Importar elementos de Photoshop en Adobe XD a través de las Bibliotecas de Creative Cloud.
Una de las maneras más sencillas y potentes de trabajar en Photoshop y XD, es importar tus diseños de Photoshop dentro de las Bibliotecas de Creative Cloud, y usar esa misma Biblioteca para acceder a tus diseños desde Adobe XD. No solo podrás reutilizar fácilmente tus diseños de Photoshop en tus prototipos de app o sitios web en XD, sino que podrás volver a Photoshop y editar o hacer cambios, y éstos se sincronizarán y actualizarán automáticamente en XD a través de las Bibliotecas. A continuación, te damos los pasos a seguir para importar tus diseños de Photoshop a tu Biblioteca de Creative Cloud y luego acceder a ellos desde Adobe XD:
- Selecciona el contenido que quieres importar en Photoshop. En la parte derecha de tu pantalla, bajo Bibliotecas, haz clic en el botón (+). Asegúrate que tu gráfico está seleccionado antes de hacer clic en “añadir”.
- En Adobe XD, selecciona Archivo > Abrir Bibliotecas CC. Selecciona y arrastra tu diseño de Photoshop al proyecto de Adobe XD.
- Ahora ya estás trabajando con un elemento “vinculado”. Cualquier cambio que realices en Photoshop sobre ese elemento se actualizará automaticamente en Adobe XD.
“Las bibliotecas de Creative Cloud son muy útiles porque puedo seleccionar directamente un elemento haciendo clic con el botón derecho, editarlo en Photoshop para ajustar el fondo y luego volver a XD una vez hechos los cambios y verlos actualizados de forma automática. Cuando tiene 15 mesas de trabajo diferentes, este enlace dinámico lo hace todo mucho más fácil y rápido,” comenta Trani.
Aprende más sobre las Bibliotecas de Creative Cloud en XD
Crea rápidamente experiencias Multi-pantalla a partir de tus diseños de Photoshop
Si trabajas mucho en Photoshop seguramente inviertes mucho tiempo haciendo pequeños ajustes en los múltiples elementos visuales. Después de importar estos elementos a Adobe XD, puedes ahorrar muchísimo tiempo al aprovechar la poderosa funcionalidad “Repeat Grid”. Con Repeat Grid, en esencia lo que estás creando es un grupo de objetos, que puede incluir tus diseños de Photoshop. Los cambios que apliques en una mesa de trabajo se aplicarán automáticamente a todas las demás.
“Cuando creas un nuevo diseño, con pequeños iconos o botones, utilizar herramientas como el Repeat Grid es muy intuitivo y rápido. Si tengo una pantalla con 5 elementos distintos que necesito que sean más o menos homogéneos en múltiples mesas de trabajo, me requiere copiar y pegar múltiples veces en Photoshop. En cambio, en XD es realmente fácil crear experiencias consistentes en múltiples mesas de trabajo utilizando los diseños de Photoshop,” comenta Trani.
Para ver un tutorial detallado acerca de cómo usar el Repeat Grid en Adobe XD, visita nuestro blog en inglés Exploring Repeat Grid in Adobe XD, y lánzate a probarlo con tus propios diseños.
Recopila comentarios sobre tus diseños de Photoshop fácilmente
Una de las principales ventajas de usar Adobe XD para diseñar y crear prototipos interactivos de apps o sitios web es la habilidad de compartir fácilmente tus creaciones vía link y obtener feedback. Una funcionalidad que puedes usar para recopilar feedback y comentarios sobre tus diseños de Photoshop también.
Para comenzar a compartir un prototipo interactivo, una vez creado y que has conectado todas tus mesas de trabajo (o artboards) para generar las interacciones, sólo tienes que hacer clic en el botón de “compartir” en la esquina superior derecha de Adobe XD y seleccionar “Publicar Prototipo”. Desde ahí, puedes seleccionar Crear Link Público para generar una URL que puedes compartir con otros. Cualquiera persona con la que compartas el link podrá añadir comentarios y destacar aspectos específicos del diseño.
“Si tengo ese link y quiero dar feedback sobre un diseño de Photoshop, en el prototipo de Adobe XD puedo fijar comentarios a ciertas partes de lo que antes estaba en Photoshop. El cliente puede decir ‘oye, ponlo verde’, y fijar ese comentario en la esquina superior izquierda, exactamente donde necesitan cambiar un elemento a verde. Todo este feedback queda rastreado y luego tu como diseñador puedes implementarlo e, incluso, si todos esos elementos están vinculados, saltar a Photoshop para hacer las ediciones y posteriormente actualizar ese link,” comenta Trani.
Esta puede ser también una gran herramienta para trabajar con los desarrolladores, ya que tienen acceso a la información sobre el tamaño y medidas de todos los elementos desde el link de especificaciones de diseño.
Todos los recursos que necesitas para triunfar con Adobe XD
Hay multitud de ventajas al trabajar en Photoshop y Adobe XD. Al utilizar ambas aplicaciones en tándem es muy fácil y eficiente convertir diseños increíbles de Photoshop en prototipos de apps y sitios web interactivos e impresionantes en XD. Aquí te dejamos algunos recursos más para ayudarte a comenzar con Adobe XD y animarte a experimentar:
Un fin de semana con Adobe XD: Todo lo que necesitas para diseñar una Mobile App (en inglés)– Una guía completa en inglés, incluyendo algunos de nuestros mejores tutoriales, con todo lo que necesitas para comenzar a trabajar con tus elementos de Photoshop y empezar a diseñar, prototipar y compartir.
Cinco UI Kits GRATUITOS para Adobe XD creados por Diseñadores UX Top – Estos UI Kits creados por talentosos diseñadores de UX te ayudarán a darle a tu prototipo de app o de sitio web el aspecto y las funcionalidades que deseas.
“En mi opinión, los usuarios de Photoshop no deberían tener problemas para familiarizarse rápidamente con Xd. Las herramientas con realmente muy intuitivas. Si conoces Photoshop, te sentirás como en casa con XD,” afirma Paul Trani.
Exclusivos Kits de Iconos gratis.
Les célebres diseñadores Anton & Irene, Büro Destruct y Lance Wyman han creado para ti 3 kits exclusivos gratuitos. Lee nuestro blog y descárgate los kits gratuitos.
