Cómo crear una imagen de duotono en Photoshop

Publicado: 2023-02-12

Mientras trabaja en el diseño de su próximo sitio, hay un tipo común de fondo que puede considerar: la fotografía. Si bien esta tendencia no es necesariamente única, sin duda es efectiva para establecer una escena y sumergir al usuario en el entorno de un sitio. Si está buscando una forma de usar la fotografía pero con un poco más de dinamismo, siempre puede probar una imagen de duotono: ¡ambos son interesantes de ver y fáciles de crear!

Antes de aprender a crear una imagen de duotono en Photoshop, profundicemos un poco más en esta tendencia de diseño.

¿Qué es una imagen de duotono?

En esencia, un duotono es simplemente una imagen compuesta de dos colores. Probablemente los hayas visto antes en campañas como 2015 Year in Review de Spotify.

Esto se está volviendo cada vez más popular, especialmente entre las agencias y las marcas más pequeñas. Los efectos de duotono son una excelente manera de incorporar y reforzar su marca y sus colores en todo su trabajo y su sitio web. Para darle un poco de inspiración, LPK muestra un maravilloso ejemplo de cómo usar esto.

Si está interesado en probar esta técnica, querrá ser estratégico en la foto que elija manipular. Aunque técnicamente puedes aplicar el efecto duotono a cualquier foto, se verá mejor en una imagen con mucho contraste. También recomendaría usar una imagen con un fondo sólido, preferiblemente blanco, ¡eso hace que sea más fácil establecer el color base que está buscando!

Si tiene acceso a un estudio y está interesado en tomar fotos personalizadas, tenga en cuenta estos consejos mientras prepara la escena. Si está trabajando con contenido existente, siempre puede manipular la foto primero para aumentar el contraste o cambiar el color de fondo.

Para el resto del tutorial, cubriremos dos métodos que puede usar para crear manualmente una imagen de duotono en Photoshop. La primera es la opción integrada de Photoshop (funciona bien, pero no es mi favorita) y la segunda usa un mapa de degradado (mi método preferido, ¡a menos que esté usando nuestra acción gratuita, por supuesto!).

Una vez que esté listo, cargue su imagen en Photoshop y cree una capa duplicada de la foto. Al editar el duplicado (en lugar de la capa inferior original), siempre tendrá una versión sin editar de la foto a la que recurrir.

¿Listo para crear una imagen de duotono en Photoshop? Empecemos.

Cómo usar la opción predeterminada de duotono de Photoshop

1. Convierta la imagen a escala de grises de 8 bits

Para usar la opción de duotono que está integrada en Photoshop, primero deberá convertir la imagen a una escala de grises de 8 bits. Selecciona la copia de tu foto y dirígete a Imagen > Modo > Escala de grises. Verifique también que la opción 8 bits/Canal esté seleccionada en el mismo menú Modo.

diseño por volante duotono cómo escala de grises

Cuando seleccione esta opción, aparecerán un par de notificaciones. El primero pregunta si desea aplanar la imagen o fusionar las capas antes de cambiar el modo de color. Si tiene muchas capas, el cambio de color podría afectar la forma en que se muestran las cosas (en cuyo caso, acoplar podría ser útil para conservar su trabajo), pero en este caso, no se preocupe por acoplar la imagen. Si desea la copia original, no combine sus capas.

diseño por volante duotono cómo fusionar advertencia

La siguiente notificación le pregunta si desea descartar la información de color. Tendrá que hacer esto para usar la opción de duotono predeterminada, así que continúe y haga clic en "Descartar".

diseño por volante duotono cómo advertencia en blanco y negro

2. Convierte la imagen a duotono

Una vez que su modo de imagen esté en una escala de grises de 8 bits, puede usar la opción de duotono predeterminada en Photoshop. Seleccione la capa y luego vaya a Imagen > Modo > Duotono.

diseño por volante duotono cómo seleccionar duotono

3. Selecciona tus colores

Una vez que la imagen está en modo duotono, puede comenzar a seleccionar sus colores. Lo bueno es que tan pronto como seleccione un nuevo color, la imagen se actualizará para que pueda ver cómo se ven las cosas (siempre que la casilla de verificación Vista previa esté marcada). Más allá de eso, el proceso comienza a volverse un poco torpe. Técnicamente, puede ajustar las curvas para cada color, pero la imagen no se actualiza en tiempo real, lo que dificulta un poco ver lo que está sucediendo y genera muchas idas y venidas. Juega con los colores y la configuración hasta que encuentres el efecto deseado.

