Adobe InDesign app

Crea tu App en 10 minutos con InDesign y 480interactive

En este tutorial vamos a crear una aplicación móvil a partir de un documento de Adobe Indesign, el cual convertiremos en app gracias al software 480interactive.

Realizaremos una app tipo Single o de una única publicación la cual podremos descargar y probar en nuestro dispositivo móvil al finalizar, utilizando la app 480iViewer.

Este será el resultado:

mockup

Paso 1: Descarga gratis el software 480interactive
Paso 2: Instala 480interactive  con este video-tutorial
Paso 3: Crea el proyecto App

· Abre el programa y aparecerá la pantalla de bienvenida. Pulsa el botón “Crear Nueva App”.

bienvenida1

 · Completa los datos del asistente de creación de Apps:

nueva app

 · Nombre de la App: App Publicación InDesign.

 · Ubicación del proyecto: En este caso vamos a guardar el proyecto en la ubicación por defecto así que lo dejamos como está.

 · Tipo de App: Selecciona “App Single”.

 · Finalmente pulsa el botón “Crear”.

Paso 4. Descarga gratis el contenido para el caso práctico.
Paso 5: Añade el contenido necesario para la app

En este paso guardaremos dentro del proyecto app los contenidos de ejemplo. Los pasos a seguir son: 

· Descomprime el archivo .zip que has descargado.

· Verás dos carpetas: “InDesign” e “Icono.

· Haz clic en “Herramientas” en la parte superior de 480i Manager y elige “Abrir carpeta del proyecto”.

abrir-carpeta-proyecto

 · Se abrirán las carpetas del proyecto, copia las dos carpetas que has descargado antes y pégalas dentro de la carpeta “Libraries”.

Library_1

Una vez pegadas las carpetas descargadas, podemos pasar al siguiente paso.

Paso 6: Convierte el InDesign en Issue

Para añadir un documento InDesign a tu App primero necesitarás convertir el documento InDesign en Issue (formato compatible con Tablets y Smartphones).

Instalación de 480i Script

Lo primero que debes hacer es descargar el plugin desde el siguiente enlace:

· Plugin 480i para InDesign.

· Al descomprimir el archivo comprimido que has descargado, encontrarás una carpeta llamada «480i Script».

· Esta carpeta contiene el fichero «480i Script.jsx». Secciona ese fichero, haz clic con el botón derecho y elige «copiar».

· Ahora abre Adobe InDesign.

· Selecciona el panel Script de InDesign. Si lo tienes oculto, puedes verlo en: Ventana ⇒ Utilidades ⇒ Script.

· Haz clic con el botón derecho sobre la carpeta «Aplicación» y elige «Mostrar en finder» en Mac o «Mostrar en Explorador» en Windows.

Panel Script

· Se abrirá automáticamente la carpeta «Scripts Panel» de InDesign, pega dentro el fichero «480i Script.jsx» que has copiado en el paso anterior.

· Ya tienes instalado «480i Script» en InDesign.

Panel Script
Convierte el InDesign en Issue

Ahora puedes abrir el documento de InDesign que previamente has guardado en la carpeta Libraries del proyecto, para convertirlo en Issue.

id

Al abrirlo encontrarás una publicación de seis páginas, con un formato de pantalla de vertical 1000x1334px, donde las diferentes páginas quedan delimitadas por una serie de guías.

Este tamaño de página nos va a permitir realizar un único diseño, compatible con cualquier resolución de pantalla (iPhone, iPad, Smartphone Android y Tablet Android). En este caso las guías centrales delimitarán la zona más restrictiva (resolución 19:9).

multid

Posteriormente, desde 480iManager, habilitaremos una propiedad (autoadaptado) para que el documento se ajuste a cada pantalla. Lo veremos en el séptimo paso.

A continuación vamos a convertir el InDesign en Issue:

· Accede al panel Scripts de Indesign. Este panel está en «Ventana» ⇒ «Utilidades» ⇒ «Scripts».

· El script se llama «480i Script.jsx», haz doble clic sobre él.

· Se abrirá un cuadro como este:

issue

· Haz clic en ‘Convertir en Issue’ y una vez finalice el proceso, pulsa aceptar.

El contenido de tu publicación en formato Issue deberá quedar guardado siempre dentro de la carpeta Issue, en la carpeta principal del proyecto. Encontrarás esta carpeta de destino configurada por defecto, por lo que no es necesario que cambies la ruta.

Paso 7: Añade el Issue a la aplicación

· Abre 480i Manager y dirígete a la pantalla de añadir contenido pulsando en el árbol de la izquierda.

arbol

· Selecciona “InDesign ISSUE” y pulsa “Añadir”.

AÑADIR

· Elige la opción “Una orientación”.

orienta

