Data Merge (el video)

Para los que les gusta aprender viendo video ; aquí les dejo el video tutorial que grabé ayer sobre el pasado escrito «Data Merge en InDesign». Espero les guste y lo compartan!

¡Dición!

Data Merge en InDesign

InDesign tiene muchas habilidades, y una de ellas es la habilidad de unir data o mejor conocido como el «Data Merge». Para ver cómo le sacamos partido a esta habilidad usaremos una pregunta que me hizo un colega; la pregunta fue: «¿Como podemos crear unos boletos los cuales van a contener el nombre, apellidos, dirección física o postal, teléfono y hasta el e-mail de la persona?» Le dije a mi compañero pues fácil «copiando la información»…jejejejejejejejejeje…… acto seguido me dijo: «¿si pero… y si son treinta y cinco mil personas????

Aaaaa bueno ya esos son otros veinte pesos!….. jejejejejeje En ese caso se usa el «Data Merge». En lo personal esta habilidad yo no había tenido la oportunidad de usarla y hoy se dió el caso. Para poder usar esta herramienta primero debes de usar una aplicación que pueda hacer «spreadsheets» como por ejemplo Excell de Microsoft o Numbers de Apple; pero cualquiera que tenga la habilidad puede ser usada; hasta texto sencillo; pero en texto sencillo debes de separar las celdas y columnas con comas; luego haremos este ejemplo por el momento nos concentraremos en el «spreadsheet». En mi caso usaremos la aplicación Numbers de Apple.

Lo primero que debes de tener en cuanta que la tabla creada debe de tener una primera línea donde escribirás: Nombre / Apellidos / Dirección 1 / Dirección 2 / E-mail / Teléfono. Te preguntarás ¿Qué significa Dirección 1 y Dirección 2? Estos son los campos o líneas de la dirección donde vives. En la Dirección 1 escribirás por ejemplo: el nombre de la urbanización donde vives. En el campo de Dirección 2 escribiras el nombre de la calle y número de casa en que vives. Esto también lo traduces a los apartamentos o P.O. Box. Luego en esa misma fila escribirás un campo para el pueblo, otro para el pais y otro para el código postal. Luego escribirás el campo para el email, otro para el teléfono y así según la información que necesites. Mira el siguiente ejemplo.

Luego en la siguiente fila comienzas a llenar la información necesaria. Cuando tengas un ejemplo de como unos 35 mil personas me avisas!…. jejejejejejejejeje…… embuste solo haz un ejemplo de por lo menos cinco líneas para este ejemplo o las que desees. El truco ahora está en exportar la tabla al formato CSV y que su texto esté codificado en el formato UTF-16 para que acepte los caracteres del español como la tílde, la letra ñ que se destacan en nuestra lengua. Si utilizas el formato UTF-8 obtendrás un archivo con errores gramaticales.

Ahora viene la segunda parte del proceso. Vamos a crear un diseño sencillo en InDesign para propósito de este tutorial en donde podamos usar la data dentro del archivo CSV.

En InDesign una vez tengas listo tu diseño vas a buscar en el Menú de Windows / Utilities / DataMerge.

Una vez accedes este menú, se haber una ventana del Data Merge la cual te va a mostrar unas pequeñas direcciones de como usar el comando del Data Merge.

La misma dice que como primer paso debes de seleccionar la Data, luego seleccionar la data deseada del panel y luego crear el documento final. Dejame llevarte paso a paso en mi ejemplo. Voy a utilizar en mi ejemplo una tabla o «spreadsheet» creado ficticiamente en la aplicación de Apple «Numbers».

Si se fijan bien la tabla tiene todas las celdas llenas y la primera fila está dividida en Nombre / Apellidos / Dirección 1 / Dirección 2 / Pueblo / ZipCode / Teléfono / Email. Esto es muy importante por que el Data Merge funciona con esta columna principalmente. Ahora bien, en InDesign luego de crear un diseño, recuerden bien los campos que desean usar de la tabla convertida a CSV.

Ahora en la ventada del Data Merge van a seleccionar «Select Data Source».

Van a buscar el archivo que exportaron desde Numbers en formato CSV. ¡Recuerden que al exportar el archivo a CSV deben de seleccionar el «Unicode – (UTF16)» para que reconozca los acentos!

