Logo erstellen: Bildmarke, Schriftzug, Icons

Weil ein Logo genau dort scheitert. Am Bildschirm wird es groß gebaut, arbeiten muss es klein: 16 Pixel im Browser-Tab, ein Icon auf dem Handy, ein Avatar-Kreis, ein Aufdruck auf der Schachtel. Eine Marke mit dünnen Linien und einem Slogan aus fünf Wörtern wird in diesen Größen zum grauen Fleck, und davon erfährt man besser jetzt als nach der Druckauflage. In derselben Reihe stehen die einfarbige Version und die Simulation der Farbsehschwäche: der Kontrast kann ordentlich sein, und Rot auf Grün verschmilzt für jeden zwölften Mann trotzdem.

Ja, und das ist die Antwort auf „ich habe schon eine Marke“. Eine SVG-Datei wird in Kurven zerlegt und wird zur Marke wie unsere: ist sie einfarbig, färbt sie sich mit dem Logo um, eine mehrfarbige behält ihre Farben. Ein gewöhnliches Bild — PNG, JPG, WebP, ein Scan von Hand — wird entlang der Kontur nachgezeichnet und in Vektor verwandelt: danach skaliert es verlustfrei, nimmt die Palettenfarbe an und geht als Kurven ins SVG, nicht als Punkte. Den Detailgrad regelt ein Schieber, und liegt eine helle Zeichnung auf dunklem Grund, hilft die Schaltfläche „Invertieren“. Wenn Nachzeichnen nicht gelingt — etwa bei einem Foto —, wird das Bild unverändert eingefügt, und das steht ausdrücklich unter der Vorschau: sonst wäre das Versprechen „echter Vektor“ unwahr.

Es ist wirklich vektoriell und in sich geschlossen. Ein verbreiteter Ersatz ist eine PNG-Datei in einer SVG-Hülle: sie öffnet, verschwimmt aber beim Vergrößern. Der zweite ist ein Schriftzug als text-Tag: auf Ihrem Rechner sieht er richtig aus, in der Druckerei oder beim Gestalter springt eine Systemschrift ein, und das Logo ändert stillschweigend seine Formen. Hier sind die Buchstaben in Pfade umgewandelt, die Datei hängt also von nichts ab und lässt sich in jedem Vektorprogramm bearbeiten. Gut zu wissen: bei mehreren bekannten Generatoren gibt es Vektor überhaupt nicht — Adobe Express exportiert auf keinem Tarif SVG, und Squarespace wie der Generator von Shopify geben nur PNG.

Es sind vier verschiedene Arten zu scheitern, jede mit ihrer eigenen Zahl. „Kontrast“ ist das Leuchtdichteverhältnis von Marke und Grund nach der WCAG-Formel: je höher, desto sicherer ist das Logo zu sehen; unter drei wird die Angabe zur Warnung, denn eine hellgraue Marke auf Weiß wirkt im Entwurf hübsch und verschwindet auf der Visitenkarte. „Farbsehschwäche“ ist derselbe Kontrast, berechnet nach der Simulation der häufigsten Farbsehstörung: Rot auf Grün kann eine ordentliche erste Zahl liefern und in der zweiten verschmelzen. „Auf Dunkel“ misst die Marke gegen eine dunkle Oberfläche — dort verschwindet ein fast schwarzer Schriftzug. „Bei 16 px“ warnt, dass ein Slogan in dieser Größe nicht lesbar ist; sein Platz ist die große Version, nicht das Favicon.

Favicon 16, 32 und 48 Pixel für den Browser-Tab, ein daraus gebautes favicon.ico für ältere Browser und Windows-Verknüpfungen, apple-touch-icon 180 für den iPhone-Startbildschirm, Icons 192 und 512 für das Manifest, ein maskierbares 512-Icon mit Rand (das System beschneidet es unter Android auf die Icon-Form), favicon.svg, ein fertiges site.webmanifest und eine head.html mit den Einbindungszeilen. Die Dateien kommen in das Wurzelverzeichnis der Website, die Zeilen aus head.html in den head-Bereich der Seite. Die Transparenz ist bei apple-touch-icon und beim maskierbaren Icon bewusst entfernt: iOS legt ein transparentes Icon auf Schwarz, und die Ecken werden schwarz.

Die Bildmarken wurden für dieses Werkzeug gezeichnet, nicht einer öffentlichen Icon-Bibliothek entnommen. Der Unterschied betrifft nicht nur die Ähnlichkeit. Der Generator von Squarespace bezieht seine Symbole aus einer fremden Bibliothek, und dessen eigene Hilfe schreibt, man solle vor der Veröffentlichung die Lizenz des jeweiligen Icons lesen; ein Teil der eingebauten Elemente von Adobe Express trägt eine Lizenz, die den Export als eigenständige Datei ausdrücklich verbietet — und ein Logo ist genau eine eigenständige Datei. Bei unseren Marken gibt es diesen Absatz nicht. Die Formen sind hier bewusst einfach und geometrisch: solche bleiben bei 16 Pixeln lesbar, was kein detailreiches Icon schafft. Wenn es noch eigener sein soll — laden Sie eine Grafik hoch oder nehmen Sie ein Monogramm aus den Initialen.

Ja. Fehlen der gewählten Zierschrift die Zeichen — Bebas Neue etwa hat weder Kyrillisch noch Hangul —, wird der Schriftzug in einer Schrift gesetzt, die sie enthält, und unter der Vorschau steht ausdrücklich, in welcher. Eine Schrift stillschweigend zu ersetzen wäre schlechter: Sie sähen ein Logo, das nicht Ihres ist, und wüssten es nicht. Arabisch wird mit korrekter Laufrichtung und Buchstabenverbindung gesetzt.