Logo Marieu Corp
Tutorial

🎨¡Un Increíble folleto en InDesign!

Tríptico digital. Aprenderás fuentes, textos, imágenes, colores, links, QR y exportación. Con vídeo paso a paso.

 

INDESIGN

TRÍPTICO

Mar 25, 2024

Montoya A.

20min de lectura

Reproducir video acerca de Tríptico InDesign

Hola amigos de Marieú Technology Corporation, ¡un Increíble folleto en InDesign! Por consiguiente, en esta guía, paso a paso, aprenderás a cómo elaborar un folleto, tríptico o brochure en InDesign.

Adobe InDesign es un programa de edición de libros, revistas, trípticos, folletos y posters, desarrollado por la empresa Adobe Systems. La empresa de Adobe ofrece distintos planes, enfocados a empresas, uso personal o académico.

¿Cómo elaborar un Increíble Folleto en InDesign?

Entonces, para la primera aplicación, vamos a usar Envato Elements, donde vamos a obtener el template. Vamos a buscar uno que se pueda aperturar con la aplicación de Adobe InDesign. Dentro de lo que es Adobe InDesign, vamos a realizar un total de 6 pasos. Vamos a iniciar con abrir el archivo punto .indd, es un formato de archivo Adobe InDesign.

Número 2, vamos a buscar las fuentes del template. Cuando nosotros aperturamos el template, dentro de la aplicación, inicialmente no va a salir una ventana, donde nos solicita que agreguemos las fuentes, las fuente de origen. Normalmente en el archivo que tú descargas en Envato Elements, te vienen ahí un archivo punto TXT. Si abrimos el archivo .txt tenemos el enlace directo para descargar la fuente, ya ahí lo vamos a ver con más detalle.

Número 3, vamos a editar los textos. Incluyen lo que son mensajes de la empresa, costos, contactos, link externos, entre otros. Número 4, colocamos imágenes de la empresa. Incluye, de repente, logos, algunos iconos, emojis o algunas imágenes representativas de la empresa. Entonces, nosotros queríamos brindar esa vista para el cliente.

Número 5, vamos a cambiar el color del «background». Donde, necesariamente aquí, para este punto, se recomienda que busquemos un template del color de la empresa, si es que no, podemos descargar con otro color y ya no tendríamos que modificar el color del «background» o del fondo. Para eso, cambiamos el color de «background», dentro de InDesign, nosotros lo vamos a ver con la opción de apariencia slash relleno. Y, finalmente, punto número 6, vamos a exportar.

Ya, después que hemos hecho todo este diseño dentro de Adobe InDesign, vamos a exportar como Adobe slash PDF, interactivo. ¿Porque interactivo?, para poder usar los enlaces externos. Entonces, exportamos como Adobe slash PDF interativo, sin compresión y alta resolución. Entonces, aquí, la alta resolución que nos ofrece InDesign, llega hasta 300 píxeles de alto por ancho. Finalmente, vamos a utilizar Creative Cloud Desktop para actualizar la aplicación de Adobe InDesign.

Diagrama de arquitectura Brochure presentacion Empresa Marieu scaled

Diagrama de Arquitectura Brochure presentación Empresa.
Fuente: Propia, mediante software Miro.

Entonces, en Elements, en Envato Elements, nos vamos a ir a «mis colecciones» y vamos a entrar aquí Marieú Technology Corp., vamos a buscar el «brochure» y nos vamos a ir a la página número 3. Dentro de la página número 3, tenemos aquí el folleto tríptico o «brochure» que vamos a editar. Algunas características, aplicaciones compatibles para poder aperturar este «brochure» Adobe Photoshop, Adobe Illustrator y Adobe InDesign, para poder trabajar en la edición.

Características adicionales, tenemos, actualmente este formato A4, contiene dos páginas, los tres formatos que hemos visualizado inicialmente, las tres aplicaciones que se pueden aperturar el «brochure», las dimensiones y, lo que es, el modelo de color CMYK, ¿en qué resolución?, en resolución 300 píxeles de ancho como de alto, y entre otras características. Entonces, una vez que ya le hemos descargado, lo tenemos aquí, ¡ahí está!

