1. Início
  2. Histórias
  3. Resgatar ativos de marca

História — freelance e agência

Resgatando ativos de marca quando os arquivos de origem sumiram

“O cliente me contratou para redesenhar o site dele. Quando pedi o logo e o conjunto de ícones, mandaram um dar de ombros esperançoso e um login. A agência que construiu três anos atrás tinha acabado, e os arquivos de origem também. Mas os vetores continuavam bem ali — vivendo na própria página inicial deles.”

O cenário

Um redesign que começou como caça ao tesouro

Quem
Devin, designer web freelance, assumindo a reconstrução completa do site de marketing de uma marca pequena.
Stack
Figma para design, Webflow para construir. Tudo precisa partir de vetor limpo e editável.
O trabalho
Recuperar o logo, a marca tipográfica e uns 15 ícones de interface e de seção já no ar no site do cliente — como SVG de verdade, não raster.
A parede
Sem kit de marca, sem arquivos de design, sem uma agência anterior colaborativa. O site no ar era a única cópia que restava.

O que não estava funcionando

“Meu primeiro instinto foi tirar print do logo e vetorizar. Isso é uma hora por marca, e nunca fica exatamente certo — a tensão das curvas fica errada, os cantos ficam aproximados. Para um logo, ‘aproximado’ não é aceitável. Dá para ver a diferença no papel timbrado da própria marca.”

O Salvar imagem como… do botão direito não levou Devin a lugar nenhum: o logo era <svg> inline, os ícones de seção eram background-image do CSS, e alguns vinham de um sprite. “O navegador agia como se aquilo nem fosse imagem. O que, tecnicamente, não é — é markup. É essa a armadilha inteira.”

A virada

Devin abriu a página inicial no ar do cliente, clicou no SVG Downloader, e o popup listou tudo que havia na página. Percorrendo as prévias isoladas, o logo era o terceiro item — limpo, sozinho, longe do cabeçalho cheio. Um nome de arquivo, um clique, e logo.svg salvo.

download
Nomeie, clique uma vez, e o vetor de verdade cai em Downloads — o markup real da página, não uma aproximação revetorizada.

“Ele veio com o xmlns já consertado, então abriu direto no Figma. Curvas completas, pontos de ancoragem reais, editável. Recolori um par que saiu preto — usavam currentColor, o que é normal — e em dez minutos eu estava desenhando contra a marca de verdade.” Os ícones de seção vieram na mesma passagem; os de fundo CSS que menu de salvar nenhum tocaria estavam simplesmente ali na lista.

“Orcei a recuperação como meio dia de trabalho por hábito. Levou um café. Parei de inflar essa estimativa — e parei de vetorizar logos por completo.”

Devin Alvarez, designer web freelance

O resultado

  • ~15 íconesmais logo e marca tipográfica recuperados como vetor de verdade e editável
  • 10 minde “cadê os arquivos de origem?” a desenhar contra a marca de verdade
  • Sem vetorizarcurvas e pontos de ancoragem originais, não uma aproximação à mão
O que fez o trabalho
O método universal — origens inline, de fundo CSS e de sprite num popup só — finalizado com salvamentos individuais de Baixar o atual sob nomes escolhidos.
A pegadinha do ícone preto
Ícones que usam currentColor salvam sem cor gravada e renderizam preto. Esse é o markup verdadeiro; recolora no seu editor. Detalhes aqui.
Uma nota sobre direitos
Recuperar os próprios ativos de um cliente para o redesign dele é um uso plenamente justo da ferramenta. Ela lê o que o navegador já carregou — respeite a propriedade da marca quando o site não for seu.

História composta — um fluxo ilustrativo, mas representativo. A pessoa e o cliente são fictícios; o comportamento da extensão descrito aqui é real. Mais histórias →


Recupere o vetor de verdade, não um decalque

Logos inline, ícones de fundo CSS, marcas em sprite — de qualquer página que você consiga abrir, num clique.