¿Cómo crear un PDF interactivo?

Cómo hay que crear un PDF interactivo

Ernesto BarrachinaDiseño Gráfico33 Comentarios

4.8/5 - (27 votos)

Vamos a imaginar que tu empresa es candidata a la realización de un proyecto y que preparas la presentación en un PDF interactivo, ¿crees que la recordarán? yo pienso que sí.

Suena muy bien, pero tiene sus inconvenientes 😳

Aunque maquetar una presentación en formato PDF interactivo le aportará mayor dinamismo, los PDFs interactivos son imprevisibles cuando se ejecutan en algunos dispositivos y/o navegadores.

Esto hace que si por ejemplo se abre el documento desde un iPad no se mostrarán correctamente los elementos interactivos.

Curiosamente en mis pruebas se ejecuta sin errores en Internet Explorer y en Safari desde Windows, pero en navegadores como Chrome y Firefox no lo hace adecuadamente.

Por supuesto funciona a la perfección con Adobe Acrobat Reader, un programa que seguro tendrás instalado en tu ordenador.

Aún así dan resultados muy interesantes para presentaciones de empresa, por lo que en este artículo voy a proporcionarte herramientas para que puedas diseñar presentaciones interactivas en PDF.

Yo mismo, antes de comenzar cualquier diseño de páginas web en Valencia, suelo presentar al cliente una demo en formato interactivo. Y la verdad sea dicha, como la página web parece que existe, se hace una idea mucho más clara de su estilo y prestaciones.

¿Qué es un PDF interactivo?

Como su propio nombre indica un PDF interactivo es un documento PDF con formato dinámico al que se le puede añadir botones, enlaces, audios o vídeos y ciertos comportamientos.

También es posible vincular elementos que permiten el acceso a ciertas secciones, como veremos a continuación, o crear animaciones de pasar páginas.

Además, igual que con los PDF destinados a imprimir, puedes crear enlaces en una página web para abrir o descargar documentos PDF interactivos.

En este tutorial crearemos la carta de un restaurante en formato interactivo en la que incluiremos un menú de navegación para acceder a sus secciones.

Lamentablemente si queremos que esta carta esté a disposición del público en dispositivos móviles, deberemos tener una cuenta de pago de Digital Publishing Suite y trabajar desde un Mac.

Si con todos los inconvenientes que te he planteado te interesa aprender a elaborar presentaciones interactivas para mostrarlas desde un ordenador y quedarte con la peña, estás en el lugar adecuado.

¿Qué programa hay que usar para crear un PDF interactivo?

Para crear PDFs interactivos usaremos inDesign.

InDesign es un programa creado por Adobe en 1999 que se usa para la maquetación de publicaciones profesionales como libros o prensa.

Adobe InDesign es un programa complicado con una curva de aprendizaje bastante prolongada, así que en este tutorial ahorraremos algo de esfuerzo.

Partiremos de imágenes prediseñadas gracias a lo aprendido en el curso de Photoshop, el programa de edición de imágenes por excelencia.

Por tanto, antes de nada crea 4 archivos de imagen que usaremos como fondo. Un archivo de imagen por cada una de las páginas que necesites insertar en la carta.

Aunque yo he usado JPG, te recomiendo que tus archivos de imagen sean en formato PNG, que al no tener compresión, permite una mejor lectura de los textos.

Crear una imagen JPG o PNG por cada página que necesites en el PDF interactivo

Los textos pintados en rojo en la imagen superior, corresponden al menú de navegación y/o al título de cada apartado del PDF interactivo, así que no deben formar parte de las imágenes.

Los introduciremos luego como texto desde inDesign.

Cuando maquetes las imágenes de fondo, hazlo con el tamaño exacto que quieras que tenga el PDF, o incluso más grandes para no afectar a la resolución.

Con los diseños preparados podemos comenzar a crear un PDF interactivo 😉

¿Cómo se crea un PDF interactivo o PDF dinámico con InDesign?

Te resumo el proceso de creación del PDF dinámico en unas pocas palabras.

Como ahorraremos parte del trabajo utilizando las imágenes que hemos preparado previamente, la tarea se reducirá a generar los textos del menú de navegación, los títulos de las secciones y a enlazar unos con otros. Luego lo exportaremos como PDF interactivo.

¿Parece fácil verdad? 😉

Pues no lo es 😳  pero no te preocupes, que siguiendo las instrucciones, al final del artículo tendrás tu documento interactivo funcionando 😀

