Líneas de neón que se repiten hacia el fondo, rosa y cian sobre un violeta casi negro y ese aire de recreativa de los 80. Si te gusta la estética retrowave, el estudio Creative Veila ofrece gratis un efecto de texto neón para Photoshop que consigue ese look en segundos: el 80s Retro-Futuristic 3D Neon Text Effect. Escribes tu palabra en un objeto inteligente, guardas y el efecto se aplica solo.

Qué es el 80s Retro-Futuristic 3D Neon Text Effect

Es un pack de cuatro efectos de texto neón con relieve 3D creado por Creative Veila, un estudio que vende y regala recursos de diseño: efectos de texto y foto para Photoshop, pinceles para Procreate, mockups y texturas. Este pack lo firma Tatiana Lapina y se publicó el 29 de diciembre de 2022.

Sus autores lo describen como un pack que da a la tipografía «un aspecto retrowave nostálgico de los 80». El efecto convierte cada letra en un contorno luminoso que se repite hacia atrás, como si el texto fuera un túnel, con una sombra difusa que da volumen. Las imágenes de presentación juegan con palabras como TRON o The Grid, un guiño claro a la película de 1982 y a toda la estética ciberpunk de la época.

Qué incluye el pack

• Cuatro efectos de contorno neón, que cambian el color de la línea (rosa magenta o cian, según las imágenes de muestra) y la densidad de los contornos.
• Una plantilla PSD bien organizada con efectos fotográficos de glitch anaglifo, ese desfase de color rojo y azul típico de las gafas 3D.
• Una versión a 300 ppp lista para imprimir, útil para carteles, camisetas o portadas.
• Una guía ilustrada que explica cómo usarlo.

El archivo pesa 27 MB y funciona con Photoshop CC o posterior. Los autores recomiendan usar la última versión de Creative Cloud. Se descarga desde Gumroad con el modelo «paga lo que quieras»: puedes poner 0 € o dejar una aportación si quieres apoyar al estudio. Te pedirá un correo electrónico para enviarte el enlace.

Cómo usar el efecto neón en Photoshop, paso a paso

Todo el efecto funciona con un objeto inteligente, una capa que guarda dentro otro documento. No tienes que tocar estilos de capa ni filtros:

1. Abre el PSD y localiza la capa del objeto inteligente. Suele estar marcada y tiene un pequeño icono en la miniatura.
2. Haz doble clic en la miniatura. Se abrirá una nueva pestaña con el texto de ejemplo.
3. Sustituye el contenido por tu texto o tu logotipo. En la muestra, el contenido es un texto negro sobre fondo transparente, así que sigue esa misma pauta.
4. Guarda (Ctrl + S o Cmd + S) y cierra la pestaña. Al volver al documento principal, el efecto se habrá aplicado a tu texto.
5. Elige una de las cuatro variantes (la guía incluida explica cómo cambiar de una a otra) y exporta en JPG o PNG.

Consejos para sacarle partido

1. Usa palabras cortas. El efecto repite cada contorno muchas veces. Con una palabra de cuatro a seis letras se ve espectacular; con una frase larga se convierte en un lío de líneas.
2. Elige tipografías gruesas. Las palo seco muy negras o anchas dejan espacio dentro de cada letra para que se vean los contornos repetidos. Las finas o con remates pequeños se pierden.
3. Cuida la legibilidad. En la versión de más densidad, el texto puede costar de leer en tamaños pequeños. Resérvala para titulares grandes y usa la versión ligera para miniaturas o redes.
4. Completa la estética de los 80. Acompaña el texto con fondos violeta oscuro, una rejilla en perspectiva, un sol con franjas o una tipografía cromada. Si quieres ir más allá, prueba nuestros 18 estilos de Photoshop inspirados en las máquinas arcade.
5. Para imprimir, parte del PSD a 300 ppp. No escales la versión de pantalla: el brillo del neón pierde nitidez si amplías la imagen.

Qué permite la licencia gratuita

El pack se descarga con la Freebie License de Creative Veila, que es bastante generosa, pero tiene condiciones que conviene conocer:

• Puedes usarlo en proyectos personales y comerciales, también en trabajos para clientes.
• Los diseños que crees con el efecto son tuyos. Pero si vendes productos en los que el recurso, sin modificar, es lo principal, el límite es de 100 unidades. A partir de ahí necesitas la licencia extendida (49 $).
• No puedes redistribuir ni revender los archivos tal cual, ni usarlos para crear efectos o presets que compitan con ellos.
• Tampoco puedes usarlos para entrenar modelos de inteligencia artificial.
• Si lo compartes en redes o en tu web, tienes que enlazar a veila.me. Nunca puedes ofrecer los archivos para descarga directa.

Un efecto retro que se aplica en segundos

Este pack es de esos recursos que conviene tener a mano: no necesitas saber 3D ni pelearte con los estilos de capa, y el resultado tiene mucha personalidad. Ideal para carteles de fiestas, portadas de música, miniaturas de YouTube o cualquier diseño que pida un toque de los 80.

Si te gustan los efectos de texto, en Zarqun tienes más: el efecto dorado para Photoshop gratis, el efecto 3D Korean Drama para Illustrator y el resto de la sección PSD.

The post Efecto neón de los 80 para Photoshop gratis: texto 3D retro-futurista en segundos first appeared on ZaRQuN – Diseño Gráfico, Web y Programación.

Fondo oscuro, manchas de color que se funden entre sí y un brillo suave que parece salir de la pantalla. Es el fondo que llevamos años viendo en webs de startups, presentaciones de producto y portadas de apps. Si quieres tenerlo en tus diseños sin empezar de cero, Tech Background Visuals es un archivo gratuito de la comunidad de Figma con fondos degradados con desenfoque listos para duplicar. Y además, al estar hecho con capas editables, sirve para aprender a crear el efecto tú mismo.

Qué es Tech Background Visuals

Es un recurso que el diseñador Chris Christodoulopoulos (@mooodswings en Figma) publicó en 2021. Él mismo lo describe como «una implementación en Figma de este efecto de fondo clásico a través de vectores, degradados y desenfoque». En la presentación lo resume con humor: «Free background visuals nobody asked for», fondos gratis que nadie había pedido.

La gracia está en el «en Figma». Este tipo de fondo se suele hacer en Photoshop o con renders 3D y se entrega como una imagen cerrada. Aquí no hay ninguna foto: todo son formas vectoriales con relleno de color y efectos nativos de Figma, así que puedes cambiar colores, mover manchas o ajustar el desenfoque sin perder calidad.

Qué incluye el archivo

• Cuatro variantes de color sobre un fondo azul marino casi negro: turquesa con rosa, naranja con violeta, una mezcla pastel tipo arcoíris y amarillo con magenta.
• Capas editables: las manchas son vectores con degradados, desenfoque y modos de fusión, sin imágenes incrustadas.
• Un estilo muy «tecnológico», pensado para cabeceras web, portadas de presentaciones, banners o fondos de pantalla.
• Gratis. Los archivos gratuitos de la comunidad de Figma se publican, por defecto, con licencia CC BY 4.0: puedes usarlos y adaptarlos, también en proyectos comerciales, siempre que cites al autor.

Para usarlo solo necesitas una cuenta gratuita de Figma. Abre la página del recurso y pulsa Abrir en Figma: se creará una copia en tus borradores que puedes modificar como quieras.

Cómo crear un fondo degradado con desenfoque en Figma, paso a paso

Lo mejor de este archivo es que, si inspeccionas sus capas, ves la receta. Es la misma que puedes seguir para crear tus propios fondos:

1. Prepara el lienzo. Crea un marco (frame) del tamaño final, por ejemplo 1920×1080, con un relleno muy oscuro. Un azul marino o un violeta casi negro dan más profundidad que el negro puro.
2. Dibuja las manchas. Con la herramienta de elipse (O) crea tres o cuatro formas grandes que se solapen. Rellénalas con colores saturados o con degradados radiales que vayan de un color intenso a otro más oscuro.
3. Desenfoca. Selecciona las formas y añade en el panel Effects un Layer blur con un valor alto, entre 100 y 250 según el tamaño del marco. Los bordes desaparecen y los colores empiezan a fundirse.
4. Juega con los modos de fusión. Cambia el modo de alguna capa a Screen o Color dodge para que las zonas donde se cruzan brillen más, y baja la opacidad de las que dominan demasiado.
5. Añade grano. Las versiones actuales de Figma incluyen el efecto Noise. Aplícalo al marco con poca intensidad: da textura y evita las «bandas» que aparecen en los degradados oscuros.
6. Deja aire para el texto. Empuja las manchas hacia un lado o hacia una esquina. Así el titular queda sobre una zona oscura y se lee bien.

Consejos para usar estos fondos en tu web

1. Exporta en imagen, no en SVG. El desenfoque se exporta en SVG como un filtro que el navegador tiene que calcular, y con manchas grandes puede ir lento. Exporta en JPG o PNG y, si puedes, conviértelo a WebP para que pese menos.
2. Vigila el contraste. Un texto blanco sobre una mancha amarilla o turquesa clara puede no leerse. Comprueba el contraste en la zona exacta donde va el texto, no en el fondo en general.
3. Prepara una versión para móvil. En pantallas verticales las manchas pueden quedar fuera de encuadre. Duplica el marco a 1080×1920 y recoloca las formas en lugar de recortar la versión horizontal.
4. Si lo quieres animado, pásalo a CSS. Puedes recrear el efecto con varios div con border-radius: 50%, colores sólidos y filter: blur(), y moverlos suavemente con una animación. Úsalo con moderación y respeta prefers-reduced-motion.
5. Adapta la paleta a tu marca. Cambia los colores de las manchas por los de tu identidad y el fondo dejará de parecer genérico.
6. Cita al autor. Si usas el archivo tal cual o lo adaptas, la licencia CC BY pide reconocer al creador. Basta con una línea en los créditos.

Un recurso pequeño que enseña mucho

Tech Background Visuals no es un pack enorme, pero es un buen ejemplo de lo que Figma permite hacer hoy sin salir de la herramienta. Úsalo como punto de partida, cambia los colores y, cuando entiendas cómo funciona, crea tu propia colección de fondos.

Si te gustan los degradados, en Zarqun tienes más recursos: los plugins Mesh Gradient y Noisy Gradients para Figma, Gradient Studio para generar degradados CSS, nuestra selección de 10 plugins clave para Figma en 2026 y el resto de la sección de Gradientes.

The post Tech Background Visuals: fondos degradados con desenfoque gratis para Figma first appeared on ZaRQuN – Diseño Gráfico, Web y Programación.

Hay ilustradores que necesitan una escena entera para contar algo y otros que lo resuelven con un solo gesto. Paweł Jońca es de los segundos. Este ilustrador polaco lleva más de veinte años convirtiendo artículos de revista en imágenes que se entienden de un vistazo, y su perfil de Behance es una clase práctica de ilustración conceptual: humor, color y una idea clara en cada pieza.

Quién es Paweł Jońca

Jońca vive en Varsovia y, curiosamente, no estudió Bellas Artes sino Arquitectura. Al acabar la carrera se dio cuenta de que no quería dedicarse a ella y empezó a hacer webs, banners publicitarios y storyboards. Su primer encargo serio como ilustrador de prensa llegó de la edición polaca de la revista Media & Marketing, y a partir de ahí vinieron Przekrój, Wprost, Newsweek o Zwierciadło, con la que lleva más de una década colaborando.

Hoy es uno de los ilustradores más reconocidos de Polonia. Entre sus clientes aparecen Apple, Forbes, GQ, Harvard Business Review, Nature, New Scientist o Newsweek, además de editoriales, teatros y marcas como Biedronka o ING. También ha ilustrado cubiertas de libros, entre ellas las ediciones polacas de las novelas de Chuck Palahniuk. El libro Illustration Now! vol. 5 de Taschen lo incluyó entre sus 150 ilustradores «más emocionantes».

Los premios tampoco faltan: varios Chimera en la categoría de portfolio (2004, 2005 y 2009), oros y platas del Advertising Creators Club polaco, el premio principal de ilustración de prensa en los Polish Graphic Design Awards por The last human y el oro y «Craft of the Year» del ACC en 2022 por su cartel Russian bear.

Su estilo: el camino más corto hacia la idea

«Elijo el camino más corto hacia mi objetivo», explicaba Jońca en una entrevista con Culture.pl. Por eso sus ilustraciones son tan directas: pocos elementos, colores planos y saturados, personajes de líneas rotundas con aire de cómic clásico y siempre una metáfora visual que hace el trabajo pesado.

Un buen ejemplo es How to stay smart in the age of AI («Cómo seguir siendo listo en la era de la IA»): dos personas pegadas al móvil tienen la cara convertida en un garabato, mientras la del centro, sin pantalla, conserva sus rasgos. No hace falta leer el artículo para entender el mensaje. Y su formación de arquitecto se nota: Jońca atribuye a esos años la precisión y la conciencia de que cada decisión tiene consecuencias.

Lo más reciente de su Behance: ilustración editorial

En su perfil, que suma más de 600.000 visualizaciones y 16.000 seguidores, predominan los encargos para prensa. Los temas son los de cualquier revista actual (la generación Z, la longevidad, las redes sociales, la pareja…), pero la forma de contarlos es muy suya.

En Gen Z un rostro fragmentado en planos rosas grita y llora sobre un rojo intenso. En Longevity un hombre hace pesas tumbado mientras le monitorizan el cuerpo, rodeado de kettlebells y batidos. Y en Anti-social media una piscina oscura con forma de smartphone engulle a un bañista que baja por la escalerilla: una imagen sencilla con una lectura que da mucho que pensar.

Carteles de teatro y cine

El otro gran terreno de Jońca es el cartel, una disciplina con muchísima tradición en Polonia. Este año ha firmado el cartel de Danny and the Deep Blue Sea para el Teatr Druga Strefa de Varsovia, resuelto con dos perfiles enfrentados en blanco y negro, y el de la 45.ª edición del Festival de Óperas Primas de Koszalin («Młodzi i Film»), donde mezcla tipografía condensada y personajes en pleno rodaje.

Galería: más ilustraciones de Paweł Jońca

Sus herramientas: Procreate y pinceles de serie

Aunque sus ilustraciones parecen hechas con lápices y pasteles, Jońca trabaja en digital, con Procreate en un iPad Pro y el Apple Pencil. En su blog contó qué pinceles usa, y la sorpresa es que todos vienen con la aplicación:

• Lápiz 6B: su pincel principal, para contornos, detalles e incluso rellenos grandes. Imita tan bien el grafito que hay quien cree que es un lápiz de verdad.
• Narinder Pencil: para bocetos y líneas guía. También firma con él.
• Oberon: para los rellenos de color, normalmente en una capa en modo Multiplicar.
• Pinceles tipo pastel y carboncillo (6B Compressed, Vine Charcoal, Charcoal Block) para dar textura y grano.

Su truco: crear una categoría propia en el menú de pinceles con este juego fijo para tenerlo siempre a mano. «Uso solo los pinceles integrados, nada de gadgets sofisticados», resume. Si usas la versión actual de Procreate, estos pinceles están en el grupo «Classic».

Qué puedes aprender de su ilustración conceptual

1. Empieza por la idea, no por el dibujo. Antes de abrir la app, busca la metáfora: la piscina que es un móvil, la cara que se convierte en garabato.
2. Quita todo lo que sobra. Jońca dice que su mayor alegría es mirar una ilustración y sentir que no hay nada que añadir ni cambiar.
3. Limita la paleta. Dos o tres colores saturados y un fondo plano bastan para dar fuerza a la composición.
4. La textura humaniza lo digital. Un pincel con grano, como el lápiz 6B de Procreate, evita el acabado frío del vector.
5. Las herramientas no hacen al ilustrador. Él mismo critica que se venda la idea de que «no hace falta saber dibujar para dibujar algo». Domina pocas herramientas y entrena el criterio.

Si quieres ver más, en su web vende láminas y carteles de sus obras. Y si te gusta este estilo, no te pierdas nuestros perfiles de Nicolas Rix y Amanda Milanez, los brushes de Aaron Griffin o el resto de la sección Ilustraciones | Arte Digital.

The post Paweł Jońca: ilustración conceptual con humor, color y una sola idea first appeared on ZaRQuN – Diseño Gráfico, Web y Programación.

El pie de página es la parte de la web a la que casi nadie le dedica tiempo. Se suele resolver al final, con cuatro enlaces, el copyright y los iconos de redes sociales. Pero el footer es también el lugar al que llega el visitante que ha leído toda la página, el que busca tu contacto, tu dirección o tu newsletter. Es decir, uno de tus visitantes más interesados.

Footer (footer.design) es una galería que demuestra que un pie de página puede ser mucho más que eso. Su lema no se anda con modestias: «The only footer gallery on earth», la única galería de footers del planeta.

Qué es footer.design

Es una colección curada de pies de página de webs reales, pensada para diseñadores y desarrolladores que buscan ideas para cerrar sus diseños. La crearon Benten Woodring y Devin Fountain, junto a Matt Cram, al detectar que no existía ninguna fuente de inspiración dedicada específicamente a los footers. El logo es obra de Fons Mans y la web está desarrollada por el estudio NOOON. Como cuentan ellos mismos, la mantienen en su tiempo libre, fuera de su trabajo y de sus proyectos con clientes.

La colección ya suma cientos de ejemplos, repartidos en más de 60 páginas, y ha servido incluso de inspiración para otras galerías temáticas como CTA.gallery, dedicada a las llamadas a la acción.

Qué vas a encontrar en la galería

Cada ficha muestra una captura grande del footer, el nombre y el icono de la web, una breve descripción del proyecto y un enlace para visitar la web original, imprescindible cuando el pie de página tiene animaciones o efectos interactivos. Los ejemplos más destacados llevan además la etiqueta Editor’s Choice.

Hay de todo: marcas de alimentación como Northeast Tomato, estudios de diseño como Aperios Design, organizaciones como The Design Society, startups, productos digitales y muchos portfolios personales de diseñadores.

Cómo buscar inspiración: los filtros

Lo mejor de footer.design es su página de exploración, que permite combinar dos tipos de filtros muy completos:

• Por tipo de web (más de 80 opciones): agencias, estudios, portfolios, e-commerce, SaaS, startups, restaurantes, moda, arquitectura, música, podcast, educación, fintech, apps para iOS o macOS, Web3 y muchas más.
• Por estilo (36 opciones): tipográfico, tipografía grande o pequeña, minimalista, brutalista, retro, ilustrado, en cuadrícula, bento box, tarjetas, degradados, oscuro, colorido o pastel. También hay filtros para efectos técnicos: animado, parallax, scroll horizontal, cursor personalizado, sonido, vídeo, WebGL o animaciones con GSAP.

Así puedes buscar, por ejemplo, footers minimalistas de portfolios o pies de página animados para una tienda online. Desde la cabecera tienes también accesos rápidos a los estilos más populares: Typographic, Small Type, Illustrative, Grid, Flat y Animated.

Si has diseñado un pie de página que merezca estar en la colección, puedes enviarlo desde la sección Submit, y si quieres recibir los nuevos ejemplos, tienen una newsletter en Substack.

Qué debe incluir un buen footer

Aunque cada web es distinta, la mayoría de los ejemplos de la galería combinan varios de estos elementos:

• Navegación secundaria: enlaces a las secciones principales para que el usuario no tenga que volver arriba.
• Datos de contacto: email, teléfono, dirección y horario. En negocios locales, además, ayuda al SEO local.
• Una última llamada a la acción: suscribirse a la newsletter, pedir presupuesto o empezar un proyecto.
• Redes sociales: los iconos de siempre, pero integrados en el diseño.
• Información legal: aviso legal, política de privacidad y de cookies. En Europa no es opcional.
• Créditos y copyright: el año, el nombre de la empresa y, a menudo, quién ha diseñado la web.

Claves para diseñar un pie de página que funcione

Después de repasar la colección, estas son las ideas que más se repiten en los mejores footers:

