Convertir fotografía en dibujo con Photoshop


Repasando el tutorial que hizo nuestro compañero de redacción de SutoriMauri: Entramado de fotografía en photoshop.

Me di cuenta que lo que expone en su tutorial es un modo de "entramar" una fotografía como lo hacen las impresoras de gran calibre para ahorrar distintos tipos de tinta.

En otras palabras, se trata de convetir los colores grises en tramas de puntos separados por una distancia para que de lejos nos de la impresión de que se trata de un color gris.



Ahora haced un experimento, alejaros de la pantalla tanto como podáis y decidme si de lejos estas dos imágenes son o no casi idénticas. (Pues los puntos cuando son pequeños el ojo humano los percibe como si se fusionaran entre ellos, es el modo en que nuestra vista se ha adaptado para sobrevivir en la peligrosa naturaleza que hace milenios que hemos abandonado).

Mi tutorial, sin embargo, pretende otra cosa distinta y se trata de intentar simular lo máximo posible y de modo simple y "sencillo" que una fotografía se "parezca" a un dibujo.



Nota importante.

Quiero dejar bien claro que se trata de una simulación, en ningún momento este "truco" podrá jamás igualarse a un dibujo hecho a tinta (o tableta gráfica). Siempre será recomendable para los edificios importantes narrativamente hablando, dibujar el edificio o paisaje en lugar de usar este truco con una foto.

Usar este tutorial en viñetas pequeñas o para edificios reales muy complicados puede servir de ayuda, pero jamás debe ser usado por la pereza de dibujar un edificio o porque "se me da mal dibujar decorados y la perspectiva".

Usar fotos como referencia para luego dibujarlo a mano es hasta recomendable.

Dicho esto, pasemos al tutorial en qüestión.

INTRODUCCIÓN

En primer lugar es de vital importancia tener en cuenta un detalle muy importante cuando se trata de modificar una imagen en photoshop. (o culaquier otro tipo de programa para edición de imágenes).

Nos solo hay que tener en cuenta la resolución de la imagen en si misma (cantidad de píxeles que hay en la misma tanto de ancho como de alto), sino también su desenfoque de cámara, así como el nivel de apertura del objetivo de la cámara y la cantidad de luz al tomar la fotografía.


En el ejemplo de arriba podemos observar que las dos imágenes son de un parecido más que razonable y que no se aprecian demasiadas diferencias entre ellas para poder usarlas como referencia a la hora de dibujarlas. Al mismo tiempo tienen una resolución de ancho idéntica y una de alto muy parecida.

Sin embargo sus diferencias se acentuan más cuando nos acercamos a las partes más sensibles de los límites del ojo humano, o lo que es lo mismo, cuando la luz o los colores dejan de tener diferencias.

Es bien conocido que un esquimal nativo del polo sur puede llegar a diferenciar más de 30 tipos de blancos distintos donde un Europeo corriente las vería todas como el mismo color blanco.



Así como también hay que tener en cuenta la longitud de onda de una imagen, donde un color rojo intenso puede llegar incluso a cegarte y no poder apreciar que hay varios tonos de rojo, de azul o de verde, por la cantidad de información que recibe tu ojo en un solo segundo. (recordemos que la luz viaja a 300.000 kilómetros por segundo, así que imaginad la de luz que entra en nuestros ojos solo pasado un minuto).


Pero la cámara digital, por muy sofisticada que esta sea, siempre se adaptará al ojo humano para sacar la foto, y eso implica que si se tira la foto sin demasiado cuidado puede salir "quemada", con el resultado de que muchas texturas se van a perder y no se podrá conseguir el efecto deseado. (ya que nuestro iris funciona como el objetivo de una cámara fotográfica y se asegura de adaptarse a la luz de una habitación para poder apreciar mejor la luz que reside en ese espacio concreto donde nos encontramos).

