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

En el ecosistema del diseño actual, la línea que separa al diseñador del desarrollador es cada vez más delgada. Ya no basta con entregar un Figma; entender cómo se construye la interfaz es un superpoder. Visual Studio Code (VS Code) es el editor favorito de la industria, y con estas 10 extensiones, lo transformarás en tu mejor aliado creativo.

1. Polacode

Si escribes tutoriales o compartes snippets de código en redes sociales, Polacode es mágica. Te permite crear capturas de pantalla de tu código con un aspecto profesional, manteniendo el esquema de color que tengas configurado. Es el «Instagram» de tu código.

2. Color Highlight

Como diseñador, el color lo es todo. Por defecto, VS Code solo muestra el código hexadecimal. Color Highlight subraya el código con el color real que representa, permitiéndote identificar paletas visualmente de un vistazo.

3. SVG Preview

¿Cansado de abrir el navegador para ver si un icono SVG es el correcto? SVG Preview abre un panel lateral que renderiza el gráfico en tiempo real mientras editas sus nodos o propiedades.

4. Adobe XD / Figma Toolkit

Muchas herramientas de diseño tienen sus propias extensiones oficiales. Estas permiten inspeccionar variables de diseño, tokens de color y assets directamente en el editor, evitando el constante «alt-tab» entre aplicaciones.
Adobe XD
Figma Toolkit

5. Google Fonts

Explorar tipografías sin salir del editor es posible. Esta extensión te permite buscar y previsualizar familias de Google Fonts directamente en tu archivo CSS o HTML, facilitando la toma de decisiones tipográficas.

6. Live Server

La regla de oro del UI: itera rápido. Live Server crea un servidor local que actualiza tu navegador automáticamente cada vez que guardas un cambio. Es lo más parecido al «Preview» de Figma pero en código real.

7. Tailwind CSS IntelliSense

Si usas Tailwind (el framework de CSS más popular), esta extensión es obligatoria. Ofrece autocompletado inteligente de clases, lo que te ayuda a mantener la consistencia del diseño y a aprender las utilidades de espaciado y color rápidamente.

8. Image Preview

Al pasar el cursor sobre la ruta de una imagen o un asset, Image Preview muestra una miniatura en el margen o al hacer hover. Ideal para no perderse cuando gestionas cientos de iconos o imágenes de producto.

9. Material Icon Theme

El orden visual ayuda a la productividad. Materian Icon Theme cambia los aburridos iconos de carpetas y archivos por otros basados en el sistema de diseño de Material Design, haciendo que tu estructura de proyecto sea mucho más intuitiva.

10. Better Comments

Un buen diseño necesita documentación. Better Comments te permite categorizar tus anotaciones en el código por colores: alertas (rojo), consultas (azul), tareas pendientes (naranja) o notas importantes (verde).

#UIDesign #WebDesign #VSCode #Productivity #Frontend #DiseñoGrafico #WebDevelopment #UIUX #CodingForDesigners #Figma #TailwindCSS

Si te dedicas al diseño o simplemente te gusta trastear con Photoshop, seguro que más de una vez has necesitado un PSD rápido para salir del paso o inspirarte en un nuevo proyecto. Ahí es donde entra en juego PNGTree, una web que se ha convertido en un auténtico filón de recursos gráficos gratuitos.

En su sección de PSD gratis, encontrarás desde mockups y plantillas hasta diseños editables pensados para carteles, redes sociales, presentaciones o proyectos web. Todo está organizado por categorías, lo que facilita bastante encontrar justo lo que necesitas sin perder tiempo.

Uno de los puntos fuertes de PNGTree es que no solo ofrece archivos PSD, sino también ilustraciones, vectores, fondos y elementos gráficos que puedes combinar fácilmente en tus diseños. Muchos recursos se pueden descargar de forma gratuita, ideal si no quieres gastar presupuesto pero sí mantener un buen nivel visual.

En resumen, PNGTree es una de esas webs que conviene tener guardada en favoritos, tanto si eres diseñador profesional como si estás empezando. Un banco de recursos versátil, práctico y perfecto para darle un empujón creativo a tus proyectos sin complicarte la vida.

#PNGTree #PSDGratis #RecursosGráficos #DiseñoGráfico #Photoshop #Mockups #DescargasGratis #Diseñadores

Si trabajas en diseño gráfico, desarrollo web o creación de contenido, sabes lo importante que es contar con buenas imágenes sin preocuparte por licencias restrictivas. FreeTheStock es una plataforma que reúne fotografías gratuitas compartidas por fotógrafos de todo el mundo bajo licencias abiertas, lo que permite utilizarlas en proyectos personales e incluso comerciales.

