Crea imágenes con efecto duotono en Photoshop de forma sencilla

Cuando usamos imágenes o fotografías en nuestros proyectos, es bastante habitual editarlas para aplicarles diferentes filtros y efectos, que hagan que se ajusten más al aspecto visual que estemos buscando. Desde convertir imágenes a color en blanco y negro, aumentar el brillo o el contraste, o aplicarle un filtro de color. Sobre esto último, hay un efecto similar que se ha puesto de moda en muchos sitios y es el efecto duotono. Y hoy os queremos enseñar como conseguir este efecto en cualquier imagen gracias a Photoshop.

Lo primero es explicar que es el efecto duotono, para aquellos que no hayan escuchado nunca este término. Pues el algo tan sencillo como que hacer que cualquier imagen tenga solo dos colores. Esto puede ir desde algo tan sencillo como que un icono y su fondo sean de dos colores diferentes, a algo más complejo como una fotografía. Este efecto se utiliza en muchos lugares, y uno de los más reconocibles es el usado en Spotify en gran parte de su imagen de marca.

ejemplos de efecto duotono de imagen en web de spotify

Este efecto es muy apropiado cuando queremos que nuestras imágenes se ajusten a la paleta de colores que tiene el resto de su entorno. O si queremos colocar un texto sobre una fotografía, y que haya cierto contraste entre ambos. Por suerte, aplicar este efecto duotono sobre cualquier imagen o fotografía se puede realizar en pocos minutos, consiguiendo un efecto muy original. No tardemos más, y vamos con el tutorial.

Creando un efecto duotono a una imagen en Photoshop

Uno de los métodos más sencillos y rápidos para crear este tipo de efectos es con Photoshop, gracias a las herramientas que tienen para tratar los canales de una imagen y los ajustes de capa. Eso sí, antes de abrir Photoshop, debemos tener la imagen con la que queremos trabajar. En nuestro caso, nos hemos ido a Unsplash, y hemos elegido una fotografía de Aben Tefra.

web de unsplash con fotografía de aben tefra

En principio, las imágenes o fotografías no deben tener ningún prerrequisito para que les podamos aplicar este efecto. Eso si, si tienen zonas muy contrastadas, mas fuerte será el efecto duotono. Aunque no es algo por lo que debamos preocuparnos ahora. Una vez tengamos nuestra imagen o fotografía elegida, nos vamos a Photoshop.

Paso 1: Aplicar primer color del duotono a las zonas iluminadas

En Photoshop, lo más importante es que tengamos abiertos y a la vista los dos paneles que vamos a utilizar en este tutorial: Capas y Canales. Si nos tenéis activados, es tan sencillo como ir a Ventana, buscar y activar el panel que nos falte. Por ahora, vamos a centrarnos en el panel de Canales.

En el panel Canales veremos que nuestra imagen se divide en cuatro canales. Está la imagen RGB por un lado, y los tres canales que la componen: rojo verde y azul. Si vamos pulsando sobre alguno de estos tres canales en el panel, veremos como nuestra imagen va variando. Sobre todo lo notaremos en que, según que canal tengamos seleccionado, la imagen en blanco y negro que aparece está más o menos contrastada.

diferencias entre los tres canales de color

El secreto aquí es elegir un canal que esté lo suficientemente contrastado como para que tengamos un efecto duotono perceptible, pero no tanto como para que perdamos detalles de la imagen. La elección del canal más adecuado va a depender del tipo de imagen, por lo que no hay una regla clara. Tendremos que confiar en nuestro instinto, o ir probando para ver cual nos da mejor resultado. A continuación, una vez tengamos un canal elegido, hay que cargar este canal como selección. Esto se hace clicando sobre el canal mientras pulsamos la tecla Control de nuestro teclado o, con el canal seleccionado, clicar en el icono que tiene forma de circulo con linea discontinua.

Opción de cargar canal como selección en photoshop
Una vez hayamos hecho esto, vamos al panel de Capas, y hacemos clic sobre Ajustes de capa de color (icono circular con medio relleno en diagonal), y en el menú que nos va a aparecer, elegimos Color uniforme.

seleccion de color uniforme en opciones de capa de photoshop

Veremos como se nos abre una nueva capa en el panel, y un selector de color. Este color que vamos a aplicar será el que van a tener los highlights o zonas iluminadas de la imagen.

elección de primer color en duotono en zonas iluminadas

Podemos ir probando colores hasta ver cual nos gusta más. O si ya teníamos los colores elegidos de antemano, directamente aplicarlos. Nosotros vamos a aplicar un tono verde, que nos quedaría así:

resultado al aplicar el primer color del efecto duotono en imagen

Una vez tengamos nuestro color en el selector, solo habrá que pulsar en Ok para aplicarlo. Ya tenemos la mitad del trabajo hecho.

Paso 2: Aplicar segundo color del duotono a las zonas en sombra

A continuación vamos a escoger y aplicar en las zonas en sombra y más oscuras el segundo color de nuestro duotono. Para ello, nos vamos al panel Capas, y seleccionamos la capa donde está nuestra imagen original. Con esta capa seleccionada, volvemos a abrir los Ajustes de capa de color y clicar sobre la opción de Color uniforme. De nuevo se nos abrirá un selector de color, y si nos fijamos en el panel Capas, veremos que se ha creado una nueva capa.

elección de segundo color en duotono en zonas oscuras

Ahora tendremos que seleccionar el color que queremos aplicar en las zonas más oscuras y en sombra de nuestra imagen. En esta ocasión, voy a usar una tonalidad azul oscuro. Y este es nuestro resultado.

resultado final de imagen duotono en verde y azul

Lo bueno de este método es que, si no nos gustan los colores elegidos en el duotono, los podemos cambiar de forma sencilla, simplemente haciendo doble clic en la capa de cada color. Se nos abrirá de nuevo el selector de color y podremos cambiarlo. Por ejemplo, voy a pasar de la imagen duotono verde y azul que tenía, a otra amarilla y marrón. Cambiamos los colores, y voilá.

resultado alternativo de imagen duotono en amarillo y marrón

Y con esto ya tendríamos nuestra imagen lista para guardar, y preparada por si en un futuro queremos cambiarle los colores para darle un aspecto completamente diferente, o para ajustarla a una nueva paleta de colores que estemos usando en nuestro proyecto.

Como hemos dicho antes, es muy importante elegir un canal entre los tres disponibles que nos de un contraste suficiente, pero sin pasarnos. Si no nos quedamos satisfechos con el resultado, podemos volver atrás y elegir otro canal, e ir haciendo pruebas. Después de varios intentos, seremos capaces de adivinar cual es el canal más idóneo para los resultados que queremos obtener.

El uso de este efecto duotono es muy adecuado si queremos amoldar nuestras imágenes a, por ejemplo, la paleta de colores que estemos usando en una web. O si queremos poner un texto sobre una imagen, pero no logramos obtener un contraste suficiente para que dicho texto sea legible. Estas son dos de las muchas variables en las que podemos usar este efecto.

Esperemos que os haya servido de ayuda este mini-tutorial que os hemos querido traer hoy. Como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras dudas, sugerencias y experiencias sobre el efecto duotono, y en que proyectos habéis echo uso de él.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *