Por @Alvy — 13 de Mayo de 2022

Code to Image Converter

Publicar código es tan fácil como utilizar una tipografía monoespaciada o usar la etiqueta <code>. También se podría hacer a mano, trabajando con cuidado los estilos, colores y tabulaciones. Pero si se necesita algo bonito para ilustrar en Code to Image Converter se puede conseguir en un instante.

Todo lo que hay que hacer es pegar el código en la ventana. El texto se colorea de forma automática según las instrucciones, variables, y valores. Y entonces basta activar o desactivar opciones, entre ellas:

  • Fondo, incluyendo degradados, colores planos o imágenes
  • Difuminado
  • Sombra
  • Modo oscuro
  • Números de línea
  • Tipografía (tamaño, separación)
  • Lenguaje (Python, C, JavaScript, PHP…)
  • Formato de imagen (JPEG, PNG, SVG)
  • Escala
  • Marca de agua de codetoimg.com, como cortesía

El resultado se exporta con un botón y queda listo para usar. Más rápido y fácil, imposible.

Actualización – Diego nos sugiere también Chalk.ist, muy elegante y sencillo también.

Chalk.ist

Relacionado:

Compartir en Flipboard Tuitear

PUBLICIDAD



Por @Alvy — 10 de Mayo de 2022

Yep, I created the new AVATAR font – Swell Type

Josh Roshell se dedica al envidiable diseño de tipografías; comerciales, divertidas y también para películas. Uno de los últimos encargos que ha recibido es el proyecto de modernizar la apariencia de la tipografía para Avatar 2.

¿Por qué cambiar esa tipografía original? Porque como recordarán los más antiguos del lugar, en la película de James Cameron se usaba Papyrus, una tipografía de los 80 que no se suele calificar como bonita. El otro sitio en el que se utiliza es en el merchandising de… (redoble de tambor) los productos de Shakira, la cantante.

Ryan Gosling plasmó con maestría la sensación que se le quedó a mucha gente al ver la Papyrus en el título de Avatar, en pósteres promocionales y hasta en los subtítulos de los Na’vi. Es un sketch sarcástico de Saturday Night Live que nos recordó hace poco un lector; algo que se nos pasó por alto en su día y no lo publicamos por aquí.

Algunos dirán, no sin razón: al menos no era Cómic Sans.

En la página de Roshell cuenta cómo recibió el encargo, le hicieron llegar algunas muestras y diseñó todo el alfabeto. Lo hizo puliendo las letras que le enviaron y añadiendo pequeñas marcas para que parecieran «antiguas»… pero no al estilo egipcio/bíblico de Papyrus. Luego completó las variantes de todas las letras y lo adaptó a varios grosores (fina, normal…), añadiendo también las versalitas (mayúsculas pequeñas). Y el trabajo quedó terminado.

Lo veremos en diciembre, o quizá mucho antes, porque el primer avance ya está dando vueltas por ahí. Mientras tanto, también puedes recordar las risas del tráiler honesto de la original.

Relacionado:

Compartir en Flipboard Tuitear

PUBLICIDAD



Por @Alvy — 29 de Abril de 2022

HUDS+GUIS

HUDS+GUIS es una estupenda recopilación «explicada» de interfaces de dispositivos que se han visto pasar por películas y series de televisión, tanto de ficción como relativamente «reales». De cada serie/peli hay un artículo completo con explicaciones tan detalladas como interesantes; además de eso todo está aderezado con grandes dosis de fotogramas y GIFs animados.

HUDS hace referencia a los visores (Head-Up display) y GUIS a las interfaces gráficas (Graphical User Interface). A Jono Yuen, autor del trabajo, le gusta llamarlos FUI, donde la F puede significar Futurista, Fantástica o Ficción. De hecho es el título de su libro: FUI: Cómo diseñar interfaces de usuario para películas y juegos. (Fuerte candidato a LaPila™, sobre todo porque está en digital y el «precio justo» lo decides tú).

The Expanse GUI

Para entender las diferencias entre HUDS y GUIS: entre los primeros estarían lo que ven Iron-Man o el Mandaloriano a través del visor de su casco; en el segundo las conversaciones por mensajería de los personajes de The Social Dilemma. Entre las películas y series se incluyen, entre otras:

