«

»

Imprimir esta Post

Desconfía de las miniaturas

Algunos puede que no sepáis lo que es un thumbnail. No es más que una miniatura del tamaño de “una uña de un pulgar” (traducción literal). Cuando miráis las carpetas con fotos, podéis ver réplicas de las imágenes en lugar de feos nombres de archivos: pues eso es un thumbnail.

Por otro lado, la separación en frecuencia es algo menos inmediato de explicar. Quizá la manera más intuitiva de explicarlo sea con audio: podemos distinguir sonidos agudos (de alta frecuencia) de sonidos graves (de baja frecuencia). El caso es que en otras magnitudes (no sólo en los cambios de presión en el aire que provocan sonido) esta separación también existe. Gracias a que las imágenes también pueden interpretarse en función de altas o bajas frecuencias, podemos generar ilusiones ópticas tan curiosas como la que os comento en esta entrada.

Miniatura que lleva a la confusión

Miniatura que lleva a la confusión

Warning!

Esta entrada fue publicada anteriormente en mi antiguo blog.

La idea de esta entrada es explicar como hacer la imagen que veis aquí al lado. ¿Qué tiene de especial? Pues depende de en qué dispositivo lo estés viendo. Si estás leyendo esto desde un móvil o en una pantalla suficientemente pequeña, la imagen mostrará a una señorita conocida por algunos, en plena simulación del acto de lavarse los dientes.

En caso de estar viéndolo en un PC pueden pasar eso mismo o puede pasar que directamente veas la faz de un señor que, últimamente, tiene ciertos problemas para retener la porquería en su interior (también tiene gastroenteritis). Ver una u otra imagen depende, casi exclusivamente, del tamaño que tenga la misma.

 

Important!

Haz click en la imagen y juega con el zoom del navegador para verla más grande o más pequeña. No hay truco de programación web ni nada parecido: sólo estás viendo un montaje digital guardado en un archivo jpg normal y corriente.

Gazpacho de física, fisiología y percepción

Voy a resumir mucho este apartado (si quieres pasar directamente al tutorial, pasa al siguiente punto más abajo). Esta composición funciona por una particularidad de nuestra percepción visual. Si vemos un objeto lejano, lo vemos con varias características:

  • Lo vemos más borroso que si está cerca.
  • No distinguimos los bordes claramente. El cerebro ni se molesta en perfilar los bordes nítidamente, se queda con formas generales.
  • Lo vemos más pequeño, por efecto de la perspectiva
  • Lo vemos más desaturado, es decir, menos coloreado; más gris.

Por el contrario, si vemos un objeto cercano:

  • Lo vemos más definido, más perfilado, que si está lejos. Si algo está cerca, el cerebro desconecta la búsqueda de formas y se centra en los bordes.
  • Lo vemos más grande que si estuviera alejado
  • Lo vemos más saturado, es decir, más coloreado que si está a lo lejos.

Estas percepciones están fijadas en nuestro sistema visual, tanto por limitaciones fisiológicas en el ojo como por adaptaciones de interpretación en el cerebro. ¿Como aprovechar esto para crear una ilusión óptica como ésta? Vamos a hacer lo siguiente:

  • Confundir al cerebro con el asunto de la “saturación”. Para que no juegue un papel importante (y para simplificar el retoque, la verdad), vamos a desaturar las componentes de la imagen final, es decir, las vamos a usar en blanco y negro.
  • Vamos a asumir que el cerebro interpretará que una imagen pequeña es una imagen alejada. En esta imagen alejada (donde no preguntará por bordes), incrustamos información que no tenga bordes.
  • Vamos a asumir que el cerebro interpretará que una imagen más grande es una imagen cercana. En esta imagen vamos a aumentar la relevancia de los bordes frente a los volúmenes imprecisos.
  • Vamos a dar un empujoncito a la búsqueda de patrones del cerebro, para lo que vamos a alinear en las dos imágenes originales aquello que facilita al ser humano el identificar un rostro: los ojos.

Al lío

El software que se va a emplear es Photoshop, aunque cualquier software capaz de desenfocar y de aplicar filtros sobre imágenes, además de solapar capas, es válido.

1. Buscar imágenes

Hay que encontrar las dos imágenes que queremos usar para el montaje. Es recomendable que tengan la misma orientación en la pose o, al menos, que tengan los ojos visibles y con posiciones similares en la imagen. Pensad que hay que solapar ambas y el resultado debe poder recortarse para aparentar ser una sola.

Imagen ‘cercana’ original.

Imagen ‘lejana’ original

Las dos imágenes originales han sido las dos que veis a color. La lejana esta rotada y escalada para hacer coincidir los ojos de ambas fotografías.

Como se van a multiplicar las capas al final, da igual en qué orden las apiléis, pero cada una de estas imágenes tras el alineado debe estar en una capa independiente. Podéis apilar las imágenes arrastrando los archivos de imágenes directamente a Photoshop o seleccionando en el navegador la opción “copiar imagen” con el botón derecho y pegando en un documento nuevo.

Es recomendable duplicar estas capas por si metemos la pata o modificamos algo que no queramos. Podemos tener dos capas originales (con las imágenes importadas) y duplicarlas para hacer el retoque. Esta es una práctica muy recomendable en general si no tienes costumbre de usar Photoshop o software similar.

2. Alineamiento y desaturado

