ZaRQuN – Diseño Gráfico, Web y Programación Blog sobre diseño grafico en general y curiosidades

Si te gusta trabajar con Photoshop pero echas de menos un acabado más tradicional, OIL SET puede ser justo lo que estabas buscando.

Se trata de un conjunto de brushes para Photoshop CC creados por Deharme, desarrollados durante bastante tiempo para conseguir pinceladas que recuerdan a la pintura al óleo tradicional.

El resultado es bastante interesante: los pinceles aportan textura, variación en la pincelada y esa sensación menos digital que muchas veces buscamos cuando hacemos ilustraciones o pinturas directamente en Photoshop.

Deharme comenta que lleva tiempo trabajando con este set y que los brushes están pensados precisamente para recrear una sensación de pintura tradicional.

Lo mejor es que puedes descargar el pack y probarlo directamente en Photoshop. Una herramienta sencilla que puede venir muy bien tanto para ilustración digital como para concept art, retoque creativo o simplemente para experimentar con nuevos estilos de pincel.

Si utilizas Photoshop habitualmente, siempre merece la pena tener una buena colección de brushes a mano. Nunca sabes cuándo uno de ellos puede darle ese toque diferente a un proyecto.

Descargar – Oil set

#Photoshop #PhotoshopBrushes #Brushes #OilSet #Deharme #DiseñoGráfico #IlustraciónDigital #DigitalPainting #PinturaDigital #AdobePhotoshop #RecursosDiseño #BrushesGratis

React sigue avanzando y ya tenemos React 19.3, una actualización que trae varias novedades bastante interesantes para quienes trabajan con interfaces web. No es simplemente una versión con correcciones: algunas de las nuevas APIs pueden cambiar bastante la forma de construir determinadas experiencias.

Una de las novedades más llamativas es View Transitions, que pasa de experimental a estable. React incorpora el componente <ViewTransition> para trabajar con las View Transitions API del navegador y crear animaciones cuando elementos aparecen, desaparecen, cambian de posición o se actualizan. Esto permite conseguir transiciones mucho más fluidas sin tener que montar soluciones bastante más complicadas por nuestra cuenta.

También llega Fragment Refs, otra función que puede resultar especialmente útil cuando trabajamos con componentes que generan varios elementos sin un contenedor común. Ahora podemos poner un ref directamente sobre un Fragment y controlar sus elementos hijos para tareas como eventos, foco, observadores de visibilidad, medición o scroll, sin tener que añadir un <div> únicamente para poder acceder al DOM.

Para quienes trabajan con SSR, React 19.3 incorpora browser(). Con use(browser()) podemos indicar que un componente necesita ejecutarse en el navegador y evitar que intente renderizarse en el servidor. Es una solución bastante más limpia para casos que dependen de APIs como localStorage, la zona horaria del dispositivo u otras funcionalidades que no existen durante el renderizado en servidor.

En el apartado de seguridad también hay novedades. React 19.3 añade soporte para Trusted Types, una tecnología del navegador pensada para ayudar a proteger las aplicaciones frente a ataques XSS basados en el DOM. React ahora puede trabajar con estos valores sin convertirlos automáticamente en simples cadenas de texto.

Y hay otra mejora interesante para quienes están metidos de lleno en React Server Components: ahora los Server Components pueden renderizar directamente un Context procedente de un módulo 'use client', sin tener que crear un componente Provider adicional solamente para pasar los datos.

En resumen, React 19.3 apuesta bastante por mejorar la integración entre React y las capacidades nativas del navegador, especialmente en animaciones, SSR, seguridad y control del DOM. Algunas de estas novedades son bastante específicas, pero View Transitions y Fragment Refs pueden tener un impacto directo en la forma en la que construimos interfaces modernas.

Si trabajas habitualmente con React, merece la pena echarle un vistazo a esta versión y, sobre todo, empezar a probar ViewTransition, porque puede simplificar bastante algunas animaciones que hasta ahora requerían bastante trabajo adicional.

#React #ReactJS #React19 #JavaScript #Frontend #DesarrolloWeb #Programacion #WebDevelopment #ViewTransitions #ServerComponents #UI #UX

Si te gustan los cómics, Marvel y esos dibujos que te hacen pensar «¿pero cómo narices puede alguien dibujar así?», tienes que conocer el trabajo de Iban Coello.

Su cuenta de Instagram, @coelloiban, es prácticamente una galería de arte para cualquier amante del cómic. Spider-Man, Venom, Wolverine, Hulk y otros personajes del universo Marvel aparecen constantemente entre bocetos, portadas, dibujos a tinta y trabajos terminados que demuestran por qué este dibujante español se ha hecho un hueco tan importante en la industria.

Iban Coello, nacido en Barcelona, ha trabajado para algunas de las editoriales más importantes del sector. Antes de consolidarse en Marvel pasó por Dark Horse y DC Comics, participando en proyectos relacionados con personajes y universos como Star Wars, Superboy, Batman Beyond o Injustice. Con el tiempo acabó dando el salto definitivo a Marvel, donde ha trabajado en títulos como Venom, Deadpool, Los 4 Fantásticos y Dark Ages. Actualmente es uno de los artistas españoles con mayor presencia en el mercado estadounidense.

Pero más allá de los nombres de las editoriales, lo realmente interesante de su trabajo es su estilo. Sus dibujos tienen una fuerza brutal, especialmente cuando le toca enfrentarse a personajes como Venom o Spider-Man. Hay mucho movimiento, expresividad y una sensación de energía que hace que incluso un simple boceto parezca estar a punto de saltar fuera del papel.

Y precisamente ahí está una de las cosas más interesantes para cualquier persona que dibuje o trabaje en diseño: echar un vistazo a su proceso. En Instagram no solo encontramos ilustraciones perfectamente acabadas, sino también dibujos a tinta, pruebas y trabajos realizados de forma más directa. Es una buena oportunidad para recordar que detrás de una portada espectacular hay muchas horas de práctica, técnica y, sobre todo, obsesión por mejorar.

Además, Coello ha reconocido en diferentes entrevistas la influencia que han tenido en su trabajo el manga, Dragon Ball y determinados videojuegos, algo que se puede intuir en la energía y dinamismo de muchas de sus composiciones.

Su Instagram es, en definitiva, uno de esos perfiles que merece la pena seguir si te gusta la ilustración. Da igual que seas fan de Marvel, que dibujes cómics o que simplemente disfrutes viendo cómo trabaja alguien con un talento fuera de lo normal. Aviso: probablemente después de visitar su perfil te entren unas ganas enormes de coger un lápiz… y también una pequeña crisis existencial al comparar tus dibujos con los suyos.

Por cierto, Iban Coello será uno de los artistas invitados a la San Diego Comic-Con Málaga 2026, que se celebrará del 1 al 4 de octubre. Una oportunidad perfecta para conocer en persona a uno de los grandes nombres españoles del cómic internacional.

#IbanCoello #Marvel #MarvelComics #Comic #Comics #Ilustracion #IlustracionDigital #Dibujo #SpiderMan #Venom #Wolverine #Diseño #Arte #ComicArt #Artista

Parece que después de años de espera, JPEG XL empieza a tener una oportunidad real en la web.

Mozilla ha anunciado su intención de activar JPEG XL por defecto en Firefox, con el objetivo de llevarlo a la versión 157, prevista para finales de septiembre. Y lo interesante es que Chromium también ha iniciado su propio proceso para activar el formato. Safari, por su parte, ya lleva tiempo soportándolo desde Safari 17.

¿Y por qué importa tanto?

Porque JPEG XL no es simplemente otro formato de imagen para sustituir al JPG. Está pensado para conseguir archivos más pequeños manteniendo una buena calidad, algo especialmente interesante para páginas web donde cada KB cuenta. Además, incorpora características como HDR, transparencia, animación y, sobre todo, renderizado progresivo: una imagen puede empezar a mostrarse mientras todavía se está descargando.

Para diseñadores y desarrolladores web esto puede ser bastante interesante. Imágenes más ligeras significan menos transferencia de datos, mejores tiempos de carga y, potencialmente, mejores Core Web Vitals.

También tiene una característica bastante curiosa: puede comprimir imágenes JPEG existentes de forma reversible. Es decir, puedes convertir un JPEG a JPEG XL y recuperar posteriormente el JPEG original sin pérdida. Esto lo convierte también en una opción interesante para almacenamiento y archivo.

El problema de JPEG XL hasta ahora no ha sido precisamente la tecnología, sino el soporte de los navegadores. Chrome eliminó inicialmente el soporte y durante años el formato quedó en una especie de limbo. En 2026 Chromium recuperó el decodificador detrás de una opción experimental y Firefox también ha ido avanzando con su implementación.

Ahora la situación empieza a cambiar de verdad.

Si Chrome y Firefox terminan activándolo por defecto, JPEG XL pasará de ser ese formato que conocían principalmente los aficionados a la imagen y los desarrolladores a convertirse en una alternativa real para las páginas web.