… todo ello perfectamente clasificado y explicado. Las explicaciones son bastante detalladas, con enlaces, menciones a sus creadores y cuestiones relevantes a tener en cuenta. Por poner algunos ejemplos: en el universo de Star Wars hay que diseñar no sólo las interfaces y visualizaciones sino también los lenguajes, porque queda un poco raro (como sucedía en la versión de 1977) que en «una galaxia muy, muy lejana» se use el alfabeto romano, o las medidas en segundos y metros. Al Mandaloriano, también de Star Wars, le ocurre otro tanto.

En otros casos es la temática la que marca el diseño, como en el caso de Aquaman, donde se supone que los dispositivos funcionan bajo el agua y son «adecuados para seres acuáticos», curvos y por lo general verde-azulados. En otros casos como en The Social Dilemma todo el trabajo es de visualización: cómo hacer que un Messenger se vea un poco distinto, o que los muros de Facebook o las cronologías de Twitter o Instagram tengan cierto atractivo y, la mayor de las veces, buena legibilidad.

(¡Gracias por la pista, Raf!)

Relacionado:

Compartir en Flipboard Tuitear

PUBLICIDAD



Por @Alvy — 28 de Abril de 2022

Mano con esfera reflectante

¿Qué sucede cuando se le pide a una inteligencia artificial que recree la famosa Mano con esfera reflectante de M.C. Escher pero desde otra perspectiva? Alguien llamado DanielBLN se ofreció a alimentar a Dalle•E 2, la IA que genera imágenes artísticas a partir de textos con los datos adecuados de cualquier cuadro o fotografía para comprobarlo.

La idea básica consiste en pedir un uncrop, una función que produciría algo así como un «des-recortado» de una imagen, de modo que se viera qué hay detrás, como moviendo la «cámara» hacia atrás. Pero esto no son fotografías reales, ni cuadros grandes recortados, de modo que la IA tiene que imaginar algo que encaje, que se corresponda con la descripción y además hacerlo en el mismo estilo que la imagen con la que se alimenta.

Mano con esfera reflectante

El resultado es «bastante asombroso», en palabras del propio DanielBLN, que anda que no habrá probado variantes. Lo más interesantes es que con la imagen resultante se puede volver a pedir lo mismo una y otra vez, alejando la cámara más y más, lo que ya produce un efecto recurrente bastante alucinante, a medio camino entre un juego visual escheresco y un efecto Escher-ception (como en la película Inception).

Las meninas / Velázquez + Dall-E

Las meninas / VelázquezTras disfrutar estos ejemplos a los que llegé a través de un tuit de Juan Alonso se nos ocurrió que sería interesante ver qué hacía Dall•E 2 con Las meninas, de Velázquez, al intentar «mover la cámara hacia atrás». Así que el mismo Juan se lo pidió a DanielBLN en el foro, quien alimentó a la bestia con la versión en alta definición del cuadro. Es sabido que la singularidad de esta obra es que como el propio pintor aparece en el cuadro no está del todo claro si la escena está encuadrada desde el punto de vista de un espejo o se trata de una habitación más grande y de un montaje con modelos… por no hablar de qué misterios encierran algunos personajes. Hay incluso libros y documentales al respecto, y también sobre el posible uso de una cámara oscura como base para su creación, como muy probablemente hacía también Vermeer.

El resultado es tremendamente curioso, porque Dall•E 2 –siguiendo evidentemente los datos con que ha sido alimentado durante su aprendizaje, es decir, material disponible en la Web– lleva la escena a una habitación más grande, lo cual probablemente es correcto, según los planos del Palacio Real. Aunque, por otro lado, no se deja ver el espejo por ningún lado, y la zona oscura inferior desde luego no parece un marco de espejo.

Además de eso, aparecen nuevos detalles y personajes un tanto peculiares: una mesa, lo que parece un pintor dibujando otro cuadro (??!), algunos objetos tirados por el suelo y un par de mujeres a izquierda y derecha sentadas, con largos vestidos azules, una de ellas con una paleta de pintura en la mano. A mi me recuerdan a las mujeres de los cuadros de Vermeer. Y dado que muchas de las teorías sobre Las meninas versan sobre las técnicas de ambos pintores, y hay cientos de imágenes en la web, quizá eso haya confundido a Dall•E 2 durante su aprendizaje. O al menos lo suficiente como para tramar otra teoría respecto a Las meninas.

Compartir en Flipboard Tuitear

PUBLICIDAD




PUBLICIDAD

Desarrolla más rápido con Xojo