Gallusguide.ch – eine Website mit Geheimtipps für St. Gallen

Ausgangslage und Idee:

Lynn lebt schon ihr ganzes Leben in St. Gallen und kennt sich gut dort aus. Im vergangenen Sommer veröffentlichte sie 10 Beiträge über Plätze in St. Gallen auf dem Blog www.meine-stadt.sg. Wir wollten dasselbe auf einer eigenen Seite umsetzen, wobei der Guide Charakter im Vordergrund stehen sollte. So entstand die Idee, Geheimtipps für Touristen aus dem deutschsprachigen Raum zusammenzutragen und zu bebildern. Da Lynn auch eine sehr gute Fotografin ist, konnten wir ihre unzähligen St. Galler Bilder durchforsten und zu den Beiträgen passende Bilder finden. Alle Bilder, Texte und Animationen haben wir erstellt. Um das Thema «Guide» abzurunden, kam Samira auf die Idee, einen Helden zu kreieren, der die Besucher durch die Website führt und so zu einem Element unseres Storytellings wurde. Der Held ist Gallus, der Gründer der Stadt. Durch kurze, informative Animationsvideos, die Samira erstellte, bekommen die Besucher zusätzlich einen Einblick in die Stadt und die Website bekommt einen persönlichen Charakter

Erstellung der Website (Lynn und Samira):

Wir setzten uns wie gewohnt über Webex zusammen und suchten nach einem passenden Theme für unsere Website. Zuerst schauten wir auf wix.com, aber entschieden uns dann doch für ein gratis Theme von WordPress. Wir löschten erst mal alles aus dem Theme, was wir nicht wollten oder brauchten. Dann entschieden wir uns für das Headerbild (eine Fotografie von Lynn) und einen Titel mit passender Schrift. Wir definierten die Farben, welche Widgets wir brauchen und finalisierten das Layout. Wir hatten viele Ideen für unseren Website-Namen: gallusstadt.ch, gallusgeheimtipps.ch, galluscity.ch, mysterygallus.ch, gallussecrets.ch, gallusstory.ch, usw. Manche Ideen waren schon vergeben und manche waren einfach nur blöd. Unsere Wahl fiel letztendlich auf gallusguide.ch. Lynn erstellte eine spannende Countdownseite, die die Veröffentlichung unserer Website Inhalte bekannt gab. Samira erstellte ein kleines Logo für den Tab und die Website links im Bild. Wir entschieden uns dafür für den simplen Kopf von Gallus in Comic-Stil. Anschliessend überarbeitete Samira die kurzen Animationsvideos und Lynn schrieb die Beiträge mit den im Sommer erstellten Content (Bilder & Text). Zum Abschluss nahm Lynn gemeinsam mit ihrem Bruder die Stimmen für die Animationsvideos auf, damit Samira die Videos finalisieren und in die Website einbinden konnte.

Beiträge und Bilder (Lynn):

Wie bereits erwähnt, habe ich den Content (Bilder und Text) im Sommer 2020, während Corona produziert. Dies im Auftrag der Standortförderung Stadt St. Gallen, die gemeinsam mit Gewerbe Stadt St. Gallen, Pro City St. Gallen, Gastro Stadt St. Gallen, Hotels St. Gallen-Bodensee und St. Gallen-Bodensee Tourismus die Kommunikationskampagne «Sankt» für die St. Galler Innenstadt lancierte. Diese Kampagne baut auf Bildern von typischen städtischen Alltagssituationen auf und zeigt selbstbewusst die Vielfalt der Stadt St. Gallen. Der Begriff «Sankt» bildet die Klammer um alle Kommunikationsmassnahmen und streicht mit einer passenden Wortkombination die einzigartigen Angebote und Erlebnisse der St. Galler Innenstadt heraus. Die Internetseite www.meine-stadt.sg bietet konkrete Ideen und Inspirationen für einen Besuch St. Gallens.

Material sortieren und bereitstellen:

Zum Glück habe ich das ganze Material im vergangenen Sommer schon schön in einer Ordnerstruktur gespeichert und musste somit nur noch einen kleinen Aufwand für das Bereitstellen des Contents für gallusguide.ch betreiben. Die Bilder waren natürlich alle noch zu gross für digezz.ch, somit mussten diese noch in der Grösse angepasst werden. Auch den Bearbeitungsstil passte ich an, die Bilder sollten zum Beispiel noch etwas mehr Sättigung haben.