Ya dentro de InDesign la data, se verá de esta forma en la ventana del Data Merge. Como verán los primeros campos de la primera fila de celdas son los únicos que aparecen en la ventana. El próximo paso a seguir es seleccionar en el texto el campo deseado y luego asignarle un código de la ventana del Data Merge.

Recuerda; sombrea el texto y luego haces click en el código deseado. Cuando seleccionas el código lo seleccionado en la caja de texto se convierte al nombre de la celda con los símbolos dobles de menor que y mayor que (<< FirstName>>). Repite este proceso en todas las palabras deseadas a programar.

Al final obtendrás una imágen parecida a la siguiente. Cada palabra contiene ahora la información de el campo creado en la tabla de Numbers exportada a CSV. Suena complicado pero verás que no lo es. Recuerda separar con un espacio cada sección. De lo contrario tendrás por ejemplo el Nombre pegado al apellido.

Ahora vas a seleccionar el botón de crear el nuevo documento o utiliza el pequeño menú que dice «Create Merged Document».

Cuando selecciones este botón se abrirá otra ventana de más opciones. Por el momento deje todo como está y presione el botón de OK. InDesign comenzará a crear el documento y dependiendo de cuan grande es la lista o cuan corta sea, es el tiempo que se tardará creando en documento final.

Como podrás ver, InDesign creó, en mi caso, las tres páginas en un documento aparte, nuevo, con la información de cada celda y mantuvo el formato diseñado en InDesign. Al tener el formato UTF-16 verás que respetó los acentos y las letras (ñ).

Esta es una de las formas en las que puedes utilizar un «Data Merge» en InDesign. Espero les guste el tutorial; que pasen un bonito día!

Dición!

«mailto:»

Screen Shot 2018-05-02 at 6.50.15 PM

Digamos que estas diseñando un formulario o una promo en la cual debes de añadirle un vínculo para que las personas que lo reciban, te puedan contactar con solo hacer un «click» en el vínculo. Como artista gráfico; si diseñas usando Adobe InDesign esto es un «mikeo«; crear un vínculo dentro de InDesign y luego exportar un Pdf interactivo y resuelta la encomienda; peeerrrooooooo… digamos que eres el cliente y cuando el artista te entrega el arte y se le olvidó colocar el «link«; lo llamas y lo llamas y no te coje el celular por que está en el cine viendo «Infinity War«; ¿Qué haces? Solo tienes el PDF y necesitas lanzar el «email blast» ahora! ¿Qué haces?

Bueno calma, calma… ¿Tienes Adobe Acrobat Pro? Perfecto! no es el fin del mundo.

Screen Shot 2018-05-02 at 7.04.28 PM

Con Adobe Acrobat puedes abrir el PDF que te envió tu diseñador favorito y crear el código o programación necesaria para que el vínculo haga su función deseada. Primero debes de abrir el PDF. Accede en la parte superior la pestaña de los «Tools«.

Screen Shot 2018-05-02 at 7.08.51 PM

 

Luego navega hasta encontrar la sección de «Create & Edit«; en ella vas a seleccionar la herramienta «Edit PDF«.

Screen Shot 2018-05-02 at 7.32.03 PM

 

Luego de presionar el botón; Acrobat analiza todo el documento y notarás que selecciona el texto diseñado en la parte inferior y lo hace editable. Notarás en la parte superior una pequeña barra de heramientas para editar el PDF y entre ellas hay una llamada «Link«,

Screen Shot 2018-05-02 at 7.33.57 PM

Al presionar el icono; selecciona la primera opción: «Add/Edit Web or Document link«.

Screen Shot 2018-05-02 at 7.43.36 PM

Notarás que el cursor de tu ratón se convierte en una pequeña cruz con la cual puedes hacer un click, arrastras y seleccionas creando un área alrededor del correo electrónico que se encuentra en el arte. Luego aparece una ventana en donde vas a programar ese lugar caliente o mejor conocido como «Hot Spot«. En esta ventana vas a seleccionar los siguientes parámetros:

  1. En Link Type; selecciona «Invisible Rectangle».
  2. En Highlight Style; «None». (Cuando selecciones esta opción, otras opciones se desactivan).
  3. En Link Action; «Custom Link».

screen-shot-2018-05-02-at-7-49-48-pm1.png