Realmente diseñar PDFs interactivos no es tan complicado, lo que pasa es que hay que estar al tanto de cada uno de los pasos. Si te atascas en alguno no pasa nada, porque hacia el final del post encontrarás un vídeo de cómo crear un PDF interactivo paso a paso.

Crear nuevo documento en InDesign

En primer lugar es necesario abrir un nuevo documento en inDesign y darle las mismas medidas que a los archivo JPG o PNG que vas a usar de fondo.

Asigna los valores que te indico a continuación:

  • Valor del documento: A medida.
  • Calidad: Impresión.
  • Número de páginas: 1.
  • Número de página inicial: 1.
  • Páginas opuestas: Desconectado.
  • Marco de texto principal: Desconectado.
  • Tamaño de página: Tus medidas elegidas en anchura y altura.
  • Orientación: Selecciona vertical u horizontal.
  • Columnas: 1.
  • Medianil: El que venga por defecto porque solo tenemos una columna.
  • Márgenes: Todos a cero.

Debes dejar los parámetros tal cual los de la imagen.

Crear un nuevo documento en indesign para el pdf interactivo

Crear nuevas páginas en inDesign

Como la carta va a tener 3 secciones además de la página principal que hará de home (4 en total), en el documento debes crear las páginas necesarias desde el Panel Páginas, que tienes a tu derecha.

En mi caso 4 páginas.

Crear las paginas que necesitas para el PDF interactivo en inDesign

Colocar imágenes en inDesign

En cada una de las páginas del PDF «colocaremos» su imagen de fondo correspondiente.

En InDesign, el término colocar es sinónimo de insertar gráficos.

  • Coloca la imagen desde la ruta del menú superior Archivo > Colocar.
  • A continuación, sitúa el cursor en la parte superior izquierda de la página, arrastrando hasta el final de la misma para que la imagen ocupe el espacio por completo.

Colocar una imagen de fondo en inDesign para el PDF interactivo

Cuando tengas colocada las imagen que hará de fondo para al PDF interactivo en cada una de sus páginas podemos continuar con el siguiente paso.

Recibe nuevos artículos mensualmente

y aprende más sobre los temas que te interesan directamente desde la bandeja de entrada de tu correo electrónico.

Crear el menú de navegación del PDF interactivo

Es el momento de maquetar el menú del navegación del PDF interactivo, que permitirá acceder a otra sección del PDF pulsando sobre el elemento correspondiente.

La caja de texto para cada palabra debe ser totalmente independiente.

Más tarde habrá que convertir los textos en botones a los que les asignaremos un marcador.

Si no sabes cómo crear cajas de texto en InDesign, sigue las instrucciones del vídeo que encontrarás al final del artículo.

Los que estén familiarizados con inDesign esperarán que «como se repiten», voy a duplicar los textos con una página maestra. Pero no va a ser el caso por hacer el tutorial más sencillo 😉

La primera página de tu archivo PDF interactivo, con los textos ya formando parte del menú, debe quedar tal cual en la foto.

Crear el menú de navegación del PDF interactivo

Crear marcadores para el menú de navegación del PDF

Cada una de las páginas representará un apartado de la carta del restaurante, así que utilizaremos estos títulos para implementar los marcadores de los botones.

Al clicar sobre el botón, el PDF interactivo nos llevará a la sección del marcador él solito 😀

Crea una caja de texto y titula cada página:

  • La primera de ENTRANTES.
  • La segunda de PRINCIPALES.
  • Y la tercera para los POSTRES.

Elementos de destino para los botones del PDF interactivo

Recuerda que de momento solo tenemos el menú de navegación en la página de inicio y por eso no se muestra en la imagen.

Convertir textos en marcadores

Si a la derecha no tienes a la vista el Panel de Marcadores, acude al menú superior de inDesign y muéstralo con la ruta Ventana > Interactivo > Marcadores.

Ahora ve a la página de entrantes y selecciona el texto ENTRANTES.

Con el texto seleccionado, desde el Panel Marcadores crea un marcador nuevo.

Crear marcadores para cada sección del PDF interactivo

Como nombre, al crear un marcador inDesign se establecerá por defecto el texto seleccionado.

Desde el panel puedes crear marcadores para tu PDF interactivo

Convertir textos en botones en un PDF interactivo

Para que al clicar sobre cualquier elemento del menú de navegación nos lleve a su marcador hay que convertir los textos en botones.

Lo haremos seleccionándolos de uno en uno desde el menú superior del programa.

La ruta para llegar a la herramienta es: Objeto > Interactivo > Convertir a botón.