WordPress:

Das Schreiben der Beiträge nahm etwas Zeit in Anspruch, auch wenn es sich «nur» um Kopieren & Einfügen handelte. Jeder der insgesamt zehn Beiträge enthielt mindestens sieben Bilder und Empfehlungen.

Fazit Sommer & erneutes Aufbereiten der Beiträge:

Das Zusammenarbeiten mit den sechs Institutionen war sehr spannend, vielseitig und lehrreich. Vor allem der Austausch mit Samuel Zuberbühler, Leiter Standortförderung, war sehr angenehm und seine konstruktive Kritik brachte mich im Schreiben sowie im Fotografieren weiter. Der Kontakt mit den rund 70 Restaurants, Bars, Lädelis, ect. war für mich als St. Gallerin sehr cool, denn so konnte ich viele Kontakte knüpfen und den Besitzern/ – innen eine Freude mit meinen Bildern machen. Die 10 Wochen, in denen ich den Content aufbereitet habe, waren jedoch auch herausfordernd, da ich viel organisieren und planen musste, damit alles aufging. Dass ich das ganze Material jetzt für Digezz wiederverwenden konnte, freute mich besonders, denn die Beiträge finde ich sehr gelungen und so kann ich noch mehr Menschen von der Schönheit St. Gallens überzeugen und sie bestenfalls zu einem Besuch motivieren.

Animationen (Samira):

Angefangen hat alles mit dem Charakter Gallus. Geplant haben wir anfangs, dass wir ungefähr 3 Animationen machen werden. Eine Animation pro Kategorie z. B. Gastronomie. Wir haben letztendlich ein Begrüssungsvideo für die Startseite, ein Olma-Bratwurst Video für die Gastronomie und ein Video zur Gründungsgeschichte von St. Gallen.

Planung:

Zuerst ging es dann los mit dem Aufschreiben des Skripts. Ich musste mir überlegen, welche Informationen wir mit der jeweiligen Animation vermitteln wollen. Die Texte habe ich in Sprechblasen, Denkblasen und reinen Informationsblasen eingeteilt. Wichtig war es mir hier, die Texte so kurz wie es geht und so lang wie nötig zu machen. Der Besucher sollte nicht erschlagen, sondern nur spielerisch angeregt werden. Die weiteren Informationen sollte er sich ja in den Beiträgen unterhalb des Videos holen.

Charakter bauen in Photoshop:

Den Charakter Gallus habe ich versucht, simpel zu halten. Er sollte seine typische „Bruder Frisur“ oder „Heiligenschein Frisur“ haben. Auch sollten die Haare und Brauen grau sein. Sein Gewand blau. Ich habe mich hier an alten Bildern von Gallus orientiert. Die Haare könnten zwar besser aussehen, da sie etwas an abgetrennte Flugzeugflügel erinnern. Aber ich habe mein Bestes gegeben. Wichtig ist es hier, dass man nicht alles in einem Layer hat, sondern für die Körperteile, die man später bewegen möchte, einzelne Layer bestimmt. Auch zu beachten sind die Benennungen der Layer z. B. Left Eye. Die Layer müssen nach einem bestimmten Schema benannt werden, damit das nächste Programm, mit dem ich arbeite, diese auch erkennt und verlinkt.

Rigging in Charakter Animator:

In diesem Programm habe ich vor diesem Projekt noch nie gearbeitet und musste mich erst mal zurechtfinden und ausprobieren. Leider konnte ich einen Arm von Gallus in Charakter Animator nicht bewegen und weiss bis heute nicht, woran das liegt, da ich eigentlich alle Layer richtig beschriftet habe. Ich konnte dieses Problem jedoch durch den Videoanschnitt geschickt umgehen. Zum Erklären und Gestikulieren reicht Gallus zum Glück auch nur einen Arm. Dieses Programm ist sehr spannend und nimmt einem sehr viel Animationsarbeit ab, wenn man beim Modellieren alles richtig macht. Die Kamera und Mikrofon nimmt einem die Gesichts- und Kopfbewegungen und meine Stimme auf und verlinkt sie zeitgleich auf den gebauten Charakter. So konnte ich durch Lippenbewegungen, Augenblinzeln und das Heben meiner Augenbrauen meinen Gallus animieren. Mit der Maus konnte ich den Arm so bewegen, wie ich wollte. Manche Bewegungen konnte ich nicht durch die Kamera auslösen, sondern musste auf bestimmte Tasten klicken, die ich vorher im Programm festgelegt habe. Mich hat der Arbeitsprozess teilweise ans Programmieren erinnert. Wichtig war beim Aufnehmen das Timing. Ich brauchte für jeden Auslöser eine eigene Timeline. Als Erstes nahm ich meine Stimme und somit den Sprechtext der Figur auf, um zu sehen, wann welche Bewegung überhaupt Sinn macht. Danach konnte ich in der nächsten Timeline den gestikulierenden Arm mit der Maus passend zum Text bewegen. Dann konnte ich die Pupillen bewegen. Hier war es etwas schwierig, dies mit der Kamera zu lösen, da ich dadurch ungenaue Ergebnisse erzielte. Deshalb wechselte ich auf Tasten, die ich im richtigen Moment klicken musste. Das Blinzeln legte ich jedoch direkt mit der Kamera fest. Das Gleiche mit den Augenbrauen. Hier war es mir wichtig, dass ich soviel wie möglich blinzle, die Brauen hebe und senke, den Kopf neige, damit der Charakter so natürlich es geht aussieht. Natürlich ist zu viel Bewegung auch nicht gerade natürlich. Ich hatte viel Spass, die ganzen Funktionen des Programms auszuprobieren und dies beanspruchte viel Zeit. Das Recording der Takes ebenfalls.

Compositing in After Effects:

Dann ging ich über ins nächste Programm. Hier bestimmte ich einen weissen Hintergrund und die Sprech- bzw. Denkblasen der Figur passend zum gesprochenen Text. Ich erstellte die Blasen erst in Illustrator und ich arbeitete in AE wie gewohnt mit Keyframes, um alles ein- und auszublenden. Das Skalieren und Positionieren jedes Layers beanspruchte auch sehr viel Zeit. Auch war ich froh, dass ich bei diesen ganzen Objekten die Übersicht nicht verlor.

Ich erstellte ausserdem in Illustrator noch eine Bratwurst, einen Bär, einen Holzscheit, und ein Brot.

Dann exportierte ich alles und macht den Feinschnitt in Premiere.

Fazit Animationen:

Eine spannende Aufgabe, Gallus-Animationen zu machen! Mir hat die Arbeit in Charakter Animator am meisten Spass gemacht, weil man dort sehr viel ausprobieren konnte. Die Arbeit ist jedoch sehr zeitintensiv, unter anderem auch, da man in vielen Programmen arbeitet. Wichtig ist es auch, dass man alle Files gut beschriftet und die Übersicht nicht verliert, wenn man viele Versionen der Animation hat.

Stimme von Gallus und Informationsstimme (Björn und Lynn):

Bei der Erstellung der Animation von Gallus hat Samira zunächst provisorisch ihre eigene Stimme verwendet. Diese haben wir später im Prozess ausgetauscht. Wichtig war es uns, dass Gallus Stimme von einem Mann und die Faktblasen Stimme von einer Frau eingesprochen wird, um einen gewissen Kontrast zu haben und die Blasen voneinander unterscheiden zu können. Zusätzlich wollten wir Personen, die einen St. Galler Dialekt haben. So fiel die Entscheidung nicht schwer, dass wir für Gallus› Stimme Lynns Bruder Björn auswählten und für die Informationsstimme, die von Lynn nahmen. 

Fazit gallusguide.ch:

Wir finden unsere Arbeit sehr gelungen und für andere Besucher der Website und Besucher von St. Gallen sehr nützlich. Diese Website wird sicher auch in der Zukunft noch oft von uns bearbeitet werden, denn Lynn wird weiterhin mit ihrer Kamera durch die St. Galler Innenstadt schlendern und Schönes festhalten. Und auch Samira ist angetan vom Erstellen von Gallus-Animationen.

Die Teamarbeit hat zwischen uns sehr gut funktioniert trotz Corona, das in der Welt umherirrt. Wir sind ein eingespieltes und harmonisches Team und arbeiten in verschiedenen Projekten sehr gerne miteinander. Austauschen konnten wir uns immer wieder über Webex und Whatsapp und wir sind immer am Ball geblieben. Auch waren wir froh über die konstruktiven Feedbacks, die wir uns gegenseitig gegeben haben. Nur so konnten wir zu dem Ergebnis kommen, das wir heute vor uns haben.