Arte de cómic retro: uso de Ben Day Dots en diseño web

Publicado: 2019-07-12

Como diseñadores web, siempre estamos buscando ideas nuevas y creativas para agregar a nuestros sitios web. Afortunadamente, la inspiración no es difícil de encontrar. Por ejemplo, el arte de los cómics retro siempre vuelve. A veces es como tipografía, otras como filtros de fotos. Últimamente, están apareciendo texturas e ilustraciones con puntos de Ben Day en muchos lugares. ¿Quieres probarlos tú mismo?

En este artículo explicaremos el origen de los puntos de Ben Day y cómo hacerlos tú mismo. Además, tenemos algunos ejemplos de cómo utilizar esta técnica visual en el diseño web.

Ben Day Dots y Half-Tone Dots

Los términos "puntos de Ben Day" y "arte de cómic retro" tienden a usarse indistintamente. En realidad, los puntos de Ben Day fueron lo primero. Benjamin Henry Day Jr. los creó en 1879 para reducir los costos de impresión en color. Son una técnica que coloca puntos igualmente distantes en una cuadrícula. Los puntos rojos impresos sobre blanco hacen que los puntos rosados, azules y amarillos sean verdes.

Los puntos de Ben Day se inspiraron en los puntos de medio tono que se utilizaron para la impresión litográfica y fotográfica en blanco y negro. Ambos estilos de puntos están dispuestos en una cuadrícula cuadrada, pero los puntos de medio tono son de diferentes tamaños, mientras que los puntos de Ben Day son todos iguales.

Ben Day Dots, cómics y Roy Lichtenstein

En la década de 1930, los cómics entraron en escena a lo grande y los puntos de Ben Day fueron la técnica de impresión preferida. Los puntos de Ben Day no eran exactamente una obra de arte hasta que Roy Lichtenstein se inspiró en su singularidad genérica en la década de 1960. Fue el trabajo de Roy Lichtenstein con el arte de los cómics lo que llevó los puntos de Ben Day al centro de atención. Lo que hizo Lichtenstein fue copiar pequeñas secciones de páginas de cómics pulp y convertirlas en obras maestras a gran escala.

Aunque Roy Lichtenstein usó puntos que se parecían a los puntos de Ben Day, eran un poco diferentes. Los historiadores del arte le dirán que es más adecuado llamarlos "puntos de Lichtenstein". La principal diferencia es que los puntos de Ben Day eran pequeños y estaban en una cuadrícula cuadrada, mientras que los puntos de Lichtenstein estaban en una cuadrícula diagonal desplazada y eran considerablemente más grandes.

Crédito de la imagen Radu Bercan / shutterstock.com

El auge del arte del cómic retro

El arte de Roy Lichtenstein se ha convertido en sinónimo del arte de los cómics retro. Muchos artistas han copiado la técnica de Lichtenstein. Muchos diseñadores han utilizado puntos de cómics en sus creaciones para esquemas de marca y materiales de marketing. Ahora también puede agregar puntos de Ben Day o puntos de Lichtenstein a sus sitios web.

Desplácese para aprender cómo hacer sus propias creaciones de puntos de Ben Day. Los diseños finales que logrará cubrirán una variedad de técnicas; puntos de semitono, puntos de Ben Day y puntos de Lichtenstein. Con todo, todos son diseños de estilo retro de cómic.

Hagámoslo.

Cómo crear arte de cómic retro con Photoshop

