1. Inicio
  2. Historias
  3. Rescatar recursos de marca

Historia — freelance y agencia

Rescatar recursos de marca cuando los archivos originales ya no están

«El cliente me contrató para rediseñar su web. Cuando pedí el logotipo y el set de iconos, me mandaron un encogimiento de hombros esperanzado y un acceso. La agencia que la construyó hace tres años ya no existía, y los archivos originales tampoco. Pero los vectores seguían justo ahí, viviendo en su propia portada.»

El punto de partida

Un rediseño que empezó como una búsqueda del tesoro

Quién
Devin, diseñador web freelance, encargado de reconstruir por completo la web de marketing de una marca pequeña.
Stack
Figma para diseñar, Webflow para construir. Todo tiene que partir de vector limpio y editable.
El trabajo
Recuperar el logotipo, el logotipo tipográfico y unos 15 iconos de interfaz y de secciones ya publicados en la web del cliente, como SVG real y no rasterizado.
El muro
Sin kit de marca, sin archivos de diseño y sin una agencia anterior colaboradora. La web en producción era la única copia que quedaba.

Lo que no funcionaba

«Mi primer impulso fue capturar el logotipo y vectorizarlo. Eso es una hora por marca, y nunca queda del todo bien: la tensión de las curvas falla, las esquinas son aproximadas. Para un logotipo, “aproximado” no es aceptable. La diferencia se ve en el propio papel de carta de la marca.»

El Guardar imagen como… del clic derecho no llevó a Devin a ninguna parte: el logotipo era <svg> en línea, los iconos de sección eran background-image de CSS y unos cuantos salían de un sprite. «El navegador se comportaba como si no fueran imágenes. Que, técnicamente, no lo son: son marcado. Esa es toda la trampa.»

El cambio

Devin abrió la portada en producción del cliente, pulsó SVG Downloader y el popup listó todo lo que había en la página. Recorriendo las vistas previas aisladas, el logotipo era el tercer elemento: limpio, por su cuenta, fuera de la cabecera abarrotada. Un nombre de archivo, un clic y Guardado logo.svg.

descarga
Ponle nombre, pulsa una vez y el vector real aterriza en Descargas: el marcado auténtico de la página, no una aproximación revectorizada.

«Bajó con el xmlns ya reparado, así que abrió directo en Figma. Curvas completas, puntos de anclaje reales, editable. Recoloreé un par que salieron negros —usaban currentColor, algo normal— y a los diez minutos estaba diseñando contra la marca de verdad.» Los iconos de sección vinieron en la misma pasada; los de fondo CSS que ningún menú de guardado tocaría estaban ahí en la lista, sin más.

«Presupuesté la recuperación como una partida de media jornada por costumbre. Me llevó un café. He dejado de inflar esa estimación, y he dejado de vectorizar logotipos por completo.»

Devin Alvarez, diseñador web freelance

El resultado

  • ~15 iconosmás el logotipo y el logotipo tipográfico recuperados como vector real y editable
  • 10 minde «¿dónde están los archivos originales?» a diseñar contra la marca real
  • Sin vectorizarcurvas y puntos de anclaje originales, no una aproximación a mano
Qué hizo el trabajo
El método universal —fuentes en línea, de fondo CSS y de sprite en un mismo popup— rematado con guardados individuales de Descargar el actual bajo nombres propios.
El detalle del icono negro
Los iconos que usan currentColor se guardan sin color grabado y se dibujan en negro. Ese es el marcado real; recolorea en tu editor. Detalles aquí.
Una nota sobre derechos
Recuperar los recursos propios de un cliente para su propio rediseño es un uso plenamente legítimo de la herramienta. Lee lo que el navegador ya cargó; respeta la propiedad de la marca cuando el sitio no es tuyo.

Historia compuesta: un flujo ilustrativo pero representativo. La persona y el cliente son ficticios; el comportamiento de la extensión aquí descrito es real. Más historias →


Recupera el vector real, no un calco

Logotipos en línea, iconos de fondo CSS, marcas en sprite: de cualquier página que puedas abrir, en un clic.