Qué es un logo vectorizado y por qué tu marca necesita uno

Casi todos los negocios tienen su logo guardado en el celular: una imagen que les pasó alguien hace años o una captura de Instagram. En WhatsApp se ve bien. El problema aparece el día que hay que imprimir un cartel o poner el logo grande en la página web: sale borroso, y con un recuadro blanco que no se va.

La solución es vectorizar el logo. En esta guía te explicamos qué significa y qué trae un kit de marca, con un ejemplo real: el logo de TFL Triple Frontera Logistics, que nos llegó por WhatsApp y reconstruimos en vectores.

Qué es un logo

Un logo es la firma visual de tu negocio: un símbolo, unas letras y unos colores que la gente reconoce antes de leer. En el día a día decimos "logo" para todo, pero en diseño se distinguen cuatro tipos según las partes que lleva.

Isotipo, logotipo, imagotipo e isologo

La diferencia entre los dos últimos: en un imagotipo, el símbolo y el nombre van uno al lado del otro y cada uno funciona solo; en un isologo, el nombre va adentro del símbolo y forman una sola pieza.

Saber qué partes tiene tu logo te dice qué versiones necesitás. Un imagotipo como el de TFL se usa completo en un cartel, sin el globo en el encabezado de la página y con las letras TFL solas en el ícono de la pestaña.

Qué es un kit de marca

Un kit de marca reúne todos los archivos de tu logo, listos para cada uso, y sus reglas de uso. Lo mínimo que tiene que traer:

• Las versiones del logo: completo, horizontal, solo el símbolo, y cada una a color, en negativo para fondos oscuros y en una sola tinta, negra o blanca.
• Los formatos: SVG para la página web, PNG con fondo transparente en varios tamaños, y PDF y EPS para la imprenta.
• Los íconos: el favicon (el iconito de la pestaña del navegador), el ícono para el celular y las fotos de perfil para WhatsApp, Instagram, Facebook y tu perfil de Google.
• Los colores con su código exacto.
• Una guía de uso: cuánto espacio dejar alrededor del logo y el tamaño mínimo en pantalla y en papel.

Así quedan algunas versiones del logo de TFL, ya en vectores:

Los colores de tu marca

Cada color de tu logo tiene un código. En pantalla se usa el hexadecimal, que empieza con un numeral: el amarillo de TFL es #FBC702. Para la imprenta se usa CMYK, las cuatro tintas de la impresora, y para vinilos y pinturas, una referencia de carta como Pantone.

Con el código exacto, tu amarillo sale igual en la página y en el cartel. Por eso medimos cada color sobre el archivo, píxel por píxel, en lugar de elegir a ojo.

El código también sirve para medir el contraste, que dice qué texto se puede leer encima de cada color. El amarillo de TFL sobre blanco da 1,6 a 1, lejos del 4,5 a 1 que piden las normas de accesibilidad para leer un texto. Con letra negra encima da 13,3 a 1. Por eso el amarillo de TFL lleva texto negro, y sobre blanco va en formas grandes, como las letras del logo.

Qué son los tokens de marca

Los tokens de marca son las decisiones de tu marca guardadas con un nombre: cada color, tipografía, tamaño y espacio tiene un nombre fijo y un valor exacto. En lugar de escribir #FBC702 en cien lugares, la página usa el nombre amarillo-tfl, y si mañana el color cambia, se cambia en un solo lugar.

• amarillo-tfl vale #FBC702: el color de la marca.
• negro-tfl vale #000000: los textos y el globo.
• texto-sobre-amarillo vale negro-tfl: lo que se lee encima del amarillo.

Los tokens conectan tu logo con tu página web y tus anuncios: el mismo color y la misma letra en todos lados, sin depender de la memoria de nadie.

Qué significa vectorizar un logo

Una imagen común, como un JPG o un PNG, es una grilla de puntitos de color llamados píxeles. Este es el logo de TFL tal como llegó:

A este tamaño se ve bien. Pero cuando agrandás una imagen de píxeles, cada píxel se vuelve un cuadradito y los bordes se ponen borrosos.