· Aparecerá una pantalla con el Issue que hemos creado antes desde InDesign. Pulsa simplemente en “Seleccionar”.

iss

· Una vez añadido, aparecerá la pantalla de configuración de la publicación.

Habilita la opción autoadaptado

· Tal y como hemos comentado en el cuarto paso, en este caso hemos utilizado un formado de documento que permite ser visualizado tanto en dispositivos con resolución 4:3 como 16:9.

· Si quieres que la aplicación se ajuste totalmente a cada formato de pantalla, selecciona ‘habilitar autoadaptado’, desde la pestaña configuración de la publicación.

autoadaptado

Si no marcas esta casilla, tu publicación se ajustará al lado más restrictivo de la pantalla (alto o ancho) dependiendo de cada dispositivo, dejando unos márgenes en los laterales. Haz la prueba para ver la diferencia.

config
Paso 8: Personaliza la app
Cambia el icono

· Para cambiar el icono de la app, haz clic en “Configuración de la App” en el árbol de la izquierda y pulsar en “Información General”.

· Una vez ahí, pulsa sobre el icono por defecto. Selecciona el icono que previamente hemos guardado en la carpeta Libraries.

Paso 9: Exporta y pre-visualiza tu app

Una vez hemos acabado de configurar y personalizar nuestra app, para poder pre-visualizarla en tu dispositivo móvil, tienes que instalar la app “480i Viewer” en tu smartphone o tablet.

Puedes descargar la app escaneando este QR o busca “480i viewer” en App Store o Google Play:

qrr

Una vez instalada la app, volvemos a 480i Manager y pulsamos en “Exportar App” en la parte superior izquierda.

Al finalizar la exportación se abrirá un asistente para enlazar el smartphone o tablet con tu ordenador. Abre la App “480i Viewer” y sigue los pasos del asistente.

Una vez ha acabado de enviarse la app, ya puedes abrir el proyecto desde tu smartphone o Tablet.

Continúa con tu aprendizaje

Ahora ya sabes cómo crear una aplicación móvil de forma sencilla a partir de un documento de Adobe Indesign.

Sin embargo, esto es solo el principio. A partir de ahora, puedes aprender cómo añadir diferentes efectos interactivos y funcionalidades interesantes a tu app. Para ello solo tienes que visitar nuestro centro de soporte, donde encontrarás plantillas, tutoriales y casos prácticos.

El reto de diseñar para las nuevas publicaciones MCX, más accesible que nunca

“En papel piensas en dos dimensiones; en el formato app pasas a pensar en audio, vídeo, interactividades, efectos… es mucho más versátil, tienes muchísimo más con lo que jugar; en realidad es más difícil para el diseñador, pero es un reto mucho más bonito, porque el resultado es claramente superior. Los diseñadores debemos de atrevernos a salir del QuarkXPress…”. Con esa claridad de ideas resume Luismi Abad, uno de los diseñadores de la agencia de creatividad Complot de Madrid, uno de los cambios más importantes que se están produciendo en el sector de la edición en los últimos tiempos: el que están viviendo en primera persona los profesionales del diseño gráfico y la maquetación. De hecho, la nueva generación de publicaciones MCX (Mobile Content Experience), tienen como una de sus principales características el cambio de paradigma en el diseño.

Conforme explicábamos recientemente, las nuevas publicaciones digitales en formato app están protagonizando una revolución en lo que se refiere tanto al continente como al contenido. Y precisamente la nueva experiencia que suponen para el usuario tiene su primera razón de ser en el diseño funcional, que se diferencia de la web por la cercanía, por los movimientos que realiza de forma táctil: pulsar, deslizar, pellizcar, palpar, agitar… Al mismo tiempo que el lector de estas nuevas publicaciones se siente más cómplice con esa interactividad real que le ofrece la tablet, siguiendo un itinerario más personalizado por los contenidos, el diseñador también tiene mayor control porque puede ofrecer una experiencia mucho más completa que en una publicación impresa.

Y el cambio de paradigma se hace más accesible, prácticamente transparente, con una herramienta como 480interactive, que permite hacer el tránsito de Adobe InDesign a publicación digital en formato app con un software y un sencillo sistema de etiquetas muy fáciles de dominar. La distancia entre el diseño tradicional en papel a la creación de nuevos contenidos en app interactiva es ahora más fácil de recorrer que nunca y los resultados tan sorprendentes como la imagen animada, el rasca o los efectos de sonido.

Sobre todo, porque el reto de diseñar con este cambio de chip es, en realidad, una adaptación necesaria al uso espontáneo y natural que de manera creciente hacen cada vez más lectores de tablets. Algo que es especialmente llamativo en los niños, que utilizan los gestos de navegación en las apps de una forma absolutamente intuitiva, dejando atrás a ratones y punteros.

Quizá te interese:
cursos_footer
partner_footer