Tutorial: Crear cartas de manera automática

por Isra C. | publicado en: Diseño, Fabricacion, Nuestras Cosas | 15

¡Buenas a todos!

Como os comentamos en Twitter, gracias a que aprendimos cómo generar cartas de manera
automática con Photoshop con la sustitución de variables, nos está haciendo más llevaderas las
pruebas de valores con el desarrollo de Marble Empire. Tener una plantilla de carta en la cual, tiene
aproximadamente unos 30 variables entre ilustraciones, valores de los numeros y la aparición o
desaparición de iconos, y de las cuales, cada vez que se cambian cosas, cambian TODAS las cartas, si
tuviéramos que generar una a una las 80 cartas de las que se compone (de momento), cada uno de
esos 30 campos, podríamos tardar una eternidad cada vez que quisiéramos probar nada. Así que
como consideramos que es bastante útil (y que ha habido muy buena respuesta en Twitter ante si
hacer un tutorial o no) vamos a ello. Pero lo primero primerito, un aviso:

Es probable que haya 1000 maneras mejores de hacer todo esto. A

pesar de todo seguimos siendo unos novatos pero esto a nosotros nos
funciona. Así que si sabéis maneras mejores de utilizar todo esto, la
sección de comentarios es muy generosa
Al lío:

Programas necesarios:
Excel (de OpenOffice o Microsoft o el que quieras que permita exportado de fichero CSV con
tabulaciones)
Photoshop (no sabemos a partir de qué versión pero desde hace mucho tiempo seguro que se
puede. Nosotros utilizamos la CC de 2017)
Notepad++ para la sustitución de texto (podéis usar el que más rabia os de) (O utilizar la
aplicación de renombrado)
No os vamos a dar un curso ni de Photoshop ni de Excel porque no nos vemos capacitados para ello,
pero al menos os diremos más o menos cómo preparar una plantilla para una carta y cómo hacer un
excel que Photshop sepa interpretarlo.

Se hablará de fichero CSV y TXT de manera indistinta. Es el fichero de texto que se exportará a partir
de la tabla de Excel.

Al final del tutorial tendréis un enlace para descargar el fichero Excel, el fichero txt generado y la
plantilla de Photoshop para que podáis hacer vuestras pruebas sin necesidad de generar nada desde
cero.

Los pasos a seguir para hacer esta magia son:

1. Crear la plantilla en Photoshop y definir las variables
2. Crear el excel, rellenarlo y exportarlo a formato CSV con tabulaciones
3. Cargar el conjunto de datos (CSV) en Photoshop
4. Exportar en ficheros PSD una a una las cartas de manera automática
5. Guardarlas todas en el formato que se quiera

1.- Crear la plantilla en Photoshop y definir las variables

Aquí hay muchas interpretaciones de cómo hacer la plantilla y cómo componer una carta. En el
ejemplo que os mostramos, hemos “diseñado” una carta estándar tipo póker (88,9 x 63,5) con las
siguientes capas:

Que sean imágenes de Llamas y Alpacas es mera casualidad

num_carta: Tomará del excel un texto y lo sustituirá por el que corresponda (cartas del 1 al 12).
Será siempre será visible y se encuentra abajo centrado.
valor_carta: Tomará del excel un valor numérico en formato texto y lo sustituirá. Será siempre
será visible y se encuentra en la esquina superior izquierda.
texto_accion: Texto de acción de la carta. Tomará del excel el valor y lo sustituirá. No será
siempre visible porque algunas cartas no llevan texto de acción y se encuentra en la caja grande
de abajo. Ese texto es el máximo posible que encajar en el recuadro sin que se pierda información.
icono_accion: Tomará del excel la ruta a un icono, y lo encajará en el recuadro negro del medio.
Siempre será visible.
 titulo_carta: Tomará del excel el valor que tenga y lo sustituirá. Siempre será visible y ese texto
es el máximo posible sin perder información.
Fondo_1, Fondo_2, Fondo_3: Distintos posibles fondos que se ocultarán y/o mostrarán en
función de como esté en el excel.
Tip: Para crear un recuadro de texto en Photoshop, en vez de simplemente pinchar en la imagen con
la herramienta de texto (T), arrastra haciendo click para seleccionar un área.

Tip: Para cambiar el nombre de la capa para darle uno identificativo, haz click dos veces para
cambiarle el nombre

