Efecto Fotográfico de Comic Retro o Historieta Antigua

Imagen de Rubén Darío

Este tutorial es el que más éxito tuvo de todos los que he escrito para mi blog Photoshop Roadmap. Seguramente reconocerán la imagen porque ya apareció en unas cuantas listas de otros sitios de Photoshop y diseño como PSDTuts o Smashing Magazine. Desde que lo publiqué en septiembre de 2007, tuvo unas 470.000 visitas en total.

Hacer esta versión en Castellano me llevó mucho tiempo y además es una versión ampliada, donde algunas partes del tutorial están explicadas con un poco más de detalle que en la versión en Inglés.

Con un poco de buen ojo y criterio en el momento de seleccionar la fotografía base, éste efecto le puede dar un toque divertido e interesante a un álbum de recuerdos. Hay que tener en cuenta que no cualquier foto va a quedar bien con este efecto de comic retro. Las fotos con primeros planos son las candidatas ideales. Hay que evitar las que tienen detalles pequeños porque se van a perder con el efecto de trama de semitonos.

Efecto de Trama de Semitonos

Descargamos esta foto de un album de PICASSA y la abrimos en Photoshop. Para descargar esta imagen en tamaño más grande, tienen que presionar el botón de DOWNLOAD que está arriba de la foto.

Esta foto es utilizada nada más que para ejemplo del efecto, su uso para otros fines está estrictamente prohibido y está protegida por los derechos del autor Rubén Darío

Una vez descargada la abrimos e incrementamos el contraste de la imagen, sobreexponiéndola levemente, pero no demasiado. Lo hacemos de la siguiente manera:

1 - Vamos a IMAGEN > AJUSTAR > NIVELES… Para esta imagen en particular vamos a utilizar los siguientes datos: NIVELES DE ENTRADA: 60 / 1.00 / 220. Si utilizan una imagen distinta, entonces deberán probar con otros valores hasta encontrar los que den mejor resultado.
2 - Hacemos click en OK para cerrar la ventana de niveles.

La imagen que sigue muestra la diferencia del antes y el después:

En este paso le vamos a dar a la foto un aspecto similar a una ilustración con un poco de grano para reproducir una impresión en papel viejo y de mala calidad. No es la intención crear un efecto hiper realista, es simplemente una modificación de la imagen, necesaria para obtener el efecto final.

1 - Vamos a FILTROS > ARTISTICO > PELICULA GRANULADA. Para esta imagen usaremos: GRANO: 4, AREA RESALTADA: 0, INTENSIDAD: 10. Nuevamente cabe recordar que estos valores son para esta foto. Para otras fotos, habrá que probar con otros valores.
2 - Hacemos click en OK para cerrar la ventana del filtro.

En este paso le vamos a aplicar una trama de semitonos a la imagen para darle el aspecto de historieta antigua.

1 - Dupilcamos la capa y le asignamos el nombre SEMITONO. Para duplicarla, arrastramos la capa hacia el icono de NUEVA CAPA y automáticamente se va a crear una capa nueva con la imagen. Para cambiarle el nombre a una capa, hay que hacer doble click exactamente sobre el nombre de la capa.

2 - Seleccionamos la capa de SEMITONO y vamos a FILTRO > PIXELIZAR > SEMITONO DE COLOR definimos el RADIO MAXIMO: 4. El resto queda como está. Presionamos el botón OK para cerrar la ventana del filtro.
3 -
Vamos a la PALETA DE CAPAS y en el menú de MODOS DE FUSION seleccionamos OSCURECER.

Al mezclar las dos capas, se visualiza el efecto de historieta o comic retro.

Agregándole elementos de comics a la foto.

Para que el efecto sea más realista, le vamos a agregar algunos de elementos más frecuentes de los comics.

1 - Vamos a la PALETA DE CAPAS y seleccionamos la capa SEMITONO.
2 - Desplegamos el menú de EFECTO DE CAPA y seleccionamos TRAZO. La ventana de EFECTO DE CAPA se va a abrir.
3 - Ingresamos los siguientes valores: TAMAÑO: 20px, POSICION: DENTRO y COLOR: #F5ECE1.
4 - Presionamos OK para cerrar la ventana.

La imagen siguiente muestra el resultado del efecto y el estado de las capas luego de aplicar este EFECTO DE CAPA.

Ahora le vamos a agregar un par de cajitas de texto para simular un cuadro de comic:

1- Agregamos una capa nueva por arriba de la capa de SEMITONOS y le ponemos como nombre: CAJAS.
2- Tomamos la herramienta de selección rectangular
3 - Dibujamos un rectángulo no muy grande en la parte superior izquierda de la imagen. El tamaño de éste rectángulo estará condicionado a la cantidad de texto que querramos poner en él más adelante.

4 - Establecemos como COLOR FRONTAL: #FF9000, y como COLOR DE FONDO: #FFC000.
5 -
Tomamos la herramienta de DEGRADADO y seleccionamos el primer gradiente de la lista de gradientes preestablecidos.
6 - Con la herramienta de DEGRADADO pintamos un gradiente tal como lo muestra la imagen abajo:

7 - Con la selección todavía activa, vamos a EDICION > CONTORNEAR… Le asignamos ANCHURA: 3px, COLOR: NEGRO y POSICION: DENTRO.

