Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Panoramafotografie: Virtuelle Touren mit Panotour Pro

Kopfleiste mit Logos einbauen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Auftraggeber wollen bei virtuellen Touren oft ihr Logo auf dem Bildschirm sehen. Sie können so etwas im Tab "Stil" platzieren und mit einem Link auf eine Website versehen.

Transkript

Ich möchte in diesem Video nun beginnen im dem Tab-Stil, erste einfache Elemente auf der Oberfläche zu platzieren. Wir fangen zunächst einmal mit passiven, oder quasi passiven Elementen an, die noch gar nicht so viel können. Was ich vorhabe, ist zunächst einmal einfach eine Kopfzeile einzufügen in die Oberfläche und auf dieser Kopfzeile, sollen dann zwei Logos sein. Das findet man hier in den Plugins unter "Bildzone". Dort sind die alle zusammengefügt diese Elemente, die im Prinzip jetzt keine großartige Interaktivität haben, außer die Logos, die natürlich klickbar sind und zum Beispiel zu einer Webseite verlinken kann. Diese Kopfleiste füge ich mal als erstes Element ein, einfach ein Doppelklick, dann wandert das Ding hier auf die linke Seite, und die Kopfzeile lasse ich mal so. Man kann das hier oben immer umbennen das Ganze, man kann auch Elemente duplizieren, wenn man zwei verschiedene braucht. Das können wir gleich nochmal gebrauchen, weil wir wollen 2 Logos dann auf dieser Kopfzeile platzieren. Aber die Kopfzeile kommt dann mal als erstes. Ich gehe das mal kurz durch, was man hier alles einstellen kann. Hier gibt es einfache Kopfzeile, klarerweise ist die immer oben. Es gibt bei sehr vielen Elementen dieses Viereck, wo man die Dinge in den Ecken und Mitten platzieren kann, und hier sieht man eben dann, wo das Element sozusagen verankert wird. Dieses Viereck ist relativ interessant, weil wir dort nämlich einen Versatz eingeben können, in welchen Abmessungen sich dieses Element zum Rand verhält. Und zwar ist hier "X" und "Y" immer relativ zu sehen, denn wir haben hier, wenn wir zum Beispiel einen "X" Wert haben, der ist positiv und das Element ist in dieser Ecke verankert, dann ist zum Beispiel, wenn ich hier sage 100 Pixel, dann verschiebt sich das 100 Pixel vom Rand und zwar nach links. Das "X" ist also nicht immer in die gleiche Richtung, und wenn ich jetzt hier hingehe und schreibe dort 100 px, dann wird es um 100 px nach rechts verschoben, und analog gilt auch von der Mitte aus, wenn ich dort ein Element mit Minus 100 px verschiebe, dann wandert es nach links von der Mitte und +100 px rechts von der Mitte. Und das gilt analog natürlich auch für "Y". Hier wäre es jetzt einmal im Prinzip für uns egal, weil das Element kommt in die Mitte. Es soll in der Mitte verankert werden, 00 das bleibt einmal. Wir können jetzt hier bei den Kopfzeilen noch Texturen dahinterlegen. Das sind einfach verschiedene Muster, das brauchen wir nicht. Wir wollen einfach nur eine einfarbige Kopfzeile haben, die einfach dafür sorgt, dass die Logos auf einem relativ hellen Hintergrund stehen. Der einfache Sinn dahinter ist der, dass natürlich, wenn sich das Panorama dreht, der Hintergrund mal hell, mal dunkel sein kann, und bestimmte Logos sollten nur auf Hell stehen, oder nur auf Dunkel, beziehungsweise es gibt dann eine Variation für dies, eine Variation für dies. Gerade bei Logos sind Auftraggeber immer sehr heikel, und man hat da gewisse Richtlinien einzuhalten und den sollte man nachkommen. Ich mache jetzt mal hier eine Farbe, das ist diese Farbwähler, der zieht sich durch das ganze Programm, ist immer der Gleiche, ich ziehe das mal ganz nach unten, dann wird hier weiß eingegeben. Ich hätte das aber ganz gerne ein bisschen transparent und gebe mal hier bei Alpha so ungefähr 150 ein. Hier sieht man den Alphaschieber, man kann das hier auch bewegen, aber ich gebe dann meistens immer fixe nummerische Werte ein, dann stimmt das eigentlich alles, und diese Kopfleiste, die ist jetzt sozusagen weiß transparent und liegt oben über dem Rand des Panoramas. Dann geht es um die Größe, wie hoch ist die, und ich mache die jetzt mal hier 100 Prozent, das heißt, die bewegt sich über die gesamte Breite. Kann ich in Pixeln angeben, sollte man immer Prozent machen, denn man kann ja den Bildschirm auf und zuziehen, beziehungsweise es soll auf Mobilgeräten auch für Hoch- und Querformat funktionieren, deswegen ist es immer ganz gescheit, bei solchen Elementen mit Prozent zu arbeiten, und die Prozente beziehen sich normalerweise immer auf die Größe des Bildschirmfensters. So, Höhe, ich sage mal, das soll nicht allzu groß sein. 50 Pixel. Und hier kann ich eingeben, "Reagiere auf zeigen/verstecken" Einstellung. Diese "zeigen/verstecken" Einstellung, das ist ein Button, der später dazukommt, damit kann man das gesamte User Interface abschalten, wenn man sich nur dem Genuss der Panoramen hingeben will, und dieses "Show/Hide" ist auf Englisch, das wird zum Beispiel auch aktiviert, wenn der Startbildschirm gezeigt wird, dann wird automatisch alles versteckt, wenn man dort aktiviert, wie wir das schon gesehen haben. Und die Oberflächen hier, sieht man eben die Muster, die man auswählen kann für diese Leiste, aber ich lasse das jetzt hier ganz normal auf Standard und einfarbig. Da kann man auch eigene Muster hinterlegen, wenn man möchte, ist meistens also ein bisschen aufdringlich diese Geschichte, deswegen bin ich immer ein Freund von sogenannten Solid Colors hier und das sollte in meiner die Liste drin sein. Ich speichere das mal gerade und jetzt würde übliche Routine zum Kontrollieren speichern, dann Command+"B" für Bild und Command+"R" um es anzuschauen. Das war offenbar nicht kräftig genug. Wenn ich hier auf den Startbildschirm klicke, dann haben wir jetzt oben diese weiße Leiste in 50 Pixel Höhe. Und die soll mir jetzt als Hintergrund dienen, für Logos, also da kommen die beiden Logos, kommen einmal auf die rechte Seite und links werde ich dann einen Titel der Tour eingeben und danach kommt noch der Titel für Gruppen und auch noch die Beschreibung. Der Titel von dem jeweiligen Panorama. Also, wir benutzen das auch so ein bisschen als Fläche, um so Anzeigeelemente bisschen zu konzentrieren, dass die möglichst wenig Platz auf dem Bildschirm einnehmen, aber trotzdem gut zu lesen sind. Das wäre mal die Kopfzeile, und jetzt kommen die Logos dazu. Vielleicht klicke ich einmal auf das Logo, und nenne das Erste mal "ef". Das ist diese Energieforum das soll der Verein sein, der diesen Lerngarten dort betreibt und das Logo hätte ich gerne in der rechten Ecke angehängt. Und ich möchte ein bisschen Abstand vom Rand haben. Ich sage mal hier 8 Pixel. So und ich mache es immer in der Breite ein bisschen mehr, als von oben nach unten. Die Logopositionierung auf der Benutzeroberfläche, die Alternative schauen wir uns gleich an. Jetzt will ich eine Datei haben, die das macht, das ist "Logo F", das ist 40 Pixel hoch. Das ist ein ganz normales "png" mit Transparenzen. Das ist grundsätzlich zu empfehlen, wenn es darum geht, solche Sachen zu platzieren, weil man dann eben auch einfach Schatten einbauen kann. Und das ist jetzt mal die Web-Adresse, die hinter diesem Logo liegt, die kopiere ich mir gerade mal und die kommt hier rein. Standardmäßig öffnet in einem neuen Fenster, das ist also für HTML-Kundigen unter ihnen, das ist einfach"_blank", das heißt, dieser Link wird immer in einem neuen Fenster aufgemacht, oder in einem neuen Tab, je nachdem, wie sie ihren Browser einstellen. "Zeige Hinweis" heißt, da kommt ein kleiner Tooltipp, wenn die Maus drüber fährt, dann wird schon gezeigt, was da passiert, und unten kann man dann auch noch angeben, hier sage ich mal "Energieforum.at" in Klammern, damit die Leute wissen, was passiert, wenn ich da drauf klicke. "Benutzerdefinierten Stil für die Kurzinfo verwenden", das kann man anklicken, dann kann man hier sagen, wie soll dieser Text ausschauen, der dann neben der Maus erscheint. Das mache ich lieber global, da komme ich noch darauf zu sprechen. Und bei Breite, Höhe kann man null Pixel angeben, dann wird einfach der Wert genommen, denn diese Logodatei an sich hat, und man kann das aber auch zum Beispiel hier mit dieser Möglichkeit in Pixel und Prozent skalieren, wenn man möchte, ist immer besser das möglichst in der gewünschten Originalgröße anzuliefern, weil die Skalierung, die läuft nicht immer so wunderhübsch ab, und wenn die Sachen eins zu eins in 100 Prozent abgeliefert werden, dann schaut das meistens am besten aus. Hier kann ich jetzt noch sagen "Reagiere auf zeigen/verstecken" Einstellung, gleich über der Kopfzeile, da kann ich also dafür sorgen, dass das Ganze dann auch verschwindet. zum Beispiel während dem Startbildschirm, und wenn ich das Interface abschalten möchte. So ist das eine. Ich benutze jetzt mal den "Duplizieren" Button und sage mal "ef1", und das soll das Logo vom Verbund sein. Ich brauche nämlich dann nur ein paar Werte ändern. einziger Unterschied, ich habe eine andere Datei. Das ist jetzt "Logo Verbund", 40 Pixel. Das kommt hier rein, natürlich ist die Web-Adresse auch eine andere. Und da verlinke ich mal direkt auf die Seite, die beim Verbund auf dieses Kraftwerk verweist, und das lösche ich mal weg und füge das da ein, auch wieder in einem neuen Fenster, hier unten ändere ich das mal auf "Verbund.com". So, soll ja hier Punkt sein und kein Strich. Und jetzt geht es noch drum das Logo zu platzieren. Da können wir kurz gucken, das ist jetzt für das eine Logo 8 Pixel. Schauen mal kurz in die Bridge, wie breit das "Verbund Logo" ist. Das ist 196 breit, beziehungsweise eigentlich müssen wir gucken, wie breit das Logo ist, weil das soll rechts stehen, das soll links daneben stehen, da brauchen wir die Breite von dem, 154. Dann lassen wir mal ein bisschen Platz dabei. Ich sage mal so 180, 185, eigentlich mal so, schätze ich, muss man mal ein bisschen herumprobieren, und dann wird das jetzt praktisch soweit von rechts reingerückt, dass das rechte daneben Platz hat. Ganz wichtig ist noch die Reihenfolge der Sachen, wie die hier in diesem Arbeitsbereich platziert sind. Was unten liegt, liegt auch unten. Das heißt, die Logos sind jetzt über der Kopfzeile, andernfalls würden Sie nämlich von der Kopfzeile abgeschattet. Das heißt, die Sichtweise ist immer von oben nach unten, genau so wie Photoshop eben, was oben liegt, deckt alles ab, was darunter liegt, und das gilt eben hier analog auch. Jetzt probieren wir mal, ob wir nichts vergessen haben, Ich speichere das mal, und "builde" das mal. Wie gesagt, diese Sachen gehen jetzt einfach schnell, weil da wird eine Datei hinzugefügt so ein kleines "png", ein bisschenCode, und das wars. So, klicken wir mal hier darauf, und jetzt sollte hier oben eigentlich das Ganze erscheinen, und wenn hier wir drüber fahren mit der Maus, dann steht da, Webseite öffnet "Verbund.com" und Webseite öffnet "Energieforum". Klicken man da drauf, dann gbit es eine neue Seite, man sieht schon, das passt einmal. Und wir haben gesehen, am Anfang, wenn ich den Startbildschirm noch stehen habe, ist das noch weg, erst wenn der sozusagen dieses "show/hide"-Flag setzt, das heißt, wenn er verschwindet und alles auf "show" stellt, dann erscheint auch diese Leiste. Wenn ich die permanent sichtbar haben möchte, dann muss ich nur das Häkchen wegmachen, und dann sind diese drei Teile, - sozusagen, bei allen dreien das Häkchen wegmachen, hier unten - dann sind die permanent sichtbar, auch schon zu Beginn. Das waren also die ersten drei einfachen Elemente, die ich jetzt mal über den Tab-Stil in das Interface von unser Panorama Tour eingebaut habe.

Panoramafotografie: Virtuelle Touren mit Panotour Pro

Lernen Sie, wie Sie aus einzelnen Panoramen eine interaktive, klickbare Besichtigungs-Tour für die Präsentation im Web erstellen.

8 Std. 49 min (75 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:09.03.2017
Laufzeit:8 Std. 49 min (75 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!