Un logo vectorizado está hecho de formas: líneas y curvas descritas con números. Cuando agrandás un vector, la computadora vuelve a dibujar cada curva al tamaño nuevo, así que el borde queda nítido en un favicon de 16 píxeles y en un cartel de tres metros.

Vectorizar es pasar el logo de píxeles a vectores. Mirá la diferencia en el mismo pedazo del logo de TFL:

El archivo que nos mandaronEl logo vectorizado

Los formatos vectoriales más comunes son SVG (el de la web), PDF, EPS y AI, el archivo de Illustrator. JPG, PNG y WebP son siempre de píxeles.

Por qué un logo vectorizado se ve más profesional

Nítido en todos los tamaños

Del iconito de la pestaña a la lona de un evento, el mismo archivo sirve para todo y sale con los bordes limpios.

Sin el recuadro blanco

Un JPG trae su fondo pegado: sobre una foto o un color, el logo aparece adentro de un rectángulo blanco. El vector trae solo el logo y se apoya sobre cualquier fondo.

Los colores exactos

Cada forma lleva su color con el código medido, así que la imprenta y el que arma tu página usan el mismo amarillo.

Una versión para cada fondo

Con el logo en vectores, el negativo para fondos oscuros o la versión de una tinta para un sello salen cambiando un color. Con un JPG, cada versión nueva es un dibujo nuevo.

Es el archivo que pide la imprenta

Las gráficas y los talleres de vinilo trabajan con vectores. Con un JPG, te piden el original o redibujan el logo por su cuenta, y cada taller dibuja una versión distinta.

Cómo se vectoriza un logo bien

Hay programas y páginas que vectorizan solas: subís la imagen y te devuelven un SVG. Para un dibujo simple, con buen contraste, alcanzan. Con un logo real fallan justo en lo que más se ve: letras chicas que salen deformes, colores que se mezclan en los bordes, rectas que quedan onduladas y archivos con miles de puntos.

Un buen vectorizado es una reconstrucción:

1. Buscar el mejor archivo que exista. Una imagen plana y chica le gana a una foto grande del cartel.
2. Medir los colores sobre el archivo.
3. Separar las partes del logo: el símbolo, el nombre, la frase de abajo.
4. Redibujar cada parte con la herramienta que le corresponde: las rectas como rectas exactas y los círculos como círculos. En TFL, la T, la F y la L quedaron como polígonos perfectos, de 6 a 13 esquinas cada una.
5. Comparar con el original ampliado, pedazo por pedazo, hasta que las dos versiones coinciden.

Por qué vectorizamos tu logo antes de armar tu página

Cuando un negocio arranca su página web con nosotros, muchas veces lo único que tiene es el logo en un JPG o en una foto. Con ese archivo no sale una página profesional: la página muestra el logo grande en el encabezado, chiquito en la pestaña, sobre fotos y sobre colores, y el JPG se ve borroso o con su recuadro blanco en casi todos esos lugares.

Por eso, antes de diseñar, reconstruimos el logo en vectores. Con TFL fue una tarde de trabajo: la T, la F y la L, el globo, el nombre y la línea de servicios, cada parte redibujada y comparada con el original.

Con el logo ya en vectores armamos tres propuestas de línea gráfica para la página, y el cliente elige la que más le gusta. Es un paso que casi nunca se hace: lo habitual es diseñar con el archivo que llegó por WhatsApp.

Cómo saber si tu logo ya está vectorizado

• Mirá la extensión del archivo. SVG, PDF, EPS y AI pueden ser vectores. JPG, PNG y WebP son píxeles.
• Hacé la prueba del zoom. Abrí el archivo y agrandá al máximo: si los bordes siguen nítidos, es un vector; si aparecen cuadraditos o se ponen borrosos, son píxeles.
• Ojo con los PDF. Un PDF puede tener adentro una foto del logo. La prueba del zoom también sirve ahí.
• Preguntale a quien hizo tu logo. El diseñador suele guardar el archivo original. Si existe, pedí ese archivo: es la mejor base para todo lo demás.