Inicialmente, si es que no tenemos las fuentes, te va a salir una ventana de alerta, para poder instalar las fuentes y puedas visualizar aquí, el tipo de fuente. Puedes trabajarlo con el tipo de fuente del template. En el caso que tengas que instalar una fuente externa, se recomienda instalarlo mediante la tienda de Creative Cloud Desktop, aquí entramos a «fonts» o fuentes y podemos «fuentes cargadas». En fuentes cargadas, podemos «agregar más» y agregamos los famosos archivos punto ttf, que son archivos de fuentes.

Recuerden que la familia de Adobe, también nos ofrecen fuentes, vamos a ver aquí. ¿Cómo nosotros ingresamos a las fuentes de Adobe?, Adobe Fonts, damos la primera, iniciamos sesión y ¡ahí está! Colocamos lo que es el nombre de la fuente. Para el folleto nos están solicitando la fuente de Poppins, ponemos Poppins, buscar y ¡ahí está! Tenemos la fuente de Poppins, lo añadimos a la familia, se conecta con tu Creative Cloud Desktop y, simplemente, se activa, listo. Actualizamos y la aplicación de InDesign se va a actualizar y te va a permitir editarlo.

Si es que la fuente no se encontrara en Adobe Fonts, lo que tenemos que hacer es ingresar al archivo que hemos descargado, hay un archivo punto txt, que dice «read me», abrimos y ¡aquí está! Copiamos el enlace de la Fuente Poppins, te da la dirección exacta. En este caso, es una fuente confiable porque es de Google. Copiamos y pegamos aquí, ¡ahí está! También tenemos la fuente de Poppins, de Google. Descargamos la familia de fuentes, ¿porque familia de fuentes? porque te viene todo, te viene varios estilos, es decir, te vienen Thin 100, Italic, Extra Light, entre otros.

Entonces, una vez que lo hemos descargado, lo tenemos aquí, en archivo punto ZIP, lo abrimos y adentro tenemos todos los archivos punto TTF, que son las fuentes. Lo descomprimimos y lo subimos aquí «agregar más». Lo cargamos, ponemos listo y se va a sincronizar, finalmente, con el Adobe InDesign, super sencillo. Ahora, una vez que hayan agregado lo que son las fuentes, vamos a pasar lo que son textos. En textos, nosotros hacemos una revisión rápida y tenemos diferenciado el «brochure» por páginas.

De repente quieren que presentación inicial, lo que es la portada del «brochure», se inicie arriba y está, la parte de atrás, que son los contactos, email, la ubicación al final. Entonces, cambiamos aquí, seleccionamos «todos», apretamos la tecla shift, lo soltamos, seleccionamos los demás y arrastramos al final, ¡ahí está! Entonces, vemos que ahora sí tenemos la parte de la entrada del «brochure» en la primera fila. Para la segunda fila, tenemos la parte de los contactos. Entonces aquí, nos vamos a ir a la primera columna.

Entonces, vamos a hacer algunos cambios, vamos revisando cada una de las secciones y, para que nosotros editemos el texto, simplemente seleccionamos, ahí lo podemos editar. Entonces, ya hemos agregado lo que son los textos. Por esa primera columna, hemos agregado el título Estudios de Marieú. Hemos puesto tres secciones, donde la primera es inspección web, la segunda optimización profunda y, la tercera, analizar el crecimiento. Para la segunda columna el título, en este caso, la razón social de la empresa y una pequeña presentación de Marieú. Hemos agregado también lo que es un emoji. Simplemente, se selecciona y se pega un emoji, ¡ahí está!

De repente, si es que no reconoce este tipo de fuente, nos vamos a propiedades, seleccionamos el emoji y nos vamos a carácter. Entonces, todo lo que es emoji lo vamos a encontrar, siempre, en la fuente de familia de Noto Color Emoji SVG. Seleccionamos y vamos a ver varios emojis, que nosotros podemos agregar. Más abajo también hemos agregado algunos mensajes y servicios para el cliente. Ya para la última columna, tenemos los planes. En este caso, hemos agregado un servicio de la empresa y estamos clasificando por tres tipos de planes, en este caso, son servicios de desarrollo de páginas web.