1. Trátalo como un cierre, no como un trámite. Muchos de los mejores ejemplos dedican el footer a un gran mensaje final («Let’s talk», «Start a project») con tipografía enorme. Es la última impresión que se lleva el visitante.
2. Organiza la información en columnas. Agrupar los enlaces por temas (empresa, recursos, legal, contacto) hace que un footer con mucha información se lea de un vistazo.
3. Refuerza la marca. El logo a gran tamaño, una ilustración propia o los colores corporativos convierten el pie de página en una firma.
4. No lo conviertas en un cajón de sastre. Si metes todos los enlaces de la web, nadie encontrará nada. Prioriza lo que el usuario busca de verdad al llegar al final.
5. Diseña también la versión móvil. Las columnas que funcionan en escritorio pueden convertirse en una lista interminable en el teléfono. Los acordeones o una versión reducida suelen funcionar mejor.
6. Cuidado con el scroll infinito. Si tu web carga contenido al hacer scroll, el footer puede volverse inalcanzable. Asegúrate de que el usuario siempre pueda llegar a él.
7. Accesible y legible. Los footers oscuros con texto gris pequeño son muy habituales y muy difíciles de leer. Comprueba el contraste y el tamaño de letra.

Una galería imprescindible para tus marcadores

footer.design es una de esas webs que conviene tener siempre a mano: en pocos minutos encontrarás referencias de webs reales que puedes visitar y analizar, y seguramente acabarás dedicándole al pie de página de tu próximo proyecto más tiempo del que pensabas.

Si te gustan este tipo de galerías, no te pierdas Navbar Gallery, con ejemplos de menús de navegación, que cubre justo el extremo opuesto de la página, ni 404s.design, la galería de páginas de error 404 creativas. Encontrarás más recursos en la sección Programación & Web.

The post Footer.design: inspiración y ejemplos de pies de página web first appeared on ZaRQuN – Diseño Gráfico, Web y Programación.

PHP acaba de publicar un parche urgente para dos vulnerabilidades críticas que permiten ejecutar código en un servidor sin usuario ni contraseña. Si tienes una web en WordPress, tu portfolio o la tienda online de un cliente funcionan con PHP, así que esto te afecta. Te contamos qué ha pasado, cómo saber si tu web está en riesgo y qué tienes que hacer hoy mismo.

Qué ha pasado

El 20 de octubre, el equipo de seguridad de PHP avisó de que al día siguiente publicaría actualizaciones para dos fallos graves. Lo ha hecho este miércoles 21 de octubre a las 14:00 UTC (16:00 en la España peninsular). Parte de la información se filtró antes de tiempo, ya circula una prueba de concepto del ataque y Cloudflare asegura que ya está viendo los primeros intentos de explotarla.

Los fallos se llaman CVE-2026-109618 y CVE-2026-109619, y la comunidad de seguridad los ha bautizado como PHP2Shell. PHP los puntúa con un 9,2 sobre 10 en la escala de gravedad CVSS v4.0. En algunas redes se habla de un 10, pero esa no es la nota oficial.

Los dos permiten la ejecución remota de código sin autenticación. Dicho de otro modo, un atacante podría llegar a ejecutar sus propias órdenes en el servidor que aloja tu web: instalar malware, robar la base de datos o usar tu web para atacar a otras.

• CVE-2026-109618: cuando PHP se queda sin memoria, puede interrumpirse mientras prepara los datos de una petición, y esos datos a medio montar acaban tratándose como válidos.
• CVE-2026-109619: algunos datos internos de una petición sobreviven después de liberarse, y una petición posterior atendida por el mismo proceso puede reutilizarlos.

Según el aviso oficial, afecta a todas las instalaciones de PHP que sirven peticiones web: PHP-FPM, Apache con mod_php, php-cgi, FrankenPHP y LiteSpeed. PHP considera que el riesgo es mayor con mod_php.

Qué versiones están afectadas

PHP no ha publicado un rango exacto. Algunos investigadores apuntan a que el fallo viene de muy atrás y alcanza versiones desde PHP 5, aunque PHP no lo ha confirmado. Lo seguro es qué versiones lo corrigen:

PHP 8.1 y anteriores ya no reciben actualizaciones oficiales. El equipo de PHP ha publicado correcciones para la 7.4, la 8.0 y la 8.1 en su repositorio, pero no como versiones listas para instalar. Algunas distribuciones de Linux y proveedores de soporte extendido las incluirán en sus paquetes. Si tu web sigue en PHP 7 o en una 8.0 u 8.1, este es el momento de pasarte a una versión soportada.

Apunta también otra fecha: PHP 8.2 deja de recibir parches de seguridad el 31 de diciembre de 2026. Si vas a actualizar, mejor saltar directamente a la 8.3 o superior.

Cómo saber qué versión de PHP usa tu web

En WordPress es muy fácil: entra en el escritorio y ve a Herramientas > Salud del sitio > Información > Servidor. En la línea «Versión de PHP» verás el número exacto. Si es igual o superior a los de la tabla, estás protegido.

Si no usas WordPress, lo encontrarás en el panel de tu alojamiento (cPanel, Plesk o el que uses), normalmente en una sección llamada «PHP» o «Versión de PHP».

Qué tienes que hacer

1. Si tienes alojamiento compartido: la actualización depende de tu proveedor. Entra en tu panel y comprueba si ya puedes elegir una versión parcheada. Si no, escribe hoy mismo a soporte y pregunta cuándo la tendrán.
2. Si tienes un VPS o un servidor propio: instala los paquetes actualizados de tu distribución o de tu panel. Las distribuciones de Linux recibieron los parches por adelantado. Después reinicia PHP-FPM o Apache para que el cambio tenga efecto.
3. Si gestionas webs de clientes: haz una lista de todas y revísalas una a una. Las webs antiguas que nadie toca son las más expuestas.
4. Después de actualizar, revisa tu web: la portada, los formularios y la subida de imágenes. Las actualizaciones dentro de una misma rama, por ejemplo de 8.3.30 a 8.3.36, no suelen romper nada.

¿Y si no puedo actualizar todavía?

El equipo de PHP lo dice claramente: no hay ninguna medida que proteja por completo, la única opción segura es actualizar. Mientras tanto, propone algunos ajustes que reducen el riesgo:

session.upload_progress.enabled = 0
post_max_size = 8M          ; o 32M si tu web necesita subir archivos
fatal_error_backtraces = 0  ; solo en PHP 8.5

• Hay que aplicarlos en el php.ini o en la configuración del servidor y después reiniciar PHP. Si se cambian desde la propia web, con ini_set() o un archivo .user.ini, no sirven.
• Desactivar session.upload_progress, la medida que más se está compartiendo estos días, actúa sobre uno de los dos fallos, no sobre ambos. Ayuda, pero no basta.
• Si tu web está detrás de Cloudflare, ya hay reglas de protección de emergencia disponibles, también en el plan gratuito. Son un parche temporal, no una solución.

En resumen

• Es una vulnerabilidad muy grave, ya hay intentos de ataque y el parche está disponible desde el 21 de octubre.
• Actualiza a PHP 8.2.35, 8.3.36, 8.4.27 u 8.5.12, o a una versión posterior.
• Si estás en PHP 8.1 o anterior, cambia a una versión soportada.
• Los ajustes provisionales ayudan, pero no sustituyen a la actualización.

