¿Por qué cambiar los colores del SVG y no del PNG?

En un PNG, el color está repartido en miles de píxeles, bordes suavizados incluidos, así que cambiarlo significa pintar. En un SVG hecho de trazados rellenos, un color es un valor de cada forma: cambias el valor y todos los bordes se quedan exactamente donde estaban. Por eso la segunda paleta de una marca, una versión para modo oscuro o una versión para imprimir a una tinta deberían hacerse a partir del SVG.

Tres pasos: capas, un cuentagotas y un bote de pintura

¿Cómo cambio el color de una parte?

Abre el archivo en el editor SVG. Una imagen trazada se abre con cada objeto como su propia capa; dentro, las formas están anidadas según lo que encierra a qué (un ojo dentro de una cara).

  1. En la pestaña Capas, cada fila muestra sus colores como pequeñas muestras: una para una forma de un solo color, varias una al lado de otra para un grupo.
  2. Haz clic en una muestra. Se abre un selector a su lado con colores fijos, los colores del propio dibujo, un campo hexadecimal y un cuentagotas.
  3. Pasa el puntero sobre un color para verlo en el lienzo. Al hacer clic se aplica a todos los rellenos de esa fila (toda la capa, el grupo o la forma) en un solo paso de deshacer. Esc devuelve el color anterior.

Una fila con varios colores puede pasar a un solo color, o puedes cambiar solo uno de sus colores. Si prefieres seleccionar algo en el lienzo: un clic toma el objeto entero, un doble clic entra en él y la barra contextual sobre el lienzo muestra dónde estás ("Dibujo › Objeto 2 › Forma"). Un clic ahí vuelve a salir.

¿Cómo cambio un color en todo el dibujo?

Usa la pestaña Colores. Muestra la paleta del dibujo. Al hacer clic en una muestra se seleccionan todas las formas que la usan, para que veas dónde está ese color, y Cambiarlo en todas partes a lo sustituye en todo el dibujo en un solo paso de deshacer.

El logo del búho de Study cuatro veces: con su índigo y ámbar originales, luego en azul marino y coral, en verde y lima, y en negro y gris

Uno de nuestros logos de ejemplo, con los colores cambiados al cambiar sus dos colores en todas partes. Todas las formas y los bordes son iguales; solo cambian los dos valores de relleno.

La misma pestaña contiene el relleno y el trazo de la selección (con un cuentagotas para tomar un color del lienzo) y, en un rectángulo, sus esquinas. La posición, el tamaño, organizar, alinear y la cuadrícula están en Más.

¿Cómo hago una versión de un solo color?

Usa Cambiarlo en todas partes a con cada color por turno y ponlos todos en la misma tinta. O selecciona todo y usa el relleno de la selección. Luego busca las formas que solo se veían por su color: un ojo que era blanco sobre una cara oscura desaparece cuando los dos pasan a negro. Elimina esas formas, o déjalas en un segundo color, como el del papel, para que el dibujo se siga entendiendo.

¿Cómo reviso el resultado?

  • Contraste. El texto y los detalles pequeños necesitan suficiente contraste con lo que tienen debajo. Las WCAG piden al menos 4,5:1 para el texto normal.
  • Tamaños pequeños. Exporta un PNG a 32 y 64 px desde el editor y míralo a ese tamaño, sin ampliar.
  • Fondos oscuros. Un logo pensado para blanco suele necesitar una versión más clara de su color más oscuro en una página oscura.

Guardar y exportar

Guardar conserva una nueva versión del SVG en tu cuenta, y las versiones anteriores siguen disponibles. Exportar PNG renderiza el dibujo al ancho que elijas, de 16 a 4096 px. Los cambios sin guardar se conservan como borrador en tu navegador y se te ofrecen la próxima vez que abras el mismo archivo. El editor requiere una cuenta. Sus archivos, incluidas las versiones editadas, se guardan durante el periodo de almacenamiento de tu cuenta, que se muestra en cada archivo.