Eso sí: todavía no es momento de borrar WebP o AVIF de tus proyectos. La compatibilidad sigue evolucionando y, mientras no exista una cobertura amplia, lo sensato es utilizar JPEG XL como una opción adicional y mantener un formato alternativo para navegadores que no lo soporten.

Pero la noticia es buena. Después de mucho tiempo dando vueltas, JPEG XL parece que por fin puede tener aquello que necesitaba para despegar: que los principales navegadores lo activen de serie.

Y si eso ocurre, el viejo JPG podría empezar a tener, por fin, un sucesor de verdad.

https://hacks.mozilla.org/2026/08/intent-to-ship-jpeg-xl/

#JPEGXL #JPEG #DiseñoWeb #DesarrolloWeb #Programación #WebPerformance #Frontend #WebDesign #OptimizaciónWeb #Imágenes #Firefox #Chrome #Safari #CoreWebVitals

Google quiere que Gemini se convierta en algo más que un chatbot para estudiantes. En su propuesta Gemini for Students, la IA se utiliza como una especie de compañero de estudio capaz de trabajar directamente con tus propios apuntes, temarios y materiales de clase.

Una de las funciones más interesantes son los Study Notebooks, que permiten subir material de una asignatura y convertirlo en planes de estudio, resúmenes, cuestionarios personalizados o herramientas para preparar un examen. También puedes pedirle que te explique un problema paso a paso, revise tus cálculos o te dé feedback sobre un trabajo.

Y aquí viene la parte llamativa: Google ofrece un año gratuito de Google AI Pro para estudiantes que cumplan los requisitos. El plan incluye límites de uso 4 veces superiores en Gemini, 5 TB de almacenamiento, Gemini Spark y acceso a Gemini Omni durante un año.

Para quienes estudian diseño, programación o cualquier disciplina técnica puede resultar especialmente útil. Puedes trabajar con documentación, pedir explicaciones de conceptos complicados, generar material de estudio o utilizar las capacidades visuales de Gemini para entender mejor determinados contenidos.

En definitiva, si eres estudiante y puedes acceder a la promoción, es una de esas ofertas de IA que merece la pena probar antes de que se acabe.

Ver Gemini para estudiantes

Tags

#Gemini #GoogleGemini #GoogleAI #InteligenciaArtificial #IA #Estudiantes #Educacion #DiseñoGrafico #Programacion #Tecnologia #AI #Productividad #GoogleAIPro

Si te gustan las interfaces limpias, ordenadas y con ese aspecto de «todo está en su sitio», esta skill para Cursor te puede interesar bastante.

Scandinavian Design sirve para aplicar automáticamente un sistema visual inspirado en el diseño escandinavo a un proyecto web. La idea es sencilla: quitar ruido visual y conseguir una interfaz mucho más limpia, con una base en blanco y negro, tipografías sans-serif, espacios generosos y un uso más cuidado de las imágenes.

Vamos, llevar un poco de ese estilo IKEA al desarrollo web. 😄

Lo interesante es que no se limita a decirle a la IA «hazlo minimalista». La skill está pensada para trabajar sobre un código existente y rediseñar su aspecto visual. El repositorio incluye además diez demos utilizadas para probar y corregir el resultado tanto en escritorio como en móvil.

Para instalarla solo tienes que ejecutar:

npx skills add ericzakariasson/scandinavian-design

Después puedes invocar /scandinavian-design sobre la superficie que quieras rediseñar.

Puede ser especialmente útil cuando tienes una web funcional pero visualmente demasiado cargada y quieres darle una vuelta rápida sin empezar el proyecto desde cero.

Eso sí, minimalismo no significa simplemente poner todo blanco y quitar elementos. Lo interesante está en conseguir que la jerarquía visual, los espacios, la tipografía y las imágenes trabajen juntos para que la interfaz respire.

Una herramienta bastante curiosa para quienes estamos utilizando IA para acelerar el diseño y desarrollo de interfaces.

Ver Scandinavian Design en GitHub

#DiseñoWeb #DiseñoMinimalista #ScandinavianDesign #Cursor #IA #InteligenciaArtificial #WebDesign #Frontend #Programacion #UX #UI #GitHub #DesarrolloWeb

Encontrar una buena tipografía puede cambiar por completo un diseño. A veces no necesitas complicarte con composiciones imposibles ni llenar el proyecto de recursos gráficos: una fuente bien elegida puede hacer prácticamente todo el trabajo.

Esta colección reúne varias tipografías modernas con estilos diferentes, pero con algo en común: funcionan especialmente bien cuando buscamos diseños actuales, limpios y con personalidad.