Mantener al día el software del servidor es tan importante como actualizar los plugins y el tema. Si quieres más consejos para cuidar tu web, échale un vistazo a la sección de WordPress y al resto de artículos de Programación & Web.

Fuentes: aviso de seguridad oficial de PHP y BleepingComputer.

The post Vulnerabilidad crítica en PHP (PHP2Shell): qué versiones actualizar para protegete first appeared on ZaRQuN – Diseño Gráfico, Web y Programación.

Las tipografías tall, también llamadas altas o estrechas, son de esas que se reconocen al primer vistazo: letras muy altas, ejes verticales marcados y un ancho mínimo. Tienen mucha presencia y, como ocupan poco espacio en horizontal, permiten titulares enormes incluso en espacios estrechos. Por eso funcionan tan bien en carteles, portadas de libros y discos, packaging, camisetas o cabeceras web.

Hemos seleccionado cinco tipografías tall gratuitas con personalidades muy distintas, de la más limpia y geométrica a la más oscura y gótica, para que encuentres la que encaja con tu próximo proyecto.

1. Thuman

Thuman es una fuente display de líneas rectas y terminaciones redondeadas, diseñada por sideswork, que combina fuerza y una elegancia sutil. Su aire geométrico y algo retrofuturista la hace ideal para carteles de eventos, música electrónica, marcas tecnológicas o cabeceras con mucho carácter.

• Estilos: Regular y Oblique.
• Caracteres: 231 por estilo, con acentos y signos del español.
• Licencia: gratis para uso personal. La licencia comercial se consigue en Envato Elements.

Descargar Thuman

2. Hochland

Hochland es una fuente display condensada y urbana, diseñada por Reza Rasenda para la fundición Zealab, inspirada en los carteles de estilo callejero. Es la más estrecha de la selección: sus letras son tan altas y compactas que puedes escribir titulares largos a un tamaño enorme. Perfecta para pósteres, flyers, streetwear o portadas de revista.

• Estilos: uno, en formatos OTF y TTF.
• Caracteres: incluye mayúsculas, minúsculas, números y acentos.
• Licencia: gratis para uso personal. La licencia comercial está disponible en MyFonts.

Descargar Hochland

3. Nordin

Nordin, de Craft Supply Co., es una sans serif alta con un toque nórdico y artesanal. Sus minúsculas son en realidad versalitas, lo que le da un aspecto muy limpio y equilibrado. Funciona de maravilla en logotipos, etiquetas de producto, packaging de cerveza artesana o café y en cualquier diseño de estilo outdoor o vintage.

• Estilos: tres versiones, Regular, Rough (con textura desgastada) y Outline (solo contorno), en OTF y TTF.
• Caracteres: la versión gratuita es una demo que solo incluye letras: no trae números, signos de puntuación ni acentos.
• Licencia: gratis para uso personal. La versión completa con licencia comercial se vende en Creative Market.

Descargar Nordin

4. Hornset

Hornset, de la fundición Pekotype, es una sans serif condensada pensada para el diseño actual. Es la más versátil de la lista: sus letras estrechas permiten meter mucho texto en poco espacio sin perder legibilidad, así que sirve tanto para titulares como para carteles, branding o miniaturas de YouTube.

• Estilos: Regular.
• Caracteres: 329, con soporte para 45 idiomas, entre ellos el español.
• Licencia: gratis para uso personal. La versión completa con licencia comercial está en Creative Market.

Descargar Hornset

5. Banxors

Banxors, de imoodev, lleva el estilo tall al terreno gótico: es una blackletter alta y afilada con un aire medieval. Encaja de lujo en carteles de conciertos de rock y metal, merchandising, tatuajes, cervezas de estilo artesano o diseños de Halloween.

• Estilos: Regular, en formato OTF.
• Caracteres: letras, números y signos básicos, con más de 1.000 pares de kerning. Ojo: no incluye acentos ni la eñe.
• Licencia: gratis para uso personal. La licencia comercial se compra en imoodev.com.

Descargar Banxors

Consejos para usar tipografías tall

1. Úsalas a lo grande. Brillan en titulares, carteles y logotipos. En textos largos o a tamaños pequeños cansan la vista y pierden legibilidad.
2. Combínalas con una fuente sencilla. Acompaña el titular con una sans serif de proporciones normales (como Inter, Roboto o Montserrat) para el texto. El contraste entre ambas hará que el titular destaque todavía más.
3. Cuida el espaciado. Al ser tan estrechas, un poco de espacio extra entre letras y un interlineado ajustado suelen mejorar mucho el resultado.
4. Aprovecha la verticalidad. Funcionan genial en composiciones verticales, como stories de Instagram, banners de rascacielos o lomos de libros.
5. Comprueba los caracteres antes de empezar. Muchas versiones gratuitas son demos sin acentos, sin eñe o sin números. Prueba tu texto real antes de presentar un diseño al cliente.

Ojo con las licencias

Las cinco tipografías son gratuitas solo para uso personal. Si vas a usarlas en un logotipo, en un producto que se venda o en un trabajo para un cliente, necesitas comprar la licencia comercial. Es poco dinero comparado con el problema que puede suponer no tenerla, y además apoyas a los diseñadores que las crean.

¿Te quedas con alguna? Si buscas más fuentes, échale un vistazo a nuestra colección de tipografías modernas para tus diseños y a la combinación de Bebas Neue y Manrope, otra fuente condensada ideal para titulares. Encontrarás muchas más en la sección de Tipografía.

The post 5 tipografías tall gratis para titulares con mucha presencia first appeared on ZaRQuN – Diseño Gráfico, Web y Programación.

Hay webs que se recuerdan por un detalle: un titular que aparece letra a letra, un fondo que reacciona al ratón, una galería que gira en 3D o un botón con un brillo que no esperabas. Programar esos efectos desde cero lleva horas, y ahí es donde entra React Bits (reactbits.dev), probablemente la mejor colección gratuita de componentes animados para React, que acaba de estrenar nueva versión.

Qué es React Bits

React Bits es una biblioteca de código abierto con componentes animados e interactivos para React y Next.js, creada y mantenida por el desarrollador David Haz. Su lema lo resume bien: «Animated React components for websites people remember», componentes animados para webs que la gente recuerda.

Su éxito ha sido enorme: el repositorio en GitHub supera las 49.000 estrellas, lo que lo convierte en uno de los proyectos de interfaz más populares del ecosistema React.

Qué trae la nueva versión

La nueva versión de React Bits llega con una web rediseñada y una colección que ya supera los 200 componentes y fondos gratuitos, organizados en cinco categorías:

• Text Animations (33): textos que se dividen y aparecen letra a letra, efectos de desenfoque, de máquina de escribir, de difuminado o de «glitch».
• Animations (38): efectos de movimiento para cualquier elemento, como cursores personalizados, rastros, imanes o transiciones al hacer scroll.
• Components (48): piezas de interfaz completas, como galerías circulares, tarjetas de perfil, menús, carruseles o docks al estilo macOS.
• Micro Interactions (34): la novedad más interesante, pequeñas animaciones para botones, iconos y estados que dan vida a una interfaz sin robar protagonismo.
• Backgrounds (63): fondos animados, muchos de ellos con WebGL, como Liquid Chrome, Light Tunnel, Strands, Topography o Laser Flow.

Además de los componentes, la web incluye varias herramientas gratuitas: Background Studio para diseñar fondos animados, Shape Magic, Texture Lab, Sound Lab y Center Stage.

Copiar, pegar y personalizar

La gran diferencia de React Bits frente a otras librerías es que no instalas un paquete cerrado: el código fuente del componente pasa a tu proyecto y es tuyo. Puedes modificar cualquier valor, cambiar la animación o adaptarla a tu marca sin pelearte con una API ajena.

Cada componente está disponible en cuatro versiones, para que encaje con cualquier proyecto:

• JavaScript o TypeScript.
• Estilos con CSS normal o con Tailwind CSS.

Y hay tres formas de añadirlos a tu proyecto:

1. Copiar y pegar el código desde la pestaña Code de cada componente.
2. Con la CLI de shadcn, con un solo comando: npx shadcn@latest add @react-bits/SplitText-TS-TW
3. Con jsrepo, otra herramienta para instalar componentes desde un registro.

Antes de copiar nada, cada componente tiene una vista previa interactiva en la que puedes ajustar sus parámetros (colores, velocidad, intensidad, tamaño…) y ver el resultado al momento.

Preparado para trabajar con IA

Si usas asistentes de programación, React Bits lo pone fácil: ofrece un archivo llms.txt, la opción de copiar la documentación en Markdown y compatibilidad con el servidor MCP de shadcn. En la práctica, puedes pedirle a herramientas como Claude Code, Cursor o VS Code que añadan un componente concreto a tu proyecto y lo configuren por ti.

¿Es gratis?

Sí. Los componentes se publican con licencia MIT + Commons Clause: puedes usarlos gratis en proyectos personales y comerciales, pero no puedes revender ni redistribuir los componentes en sí.

Para quien necesite más, existe React Bits Pro, una versión de pago único con actualizaciones de por vida que añade cientos de componentes, secciones de página, bloques de interfaz para aplicaciones y plantillas completas.

Consejos para usar animaciones sin pasarte

Con tantos efectos a mano es fácil caer en la tentación de animarlo todo. Algunas ideas para que tu web luzca sin perder usabilidad:

1. Elige un protagonista. Un fondo animado o un titular con efecto en la portada impacta. Cinco efectos distintos en la misma pantalla cansan.
2. La animación debe tener un propósito. Guiar la mirada, dar feedback al pulsar un botón o explicar un cambio de estado. Si solo decora, que sea sutil.
3. Vigila el rendimiento. Los fondos con WebGL son espectaculares, pero consumen GPU y batería. Pruébalos en un móvil de gama media antes de publicar.
4. Respeta prefers-reduced-motion. Algunas personas configuran su sistema para reducir el movimiento por mareos o problemas vestibulares. Desactiva o suaviza las animaciones en ese caso.
5. No retrases el contenido. Un texto que tarda dos segundos en aparecer puede parecer elegante, pero también puede hacer que el visitante se vaya antes de leerlo.

Un recurso imprescindible si trabajas con React

React Bits es de esos recursos que ahorran horas de trabajo: en lugar de pelearte con librerías de animación, eliges un efecto, ajustas sus valores y lo pegas en tu proyecto. Si diseñas o desarrollas webs con React, merece un hueco en tus marcadores.

Y si buscas inspiración para el diseño de tu próxima web, echa un vistazo a Navbar Gallery, con ejemplos de menús de navegación, y al resto de recursos de la sección Programación & Web.

The post React Bits: más de 200 componentes animados para React, gratis first appeared on ZaRQuN – Diseño Gráfico, Web y Programación.

Diseñar la interfaz de una aplicación SaaS es uno de los retos más exigentes del diseño UX/UI: paneles llenos de datos, tablas, gráficos, flujos de trabajo complejos y usuarios que pasan horas al día delante de la pantalla. Aquí no basta con que algo sea bonito: tiene que entenderse de un vistazo.

Para inspirarte, hemos seleccionado en Behance cinco proyectos recientes de diseño UX/UI para productos SaaS: dashboards, landing pages y casos de estudio completos que muestran no solo el resultado final, sino también el proceso.

1. Convox: un panel para centros de atención telefónica

Convox – Call Center SaaS & UX UI Design, de Serge N. (Cracovia, Polonia), es una aplicación pensada para centros de atención telefónica que busca agilizar el trabajo de los agentes y mejorar la experiencia de los clientes, con analítica en tiempo real, navegación intuitiva y gestión de tareas.

Lo más destacable es cómo resuelve un panel con muchísima información (llamadas totales, duración media, tiempo de espera, análisis de sentimiento, grabaciones…) con una estética muy limpia: fondo gris claro, tarjetas suaves y un único color de acento, un amarillo lima que guía la mirada hacia los datos clave. Es uno de los proyectos más valorados de la selección, con más de 1.400 valoraciones y 25.000 visualizaciones.

Qué aprender: en un dashboard denso, un solo color de acento usado con disciplina vale más que una paleta completa.

2. Skillflow: rediseño de la web de un SaaS de formación con IA

AI Task Management SaaS Website | Landing Page, de Miss Azmira (Bangladés), es el rediseño de la web de Skillflow, una plataforma de formación y gestión del conocimiento para equipos que funciona con inteligencia artificial.