Ahora vamos a ir con la segunda cara. Mayormente incluyen lo que son contactos, direcciones externas, puede ser su dominio, entre otros. Entonces, ya continuando con la parte de texto, de la otra cara del «brochure», tenemos lo siguiente: creamos tu página web, como nuestro servicio principal de la empresa, hemos agregado dos pequeñas reseñas y ¿cómo optimizar tu web?. Ya para la segunda columna, hemos usado lo que son contactos. Este QR venía por defecto, ahora lo vamos a actualizar.

Hemos agregado además lo que es teléfono, RUC, ubicación y correo. Estas son las direcciones del correo y esta es la página web. Finalmente, para esta última columna hemos agregado una frase característica de empresa Marieú, hemos colocado un título en vertical «brochure Marieú». Y se concluye con una pequeña frase de contactos, dentro de la página de contactos, y el enlace externo de la página web.

Entonces chicos, ahora vamos a pasar todo lo que es imágenes. ¿Dónde vamos a colocar las imágenes? aquí tenemos para colocar una imagen. Vamos a analizar cuáles son las secciones para colocar una imagen. Aquí podemos agregar una imagen, en los mensajes y servicios, podemos agregar un emoji, un emoji de correo. Aquí en servicios, de repente, un emoji «world», un mundo, o también podemos agregar ¡aquí!, una imagen de la empresa. Y, para la parte de esta sección de creamos página web, podemos agregar, de repente, un emoji en 3D, vamos a verlo.

Entonces, para el primer caso, nosotros, si queremos agregar una imagen, seleccionamos la zona de la imagen, ponemos en archivo y vamos a asignar la opción de colocar. También lo puedes hacer con «Control» más «T», vamos a verlo, control más «t». Aquí tenemos las imágenes, vamos a seleccionar aquí, ¡ahí está! Para que nosotros escalemos adecuadamente, dentro del cuadro, vamos a hacer lo siguiente. Nos vamos a «encaje de marco», dentro de «encaje de marco», vamos a seleccionar «encajar contenido en marco». Si seleccionamos, ¡ahí está!, lo mismo con las siguientes.

Entonces, ¡ya está!, miren, aquí hemos colocado ya la imagen. Además, también, en la segunda columna hemos colocado una imagen de Marieú. Para mensajes y servicios, hemos colocado los emojis. Y, ya para la tercera columna, hemos colocado una imagen en 3D de cada uno de los planes; diferenciando cada uno de los planes, una imagen en 3D. Ya para la segunda cara de «brochure», hemos integrado el emoji 3D, ¡ahí está el emoji en 3D! y, también, una imagen aquí representativa del trabajo en equipo de la empresa. Ahora lo que vamos a hacer es cambiar el color del «background» o de fondo y alinearlo mucho al color de la empresa. En este caso, para nosotros, inicialmente, hemos descargado un template muy alineado a los colores de la empresa de Marieú.

Sí, nosotros queremos hacer un cambio del fondo, seleccionamos uno y aquí lo podemos hacer el cambio, en relleno. Seleccionamos relleno y cambiamos. ¡Ahí está! Si, de repente, el color característico de la empresa es celeste, lo cambiamos, de repente es verde y así, podemos ir variando los colores, ¿está bien?, en nuestro caso, lo vamos a dejar por defecto.

Ahora, si nosotros queremos incluir hipervínculos, tenemos que hacer el cambio de aspecto de InDesign. Vamos a cambiarlo en modo «publicación digital». Ya en publicación digital, nosotros vamos a abrir un poco aquí, en apartado y nos vamos a centrar en hipervínculos. Seleccionamos aquí, ya está seleccionado el emoji. Una vez aquí, nosotros nos vamos a centrar en lo que son botones y formularios. Para eso, para que se habilite, tenemos que seleccionar el emoji y se habilita, ¡ahí está! Previamente ya lo hemos incluido lo que es la redirección a un correo, al correo, en este caso, de hola@marieutechnologycorporation.com.