Una vez que ya tenemos diseñada la carta, hay que definir qué capas son las que establecer
como variables. Para ello vamos a Imagen->Variables->Definir… Luego, donde pone Capa,
vamos seleccionando las capas que queremos definir como variables (que luego irán en el excel) Para
capas de texto marcamos “Sustitución de texto” y en el nombre ponemos el mismo que el de la capa.
El nombre de la variable puede coincidir o no, nosotros lo ponemos igual por comodidad.

Y así con todas

Cuando lo que queremos hacer es una sustitución de imagen en una capa, la ventana cambia
ligeramente a lo siguiente:
 Elegimos “Encajar” porque los iconos son más grandes que el cuadrado asignado

Y por último, cuando lo que queremos es mostrar/ocultar una capa, marcamos en “Visibilidad” y le
ponemos el mismo nombre que la capa (una vez más, por comodidad)

Cuando ya hemos definido exactamente todo lo que vamos a definir luego en el excel, guardamos y
dejamos el Photoshop de lado un rato y nos ponemos a rellenar el excel, el paso que a priori parece
más sencillo pero que si no lo haces exactamente como entiende Photoshop, te va a llevar un buen
rato.

Remarcamos que se ha de definir todo porque si a Photoshop no le cuadra lo que viene en el excel
con lo que el tiene definido, te dará errores.

2.- Crear el excel, rellenarlo y exportarlo a formato CSV con tabulaciones

(Opcional)Como consejo antes de empezar, en el fichero excel, seleccionad todas las celdas y
establecedlas como formato “texto”, ya que por ejemplo 1/ 50 para la numeración de las cartas, os la
interpretará como una fecha y es mucho más engorroso.
 Pinchad en la esquina superior izquierda para seleccionarlas todas

Seleccionad como formato “texto”

La regla de oro de crear el excel, es que la primera línea del fichero de excel, se tiene que
llamar igual que la variable que hemos definido en Photoshop. Así, cuando lo carguemos en
Photoshop, éste sabrá qué capa es la que tiene que sustituir.

Aquí hay varias maneras de hacerlo, pero os contamos como lo hacemos. Todos los tutoriales de esto,
el ejemplo que te presentan es con todos los campos rellenados en el Excel, pero… ¿y si justamente
hay una capa que queremos que su valor sea vacío en vez de contener valor? Os explicamos más
adelante cómo lo resolvemos nosotros.

Esta es la pinta que tendrá el excel cuando lo hayamos rellenado:

Pasamos a comentar las particularidades y características de cada tipo de dato.

Tal y como vemos en num_carta,valor_carta, es simplemente texto que será sustituido y que
siempre tiene el mismo tamaño. En el caso de número de carta siempre tiene el formato XX / YY y el
valor de la carta siempre es un número de una cifra.

En titulo_carta y texto_accion, también es texto y pondremos lo que queramos, pero con cuidado,
porque es muy variable. Como en la plantilla de Photoshop le hemos dado un tamaño máximo de
texto tanto al título como al texto de la acción, no debemos exceder de ese número de caracteres
porque si no perderemos lo que no entre. Como truco, si hacéis doble click entre las celdas GH y HI,
el tamaño de la celda se ajustará automáticamente al tamaño del texto tal y como se muestra a
continuación, y así sabréis aproximadamente* hasta cuanto tenéis para poder escribir.

Luego borráis lo de “Tamaño máximo…” y así sabréis hasta dónde podéis escribir.

Como véis en la imagen anterior, hay algunas líneas que contienen ‘#’. Ese carácter, significa que el
texto irá vacío. Luego en el fichero TXT que se genere, haremos una sustitución de valores, pero eso
lo explicamos más adelante..

En icono_accion vemos una ruta a una carpeta donde están los iconos que iremos sustituyendo.
Donde esté la plantilla, podéis crear carpetas y dentro de esas carpetas meter distintos símbolos o
iconos para que luego en Photoshop se sustituya por el que toque. Recomendamos que todos los
iconos tengan el mismo tamaño para que sea todo más coherente en el resultado final.**

En las columnas Fondo_1, Fondo_2 y Fondo_3, vemos que tienen como valores true y **. Esto
significa que si está a true, se mostrará, y si está con ** no. En cualquier caso, al igual que pasaba
con el carácter #, lo sustituiremos más adelante por un “false” para que no se muestre.

Con esto, tendremos rellenados todos los campos del fichero excel. Cuidado de no tener filas ni
columnas “aparentemente vacías” que luego a la hora de exportar puedan causarnos error.
Seleccionando unas filas por debajo y eliminándolas (y de la misma manera con las columnas a la
derecha) no debería de producirse ningún error después.