En la foto superior (que no es otra cosa que un corte más cercano de las imágenes de la casa batlló anteriores) podemos ver dos imágenes de exacta resolución pero sin embargo de una calidad bastante notable. ¿A que se debe esta diferencia? En este caso por dos motivos:
1) Por el desenfoque de la cámara (en este caso el fotografo estaba enfocando lo que estaba más cerca en lugar de enfocar lo que estaba más lejos).
2) por la excedencia de apertura en el objetivo de la cámara (eso provoca que muchas superficies blanquecinas aparezcan completamente blancas sin ningún tipo de textura ni sutileza, lo que se llama en fotografía, quemar la foto.

¿Eso significa que no podré usar muchas de las fotos que hay en google imágenes?

No, eso significa que si quieres tener un resultado profesional en este truco tendrás que tener muchas cosas en cuenta antes de lanzarte por la primera que encuentres. Obviamente si no hay otra alternativa, elegirás la única que tienes o por otra parte puedas animarte a dibujar si ves la fotografía de muy mala calidad.

Pero con esta introducción espero haber dejado bien claro un concepto.

RESOLUCIÓN DE IMAGEN ≠ CALIDAD FOTOGRÁFICA

BUSCAR FOTOGRAFÍA ADECUADA EN GOOGLE

La mejor opción para usar una fotografía para tu dibujo, ilustración o cómic, sería que la hicieras tú mismo, pero debido a que el tiempo apremia cuando estás en la producción de un cómic y que hay un universo entero en internet, muchas veces no es del todo necesario que te tomes la molestia de hacerla por ti mismo.

Aún así siempre es recomendable conocer las herramienttas adecuadas a tu disposición para llevar a cabo dicha tarea.

Para empezar nos dirigimos a google.com

Después nos dirigimos a imágenes y en el buscador introducimos lo que deseamos encontrar.




Seguidamente clicaremos en Herramientas de búsqueda> Mayor que...> 2MP (o más)  para poder así elegir la resolución de la imagen más adecuada para nuestra necesidad. (Si trabajamos en 300 ppp (píxeles por pulgada) no necesitaremos tanta resolución como si trabajamos en 1200 ppp).

N.A. Solo recordar que Google no siempre funcionará exactamente de este modo, pues por lo menos una vez al año suele cambiar su modo de visualización y lo cambian todo, pero la esencia seguirá siempre siendo la misma o incluso mejorándola.


PRIMEROS PASOS EN PHOTOSOHOP

Una vez hayamos elegido la imagen adecuada para lo que deseamos hacer, la guardamos en nuestro ordenador y abrimos el photoshop para usar esa imagen.


Teniendo la imagen deseada seleccionada, nos dirigmos a Imagen> Ajustes > Blanco y negro... (o lo que es lo mismo pulsamos el atajo de teclado Alt+Mayus+Ctrl+B), eso nos convertirá la imagen en blanco y negro, así como también nos aparecerá una ventana con las opciones de elegir que color queremos potenciar o reducir. Por defecto esa opción os la podéis saltar a menos que deseáis eliminar un color por completo de la imagen. (Imaginaos que queréis usar una bola roja en medio de un mar azul cyan, pues esta ventana quizás os ayudaría a reducir el trabajo a realizar).

Una vez tengamos la imagen en blanco y negro, es importante que hagamos una copia de la capa para poder  usar más tarde la misma imagen con el mismo filtro pero con otro objetivo, haciendo click con el botón derecho del ratón sobre la capa deseada y luego haciendo click sobre "Duplicar capa...", eso nos creará otra capa idéntica a la que habemos seleccionado previamente.




FILTRO: BORDES AÑADIDOS 

Hecho esto ya podremos empezar a jugar con el filtro que da nombre a este tutorial. "Bordes añadidos" con una de las dos capas de la foto en blanco y negro.


Una vez estemos dentro de este filtro, es importante no emocionarse demasiado con la riqueza de grises que puedes llegar a conseguir con este efecto, pues en realidad puedes llegar a conseguir un resultado pastelito y sin ninguna gracia ni truco.

Lo ideal sería no utilizar ningún gris, solo puro blanco y negro (y con eso no me refiero a usar el truco del tramado de puntos que ya he explicado al inicio de este tutorial). Recordemos que este tutorial intenta imitar el trazo de la mano sobre el papel para alcanzar algo parecido a un dibujo.


Si lo dejamos todo a cero como resultado nos dará esto:


Como ilustración ya serviría perfectamente sino fuera por 2 pequeños detalles.
1) El gris es demasiado fuerte, recordad que la trama gris tiene que ser muy sutil, casi como si fuera una sombra de ojos para una mujer que no desea destacar, o la sombra de una duna de un desierto en un día despejado
2) Le falta lo básico para que parezca un dibujo y lo que le da nombre al filtro "Borde añadido".

Pero esos dos detalles tendremos que ponerlos después o no podremos quitarle ese gris tan fuerte que tiene  la imagen sin que estropeamos demasiado la imagen.


Una vez aceptado el cambio realizado con el filtro bordes añadidos con los valores 0, 0, 0, obtendremos la imagen que hemos visto en la imagen superior donde solo hay 3 colores, el blanco, el gris oscuro y el negro.

Nuestro objetivo a continuación es usar exactamente el mismo filtro (Bordes añadidos) con la misma foto que hemos guardado con antelación en la capa de copia que hemos hecho de la fotografía en blanco y negro.


