Efecto Fotográfico de Comics Retro

0 comentarios Tecnología Por Tecnología El 26 de abril de 2018




final1.jpg

Seguramente reconocerán la imagenporque ya apareció en unas cuantas listas de otros sitios de Photoshopy diseño como PSDTuts o Smashing Magazine. Desde que lo publiqué enseptiembre de 2007, tuvo unas 470.000 visitas en total.
Hacer esta versión en Castellano me llevó mucho tiempo y además esuna versión ampliada, donde algunas partes del tutorial estánexplicadas 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 lafotografía base, éste efecto le puede dar un toque divertido einteresante a un álbum de recuerdos. Hay que tener en cuenta que nocualquier foto va a quedar bien con este efecto de comic retro. Lasfotos con primeros planos son las candidatas ideales. Hay que evitarlas que tienen detalles pequeños porque se van a perder con el efectode trama de semitonos.
Efecto de Trama de Semitonos

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

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

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

1 – Vamos a IMAGEN > AJUSTAR > NIVELES… Para esta imagen enparticular vamos a utilizar los siguientes datos: NIVELES DE ENTRADA:60 / 1.00 / 220. Si utilizan una imagen distinta, entonces deberánprobar 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 unailustración con un poco de grano para reproducir una impresión en papelviejo y de mala calidad. No es la intención crear un efecto hiperrealista, es simplemente una modificación de la imagen, necesaria paraobtener el efecto final.

1 – Vamos a FILTROS > ARTISTICO > PELICULA GRANULADA. Paraesta imagen usaremos: GRANO: 4, AREA RESALTADA: 0, INTENSIDAD: 10.Nuevamente cabe recordar que estos valores son para esta foto. Paraotras 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. Paraduplicarla, arrastramos la capa hacia el icono de NUEVA CAPA yautomáticamente se va a crear una capa nueva con la imagen. Paracambiarle el nombre a una capa, hay que hacer doble click exactamentesobre 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 restoqueda como está. Presionamos el botón OK para cerrar la ventana delfiltro.
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 superiorizquierda de la imagen. El tamaño de éste rectángulo estarácondicionado a la cantidad de texto que querramos poner en él másadelante.

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 elrincón inferior derecho de la imagen siguiendo el mismo método queutilizamos para dibujar el rectángulo anterior. Lo vamos a hacer en lamisma capa. Tomamos la herramienta de selección rectangular, dibujamosun 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 atener el efecto de estar hecho a mano, con las imperfecciónes propiaslo 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 laventana.
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 aaplicar un filtro para distorsionarlo un poco y que parezca un trazohecho a mano.

1 – Vamos a FILTRO > DESENFOCAR > DESENFOCAR MAS. Esto va asuavizar un poco los bordes del rectángulo para que el próximo filtrotenga 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 agreagartexto y elementos diseñados especialmente para revistas de historietaso comics.

1 – Descargamos la fuente gratuita Digital Strip y luego lainstalamos 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 eltexto, vamos a hacer la primera letra un poco más grande y sombreada yel resto del texto, de forma normal. Los siguientes pasos explicarancomo hacer la letra sombreada con un leve relieve utilizando efectos decapa.

1 – Establecemos el COLOR FRONTAL: #FF0000.
2 –
Tomamos la herramienta de texto. Seleccionamos la tipografíaDigital Strip, Bold, con un tamaño aproximado de 30px, hacemos click enel rectángulo naranja y amarillo, y escribimos la letra J. Liberamos laherramienta 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 SOMBRAPARALELA que se encuentra en la lista de efectos, arriba a laizquierda.
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 untamaño de letra menor que el de la J. Los valores utilizados en estepaso, 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 lasdistintas etapas de la letra J a medida que le fuimos agregando losestilos 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ásrecursos 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 paracomics 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 textosestán en Inglés. Y por supuesto que no traduje las tonterías queescribí en ellas. Y de más está decir que no lo pienso hacer!