Plantilla InDesign

Plantilla para crear Apps de catálogos interactivos

Los hábitos del consumidor han cambiado y las empresas lo saben. La nueva forma de llegar a los clientes potenciales se basa principalmente en presentar los productos de una forma sorprendente, y sobretodo, interactiva.

Si el primer paso para muchas marcas fue evolucionar  del formato impreso a digital en lo que a catálogos se refiere, el siguiente nivel consiste en mostrar los artículos y la información del producto a través de Apps.

Con el software de 480interactive podrás crear tus propias Apps de catálogos interactivos de forma sencilla y sin código. Descárgate nuestra plantilla InDesign y empieza a crear tu proyecto. Incluye un tutorial con un caso práctico que te guiará paso a paso durante todo el proceso. 

boton_plantilla_catalogo_480interactive

Si tienes cualquier duda sobre esta plantilla o cualquier otro tema, recuerda que tienes disponible nuestro centro de soporte así como nuestro foro de usuarios, donde responderemos a tus preguntas y podrás consultar las de otros usuarios.

Quizá te interese:

Descubre gratis el software 480interactive para convertir documentos InDesign en Apps para smartphones y tablets

partner_footer

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 en tu ordenador con este video-tutorial

Paso 3. Descarga gratis el contenido para hacer este caso práctico.

Descarga gratis el contenido para hacer este caso práctico

  • Descomprime el archivo .zip que has descargado
  • Verás dos carpetas: “InDesign” e “Icono.
  • Guarda las carpetas para más adelante.

Paso 4: 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 5: Prepara el contenido necesario para la app

Ahora vamos a guardar dentro del proyecto app los contenidos de ejemplo que hemos descargado antes:

  • 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”.
Captura

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:

      • 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.