Esta parte es realmente muy subjetiva y depende mucho de varios factores distintos, como puede ser resolución de imagen, enfoque o desenfoque de la misma, objetivo deseado en la imagen, etcétera. Pero la idea principal de este paso es que "solo" nos interesa el borde del objeto que deseamos (sea edificio, árbol, paisaje, etc).


En mi caso particular decidí la configuarión anterior porque quería conseguir un borde fino pero definido, por eso no me interesaba para nada un grosor de borde (que suele ser borroso y feo), una intensidad de borde moderada, ni muy descarada ni impereceptible así como también una posterización elevada para poder elegir mejor un negro más definido y que no toda la imagen me quede muy oscura.

SEPARAR EL COLOR NEGRO

El siguiente paso es coger solo el color negro de esta imagen. Que no os engañe la vista, aunque en este paso la foto tenga un aspecto increíble, en realidad es muy feo usar esta cantidad de grises en un manga porque queda "muy poco creíble". Cuanto más simple sea la imagen y más detalle a mano puedas darle (y menos informatizado sea el detalle) mucho más creíble será el truco.

Eso se realiza con: Selección >Gama de colores...


En este paso es importante cerciorarte de dos cosas básicas.
1) que el color seleccionado sea el deseado, en este caso el negro y te puedes asegurar de ello viendo el color princiapl (Foreground color) de la paleta de colores en la ventana de herramientas de Photoshop.
2) que la tolerancia sea alrededor de 50, si es mayor de ese número cogerá algunos grises que no deseas y si lo bajas de 50 la imagen te quedará recortada con "dientes de sierra", debido a que no tendrá un suavizado notable en el corte de la selección.
N.A. Todo eso dependerá también de si la imagen es muy oscura o muy clara, en tal caso deberás vigilar ese nivel de tolerancia hasta conseguir el negro que deseas.


Lo que tienes que hacer a continuación es copiar esa selección de negros de la imagen en blanco y negro y luego pegarla en una capa nueva y así como resultado conseguirás aislar ese borde añadido y tenerlo como si fuera un dibujo en una imagen.


DETALLES FINALES

Ahora lo único que falta es añadir esa imagen anterior que hemos hecho con ese gris tan oscuro y ponerlo de modo sutil para darle un poco de volumen a esa línea de la casa Batlló que ya parece un dibujo.

Simplemente poniéndo esa capa debajo y bajándole la opacidad a un 40% ya conseguiremos el efecto deseado.


Quizás para mi gusto ha quedado demasiado pastel y todo con ese gris claro en toda la imagen, pero esos detalles son muy sutiles y con tiempo y paciencia se pueden ir puliendo. 

La idea básica en este truco (y de hecho en cualquier otra cosa en la vida profesional) es que hay que tener en mente algo muy básico. Less is more (Menos es más) so  Keep it simple (así que mantenlo simple).

Espero que os haya gustado el tutorial y no se os haya hecho demasiado pesado. Espero comentarios, respuestas, críticas, preguntas o lo que sea que os pase por esa mente vuestra. Será un placer poder responderos.

SALUT!

5 comentarios:

  1. Aún no me lo he leído, pero el resultado ES UN DIBUJO! Aunque tan bueno que no se lo cree nadie xD Pero en efecto parece que son solo tinta y tramas. Buena elección del edificio, por cierto, así podemos ver los resultados en distintos tipos de superficies. Ya diré más cuando tenga tiempo de leerlo, que parece que te lo has currado mogollón.

    ResponderEliminar
    Respuestas
    1. El tutorial es muy práctico y en muchos manga se utilizan directamente fotos reales para hacer muchos escenarios. Algunos de esos manga son Bakuman o Gantz.

      En cualquier caso, si queréis un trabajo más propio y casero, siempre podéis usar estas imágenes como referencia para hacer el dibujo final.

      Yo no hago uso de esto porque en mis trabajos no pega, pero esta técnica (u otras similares) se usan bastante en el manga.

      Buen aporte, Johan.

      Eliminar
  2. Como dato, esta técnica podría servir además para estudiar el comportamiento de las sombras y las formas de la estructura, pues en una imagen normal cuesta mucho ver por donde va una sombra o no. En la imagen final se ve claramente donde va el blanco y los tonos.

    ResponderEliminar
  3. No me quedo igual T_T, podrias hacer un videotutorial

    ResponderEliminar

# No escribas algo que no esté relacionado con la noticia
# Expresa tus opiniones, pero de forma educada y respetuosa
# Escribe correctamente para que todos puedan entenderte