El proyecto muestra la web completa: portada, precios, blog, clientes y nosotros. Destaca su sistema visual sencillo, con un azul primario muy vivo (#2A76FF), fondos casi blancos y la tipografía Forma DJR Display, y una portada que combina un titular contundente («AI Training Built for Real Workflows»), un botón claro y los logos de clientes como prueba social.

Qué aprender: la web de un SaaS no vende funciones, vende resultados. Cada sección del rediseño responde a una duda del visitante: qué es, cuánto cuesta, quién lo usa y por qué fiarse.

3. DesignOS: un caso de estudio diseñado con IA

DesignOS – AI-Powered SaaS Platform UI/UX Case Study, de Nour Eldaly (El Cairo, Egipto), es el más reciente y quizá el más curioso de la selección. DesignOS es una plataforma SaaS que busca eliminar las fricciones en el traspaso entre diseño y desarrollo: sincroniza los archivos de diseño, genera especificaciones listas para programar y centraliza el feedback.

El caso de estudio es muy completo: 30 pantallas (14 de escritorio y 16 de móvil), modo claro y oscuro, un sistema de diseño con más de 20 componentes y una landing page animada. La particularidad es que todo el proceso se hizo con la inteligencia artificial como compañera creativa, usando herramientas como Claude y Claude Code dirigidas mediante prompts. Como se resume en la descripción del proyecto: cada fase se apoyó en la IA, pero ninguna fue sustituida por ella.

Qué aprender: la IA no sustituye el proceso de diseño (investigación, personas, flujos, sistema de diseño), pero puede acelerarlo mucho si sabes dirigirla.

4. Orvion: un CRM de analítica de ventas

Modern CRM Analytics Platform | SaaS UX UI Design, de Gulshan Ali (Emiratos Árabes Unidos), presenta Orvion, una plataforma CRM que centraliza los datos de clientes, agiliza los procesos de venta y ofrece analítica predictiva. Con más de 1.300 valoraciones y 27.000 visualizaciones, es el proyecto más visto de la selección.

Es un buen ejemplo de cómo presentar un caso de estudio en Behance: incluye el problema y la solución, el flujo de usuario, el proceso de diseño en tres fases (descubrir, diseñar y entregar), la paleta de colores (negro, blanco y dos tonos de verde lima), la tipografía Inter y hasta los datos del proyecto: más de 18 pantallas diseñadas en cuatro semanas y dos sprints.

Qué aprender: mostrar el proceso, y no solo las pantallas finales, es lo que convierte un portfolio bonito en uno que consigue clientes.

5. Last Year Recap: un año de diseño SaaS de Duolio

Last Year Recap, de la agencia Duolio (Adelaida, Australia), es un resumen de los proyectos de la agencia durante el último año, y por eso es casi una galería en sí mismo: más de cien imágenes con dashboards, aplicaciones móviles, landing pages y branding.

Abre con Roomlio, una aplicación de reservas de hoteles con su panel de gestión para los alojamientos, en la que trabajan todo el producto: logo, tipografía (Urbanist), paleta de colores, perfil de usuario, flujos de la app móvil, el panel de administración e incluso las piezas para redes sociales. Es un ejemplo excelente de cómo un mismo sistema visual se extiende de la marca a la interfaz.

Qué aprender: un producto digital es más que su interfaz. Cuando la marca y el diseño UX/UI se trabajan juntos, el resultado se percibe mucho más sólido.

Lo que tienen en común los buenos diseños SaaS

Repasando los cinco proyectos se repiten varios patrones que puedes aplicar a tus propios diseños de producto:

1. Fondos claros y neutros. El gris muy claro o el blanco roto dominan: dejan respirar los datos y reducen la fatiga visual en sesiones largas.
2. Un solo color de acento. Lima, azul, verde o naranja, pero uno. Se reserva para las acciones principales y los datos que importan.
3. Tarjetas modulares. Los dashboards se organizan en bloques independientes (estilo bento), fáciles de leer y de reorganizar.
4. Jerarquía tipográfica clara. Cifras grandes para los KPI, etiquetas pequeñas y discretas. El usuario debe ver el número importante antes que nada.
5. Diseño pensado en varios dispositivos. Casi todos los proyectos muestran la versión de escritorio, tableta y móvil, y varios incluyen modo oscuro.
6. Proceso documentado. Investigación, flujos de usuario, sistema de diseño y resultados. Los casos de estudio que más gustan cuentan una historia, no solo enseñan pantallas.

Cómo usar Behance para inspirarte en diseño UX/UI

Behance es una mina para el diseño de interfaces si sabes buscar. Filtra por la categoría UI/UX, ordena por valoraciones y combina términos concretos como «SaaS dashboard», «CRM» o «landing page». Guarda los proyectos en un moodboard y, sobre todo, lee los casos de estudio completos: el proceso enseña más que la imagen de portada.

Eso sí, recuerda que son trabajos protegidos por derechos de autor: inspírate, analiza y aprende, pero no copies. Y si te gustan este tipo de recopilaciones, no te pierdas Navbar Gallery, con ejemplos de menús de navegación, ni el resto de recursos de la sección Programación & Web.

The post Inspiración UX/UI: 5 proyectos de diseño SaaS first appeared on ZaRQuN – Diseño Gráfico, Web y Programación.

Tienes unos pocos segundos para convencer a alguien de que se quede en tu web, y casi todo ocurre en la primera pantalla. Esa zona superior, con el titular, el subtítulo, el botón principal y una imagen o animación, es la sección hero, y probablemente sea la parte más importante de cualquier página de inicio.

Si estás diseñando una y buscas ideas, Supahero (supahero.io) es una de las mejores fuentes de inspiración que puedes tener en tus marcadores.

Qué es Supahero

Supahero es una biblioteca curada de secciones hero de webs reales. Su propuesta es sencilla: una colección seleccionada a mano de cabeceras web bien diseñadas, pensadas para captar la atención desde el primer segundo. En su portada se pueden explorar más de 570 ejemplos.

Actualmente forma parte de screensdesign, una biblioteca de inspiración de UX centrada en aplicaciones, que se presenta como la mayor del mundo en su categoría.

Qué vas a encontrar en la galería

La variedad es lo mejor de Supahero. Conviven las cabeceras de grandes marcas y productos digitales como Stripe, Linear, Figma, Notion, Raycast, Airbnb, Dropbox o Wise, con webs de producto de Apple, Tesla, BMW o Renault, y con portfolios de diseñadores, estudios creativos y plantillas de Framer.

Eso te permite comparar cómo resuelve la misma pieza una startup de software, una marca de lujo o un diseñador freelance. Cada ficha incluye:

• Una captura de la sección hero a buen tamaño.
• El titular que usa esa web, muy útil para estudiar cómo se redacta una propuesta de valor.
• La fecha en que se añadió a la colección.
• Un enlace para visitar la web original y ver la cabecera en movimiento, con sus animaciones y efectos.

Además tiene un buscador para localizar ejemplos concretos y una sección para enviar tu propia web si crees que tu hero merece estar en la colección.

Qué es una sección hero y por qué importa tanto

La sección hero es el bloque principal que aparece nada más cargar una página, antes de hacer scroll. En inglés se suele hablar de above the fold. Su trabajo es responder en pocos segundos a tres preguntas del visitante: qué es esto, qué gano yo y qué hago ahora.

Una buena sección hero mejora la primera impresión de tu marca, reduce la tasa de rebote y aumenta las conversiones, ya sea una venta, un registro o una descarga. Por eso merece la pena dedicarle tiempo y buscar referencias antes de empezar a diseñar.

Claves para diseñar una sección hero que funcione

Repasando los ejemplos de Supahero se repiten varios patrones que puedes aplicar a tus propios proyectos:

1. Un titular claro antes que ingenioso. Los mejores explican qué haces en una sola frase. Fíjate en cómo lo resuelve Stripe: «Financial infrastructure to grow your revenue».
2. Un subtítulo que amplíe el titular. Una o dos líneas para concretar el beneficio, sin párrafos largos.
3. Una llamada a la acción principal. Un botón destacado con un verbo claro (empieza gratis, descarga, reserva). Si hay un segundo botón, que tenga menos peso visual.
4. Un visual que demuestre, no que decore. Una captura del producto, una animación o una ilustración que explique lo que ofreces vale más que una foto de stock.
5. Jerarquía y aire. Tipografía grande para el titular, buen contraste y espacio en blanco. Si todo destaca, nada destaca.
6. Pensado para el móvil. La mayoría de visitas llegan desde el teléfono: comprueba que el titular y el botón se vean sin hacer scroll en una pantalla pequeña.
7. Rápido de cargar. El hero suele contener el elemento más grande de la página, el que Google mide como LCP. Optimiza imágenes y vídeos para que no penalicen la velocidad ni el SEO.

Cómo sacarle partido a Supahero

Un buen método es crear un moodboard antes de diseñar: guarda cinco o seis ejemplos de tu mismo sector y otros tantos de sectores completamente distintos. Después analiza qué tienen en común (estructura, longitud del titular, tipo de visual, colores) y qué los hace diferentes. Así evitarás copiar un diseño concreto y encontrarás tu propia solución.

Y no te quedes solo con la captura: visita la web original, porque muchas de las cabeceras de la colección tienen animaciones, efectos al pasar el ratón o transiciones que no se aprecian en una imagen fija.

Más galerías de inspiración para diseño web

Supahero encaja perfectamente con otras colecciones que hemos recomendado en Zarqun. Si estás trabajando en una web completa, échale un vistazo también a Navbar Gallery, con ejemplos de menús de navegación, y a 404s.design, la galería de páginas de error 404 creativas. Con las tres tienes cubiertas la cabecera, la navegación y hasta la página de error.

#diseñoweb #UI #UX #landingpage #inspiración #webdesign

The post Supahero: más de 570 ejemplos de secciones hero para inspirar tu web first appeared on ZaRQuN – Diseño Gráfico, Web y Programación.

Hay retratos que obligan a mirar dos veces para comprobar que no son una fotografía. Los de Rubén Belloso Adorna son de esos. Este pintor sevillano ha hecho de la pintura al pastel (una técnica de pintura en seco con barras y lápices de pigmento, conocidos como pasteles), que muchos asocian a bocetos rápidos, una herramienta para crear retratos de un realismo asombroso. Hoy es artista oficial de Weta Workshop, el estudio neozelandés ligado a la trilogía de El Señor de los Anillos de Peter Jackson.

Quién es Rubén Belloso Adorna

Rubén Belloso nació en Sevilla en 1986 y es licenciado en Bellas Artes por la Universidad de Sevilla, con especialidad en pintura. Desde sus años de formación ha centrado su carrera en la pintura al pastel, y con ella ha construido una trayectoria internacional: ha expuesto en varios países e imparte cursos de pintura al pastel por toda Europa.

Su obra ha recibido reconocimientos como el premio al Mejor Portfolio de su promoción (2010), el Premio a la Excelencia del Ayuntamiento de Sevilla (2011) y el premio de la revista Collection en el 12.º ARC Salon (2017), uno de los certámenes de arte realista más conocidos del mundo. También ha aparecido en publicaciones especializadas como Pratique des Arts y Pastel Journal.

Retratos hiperrealistas al pastel

Lo que define el trabajo de Belloso son sus retratos hiperrealistas: pieles, miradas y texturas resueltas con barras de pastel y lápices pastel con tal precisión que cuesta creer que no se trate de una foto. Es un ejemplo perfecto de lo lejos que puede llegar una técnica tradicional en manos de alguien que la domina.

Su relación con este material de pintura va más allá de sus cuadros:

• Ha colaborado con algunos de los fabricantes de material de bellas artes más reconocidos, como Girault, Sennelier, Henri Roche y Caran d’Ache, para crear sus propias selecciones de barras de pastel para retrato.
• Ha sido embajador de Caran d’Ache, la histórica marca suiza de material de dibujo y pintura, para su gama de pasteles y lápices pastel.
• En 2014 fundó PASIT, la asociación de pastelistas (artistas que pintan al pastel) de Italia.

De Sevilla a Nueva York, Barcelona y Francia

En 2017 su obra pudo verse en el Salmagundi Club de la Quinta Avenida de Nueva York y en el MEAM (Museo Europeo de Arte Moderno) de Barcelona, con El ocaso de Venus. Ese mismo año presentó una exposición individual en el Museo Antoine-Lécuyer de Saint-Quentin, en Francia, una ciudad muy ligada a la tradición de la pintura al pastel. Él mismo reconocía entonces el valor especial de exponer pintura al pastel en Francia.

El Señor de los Anillos: de Gollum a Weta Workshop

La Tierra Media le acompaña desde hace mucho: uno de sus primeros retratos, que pintó con solo 16 años, fue el de Gollum. Años después, tras redescubrir el universo de Tolkien desde otra perspectiva, dedicó diez meses a una colección de unas veinte obras inspiradas en la trilogía de Peter Jackson, con algunos de los personajes más icónicos de la saga.

Esa colección se expuso del 1 al 4 de octubre de 2026 en la San Diego Comic-Con Málaga, en el FYCMA. Los primeros en ver los cuadros fueron Elijah Wood y Sean Astin, Frodo y Sam en las películas. La organización adelantó además que cuatro de las obras viajarían a un estudio de Nueva Zelanda que trabajó en el diseño, la utilería y los efectos visuales de la trilogía, para iniciar una colaboración profesional.

Hoy Rubén Belloso se presenta como artista oficial de Weta Workshop, y sus láminas oficiales de El Señor de los Anillos están a la venta en la tienda del estudio, wetanz.com. Es difícil imaginar un reconocimiento mayor para alguien que empezó pintando a Gollum en su adolescencia.

Qué podemos aprender de su trabajo

• Dominar una técnica marca la diferencia. En lugar de probar un poco de todo, Belloso se ha especializado en la pintura al pastel hasta convertirse en un referente internacional.
• Los proyectos personales abren puertas. Su colección de la Tierra Media nació de una pasión de juventud y ha terminado en una colaboración con uno de los estudios más importantes del cine fantástico.
• La técnica tradicional sigue vigente. En plena era del arte digital, un trabajo hecho a mano con este nivel sigue sorprendiendo como pocos.

Dónde seguir a Rubén Belloso

La mejor forma de seguir su trabajo, ver sus procesos y conocer sus próximas exposiciones es su perfil de Instagram, @rubenbellosoadorna. Y si eres fan de la Tierra Media, sus láminas oficiales están disponibles en wetanz.com.

Si te gustan los perfiles de artistas, no te pierdas nuestra selección de 10 ilustradores y artistas digitales que todo diseñador debería conocer.

#RubénBelloso #pinturaalpastel #ElSeñorDeLosAnillos #WetaWorkshop #arte #Sevilla

The post Rubén Belloso Adorna: retratos hiperrealistas al pastel y la Tierra Media de Weta Workshop first appeared on ZaRQuN – Diseño Gráfico, Web y Programación.