Los puntos de medio tono son tan comunes que Photoshop tiene un filtro para ellos y funciona con cualquier imagen. Lo que hace este filtro es convertir los colores de la imagen en puntos. La distribución de ángulos de los puntos está controlada por los canales de color. Cuando aplica el filtro, su imagen ahora está formada por puntos cian, magenta, amarillo y negro. Si aplica el filtro de medio tono a un color puro como rojo (# ff0000), verde (# 00ff00) o azul (# 0000ff), el filtro no funcionará porque no tendrá colores de los que separarse.

Para crear puntos de Ben Day y puntos de Lichtenstein adecuados, necesita Adobe Illustrator. Haga clic aquí para saltar adelante.

Cómo hacer que una foto se vea como el arte de un cómic retro en puntos de medio tono con Photoshop

1. Elija la imagen que desea convertir en puntos estilo cómic.

Elegí a este chico de aspecto divertido del sitio de fotografías gratuitas, Gratisography. Haga clic aquí, si desea utilizar la misma imagen para seguir. Abra la imagen en Photoshop y céntrela en su lienzo.

Captura de pantalla del hombre divertido listo para convertirse en una textura de estilo cómic

2. Duplique la capa dos veces y oculte la primera.

Para duplicar, mientras la primera capa está seleccionada, haga clic con el botón derecho y elija 'duplicar capa' o haga clic en Comando + J en Mac y Ctrl + J en PC. Cámbieles el nombre para no perder el rastro de cada uno. Ajuste la opción de fusión de la capa superior a 'luz intensa' y baje la opacidad a alrededor del 40%. Los colores cambiarán drásticamente, esto ayudará a obtener el aspecto granulado de los puntos de medio tono.

Captura de pantalla del hombre divertido que se convierte en un cómic con Photoshop

3. Agrupe las dos capas superiores y conviértalas en un objeto inteligente.

Captura de pantalla de las acciones de Photoshop para convertir una imagen en un cómic

4. Aplique el filtro de puntos de semitono al objeto inteligente.

En la ventana emergente de configuración de medios tonos de color, elija el tamaño máximo de píxel en 13 y los canales en diferentes grados. Puedes jugar con estos para ver diferentes efectos.

captura de pantalla de una acción de Photoshop de un hombre convertido en un cómic

Captura de pantalla del filtro de medios tonos de color aplicado a la imagen del hombre divertido

5. Duplique la capa inferior y muévala hacia arriba.

Aplique el filtro 'Buscar bordes' y ajuste los niveles para que vea mejor los contornos. Para lograr esto, mueva el triángulo negro hacia la derecha y el blanco hacia la izquierda.

Captura de pantalla de la acción de Photoshop del filtro de búsqueda de bordes

captura de pantalla del panel de ajustes

captura de pantalla de un ajuste de filtro de Photoshop

6. Utilice los ajustes para convertir la capa en blanco y negro.

Establezca la opacidad de la capa de ajuste al 30%. Finalmente, configure las opciones de capas de la capa 'buscar bordes' en 'superposición'.

captura de pantalla de una capa de ajuste de Photoshop

captura de pantalla de las capas de ajuste en Photoshop

¡El diseño terminado!

Cómo crear un estilo de cómic retro con una fotografía en Photoshop

Cómo crear un fondo de arte de cómic retro con Photoshop

1. Busque un fondo de color que tenga un bonito diseño o degradado.

Abra la imagen en su panel de control de Photoshop y céntrela en la pantalla.

captura de pantalla de fondo colorido en Photoshop

2. Desbloquee la capa de fondo, duplíquela y oculte la de abajo.

Aplica el filtro de puntos de medio tono a la capa superior. Ajuste los parámetros en la ventana emergente del filtro de puntos de medio tono para diferentes efectos

Captura de pantalla del filtro de medios tonos de color en Photoshop

3. ¡El diseño terminado!

Fondo de puntos de semitono hecho con Photoshop

Cómo crear un fondo de arte de cómic retro con Illustrator

Como mencioné antes, los puntos de medio tono son de diferentes tamaños para recrear el contraste en una imagen. El filtro de Photoshop que usamos anteriormente es perfecto para ese efecto. Pero si desea crear puntos de igual tamaño como los puntos de Ben-Day o los puntos de Lichtenstein, deberá utilizar Adobe Illustrator y el creador de patrones integrado. Como mencioné anteriormente, los puntos de Ben Day están en una cuadrícula cuadrada y los puntos de Lichtenstein están en una cuadrícula diagonal desplazada. Ambos se pueden lograr con el creador de patrones en Illustrator.

Cómo crear un patrón de puntos Ben-Day con Illustrator

1. Cree un nuevo proyecto en Illustrator.

El tamaño realmente no importa. Usamos 600 x 350 px.

Captura de pantalla de la nueva configuración del proyecto en Adobe Illustrator

2. Seleccione la herramienta Rectángulo redondeado.

Haga clic una vez en la mesa de trabajo y establezca el tamaño de su forma. Hágalo de 15px por 15px con un radio de esquina de 7.5 ox. Cambie el color del círculo a un relleno azul y sin trazo.

captura de pantalla de la herramienta Rectángulo redondeado en PHotoshop

3. Haga clic en 'objeto' en la barra de menú superior y seleccione 'patrón' y luego 'hacer'.

Captura de pantalla del creador de patrones en Photoshop

4. Ajuste las preferencias para que los puntos estén en una cuadrícula cuadrada.

Estas son las preferencias que debe elegir:

  • Seleccione el tipo de mosaico para cuadrícula
  • Verifique el tamaño del azulejo al arte
  • Establezca el espaciado H y el espaciado V en 15 px por 15 px
  • Seleccione Copias hasta 9 x 9

Cuando vea el patrón como en la imagen de abajo, haga clic en Listo. Esto guardará automáticamente el patrón en el panel Muestras.

Captura de pantalla de un patrón de Ben Day en Photoshop

Cómo crear un patrón de puntos de Lichtenstein con Illustrator

Este patrón sigue los mismos pasos que el anterior y cambia solo cuando llega el momento de ajustar las preferencias en el creador de patrones. Abra las preferencias de patrón de Ben-Day y presione 'Guardar una copia'. Nombra el nuevo patrón 'Lichtenstein Dots'. Cuando haga clic en Aceptar, se guardará como una copia en el panel de muestras. Cierre el patrón de puntos de Ben-Day. De vuelta en el panel Muestras, abra el patrón de puntos de Lichtenstein. Verá una ventana emergente con el nombre del patrón cuando pase el mouse sobre él. En las preferencias, cambie solo el Tipo de diseño a 'Bloque por fila' y haga clic en Listo.

captura de pantalla de guardar un patrón en Photoshop

Captura de pantalla del creador de patrones en Photoshop

captura de pantalla del creador de patrones en Photoshop

Cómo agregar patrones de arte de cómic retro a formas

Ahora que ha creado sus propios patrones de cómic retro, puede aplicarlos a cualquier forma que desee en cualquier momento. Primero, debe guardar las muestras de patrones para poder agregarlas a cualquier proyecto futuro.

1. En el panel Muestras, seleccione los dos nuevos patrones que creamos.

Haga clic en el icono de la biblioteca de muestras y seleccione "Guardar muestras". Nombra las nuevas muestras 'Patrón de cómic retro' y haz clic en Aceptar.

captura de pantalla del panel de muestras en Photoshop

2. Cuando cree un nuevo proyecto y desee utilizar estos patrones, vaya al panel Muestras.

No verá nuestras nuevas muestras allí, por lo que debe importarlas. Una vez más, haga clic en el icono de la biblioteca de Muestras y desplácese hacia abajo hasta 'definido por el usuario' y luego el 'Patrón de cómic retro'. Se abrirá una nueva ventana con las muestras y los colores regulares con los patrones de cómic incluidos. Ahora están listos para usar en cualquier forma que desee.

captura de pantalla de la biblioteca de muestras en Photoshop

3. Crea una nueva forma y rellénala con uno de los patrones.

El tamaño de los puntos dependerá del tamaño de la forma que cree. El tamaño máximo de la forma está controlado por el tamaño de la mesa de trabajo.

Cuanto más pequeña sea la forma, más grandes serán los puntos y viceversa. Si usa una forma pequeña y siente que los puntos son demasiado grandes, haga clic derecho en el patrón dentro de la forma y seleccione 'transformar' y luego 'escalar'. Para hacer que los puntos sean muy pequeños, elija los siguientes parámetros.

  • Uniforme: 10%
  • En Opciones: marque Transformar patrones

Pruebe diferentes parámetros para la opción 'uniforme' para obtener diferentes tamaños de puntos.

captura de pantalla de una forma con un patrón en Photoshop

captura de pantalla de un patrón dentro de una forma en Photoshop

4. Para crear una forma de estrella con un estilo de cómic retro, cree un nuevo proyecto de 1000 px por 1000 px.

En el panel de color, haga clic en negro para el trazo y el patrón de Lichtenstein para el relleno. Seleccione la forma de estrella y haga clic en el lienzo para que aparezca.

Captura de pantalla del patrón de puntos del cómic en una estrella

Ideas para usar el arte del cómic retro en el diseño web

La tendencia del arte del cómic parece ir en aumento. Por supuesto, no todas las marcas se beneficiarán de este estilo de creatividad. Para las marcas divertidas y amantes del color, los puntos de Ben Day y los gráficos inspirados en Lichtenstein son perfectos para un soplo de aire fresco. El mejor uso para un patrón de puntos de cómic es como fondo, ya sea sobre otro color o sin él. Del mismo modo, intente usar bocadillos grandes como separadores o exclamaciones de estilo cómic con su contenido. Puede crear las suyas propias con los tutoriales anteriores u obtener algunas imágenes ya diseñadas de Freepik.

Usando el arte de cómic retro con Divi

Captura de pantalla de un fondo de medio tono con Divi

captura de pantalla de un sitio web divi con un aspecto de cómic retro

Los siguientes diseños se lograron con diseños de cómics de Freepik. Como puede ver, los diseñadores se tomaron algunas libertades en la forma en que diseñaron los tamaños de los puntos. Sin embargo, todavía encarnan perfectamente el estilo del cómic retro a su manera.

Diseño de burbujas de discurso de cómic con Divi

Usar gráficos de cómics con divi builder

Conclusión

Como ves, las posibilidades con el diseño de cómics retro son bastante variadas. Desde estilos clásicos hasta versiones más modernas, puedes hacer prácticamente cualquier cosa. No importa si crea los patrones usted mismo o obtiene algunos gráficos en línea, ¡puede crear cosas bastante sorprendentes con el arte de cómic retro y Divi!