Son fuentes que pueden encajar perfectamente en proyectos de branding, diseño editorial, carteles, redes sociales, presentaciones o páginas web. Algunas pueden funcionar como protagonistas de un diseño, mientras que otras son más interesantes para titulares, logotipos o pequeños detalles que necesitan destacar.

Una de las ventajas de trabajar con tipografías de este estilo es que permiten conseguir un aspecto contemporáneo sin caer necesariamente en el típico diseño minimalista que parece hecho con la misma plantilla de siempre. Cambiar el peso, el tamaño, el espaciado entre letras o combinar una tipografía llamativa con otra más sencilla puede dar resultados muy diferentes.

Y aquí está la gracia: no se trata simplemente de descargar muchas fuentes y tenerlas instaladas en el ordenador. Lo interesante es aprender a elegir la tipografía adecuada para cada proyecto.

Una fuente geométrica puede transmitir tecnología y precisión, mientras que una tipografía más experimental puede aportar personalidad y convertirse prácticamente en el elemento principal de la composición. También podemos jugar con mayúsculas, tamaños exagerados y mucho espacio en blanco para conseguir ese aspecto editorial que tanto se está utilizando actualmente.

Si trabajas habitualmente con Photoshop, Illustrator, Figma, Canva o cualquier otra herramienta de diseño, tener una pequeña colección de buenas tipografías modernas puede ahorrarte bastante tiempo cuando necesitas encontrar rápidamente una fuente que funcione.

Eso sí, antes de utilizarlas en un proyecto comercial conviene revisar siempre la licencia de cada tipografía. Que una fuente pueda descargarse gratis no significa necesariamente que pueda utilizarse libremente en trabajos comerciales.

En definitiva, una buena colección de fuentes no consiste en tener cientos de tipografías que nunca vas a utilizar. Consiste en encontrar aquellas que realmente pueden aportar algo a tus diseños y saber cuándo utilizarlas.

kanile

Bino Fimenk

Zegion

Regaris

Kovela

#Tipografias #Fuentes #Tipografia #DiseñoGrafico #Diseño #GraphicDesign #Typography #Fonts #DiseñoWeb #Branding #Figma #Illustrator #Photoshop #RecursosDeDiseño #DiseñoDigital

Se acabó el piloto automático, gracias al piloto automático.

Claude Code tiene un modo llamado Auto Mode que, básicamente, permite que Claude deje de preguntarte cada dos minutos si puede hacer algo.

¿Puedo abrir este archivo? Sí/No.
¿Puedo modificar este script? Sí/No.
¿Puedo ejecutar este comando? Sí/No.

Cuando activas Auto Mode, Claude puede tomar esas decisiones de forma automática. Pero aquí viene la parte interesante: no está completamente solo. Hay un agente clasificador que analiza las acciones y determina si pueden ser destructivas o peligrosas.

Hasta ahora, en modo manual, la última palabra la tenías tú. Con Auto Mode, la tiene otro agente.

Y a partir del 14 de agosto, Auto Mode llegará activado por defecto en las sesiones Pro, Max y Team.

¿Y por qué dice Anthropic que automatizar las aprobaciones puede ser más seguro?

Porque hay un pequeño problema con los humanos: nos cansamos.

Si Claude te pregunta constantemente «¿puedo hacer esto?», llega un momento en el que tu cerebro entra en modo automático y empiezas a responder que sí sin leer realmente qué está haciendo.

Sí.
Sí.
Sí.
Sí.

Es exactamente lo mismo que hacemos con las políticas de privacidad y los términos y condiciones. Nadie los lee. Ves el botón, pulsas «Aceptar» y a otra cosa.

Anthropic ha puesto números al asunto. En una prueba con más de 1.053 testers profesionales, solo el 13,6 % consiguió detectar un comando peligroso, mientras que el agente clasificador lo identificó en el 89 % de los casos.

Y aquí está lo realmente interesante.

La discusión no es simplemente si debemos confiar más o menos en la IA. Es si tiene sentido mantener a una persona tomando decisiones de seguridad que, después de cientos de confirmaciones, probablemente acabará aceptando sin mirar.

Porque un «sí» humano dado por pura inercia tampoco es precisamente un mecanismo de seguridad.

La lectura importante para quienes trabajamos con IA es bastante sencilla: si vas a supervisar a un agente, supervisa de verdad. Lee lo que hace, entiende las consecuencias y presta atención.

Pero si sabes que después de 200 confirmaciones vas a empezar a pulsar «sí» como un NPC, quizá sea mejor delegar esas decisiones en un sistema especializado.