La forma más rápida de alinearlas es seleccionando totalmente la capa superior (Ctrl+A con la herramienta seleccionar o marquee) y hacer una transformación de la selección (botón derecho y transformación libre o free transformation). Con esta transformación podemos rotar y escalar la imagen a nuestro antojo. Mi resultado final (con una transparencia de fines didácticos) es este:

Ambas imágenes solapadas

Al ver esta imagen (aparte de un grado no despreciable de repulsión) el cerebro no sabe qué interpretar y la solución simple es “varias imágenes solapadas que no representan nada claramente”. Vamos a arreglarlo.

Podemos desaturar ya las dos capas y trabajar a partir de esas, así que vamos a ello. Podemos volver a duplicar las capas alineadas para trabajar con copias desaturadas. Duplicamos las capas y ocultamos las anteriores. Picamos en cada una de las dos nuevas capas y pulsamos Ctrl+Shift+U. Esto lo que hace es anular toda la información de saturación (cantidad de color puro) que hay en cada píxel de la imagen, por lo que nos queda visible sólo la información de luminosidad. No es exactamente un blanco y negro, pero se le parece bastante.

Ahora podemos tener algo como lo siguiente:

Imágenes solapadas y desaturadas

Warning!

Nota: si eres usuario usual de Photoshop y te está doliendo por dentro que no haya hecho referencia nunca a compensar niveles y a ecualizar histograma o similares, ten en cuenta que la idea es explicar el concepto y no pretendo dar un cursillo avanzado de Photoshop. Para los que sabéis usarlo, es muy recomendable ir ajustando los niveles en cada paso y ver como queda la composición.

Ya lo tenemos todo preparado para la separación en frecuencia.

3. Desenfoque y filtrado de paso alto.

Hemos de conseguir que cada una de las imágenes se diferencie de la otra en términos de sus componentes de frecuencia. Lo vamos a hacer de manera muy burda y con la única exigencia de que se vea como queremos. Formalmente, todo esto habría que hacerlo de manera numérica y justificando muchísimas cosas.

Para que nos entendamos, una imagen de baja frecuencia es una imagen plana, con pocos bordes, con muchas superficies uniformes y una imagen de alta frecuencia es una imagen granulada, con muchos bordes, con muchas irregularidades. Así que hemos de conseguir que la imagen alejada se vea ‘plana’ y que la cercana se vea ‘afilada’.

Para el aplanado, vamos a limitarnos a realizar un desenfoque gaussiano (seleccionamos la capa alejada y vamos a filtros, desenfoque, desenfoque gaussiano o filters, blur, gaussian blur). Al realizar el desenfoque nos va a preguntar un radio. Este radio lo elegiremos a ojo, viendo cuando la imagen está lo suficientemente borrosa en tamaño al 100% como para que cueste identificarla y cuando es lo suficientemente clara al disminuirla de tamaño (para ello usamos el zoom de Photoshop con Ctrl+ y Ctrl-). Para esta imagen, con tamaño de 378×310 píxeles, un tamaño de radio igual a 4 px ha resultado bien.

Opción de desenfoque.

El proceso para la imagen de alta frecuencia es algo más complicado. No basta con aplicar sólo un efecto, sino que hay que ecualizar la imagen (lo comentaremos más adelante).

Tomamos la capa de la imagen cercana y elegimos la opción de filtro, otros y paso alto (filters, others, high pass). También nos va a preguntar un tamaño. En este caso el tamaño representa el tamaño de los detalles que pasan el filtro; cuanto más pequeño pongamos el radio, menos detalles pero más afilados tendremos. De nuevo, este parámetro depende de cada imagen y tendremos que probar hasta que tengamos un tamaño adecuado (entre 2 y 3 px. es un valor sensato para el tamaño de imagen y para una imagen de detalles sencillos).

Imagen cercana con filtrado de paso alto.

Como se ve, la imagen filtrada deja en un gris bastante anodino aquellas zonas más uniformes, mientras que en zonas de frontera o borde, el trazo es más contrastado (blanco y negro). Antes de mezclar estas dos imágenes directamente vamos a contrastar más la imagen ajustando los niveles. Para ello seleccionamos la capa del filtrado paso alto y pulsamos Ctrl+L (niveles o levels).

Corrección de niveles tras paso alto

Lo que buscamos es que los grises se conviertan en blancos y que los negros sean muy negros. Más lo primero que lo segundo. Para ello:

  1. Movemos el triángulo blanco a la izquierda casi hasta la mitad (esto ‘aclara’ los grises)
  2. Movemos el triángulo negro a la derecha hasta los primeros puntos del histograma, sin dejar muchos a la izquierda.
  3. Jugamos con el gris central hasta ver una imagen casi en exclusivo blanco y negro que permita distinguir los contornos.

4. Composición

Ya sólo queda apilar estas dos capas y solaparlas mediante multiplicación.

 

He subido un archivo PSD con el ejemplo para que podáis toquetear y probar lo que se explica en la entrada.

 

Acerca del autor

Dani Ramírez

Artesano del conocimiento, del software y los juegos de mesa. También Ex-CEO de una empresa que nunca dio beneficios, Ex-programador a tiempo completo, Ex-estudiante de ingeniería... Knowledge, software and board game craftsman. Also, Ex-CEO-of-a-company-which-never-had-profits, Ex-full-time-programmer, Ex-engineering-student, ...

Enlace permanente a este artículo: http://danibishop.com/desconfia-de-las-miniaturas/

Pinterest