Su punto fuerte es la simplicidad: entras, buscas por palabra clave y descargas la imagen directamente sin registros obligatorios ni procesos largos. El estilo de las fotografías es bastante moderno y natural, muy en la línea de lo que se busca hoy en día para webs, redes sociales o presentaciones.

Aunque no es tan grande como otros bancos más conocidos, precisamente ahí está su encanto: encuentras imágenes menos vistas y más originales. En algunos casos se recomienda acreditar al autor como gesto de cortesía, algo que siempre suma dentro de la comunidad creativa.

Si estás cansado de ver siempre las mismas fotos en todos los proyectos, FreeTheStock es una alternativa nueva y gratuita que merece un hueco en tus favoritos.

#bancosdeimagenes #fotografiasgratis #recursosgratis #diseñografico #freephotos #creatividad #webdesign #freethestock

Bruno es una alternativa ligera y muy bien pensada a herramientas como Postman o Insomnia. Su principal diferencia es que no usa la nube, no requiere cuentas ni sincronizaciones externas y guarda todas las colecciones de APIs de forma local, como archivos de texto plano. Esto hace que trabajar con Git sea algo natural y que compartir o versionar cambios sea tan sencillo como en cualquier proyecto de código.

Está pensado para desarrolladores que quieren velocidad, privacidad y control total, sin interfaces sobrecargadas ni dependencias innecesarias. Soporta peticiones HTTP, GraphQL, gRPC y WebSockets, además de contar con CLI y extensión para VS Code, lo que lo convierte en una herramienta muy cómoda para el día a día.

Si trabajas con APIs y te gusta tener todo bajo control, Bruno es una opción muy a tener en cuenta.

Comparado con herramientas tradicionales

#Bruno #APIs #OpenSource #DesarrolloWeb #PostmanAlternative #HerramientasDev #Git #Programación

Hoy quiero compartir con vosotros un pequeño pack de recursos que seguro os viene genial para vuestros proyectos creativos. Se trata de un paquete que incluye 7 pinceles junto con sus diferentes variaciones, pensados para aportar textura y dinamismo a tus diseños de forma rápida y sencilla.

Dentro del pack encontrarás los archivos en formato .PNG, ideales para usarlos directamente en cualquier software de diseño, y también en formato .ABR, listos para instalar en Photoshop y empezar a trabajar con ellos como pinceles personalizados. Esto los hace muy versátiles, tanto si prefieres integrar los recursos manualmente como si trabajas habitualmente con pinceles.

Es un recurso perfecto para ilustraciones, fondos, carteles o cualquier diseño al que quieras darle un toque más orgánico y creativo sin complicarte demasiado. Como siempre, me gusta compartir este tipo de materiales que ahorran tiempo y ayudan a elevar el resultado final con muy poco esfuerzo.

#pinceles #photosho #brushes #gratis #recursosdediseño #diseñográfico #photoshop #pinceles #pincelesabr

¿Alguna vez has exportado un icono perfecto desde Figma, pero al ponerlo en tu web parece que tiene vida propia y no se alinea con el texto? No es un error de tu código, es un problema de Bounding Box (caja contenedora).

El Problema: El icono «flota» o no se centra

En Figma, los diseñadores suelen crear iconos dentro de marcos cuadrados (por ejemplo, 24x24px). Si el dibujo del icono no ocupa todo ese espacio o no está centrado dentro de su marco, al exportarlo como SVG e insertarlo en tu HTML, heredará esos espacios vacíos asimétricos.

La Solución en Figma (Antes de exportar)

Antes de pasar el diseño a desarrollo, asegúrate de:

1. Flatten Shapes: Selecciona el icono y pulsa Cmd + E (Mac) o Ctrl + E (Windows) para simplificar los vectores.
2. Constraints: Asegúrate de que el vector esté centrado horizontal y verticalmente dentro de su frame.
3. Outline Stroke: Si el icono usa bordes (strokes), conviértelos a esquemas (Shift + Cmd + O) para que el tamaño de exportación sea exacto.

La Solución en CSS (Si ya está en el código)

Si no puedes volver a Figma, puedes corregir la alineación visual usando este «truco» de alineación flexible:

.icon-container {
  display: inline-flex;
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  vertical-align: middle; /* Alineación respecto al texto contiguo */
}

svg {
  display: block; /* Elimina el espacio reservado para descendentes de texto */
  width: 1em; /* Escala el icono proporcionalmente al texto */
  height: 1em;
}

Tip Pro: Si el icono sigue viéndose «caído», usa transform: translateY(-1px); para un ajuste óptico fino. A veces, la geometría no coincide con la percepción del ojo humano.

Hace unos días mi hermana me pidió un favor bastante especial: diseñar unas entradas para el concierto de Linkin Park que se celebrará el próximo mes de junio en Madrid. La idea era regalárselas a mi cuñado como sorpresa, algo personalizado y diferente, no solo la típica confirmación impresa de compra. El problema es que iba bastante justo de tiempo, así que opté por hacer lo que mejor funciona en estos casos: buscar inspiración en internet.