Eso sí: un agente también puede equivocarse.

Así que el futuro no parece ser «la IA lo hace todo y nosotros miramos». Más bien parece ser decidir qué merece nuestra atención y qué podemos dejar que la IA gestione por nosotros.

Y eso sí que tiene bastante más sentido que pasarnos el día pulsando «Sí, Claude, hazlo».

#Claude #ClaudeCode #Anthropic #AutoMode #InteligenciaArtificial #IA #Programación #DesarrolloSoftware #AgentesIA #AIcoding

Qué ocurre cuando mezclas a Chostakóvich, una horda de soldados surgida de las tinieblas y una animación visualmente espectacular? El resultado es DANSE MACABRE, un cortometraje dirigido por Hisko Hulsing que convierte la guerra en una auténtica pesadilla visual.

Durante sus cinco minutos, el corto nos mete de lleno en un desfile de violencia, batallas y destrucción. La música de Dmitri Chostakóvich acompaña las imágenes como si fuera una marcha inevitable hacia el caos. Y lo interesante es que no habla únicamente de guerras del pasado: la película busca representar también los conflictos actuales y los que todavía están por llegar.

Pero si algo llama especialmente la atención desde el punto de vista del diseño y la animación es su técnica. Más de 80 personas, repartidas entre cuatro estudios de animación, trabajaron para crear estas imágenes combinando pintura al óleo, rotoscopia, animación 2D y 3D. Una mezcla poco habitual que consigue un acabado oscuro, pictórico y muy físico.

El resultado parece por momentos un cuadro en movimiento, pero también tiene la energía de una superproducción de animación. Una demostración de cómo diferentes técnicas pueden combinarse para conseguir una identidad visual muy potente.

DANSE MACABRE es una de esas piezas que merece la pena ver no solo por lo que cuenta, sino por cómo está hecha. Y hay tiempo para hacerlo: el cortometraje está disponible hasta el 24 de agosto de 2026.

#DANSEMACABRE #Animación #Animation #HiskoHulsing #Cine #Cortometraje #Diseño #Arte #Rotoscopia #Animación2D #Animación3D #PinturaAlÓleo #Guerra

Diseñar una interfaz en una herramienta y después pasarla al desarrollador siempre ha tenido un pequeño problema: el diseño y el código viven en mundos distintos. pen.dev propone eliminar ese salto y poner el diseño directamente donde ya estamos programando.

La idea es bastante sencilla y, a la vez, muy interesante: pen.dev es un canvas de diseño basado en IA que vive dentro del entorno de desarrollo. El proyecto se guarda en el propio código y permite trabajar con el diseño y la implementación prácticamente uno al lado del otro. Actualmente funciona con entornos como Cursor y VS Code, además de otros IDE compatibles.

Aquí entra la parte que más nos interesa si programamos. Puedes diseñar una pantalla o un componente visualmente y después pedirle a la IA que genere el código correspondiente. La documentación muestra ejemplos como convertir un diseño en un componente React, generar una página de Next.js o crear componentes utilizando Tailwind CSS. También permite hacer el camino inverso: llevar código existente al canvas para trabajar sobre él visualmente.

Todo esto se apoya en un formato de diseño abierto basado en archivos .pen, pensado para vivir dentro del propio proyecto. Es decir, el diseño deja de ser un archivo perdido en otra herramienta y pasa a formar parte del workflow de desarrollo.

Y aquí está probablemente lo más interesante de pen.dev: no intenta ser simplemente otro Figma. Su planteamiento es bastante más cercano al de un entorno de programación con capacidades de diseño. La IA puede ayudarte a crear pantallas, explorar diferentes propuestas y trabajar en varios flujos en paralelo.

Además, existe una aplicación de escritorio para Windows, macOS y Linux, extensiones para diferentes IDE y una CLI que permite utilizar las capacidades de diseño asistidas por IA desde el terminal.

¿Va a sustituir a las herramientas tradicionales de diseño? Todavía es pronto para decirlo. Pero el concepto resulta muy interesante: diseñar, programar y utilizar IA dentro del mismo flujo de trabajo, sin estar continuamente exportando diseños, copiando medidas o intentando explicar al desarrollador cómo debería quedar una interfaz.

Para quienes mezclamos diseño gráfico, UI y programación, pen.dev es una herramienta que merece la pena tener en el radar.

Web: pen.dev

#penDev #DiseñoWeb #DiseñoUI #UX #Programacion #IA #InteligenciaArtificial #Frontend #WebDevelopment #React #Cursor #VSCode #DiseñoDigital #DesignToCode #AIDesign