Histoire — freelance & agence
Sauver des actifs de marque quand les fichiers sources ont disparu
« Le client m'a engagé pour refaire son site. Quand j'ai demandé le logo et le jeu d'icônes, on m'a envoyé un haussement d'épaules plein d'espoir et un accès. L'agence qui l'avait construit trois ans plus tôt avait disparu, et les fichiers sources avec elle. Mais les vecteurs étaient toujours là — vivant sur leur propre page d'accueil. »
Le contexte
Une refonte qui a commencé par une chasse au trésor
Ce qui ne marchait pas
« Mon premier réflexe a été de capturer le logo et de le vectoriser. C'est une heure par marque, et ce n'est jamais tout à fait juste — la tension des courbes est fausse, les angles sont approximatifs. Pour un logo, “approximatif” n'est pas acceptable. On voit la différence sur le papier à en-tête de la marque. »
L'Enregistrer l'image sous… du clic droit n'a mené Devin nulle part : le logo était un <svg> en ligne, les icônes de rubriques des background-image CSS, et quelques-unes venaient d'un sprite. « Le navigateur faisait comme si ce n'étaient pas des images. Ce qui, techniquement, est vrai — c'est du balisage. C'est tout le piège. »
Le changement
Devin a ouvert la page d'accueil en ligne du client, cliqué sur SVG Downloader, et le popup a listé tout ce qu'il y avait sur la page. En feuilletant les aperçus isolés, le logo était le troisième élément — propre, seul, hors de l'en-tête chargé. Un nom de fichier, un clic, et Enregistré logo.svg.
« Il est arrivé avec le xmlns déjà réparé, il s'est donc ouvert directement dans Figma. Courbes complètes, vrais points d'ancrage, modifiable. J'ai recoloré deux ou trois qui sont sortis en noir — ils utilisaient currentColor, c'est normal — et je concevais avec la vraie marque en dix minutes. » Les icônes de rubriques sont venues dans la même passe ; celles en fond CSS, qu'aucun menu d'enregistrement n'aurait touchées, étaient simplement là dans la liste.
« J'avais chiffré la récupération en demi-journée, par habitude. Ça a pris un café. J'ai arrêté de gonfler cette estimation — et j'ai complètement arrêté de vectoriser des logos. »
— Devin Alvarez, designer web freelanceLe résultat
- ~15 icônesplus le logo et le logotype récupérés en vrai vecteur modifiable
- 10 minde « où sont les fichiers sources ? » à concevoir avec la vraie marque
- Sans vectorisationcourbes et points d'ancrage d'origine, pas une approximation à la main
- Ce qui a fait le travail
- La méthode universelle — sources en ligne, fond CSS et sprite dans un même popup — terminée par des enregistrements Télécharger le courant sous des noms choisis.
- Le piège de l'icône noire
- Les icônes qui utilisent
currentColors'enregistrent sans couleur inscrite et s'affichent en noir. C'est le vrai balisage ; recolorez-le dans votre éditeur. Détails ici. - Une note sur les droits
- Récupérer les actifs d'un client pour son propre client et sa propre refonte est un usage pleinement légitime de l'outil. Il lit ce que le navigateur a déjà chargé — respectez la propriété de la marque quand le site n'est pas le vôtre.
Histoire composite — un déroulé illustratif mais représentatif. La personne et le client sont fictifs ; le comportement de l'extension décrit ici est réel. Plus d'histoires →
Récupérez le vrai vecteur, pas un calque
Logos en ligne, icônes en fond CSS, marques en sprite — depuis n'importe quelle page ouvrable, en un clic.