Ahora vamos a dibujar un rectángulo blanco con borde negro en el rincón inferior derecho de la imagen siguiendo el mismo método que utilizamos para dibujar el rectángulo anterior. Lo vamos a hacer en la misma capa. Tomamos la herramienta de selección rectangular, dibujamos un rectángulo, lo pintamos de blanco con el comando EDICION > RELLENAR… o con el BALDE DE PINTURA.

Ahora vamos a agregar un borde negro a la foto. Este borde va a tener el efecto de estar hecho a mano, con las imperfecciónes propias lo gestual.

1 - Creamos una capa nueva
y le ponemos como nombre MARCO.
2 - Tomamos la herramienta de selección rectangular y seleccionamos la foto tal como lo muestra la imagen siguiente:

En este momento tenemos una selección rectangular activa que bordea a la foto y también tenemos la capa MARCO seleccionada.

1 - Vamos a EDICION > CONTORNEAR… y le asignamos ANCHURA: 4px, COLOR: NEGRO y POSICION: DENTRO. y presionamos OK para cerrar la ventana.
2 - Desactivamos la selección yendo al menú SELECCION > DESELECCIONAR. También podemos desactivar la selección haciendo CTRL + D (PC) o COMANDO + D (MAC).

A este rectángulo de borde negro que acabamos de dibujar le vamos a aplicar un filtro para distorsionarlo un poco y que parezca un trazo hecho a mano.

1 - Vamos a FILTRO > DESENFOCAR > DESENFOCAR MAS. Esto va a suavizar un poco los bordes del rectángulo para que el próximo filtro tenga una mejor base para funcionar.
2 - Vamos a FILTRO > DISTORSIONAR > RIZO… y utilizamos los siguientes datos: CANTIDAD 20%, TAMAÑO: MEDIANO.
3 - Para darle un toque final, vamos a FILTRO > ENFOCAR > ENFOCAR MAS.

La imagen siguiente muestra cómo nos quedó el borde con efecto a mano alzada.

Escribiendo texto con tipografía de comic

Para terminar con el desarrollo de este efecto, le vamos a agreagar texto y elementos diseñados especialmente para revistas de historietas o comics.

1 - Descargamos la fuente gratuita Digital Strip y luego la instalamos en el sistema. En el caso de que no sepan cómo hacerlo, sigan estas instrucciones para MAC o PC.
2 -
Seleccionamos la herramienta de texto y luego elegimos la fuente Digital Strip que acaban de descargar.
3 - Hacemos click en el rectángulo blanco (el inferior derecho) y escribimos algún texto que describa a la foto.

Ahora vamos a trabajar sobre el texto superior. Para enfatizar el texto, vamos a hacer la primera letra un poco más grande y sombreada y el resto del texto, de forma normal. Los siguientes pasos explicaran como hacer la letra sombreada con un leve relieve utilizando efectos de capa.

1 - Establecemos el COLOR FRONTAL: #FF0000.
2 -
Tomamos la herramienta de texto. Seleccionamos la tipografía Digital Strip, Bold, con un tamaño aproximado de 30px, hacemos click en el rectángulo naranja y amarillo, y escribimos la letra J. Liberamos la herramienta de escritura haciendo CTRL + ENTER (en las PC) o COMANDO + RETURN (en las MAC)
3 - Vamos a la PALETA DE CAPAS y seleccionamos la capa de texto J.
4 - Desplegamos el menú de EFECTO DE CAPA y seleccionamos TRAZO. La ventana de EFECTO DE CAPA se va a abrir en la opción TRAZO.
3 - Ingresamos los siguientes valores: TAMAÑO: 3px, POSICION: FUERA y COLOR: #000000.
NO CERRAMOS LA VENTANA AUN.
4 - Ahora hacemos click en el nombre de la opción de SOMBRA PARALELA que se encuentra en la lista de efectos, arriba a la izquierda.
5 - Colocamos los datos siguientes: OPACIDAD: 100%, ANGULO: 135, DISTANCIA: 6px, TAMAÑO:100% y EXTENSION: 0.

Hacemos click en OK y escribimos el resto del texto utilizando un tamaño de letra menor que el de la J. Los valores utilizados en este paso, dependen mucho del tamaño de la letra. Para letras más grandes, valores mayores, y viceversa. En la imagen que sigue vamos a ver las distintas etapas de la letra J a medida que le fuimos agregando los estilos de capa, y el resultado final del texto superior:

El efecto ya está listo. Haciendo click en la imagen que sigue, podremos ver el resultado en tamaño más grande:

Otros elementos de diseño de comics para las fotos

Aquí les dejo un par de sitios que pueden visitar para ver más recursos de diseño gráfico de comics: Comic Book Fonts y Balloon Tales. Balloon Tales publicó un muy buen tutorial de diseño tipográfico para comics que les recomiendo si desean decorar aún más a sus fotos.

Las siguientes imágenes son dos ejemplos que hice con este efecto. En ellas incorporé efectos de sonido y globos de texto. Los textos están en Inglés. Y por supuesto que no traduje las tonterías que escribí en ellas. Y de más está decir que no lo pienso hacer!

Hacer click en cada imagen para ampliarlas.

Imágenes de Mary R. Vogt y Rupert Jefferies

Tags: comic, efectos fotográficos, historieta, retro