diseño por volante duotono cómo seleccionar color azul púrpura

Sugeriría jugar con estas configuraciones por un minuto, solo para familiarizarse con ellas, pero una vez que esté listo, pasemos al segundo método para crear duotonos en Photoshop.

Cómo usar un mapa de degradado para crear un duotono

1. Aplicar un mapa de degradado

Para este método, no tendrá que preocuparse por alterar la imagen o elegir un modo de color específico. Por supuesto, si desea editar algo, adelante, pero la foto funcionará bien tal como está. Cuando esté listo, seleccione la copia de su imagen y vaya a Imagen > Ajustes > Mapa de degradado.

diseño por volante duotono cómo degradar la selección del mapa

Dependiendo de su configuración predeterminada, esta configuración superpondrá la imagen con un degradado para un mapeo en escala de grises. Si el valor predeterminado no es blanco y negro, haga clic en el menú desplegable y seleccione esa opción. Si siguió el primer método, verá que ya estamos a medio camino de crear nuestro duotono.

diseño por volante duotono cómo degradar blanco y negro

Consejo profesional: ¿Ves la casilla de verificación junto a Invertir? Al hacer clic en eso, invertirá los colores en la foto. Para este tutorial, lo dejaremos sin marcar, pero si queremos que el fondo sea más oscuro que el sujeto, esa opción puede ayudarlo a cambiar las cosas.

2. Elige tus colores

Al hacer clic en la barra de degradado, abrirá el Editor de degradado en una nueva ventana. Aquí puede seleccionar sus colores y ajustar cómo se muestran sobre la imagen.

diseño por volante duotono cómo degradar editar color seleccionar

Como puede ver, las imágenes finales se ven un poco diferentes entre sí, pero ambas resultan en maravillosos duotonos. Prefiero usar un Mapa de degradado simplemente porque es un poco más fácil controlar la intensidad de los colores y dónde van los tonos claros y oscuros, pero ambos métodos son fáciles de usar.

Cómo usar el duotóner

Instalar la acción

Una vez que haya descargado la acción, haga doble clic en el archivo para instalarlo. Abra la imagen que le gustaría usar en Photoshop y luego abra la ventana Acciones.

Para navegar a la ventana Acciones , seleccione Ventana > Acciones o mantenga presionadas las teclas Mayús + F9 .

ventana de acción de duotono de photoshop

Una vez que haya abierto la ventana Acciones, seleccione la capa de imagen a la que desea aplicar el efecto de duotono.

Seleccionar y reproducir la acción

Haga clic en el menú desplegable de la carpeta "Flywheel - Glitch-a-tron". Ahora, seleccione "Glitch-a-tron - Seleccione y presione reproducir" y presione el botón triangular de reproducción en la parte inferior de la ventana.

juego de acción de photoshop duotono

Una vez que presiones reproducir, verás un montón de capas, ¡cada una con un esquema de color de duotono diferente! Para cambiar, todo lo que tiene que hacer es hacer visible la capa que desea.

opciones de acción de photoshop duotono

Nota: si tiene más de una capa de duotono visible, los colores se mezclarán y es posible que comience a perder algunos de los detalles de su foto. Para mantener las cosas nítidas, asegúrese de tener solo una capa visible a la vez (¡o siéntase libre de experimentar superponiendo los duotonos para obtener un efecto totalmente diferente!).

Bonificación: restablezca su imagen en un instante

En caso de que desee retroceder, la acción crea automáticamente una captura de pantalla que le permite volver a su imagen antes de que se aplicara la acción.

Navegue a la ventana Historial seleccionando Ventana > Historial . Desplácese hasta la parte superior y haga clic en "Instantánea". ¡Esto restablece todo para que estés listo!

instantánea de acción de duotono de photoshop

¿Qué opinas de los duotonos? ¿Crees que son una fuerte tendencia de diseño o prefieres las imágenes a todo color?

¿Quiere descubrir más recursos para construir y diseñar sitios increíbles con WordPress? Visite el Centro de recursos de WP Engine para ver nuestra amplia biblioteca de contenido educativo, ¡creado para usuarios de WordPress de todos los niveles de habilidad técnica!