Y llega el momento de guardar el contenido de nuestro excel en formato Texto (delimitado por
tabulaciones). Archivo->Guardar Como…
Cuando te de un mensaje diciendo que si quieres cambiar formato etc etc decid que no a todo y
cancelar todo lo que ponga, el fichero de texto CSV por tabulaciones ya se habrá creado.

Ahora, llega una parte que la toreamos así por las particularidades de Excel. Nos explicamos:

Cuando queremos que un texto sea vacío, el contenido de la celda no puede ser un espacio vacío,
puesto que Photoshop no lo interpreta, así que abriremos el Notepad++ y reemplazaremos el texto #
por ” “. ¿Por qué? Porque Excel al guardar como texto, las comillas (“) te las pone dobles. Así que si
en la celda que queremos que lleve texto vacío ponemos como valor (” “), al exportarlo, nos lo
guardaría como (“” “”). Así pues, abrimos el Notepad++ y con la opción de reemplazar,
reemplazamos todos los # por ” “.

Al dar en Reemplazar todo sustituirá todas las coincidencias. Aseguraros de que el carácter # solo
se utiliza para simbolizar la ausencia de texto.

Haremos lo mismo con ** por “false” (con las comillas) y todos los true por “true” (con las comillas).
¿Por qué? Porque Photoshop sólo acepta el valor “true” para mostrar la capa y “false” para ocultarla,
si no está escrito exáctamente así, lo dejará tal y como esté en la plantilla e ignorará lo que le
hayamos puesto. ¿Por qué no escribir en el excel “true”/”false” directamente? Porque a la hora de
exportarlo nos lo exportará como “”true”” y “”false”” y no es como lo espera Photoshop.
 Actualización 23/01/2017

Gracias a Roberto (Klannad) que nos ha preparado un pequeño programita

para Windows que hace todo lo de arriba. Lo único: Donde queramos que
lleve “false” deberemos poner una @, y donde queramos que no haya texto
deberemos poner un #. El nombre del TXT que vayamos a pasarle al
programa, tiene que ser “valores_cartas.txt“, que generará un nuevo
fichero de texto “textoPS.txt“. Solo tenéis que ejecutar el archivo
Renombrar.bat y ya no tendréis que hacer esas sustituciones a mano.

Si queremos cambiar los nombres del fichero de entrada y fichero de salida,

tendréis que abrir con el bloc de notas el archivo .bat y ponerle lo que
queráis.

Si hemos hecho todos estos pasos, ya estamos listos para cargar el conjunto de datos en Photoshop y
ver el resultado.

3.- Cargar el conjunto de datos (CSV) en Photoshop

Una vez tenemos el formato correcto de nuestro fichero de texto, en Photoshop, vamos a Imagen-
>Variables->Conjunto de datos… y ahí seleccionamos Importar. Cargaremos el fichero de texto
que hemos estado modificando (o el fichero de texto que ha generado el programita Renombrar.bat).
Si todo ha ido bien, no dirá nada Photoshop, y podremos (si tenemos marcada la casilla de
“Previsualización”) ir seleccionando en el desplegable de “Conjunto de Datos” una a una para ir
viendo las cartas que hemos generado. Esto último es recomendable para verificar una a una lo que
hemos generado (y vemos que se ha generado bien).

¿Os acordáis de cuando os dijimos que eliminárais columnas a la derecha/filas debajo para que
Photoshop no os de error? Este es el error que os presenta si tenéis columnas vacías y/o sin definir:

Si habéis llegado hasta aquí, lo más difícil ya está hecho ¡Enhorabuena!

4.- Exportar en ficheros PSD una a una las cartas de manera automática
Cuando ya vemos que todos los datos están bien y que no necesitamos cambiar nada en el excel,
exportamos todas las cartas a archivos PSD independientes. Iremos a Archivo-> Exportar->
Conjunto de datos como archivos…

¡Ya queda poco!

Seleccionamos la carpeta donde queremos que se guarden los ficheros PSD, le damos una
“estructura” de nombre (En nuestro caso Carta_llama_XX.psd, pero podéis elegir lo que queráis) y le
damos a OK.

¡Tachán!

Ya tenéis todas las cartas generadas con sus capas ocultas/visibles, textos cambiados, valores
cambiados, iconos sustituidos… pura magia. El siguiente paso del tutorial es completamente opcional
pero te puede salvar de un trabajo repetitivo que una vez sepamos que hemos generado bien las
cartas, no debiéramos de hacer, pero que Photoshop, al sólo exportar como PSD, no nos deja otra
opción (que sepamos).