Cuando seleccionamos «Custom Link» se simplifica la ventana y se abre una nueva tableta llamada «Actions«.

Screen Shot 2018-05-02 at 7.52.23 PM

En la sección «Select Actions» vas a buscar en el listado la última opción: «Submit a Form«.

Screen Shot 2018-05-02 at 7.52.51 PM

Luego de seleccionar la última opción en el menú; se abre una nueva ventana en donde ocurre la magia.

screen-shot-2018-05-02-at-7-53-03-pm.png

Vas a escribir el código universal: «mailto: + el correo electrónico deseado»

mailto:jrvstudiopr@me.com

En la sección del formato a exportar puedes seleccionar el botón de radio «PDF The Complete Document«. Recuerda que si este arte fuese un formulario para ser entregado por coreo electrónico con esta opción el pdf se adjunta alcoreo electrónico el mismo.

screen-shot-2018-05-02-at-7-53-42-pm.png

Luego finalizas la programación seleccionando el botón «OK«. Ahora el PDF tiene alrededor del correo electrónico, un rectángulo invisible y programado para enviar un formulario o un mensaje al estudio JRV .

Screen Shot 2018-05-02 at 8.28.30 PM

Cuando el vínculo es seleccionado, se abre tu aplicación de correo electrónico, con el arte o formulario incluido y listo para escribir .

screen-shot-2018-05-02-at-7-59-11-pm.png

Recuerda esta programación básica la puedes utilizar en toda aplicación que te permita crear vínculos. Para enviar correos electrónicos la programación es: «mailto: + el correo electrónico deseado«.

¡Buenas noches!

 

 

 

Tratamiento de Imágenes en XD

En Adobe XD puedes importar cinco tipos de imágenes; puedes importar SVG, GIF, JPEG, PNG y TIFF. Cuando importas imágenes debes de asegurarte de que cada imagen tenga tres (3) veces su tamaño en resolución. Por ejemplo; si el «art-board» en XD es de tamaño 1,920 x 1,080 pixeles; entonces debes de utilizar Photoshop para preparar la imagen a un tamaño triplicado de 5,760 pixeles.

Screen Shot 2018-04-02 at 12.57.16 PM

Imagen a 3x.

Nota en la imagen anterior, el «art-board» tiene tamaño 1920 x 1080; y observa la parte exterior de la imagen lo grande que es en comparación con el «art-board» una vez ya tratada en Photoshop al tamaño 3x de 5760 px. Esto te deja sustancia en la imagen para poder jugar con la composición de la misma o cuando rotes el celular o la tableta; la imagen se acomoda respectivamente sin perder la calidad.

Screen Shot 2018-04-02 at 1.01.58 PM

Art-board horizontal.

Screen Shot 2018-04-02 at 1.02.29 PM

Art-board vertical.

Una vez la imagen está colocada en su sitio, te puedes despreocupar del sobrante de la foto, debido a que el «art-board» en XD funciona como una mascara. Lo único que se observará es lo que se encuentra dentro del «art-board«.

Screen Shot 2018-04-02 at 1.05.17 PM

Art-board 1920 x 1080 vertical.

Si eres usuario de Adobe InDesign, estarás acostumbrado a tratar las imágenes como vínculos o «links«. Este método hace que el archivo sea menos pesado y fácil de manejar; pero al momento que borras o mueves una imagen fuera del folder o directorio en donde se encuentra, Adobe InDesign no ve el vínculo y el mismo se rompe. Adobe XD no utiliza el método de InDesign; Adobe XD utiliza el método «embebed«; esto significa que toda imagen colocada dentro de XD queda impregnada en el archivo y el archivo lo puedes llevar contigo a donde sea y te despreocupas de tener vínculos perdidos. En cierta forma este método es bueno y también es malo debido a que el archivo de trabajo de XD, en cuanto más se agranda tu maqueta, más pesado en megabytes es el archivo y su acarreo o compartir se complica. Quizás en un principio puedas compartir el archivo por e-mail, pero al final del proyecto lo estarás compartiendo con un disco duro externo. El archivo de XD al final va a contener todo lo que usaste en tu diseño; imágenes, iconos, texto, etc.

Screen Shot 2018-04-02 at 1.12.44 PM

Archivo XD