Entonces, para el caso de ustedes, los tendrían que incluir. Ponemos, «tipos de botones», ponemos la primera opción, colocan el nombre, en este caso, es un botón de mensajes y van a seleccionar el evento. ¿Cuándo se va a activar el evento?, cuando el usuario ingresa y hace clic en este emoji. ¿Qué evento se va a activar?, se va a direccionar a enviar un correo hola@marieutechnologycorporation.com. Para que funcione esta URL, ustedes tienen que incluir «mailto» dos puntos y colocan el correo de su empresa, correo, en este caso, de la recepción de consultas, ¡ahí está!

Para el caso del emoji del mundo, también se va a direccionar la URL de la empresa. Es un botón «world» o mundo. Otros enlaces externos, tenemos, ya para la segunda cara, correo ¡ahí está! Seleccionamos, por ejemplo, la dirección que externa de la empresa y vamos a abrir hipervínculos. Y aquí es donde van a colocar la dirección URL. Cuando son hipervínculos, a comparación de botones, es mucho más sencillo. Solamente basta con colocar URL.

Ya finalmente, para lo que es el código QR, ponemos «click derecho» y vamos a poner generar código QR. Se nos habilita una ventana de generar código QR. Ponemos tipo «hipervínculo web» y aquí vamos a colocar la URL. Vamos a colocar la URL de la empresa, copiamos y vamos aquí, ponemos «ok» y ¡aquí está! Entonces, hacemos lo siguiente, copiamos, «control C» y «control V» y ¡ahí está! Entonces, una vez que tenemos el QR, nosotros vamos a reducir un poco las dimensiones y le vamos a colocar 50, ¡ahí está! Recuerden hacer dos veces clic, si no se va a desplazar dentro de ese marco, no es la idea. Entonces, dos veces clic, ahora sí, se desplazó con todo, 35 y ¡ahí está!

Brochure Marieu Technology Corporation

Brochure Marieú Technology Corporation.
Fuente: Propia, mediante software Adobe InDesign.

Resultados Finales

Finalmente, vamos a exportar. Ahora ponemos archivo, exportar y lo vamos a dejar en interactivo. En algunos casos, por defecto, aparece como imprimir. Para nuestro caso, para que funcione el enlace externo, vamos a colocar interactivo, ponemos guardar. Para que nos salgan todas las secciones, todas las columnas del «brochure», vamos a colocar como pliegos, para que te salgan las tres columnas y dos páginas, todo dentro del PDF, en formato PDF. Ponemos «ok», ponemos «ok».

Recuerden que el «brochure», en este caso, son en formato de modo de color CMYK. No se recomienda mucho en RGB porque no estamos mostrando una ilustración, un diseño web; si no, estamos mostrando un «brochure» donde el cliente, simplemente, va a estar informándose de todo respecto a la empresa. Entonces, aquí vamos a abrir la versión final del «brochure» y ¡ahí está! Vamos a probar algunos enlaces, por ejemplo, aquí y ¡ahí está!, te direcciona a la página web de la empresa, servicios. ¡Listo, gracias amigos de Marieú Technology Corporation!

Montoya Godenzi Daniel Alejandro escala 20

EL AUTOR

Daniel Alejandro Montoya Godenzi

Alejandro, con el grado de magíster en Administración y Dirección de Proyectos e Ingeniero Mecatrónico, dispone de experiencia en proyectos de entorno tecnológico digital. Forma parte del equipo de Marieú Technology Corporation. En su tiempo libre, le gusta crear nuevos proyectos, leer un libro o ver una serie.

SIGUE LEYENDO

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Logo Julio 2023 fondo transparente texto blanco

Marieú ofrece servicios de creación de páginas web, marketing digital, producción audiovisual y catering, que facilita los negocios en las empresas.

Boletín informativo

Al ingresar acepta nuestros T&C y las Políticas de privacidad.

Marieú Technology Corporation
©Todos los derechos reservados