Selecciona el texto que quieres convertir en botón para el PDF interactivo en InDesign

En el Panel Botones y Formularios debemos configurar el botón de la siguiente forma:

  • Tipo: Botón.
  • Nombre: El nombre del botón (puedes dejar el automático).
  • Evento: Selecciona en el desplegable al hacer clic.
  • Acciones: Con el signo + añades una acción, y con el signo – la eliminas. Añade una y busca en el desplegable ir a destino.
  • Documento: En esta ocasión todo sucederá en el mismo documento. Puedes dejarlo como está.
  • Destino: En el desplegable tendrás la lista de todos los destinos que has creado. Selecciona el adecuado para cada botón.
  • Zoom: Esta apartado afecta al modo de presentación del PDF. Con Zoom anterior la página se mostrará con la vista que decidas cuando hagas la exportación.
  • Apariencia: Si quieres que el botón cambie su opacidad al poner el cursor encima, debes configurar cada uno de los estados: normal, al pasar sobre él  y al hacer clic.
  • Imprimible: Para elementos que no necesitemos en los archivos a imprimir deselecciona esta opción para que el elemento no se muestre una vez impreso.

Te dejo una captura de cómo se implementa el Panel de Botones y Formularios.

Opciones en el panel de botones interactivos

Vista previa de SWF

Para comprobar el funcionamiento de nuestro PDF dinámico, antes de exportarlo a PDF interactivo te recomiendo que pruebes la vista previa de SWF, donde se mostrarán los efectos.

Desde la vista previa SWF del PDF interactivo comprobamos cómo funciona

Clonar el menú de navegación en el resto de páginas del PDF

Toca clonar los tres textos del menú convertidos en botones en el resto de páginas.

Para ello usaremos la opción de InDesign pegar en el mismo lugar, que encontraras en el menú superior desde la ruta Edición > Pegar en el mismo lugar.

Con todas las cajas de texto seleccionadas, copia simultáneamente los tres elementos que conforman el menú de navegación con el atajo de teclado Ctrl+C.

➡ Navega por las páginas pegándolos en el mismo lugar.

La opción de pegar en el mismo lugar permite clonar el menú del PDF interactivo en el resto de páginas

Exportar un PDF como PDF interactivo

Terminado «por fin» el trabajo de diseño nos queda exportar el documento, que lo exportaremos a un formato mágico: el formato PDF interactivo.

Desde Archivo > Exportar selecciona la opción de Adobe PDF interactivo.

Te dejo preparada la configuración que he usado 😉

Configurar la exportación de un PDF interactivo

Utiliza Adobe Acrobat Reader para ejecutar tu PDF interactivo, porque aunque no te lo creas ya lo tienes terminado 😀

Si todo ha ido bien, el efecto será parecido al de una página web, ya que cada vez que pulsemos sobre un elemento del menú nos llevará hasta la sección donde esté el marcador asignado.

Te muestro en vídeo cómo hacer un PDF interactivo

Puedes repasar cada uno de los pasos para conseguir que un PDF sea interactivo en el siguiente vídeo.

Animación de doblez de página en un PDF interactivo

Aunque hemos aprendido lo más básico en lo referente a PDFs interactivos, hay que destacar un efecto que con unos pocos pasos pone «la guinda final al trabajo de diseño».

El efecto de pasar páginas.

Transiciones de página en los PDFs interactivos

En este caso simplemente hay que exportar a SWF en vez de a PDF interactivo.

Aplica la siguiente configuración:

Opciones de exportación SWF para PDF interactivo

Importante revisar el desplegable de transiciones de página, con el que podemos seleccionar el efecto de transición que nos guste.

Además, si incluimos el doblez de página interactivo, podremos pasar hojas arrastrando con el ratón sobre la pantalla.

¡Una maravilla! 😀

Y nada más. Solo que como otras veces, el tutorial con el que hacer un PDF dinámico o interactivo partió de la consulta que alguien me hizo alguna vez. A él le resolvió la duda y deseo que también haya solucionado la tuya.

Si te sigue interesando trastear con PDFs, tengo otro tutorial relacionado con ellos que tal vez pueda interesarte. Habla sobre una herramienta para cambiar PDFs de formato, los divide, los une, hace casi casi cualquier cosa con ellos.

Muchas gracias por leer este post y si lo haces (que lo espero) , por compartir 😉

Si te ha gustado comparte

About the Author

Ernesto Barrachina

Facebook Twitter Google+

