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


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 retro del cómic siempre regresa. A veces es como tipografía, otras como filtros de fotos. Últimamente, las texturas e ilustraciones con puntos de Ben Day están apareciendo en muchos lugares. ¿Quieres probarlos por ti mismo?

En este artículo explicaremos el origen de los puntos de Ben Day y cómo hacerlos usted mismo. Además, tenemos algunos ejemplos de cómo usar 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 retro del cómic" tienden a usarse indistintamente. En realidad, los puntos de Ben Day fueron primero. Benjamin Henry Day Jr. los creó en 1879, para reducir los costos de la 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 hagan verde.

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 fueron exactamente un arte fino 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 del cómic lo que hizo que los puntos de Ben Day fueran el centro de atención. Lo que hizo Lichtenstein fue copiar pequeñas secciones de páginas de cómics y convertirlas en obras maestras a gran escala.

Aunque Roy Lichtenstein usaba puntos que se parecían a los puntos de Ben Day, eran un poco diferentes. Los historiadores del arte le dirán que se les llama más adecuadamente "Lichtenstein Dots". 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 considerablemente más grandes.

crédito de imagen Radu Bercan / shutterstock.com

El surgimiento del arte retro del cómic

El arte de Roy Lichtenstein se ha convertido en sinónimo de cómic 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 puede agregar puntos Ben Day o puntos Lichtenstein a sus sitios web también.

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

Hagámoslo.

Cómo crear arte retro de cómics 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 del ángulo de los puntos está controlada por los canales de color. Cuando aplica el filtro, su imagen ahora está compuesta de 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 para separar.

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 parezca arte retro de cómic en puntos de medio tono con Photoshop

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

Elegí a este tipo de aspecto gracioso del sitio de fotos gratis, Gratisography. Haga clic aquí, si desea utilizar la misma imagen para seguirla. 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 se selecciona la primera capa, haga clic con el botón derecho y elija "capa duplicada" 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 dura" y reduzca la opacidad a alrededor del 40%. Los colores cambiarán dramáticamente, esto ayudará a obtener el aspecto granulado de los puntos de medio tono.

Captura de pantalla de un hombre divertido convertido en un cómic con Photoshop

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

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

4. Aplique el filtro de puntos de medio tono al objeto inteligente.

En la ventana emergente Configuración de medios tonos de color, elija el tamaño máximo de píxeles en 13 y los canales en distintos 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 Color Halftone aplicado a la imagen de hombre divertido

5. Duplique la capa inferior y muévala hacia la parte superior.

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. Use los ajustes para convertir la capa en blanco y negro.

Establezca la opacidad de la capa de ajuste al 30%. Finalmente, establezca 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 capas de ajuste en Photoshop

El diseño terminado!

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

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

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

Abra la imagen en su panel 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 inferior.

Aplique 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 Color Halftone en Photoshop

3. El diseño terminado!

Fondo de puntos de semitono hecho con Photoshop

Cómo crear un fondo de arte retro de cómic 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 utilizamos 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á usar 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. Utilizamos 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. Hazlo de 15 px por 15 px con un radio de esquina de 7.5 bueyes. Cambia 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 a la cuadrícula
  • Compruebe el tamaño del azulejo al arte
  • Establezca el espaciado H y el espaciado V en 15 px por 15 px
  • Seleccione copias a 9 x 9

Cuando vea el patrón como 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 solo cambia cuando es el momento de ajustar las preferencias en el creador de patrones. Abra las preferencias del patrón Ben-Day y presione "Guardar una copia". Asigne un nombre al nuevo patrón "Puntos de Lichtenstein". 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ás una ventana emergente con el nombre del patrón cuando pases el cursor sobre él. En las preferencias, cambie solo el Tipo de diseño a "Ladrillo 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 retro de cómics a las 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 elija choose Guardar Muestras ". Asigne un nombre a las nuevas Muestras "Patrón de cómic retro" y haga 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 'Patrón de cómic retro'. Se abrirá una nueva ventana con las muestras y los colores regulares con los patrones de cómics incluidos. Ahora están listos para usar en cualquier forma que desee.

captura de pantalla de la biblioteca de muestras en Photoshop

3. Cree una nueva forma y llénela 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 es la forma, más grandes son 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 Patrones de transformación

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 a 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 de cómic en una estrella

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

La tendencia del arte del cómic parece estar 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 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 burbujas de discurso grandes como separadores o exclamaciones de estilo de cómic con su contenido. Puedes crear el tuyo con los tutoriales anteriores o obtener algunas imágenes ya diseñadas de Freepik.

Usando arte retro del cómic con Divi

Captura de pantalla de un fondo de medio tono con Divi

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

Los diseños a continuación se lograron con diseños de cómics de Freepik. Como puede ver, los diseñadores se tomaron algunas libertades en cómo diseñaron los tamaños de los puntos. Sin embargo, todavía encarnan perfectamente el estilo Retro Comic Book a su manera.

Diseño de burbuja de diálogo de cómic con Divi

Usar gráficos de cómics con el generador de divi

Conclusión

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