Después de bucear un rato, tuve la suerte de encontrar en Reddit un diseño que encajaba perfectamente con lo que tenía en mente. Las entradas habían sido creadas por el usuario its_frndly y la verdad es que estaban muy bien resueltas, con un estilo limpio, moderno y totalmente reconocible para cualquier fan de Linkin Park. Justo lo que necesitaba para salir del paso sin renunciar a un resultado bonito y cuidado.

Lo mejor de todo es que el propio autor comparte el diseño para que cualquiera pueda editarlo y descargarlo fácilmente. El archivo está disponible en Canva, lo que permite modificar textos, fechas o detalles sin necesidad de conocimientos avanzados de diseño ni software complicado. En pocos minutos pude adaptarlas al concierto de Madrid y dejarlas listas para imprimir.

Os dejo el enlace para que podáis editarlas y descargarlas directamente desde Canva. Si estáis pensando en hacer un regalo similar merece mucho la pena echarle un vistazo.

#LinkinPark #DiseñoGráfico #Canva #EntradasPersonalizadas #Conciertos #RegalosCreativos #DiseñoDigital

Con el final de Stranger Things ya sobre la mesa, es inevitable mirar atrás y celebrar todo lo que ha significado la serie de Netflix. Personajes inolvidables, estética ochentera y una legión de fans que no deja de crear contenido inspirado en Hawkins. Aprovechando este cierre, hoy quiero compartir una serie de ilustraciones que me han encantado, creadas por la artista Rita Fazlyeva, donde mezcla dos universos que funcionan sorprendentemente bien: los signos del zodiaco y los protagonistas de Stranger Things.

Cada ilustración asocia a un personaje de la serie con un signo zodiacal, jugando con su personalidad, su forma de actuar y su evolución a lo largo de las temporadas. El resultado es una colección muy visual, cuidada y con un estilo elegante que conecta tanto con fans de la serie como con amantes de la ilustración y la astrología. Desde Eleven hasta Dustin o Max, todos encuentran su reflejo astral en estas piezas llenas de color y carácter.

Este tipo de proyectos demuestran una vez más el impacto cultural de Stranger Things y cómo, incluso tras su final, sigue inspirando a creativos de todo el mundo. Una forma perfecta de rendir homenaje a la serie y despedirnos de ella con arte, imaginación y un toque cósmico.

Ver la colección completa aquí

#StrangerThings #Ilustración #Zodiaco #Netflix #ArteDigital #RitaFazlyeva #CulturaPop

Claude Code in Action es un curso creado por Anthropic que muestra cómo integrar la inteligencia artificial en el desarrollo de software de una forma práctica y realista. A través de Claude Code, un asistente de programación basado en IA, los desarrolladores pueden interactuar con su código usando lenguaje natural, automatizar tareas repetitivas, corregir errores, refactorizar proyectos y aplicar cambios reales directamente en su base de código. El curso se centra en enseñar cómo usar Claude Code dentro del flujo de trabajo diario, desde la configuración inicial hasta integraciones más avanzadas con proyectos existentes, control de versiones y automatización. Es una formación pensada para programadores que quieren aumentar su productividad y entender cómo la IA puede convertirse en una herramienta clave en su día a día, más allá de simples sugerencias de código.

#ClaudeCode #InteligenciaArtificial #Programación #IA #DesarrolloWeb #Productividad #Anthropic

Si te gusta que tus diseños brillen (literalmente), hoy te traigo algo que te va a encantar. He preparado y comparto de forma totalmente gratuita un efecto dorado para Photoshop, ideal para dar ese acabado elegante y premium que nunca pasa de moda.

El dorado es uno de esos recursos visuales que funcionan en casi cualquier proyecto: títulos, logotipos, textos destacados, invitaciones, carteles o incluso publicaciones para redes sociales. Con este efecto podrás conseguir un acabado realista, con textura y profundidad, sin complicarte la vida ni perder tiempo ajustando capas una por una.

Está pensado para que lo apliques fácilmente en Photoshop, simplemente editando el texto u objeto inteligente y dejando que el efecto haga su magia. Es perfecto tanto si estás trabajando en un proyecto personal como si necesitas un resultado llamativo para un cliente.

Como siempre, la idea es compartir recursos útiles para diseñadores y creativos, ayudándote a mejorar tus trabajos y a experimentar con nuevos estilos sin gastar dinero. Descárgalo, pruébalo y dale ese toque dorado que marca la diferencia.

#Photoshop #EfectoDorado #RecursosGratis #DiseñoGráfico #Freebies #TextEffects #Creatividad