Me dedico al diseño web Valencia y tengo pasión por las herramientas de diseño gráfico, así como por compartir tips de diseño web en forma de consejos y tutoriales "para todos los públicos".

33 Comentarios en “¿Cómo crear un PDF interactivo?”

  1. Hola Ernesto!

    Espero te encuentres muy bien!!! Leyendo los comentarios vi que platicaste que el pdf interactivo tiene un fin cercano.. y me da curiosidad saber cual es tu opinión sobre cual seria su reemplazo? o que programa recomendarías para hacer algo así como el pdf? Saludos !!!

  2. Hola Ernesto
    consulta, lo guarda como pdf interactivo pero ya no esta disponible la opción de guardar en SWF, en ese caso como hacemos??? cual seria la opción??
    gracias
    Vanesa

    1. Hola Vanesa,

      entiendo que estás utilizando una versión posterior a noviembre de 2019; en la que se elimina cualquier resquicio de Adobe Flash, por lo que lo único que te queda es utilizar una versión antigua.

      Más allá de eso… te recomendaría Digital Publishing Suite, pero también se la han cargado ¿Conoces spark.adobe.com/es-ES/?

  3. Hola Ernesto,

    Quiero ofrecer e-notebooks personalizados y he pensado que con un pdf dinámico podría permitir al cliente personalizar ciertas zonas del cuaderno. El proceso sería 1. Crear PDF dinámico; 2. Importarlo en wordpress /woocommerce; 3. Mostrar el PDF al cliente para realizar personalización (suponiendo que exista el plugin); 4. Guardar los cambios; 5. Descargar el FDF con los cambios en el pc del cliente.

    Es posible hacer esto? Muchas gracias, Fernando

    1. Hola Fernando,

      no he terminado de entender muy bien a qué te refieres (aunque dudo que exista un plugin que permita modificar PDFs interactivos, y mucho menos que se mantenga en el tiempo). Pero te recomiendo que no quieras utilizar este tipo de PDFs para algo más que presentaciones y/o cosas puntuales, porque su fin está cerca.

  4. Estoy construyendo un portafolio personal y tengo creado un pdf interactivo con mis trabajos. ¿Podrías indicarme cómo subirlo a wordpress, para que se vea bien el la web? Gracias.

    1. Hola Isabel,

      para subir PDFs a WordPress tienes la explicación en este post. Sin embargo, no puedo recomendarte ningún plugin para visualizar PDFs porque no he utilizado ninguno. Por motivos de SEO, los contenidos importantes de una web «como un porfolio», deberían formar parte de ella, y no ser un archivo adjunto.

  5. Hola Ernesto!

    Justo ahora estoy intentando hacer un pdf interactivo, (Enero 2021) siguiendo todos tus pasos, desde Id cc 2017 pero no me funciona. Tendrá algo que ver la baja de flash? o qué puede estar fallando?

    Agradezco tu respuesta

  6. hola Ernesto tengo un problema quiero incluir en un portafolio un gif hago el proceso como se debe al previsualizar el gif tiene movimiento pero al exportarlo intentar verlo el gif aparece como una imagen estática y no encuentro la manera de que al exportarlo pueda verlo con movimiento por favor ayúdame.

    1. Hola Nestor,

      El PDF no te va a reproducir el GIF. Nunca lo he probado, pero parece que hay algún truco que otro que puedes utilizar; como convertir el GIF en MOV con Quicktime.

      A ver si esto te ayuda: stackoverflow.com/questions/9009771/is-it-possible-to-embed-animated-gifs-in-pdfs

      Suerte!!!

  7. Hola, Muchas gracias super bien explicado, tengo una situacion los botones (bookmarks) no me funcionan en mobile.
    Nose si me puede ayudar gracias

  8. Buenas tardes Ernesto! He seguido todos los pasos y logré armar el PDF interactivo, muchas gracias!!!.. el problema es que al abrir el PDF no quiero que se vean todas las páginas, sino solo la primera (pero necesito de todas para que la navegación funcione) solo que no quiero que la otra persona vea las 20 páginas de la programación. Es posible ocultarlas al exportar? Probé con tildar la opción de PDF en pantalla completa, y yo lo abro perfecto (solo me muestra la primer página) pero a la persona que lo recibe no le pasa lo mismo y al abrir el PDF ve las 21 páginas del PDF. Gracias! saludos!!!

  9. Ernesto Gracias por tus explicaciones,
    tengo una pregunta, si exporto como documento SWF y lo envío a alguien que no tengo FLASH ¿puede verlo?

  10. Hola, felicitaciones, muy buena explicación del proceso… Una pregunta, existen algunos estándares o criterios para elaborar documentos interactivos? dónde los puedo encontrar?
    Gracias,
    Hungria

    1. Hola Hungria!!!

      Que yo sepa ninguno específico. Pero al ser un documento navegable, podrías utilizar algunos de los criterios seguidos para el diseño web: Simplicidad, estructuración y optimización de imágenes.

  11. Hola Ernesto!
    He hecho un PDF interactivo desde indesign, siguiendo tus instrucciones. Todo perfecto, el problema es que envío el pdf a otra persona en una carpeta junto con los vídeos en mp4 y no lo ve. He pasado los vídeos a FLV Flash y tampoco… qué puede pasar?¿

    1. Hola Lotes,
      ese problema suele estar en el otro equipo, que no tendrá instalada el reproductor Flash adecuado. De hecho, no he incrustado ningún vídeo en el tutorial precisamente por ese motivo. No puedes controlar el dispositivo desde el que se visualiza el PDF interactivo.

  12. Hola estoy buscando como hacer un documento dinámico con gráficas y datos de excel, esto es posible??

    Saludos y Gracias.!

    1. Hola Oscar,
      la verdad es que para esto inDesign se queda un poco corto, o no he descubierto otro sistema.

      Te cuento…
      Los filtros para la importación de Excel a inDesign solo permiten importar texto, desde Archivo > Colocar.

      Así que el truco que utilizo para llevar gráficas de Excel a inDesign es pasarlas antes por Illustrator 😉

      Paso 1: Copias la gráfica del .xls y la pegas en illustrator, con el copiar y pegar de toda la vida.

      Paso 2: Copias la gráfica de illustrator y la pegas en inDesign.

      Ya tienes la gráfica del .xls en inDesign 😀

      La pena es que no puedes modificar la gráfica como documento enlazado, desde el archivo original xls, pero la técnica te permite incluir gráficas en tu archivo PDF dinámico.

      Espero haberte sido de ayuda.

  13. SALUDOS, EXCELENTE APORTE, UNA PREGUNTA ERNESTO, PUEDO TRABAJAR TODO EN WINDOWS? OTRA PREGUNTA, NO VEO QUE HAYAS UTILIZADO EL Digital Publishing Suite QUE MENCIONASTE AL INICIO.

    1. Hola Mario, ante todo gracias por la vista.

      Como respuesta a la primera pregunta, SÍ puedes trabajar con Windows. Yo no trabajo con otra cosa 😉

      Para la segunda…
      No hablo de Digital Publishing Suite porque no hace falta para un documento como el del ejemplo. Esa herramienta, que es más bien un conjunto de herramientas y servicios (de pago), se utiliza para crear y distribuir publicaciones digitales para tablets.

  14. Hola Ernesto saludos, muy buen post, mi problema es el siguiente: Estoy haciendo un portfolio en PDF interactivo y cuando lo exporto no me funcionan todos los botones y no me aparecen igual que en la previsualizacion, en cambio me aparece una mano en el puntero con una flecha hacia abajo para poder cambiar las páginas, por favor dime como solucionarlo muchas gracias.

    1. Hola William,
      si lo estás exportando como PDF interactivo y lo estás abriendo con Adobe Acrobat Reader no tendría por qué fallar nada.Haz la comprobación.
      Si no te sigue fallando envíamelo por correo y le echo un vistazo.

      Gracias por tu visita 😉

  15. Hola buenas tardes, un pregunta, el pdf interactivo lo puedo enviar en un e mail, como cualquier pdf y al recibirlo lo diseccionara al pdf , o en esa situación como debo exportarlo o enviarlo? gracias de antemano.

  16. Buenos días Ernesto.

    Mi duda es la siguiente. He diseñado un catálogo en InDesign y quiero exportarlo como PDF interactivo; he hecho todos los pasos similares a los que ud indica y lo único que deseo es que a la hora de exportar el catálogo, pueda ejecutar en Acrobat el doblez de página interactivo y esto no me esta pasando (no aparece el doblez de pagina)
    Hay algo que esté haciendo mal o es normal esto.

    Un saludo y muchas gracias
    Enrique

Deja una respuesta

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) Finalidad de los datos: Gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. Destinatarios: No se comunican los datos a nadie más. Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado. Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (mi proveedor de hosting) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Tu comentario quedará pendiente de moderación. Vuelve en dos o tres días para ver la respuesta y tu comentario publicados.

Muchas gracias por comentar ☺