Fuchs-Logo

website featured

In diesem Artikel erzähle ich, wie ich das Website-Logo entworfen habe.

Das Theme "Quark" für das Grav-CMS kommt standardmäßig mit dem Grav-Logo in der linken Ecke der Kopfleiste. Zuerst habe ich darüber nachgedacht, auch ein gemischtes Logo mit einem kleinen Bild und Text zu machen. Allerdings finde ich Text aus zwei Gründen problematisch: Erstens fällt mir keiner ein. Einfach etwas wie afuchs.de zu schreiben, wäre mir zu langweilig. Zweitens ist da das Problem der Schriftart. Das oberste Gebot wäre natürlich, eine freie Schriftart zu verwenden, um keine Lizenzen zu brechen. Sollte sie mit oder ohne Serifen sein? Möchte ich in Klein-, Großbuchstaben oder Kapitälchen schreiben?

Diese Überlegung habe ich schließlich auf später verschoben und mich an den Entwurf des kleinen Logos zu machen. Dieses sollte auf jeden Fall einen Fuchs darstellen. Ich hatte schonmal einen stilisierten Fuchskopf entworfen, das aber sehr stark dem Emblem der Decepticons ähnelt. Den wollte ich also nicht her nehmen. Ich hatte schließlich die Idee, die Silhouette eines Fuchses mit Inkscape zu zeichnen. Das hat mehrere Vorteile:

  • Das Logo liegt direkt als Vektorgrafik vor, so dass es auf allen Geräten gleich aussieht. Es kann unabhängig von der Bildschirmauflösung skaliert werden.
  • Da ich das Logo selbst gemalt habe, kann niemand sagen, ich hätte es von ihm geklaut (Außer natürlich, ich hätte zufällig etwas gezeichnet, das es schon gibt.) Dadurch kann ich sogar jedes beliebige Stockphoto als Vorlage nehmen.

Ich habe mir dann das Bild Norwegian Red Fox - Killed on the road P4 als Vorlage herausgesucht. Ja, der Fuchs ist angefahren. Aber er sieht aus, als würde er laufen und ist perfekt von der Seite fotografiert. Ich habe das Bild in Inkscape importiert. Zuerst habe ich etwas mit der Funktion "Bitmap nachzeichnen" herumexperimentiert. Die macht so eine Art Poster aus dem Bild, aber da kam nichts gutes heraus. Mit einem Pfad habe ich die Umrisse des Tiers nachgezeichnet, dann noch das Auge ausgeschnitten. Da der Fuchs auf dem Bild das Maul leicht geöffnet hat, war die Schnauze erst sehr hoch. Damit sah der Schatten eher aus wie der eines Hundes. Daher habe ich den Unterkiefer abgetrennt. Der Fuchs hat jetzt keine Zähne aber wenigstens erscheint die Schnauze dadurch dünner.

Als ich etwas herausgezoomt habe, ist mir aufgefallen, dass die Vorderpfoten so aussehen, als könnte eine davon auf einem kleinen Absatz stehen. So kam mir die Idee mit dem PC auf der rechten Seite. Das macht das Logo auch etwas breiter, so dass ich vielleicht gar keinen Text mehr brauche. Es sollte also eine Tastatur werden, auf der der Fuchs steht, und ein Monitor. Der muss natürlich mit Bildröhre sein, da er so meiner Meinung nach besser als solcher zu erkennen ist und das Logo so eben noch breiter wird. Zuerst habe ich gedacht, Stock Photos zum Thema "Hacker" könnten vielleicht Bilder von Menschen sein, die vor einem Computer sitzen, und seitlich abgelichtet sind. Aber falsch gedacht: Ich habe ein einziges Bild gefunden, das war aber mit einem Notebook. Als nächstes versuchte ich mein Glück mit Stichworten wie "crt monitor side". Leider scheint der Markt für perfekt seitlich abgelichtete Bilder sehr klein zu sein.

Schließlich hatte ich noch eine Idee: Vielleicht gibt es irgendwo ein 3D-Modell eines Monitors zum herunterladen. Dann könnte ich mit blender sogar eine orthogonale Projektion davon machen. Tatsächlich habe ich ein Modell gefunden - für fünf Dollar. Die Beschreibung enthielt aber ein Rendering von der Seite. Ha! Mehr Probleme machte tatsächlich die Tastatur, denn auch auf den 3D-Modell-Webseiten wollte anscheinend niemand die Tastatur von der Seite zeigen. Das einzige Modell, das einfach so herunterladbar war und ansprechend aussah, konnte blender nicht importieren. Eher zufällig stieß ich dann auf eine Produktbeschreibung für eine Tastatur, die das seitliche Bild enthielt. Dann habe ich die drei Schatten noch zurecht skaliert und zusammengesetzt.

Das fertige Logo

Um das Logo einzubauen, habe ich einfach das original Logo im Theme ersetzt. Es fiel auf, dass das Logo durch den nach oben gestellten Schwanz insgesamt etwas klein heraus kommt. Ich habe den Monitor noch etwas größer skaliert und den Schwanz angepasst, damit er nach unten hängt.

Das Favicon

Jetzt fehlt nur noch das Favicon. Das habe ich mit GIMP aus dem Original ausgeschnitten. Leider wollte es zuerst nicht laden. Vielleicht ein Problem mit Firefox? Tatsächlich: nachdem ich den Cache gelöscht habe, geht es. Übrigens kann man den Cache für eine einzelne Website löschen, indem man die Funktion "Diese Website vergessen" im Browserverlauf benutzt.

Previous Post Next Post