Fotos, GIFs und QR-Codes im Designer

In diesem Artikel behandeln wir, wie Sie Fotos, GIFs und QR-Codes im Designer hinzufügen und bearbeiten.

• Fotos
  • Hintergrund
  • Filter
  • Zuschneiden
  • Maske
  • Ersetzen
  • Hintergrund-Entferner
  • Link
  • Einstellungen
  • Effekte
  • Animieren
  • Position
  • Sperren / Stil kopieren
• GIPHY
• QR-Codes

Mit dem Designer können Sie eine große Auswahl an Stock-Fotos, GIFs von GIPHY und anpassbare QR-Codes verwenden, um Ihre Designs dynamischer zu gestalten.

Weitere allgemeine Informationen zur Designer-App finden Sie in unserem Leitfaden Erste Schritte mit dem Designer.

Diese Optionen können über das Designer-Seitenmenü aufgerufen werden:

Fotos

Durch Auswahl der Option Fotos wird der Fotos-Bereich des Seitenmenüs geöffnet:

Hier können Sie nach beliebigen Stock-Fotos suchen, die Sie verwenden möchten. Nach der Auswahl wird es im Design platziert.

Um das Foto zu bearbeiten, wählen Sie es aus. Die Optionen im oberen Menü ändern sich:

Wir werden jede dieser Optionen der Reihe nach durchgehen.

Hintergrund

Mit der Option Hintergrund können Sie die Hintergrundebene des Fotos ändern.

Filter

Die Option Filter öffnet das Seitenmenü, in dem Sie verschiedene Filter auswählen können, um sie Ihrem Foto hinzuzufügen:

Zuschneiden

Mit der Option Zuschneiden können Sie das ausgewählte Foto oder Bild zuschneiden.

Der Zuschneidebereich kann gezogen, erweitert und verkleinert werden, mit Optionen für das Seitenverhältnis und der Möglichkeit, das Bild zu spiegeln und zu drehen. Eine Vorschau des zugeschnittenen Bildes wird oben rechts auf dem Bildschirm angezeigt, und die Größe des Bildes wird angezeigt. Schließlich kann der Zuschneidebereich in ein Rechteck oder einen Kreis geändert werden.

Maske

Durch Klicken auf die Option Maske wird die Masken-Option im Seitenmenü geöffnet.

Durch Auswahl einer Form aus dem Maskenmenü wird automatisch eine Maske dieser Form auf das Bild angewendet. Das Bild kann nach Anwendung der Maske weiterhin verschoben werden.

Durch Klicken auf Maske bearbeiten können Sie die Maske selbst um das Bild herum bewegen. Durch Klicken auf Umkehren werden die maskierten Bereiche vertauscht. Durch Klicken auf Maske anwenden wird die Maske erneut auf das Bild angewendet.

Ersetzen

Mit der Option Ersetzen können Sie das Bild oder Foto durch ein Bild vom aktuellen Gerät ersetzen. Dies kann über das obere Menü oder die Schnellaktionsleiste aufgerufen werden:

Hintergrund-Entferner

Die Option Hintergrund-Entferner erkennt und entfernt automatisch Hintergründe von Bildern. Derzeit unterstützt sie nur die automatische Entfernung und es ist nicht möglich, den Hintergrund individuell zu löschen oder wiederherzustellen.

Sie müssen warten, bis das Ladesymbol fertig ist:

Klicken Sie anschließend auf Speichern, und der Hintergrund wird verschwunden sein.

Link

Durch Auswahl der Option Link können Sie Ihr Foto oder Bild in ein interaktives Element verwandeln, das hauptsächlich für Kiosksysteme verwendet wird. Es öffnet den Bereich Link-Optionen in der linken Navigationsleiste:

Durch Klicken auf Link hinzufügen werden Sie aufgefordert, eine URL einzugeben oder ein Asset auszuwählen:

Sobald ein Link oder Asset ausgewählt wurde, werden weitere Optionen im Bereich Link-Optionen angezeigt:

Durch Erweitern des Bereichs Skalierung wird diese Option für Ihr Asset bereitgestellt:

Hier wählen Sie aus, wie das Bild skaliert werden soll. Es gibt drei Optionen:

• Anpassen (Standard) - Passt das Bild an den Bildschirm an.
• Strecken - Streckt das Bild, um den gesamten Bildschirm zu füllen.
• Zoom - Zoomt in das Bild hinein, um den gesamten Bildschirm zu füllen. Nicht empfohlen für kleine Bilder auf großen Displays, da dies zu Unschärfe führt.

Durch Erweitern des Bereichs Einstellungen werden diese Optionen für Ihren Link bereitgestellt:

• Dauer (Sekunden) - Wenn der Link angeklickt oder angetippt wird, wie lange der Link oder das Asset angezeigt wird, bevor zum Hauptdesign zurückgekehrt wird. Dies beginnt ab der letzten Berührung des Bildschirms oder dem Zeitpunkt, zu dem der Link angeklickt wurde.
• Vorladen - Wenn aktiviert, wird die Website geladen, wenn das Design geladen wird. Dies reduziert die Zeit, die benötigt wird, bis die Website erscheint, wenn der Link angeklickt wird. Allerdings kann das Laden zahlreicher Links zu Verzögerungen führen.

Durch Erweitern des Bereichs Schließen- & Navigationsleisten-Gestalter werden diese Optionen für Ihren Link bereitgestellt:

Dieser Bereich bezieht sich auf die Schaltfläche, die auf Ihren Bildschirmen angezeigt wird, wenn sie darauf übertragen wird. Durch Klicken oder Tippen auf diese Schaltfläche kehren Sie zum ursprünglichen Design zurück.

• Symbol-Position - Zeigt an, wo dieses Symbol erscheint. Standardmäßig unten zentriert, kann aber überall am oberen oder unteren Rand platziert oder vollständig ausgeschaltet werden.
• Symbol-Stil - Ermöglicht die Einstellung des Symbol-Stils. Wählen Sie zwischen Label, Solid, Round oder Standard (siehe oben)
• Symbol-Größe - Ermöglicht die Änderung der Symbolgröße. Wählen Sie zwischen Klein, Mittel, Groß oder Standard (siehe oben)
• Symbol-Farbe - Ändern Sie die hexadezimale HTML-Farbe des Symbols, um es besser an Ihr Design anzupassen.
• Hintergrundfarbe - Ändern Sie die hexadezimale HTML-Farbe des Symbol-Hintergrunds, um ihn besser an Ihr Design anzupassen.
• Deckkraft - Mit dem Schieberegler können Sie ändern, wie deckend oder transparent der Symbol-Hintergrund ist.
• Navigationsleiste anzeigen - Wenn aktiviert, werden dem Symbol kleine Navigationspfeile hinzugefügt. Ermöglicht die schnelle Navigation durch mehrere Links. Sieht so aus:

Einstellungen

Durch Auswahl der Schaltfläche Einstellungen wird der Bereich Datenzuordnung im Seitenmenü geöffnet:

Durch Klicken auf Datenzuordnung erstellen können Sie den ausgewählten Text dynamisch gestalten und ihn einer Ihrer vorhandenen Datenquellen zuordnen. Weitere Informationen finden Sie in unserem Artikel über Dynamische Datenquellen mit OptiSync.

Effekte

Durch Auswahl der Option Effekte können Sie verschiedene Aspekte Ihres Textes ändern. Es öffnet den Bereich Effekte im Seitenmenü:

Hier haben Sie zahlreiche Optionen. Wir werden jede einzelne durchgehen.

Durch Erweitern des Bereichs Farbe können Sie dem Foto oder Bild Farbe hinzufügen.

Wählen Sie aus voreingestellten Farben, in diesem Design verwendeten Farben oder über den Farbwähler.

Durch Erweitern des Bereichs Hintergrund können Sie eine bestimmte Hintergrundfarbe für das Foto oder Bild festlegen. Dies ist funktional dasselbe wie die Hintergrund-Option aus dem oberen Menü.

Durch Erweitern des Bereichs Deckkraft können Sie die Deckkraft des ausgewählten Bereichs variieren - Hintergrund und Text zusammen.

Dies kann über einen Schieberegler angepasst werden. Unten wird halbe Deckkraft gezeigt:

Durch Erweitern des Bereichs Umriss können Sie dem Foto oder Bild einen Umriss hinzufügen. Sie können eine Farbe aus einem Dropdown-Menü auswählen oder den Farbwähler verwenden und mit dem Schieberegler die Dicke ändern.

Durch Erweitern des Bereichs Schatten können Sie einen Schatten über das Foto oder Bild erstellen. Standardmäßig sind alle Schieberegler weiß.

Das Anwenden einer Farbe erzeugt einen Schatten, und durch Ändern der Schieberegler können Sie die Unschärfe ändern und den Schatten entlang der X- oder Y-Achse verschieben.

Durch Erweitern des Bereichs Verlauf werden mehrere Verlaufsoptionen für Ihren Text angezeigt. Durch Klicken auf eine dieser Verlaufsoptionen wird sie auf Ihren Text angewendet.

Der Bereich Textur ähnelt dem Verlaufsbereich. Er zeigt mehrere Texturoptionen für Ihren Text an. Durch Klicken auf eine dieser Texturoptionen werden sie auf Ihren Text angewendet.

Animieren

Durch Auswahl der Schaltfläche Animieren können Sie Animationen zu Ihren Fotos oder Bildern hinzufügen. Durch Klicken wird der Bereich Animieren im Seitenmenü geöffnet:

Es gibt zahlreiche Optionen zum Hinzufügen von Animationen zu Ihrem Design. Weitere Informationen dazu finden Sie in unserem Artikel Animationen.

Position

Durch Auswahl der Option Position wird der Positionsbereich des Seitenmenüs geöffnet. Dies ermöglicht es Ihnen, das Foto oder Bild präzise zu platzieren oder seine Ebene zu ändern.

• Nach vorne bringen - Bringt das ausgewählte Foto oder Bild auf die oberste Ebene
• Eine Ebene nach vorne - Bringt das ausgewählte Foto oder Bild eine Ebene nach oben
• Nach hinten senden - Bringt das ausgewählte Foto oder Bild auf die unterste Ebene
• Eine Ebene nach hinten - Bringt das ausgewählte Foto oder Bild eine Ebene nach unten
• An Seite ausrichten - Optionen zum Ändern der Ausrichtung des ausgewählten Fotos oder Bildes
  • Links
  • Zentriert
  • Rechts
  • Oben
  • Mitte
  • Unten
• Gleichmäßig verteilen - Richtet das Foto oder Bild innerhalb der größeren Auswahl aus
  • Vertikal
  • Horizontal
• Spiegeln - Spiegelt das ausgewählte Foto oder Bild
  • Horizontal
  • Vertikal
• Position - Ermöglicht die spezifische Platzierung von Foto oder Bild im Design
• Größe ändern - Ermöglicht die präzise Größenanpassung des ausgewählten Foto- oder Bildelements
• Seitenverhältnis beibehalten - Wenn aktiviert, wird das Seitenverhältnis bei der Größenänderung beibehalten

Sperren / Stil kopieren

Durch Klicken auf die Schaltfläche Sperren wird das ausgewählte Foto oder Bild an Ort und Stelle gesperrt, wodurch verhindert wird, dass Änderungen daran vorgenommen werden.

Dies ist nützlich, wenn Sie mit vielen Elementen in einem Design arbeiten.

Mit der Schaltfläche Stil kopieren können Sie den Stil des ausgewählten Fotos schnell auf ein anderes anwenden.

Dies ist nützlich, um zahlreiche Fotos schnell zu gestalten.

GIPHY

Die Option GIPHY im Seitenmenü ermöglicht es Ihnen, aus einer Vielzahl von Stickern, GIFs, Emojis und animierten Textoptionen zu wählen, um sie in Ihr Design einzufügen.

Mit der Suchfunktion können Sie das gewünschte GIF, Sticker, Emoji oder animierten Text von GIPHY finden. Nach der Auswahl werden sie in Ihrem Design platziert und automatisch animiert:

Diese können mit der Schaltfläche Position weiter verfeinert werden.

Wenn Sie darauf klicken, während das GIF ausgewählt ist, wird die Registerkarte Position im Seitenmenü geöffnet:

• Nach vorne bringen - Bringt das ausgewählte GIF auf die oberste Ebene
• Eine Ebene nach vorne - Bringt das ausgewählte GIF eine Ebene nach oben
• Nach hinten senden - Bringt das ausgewählte GIF auf die unterste Ebene
• Eine Ebene nach hinten - Bringt das ausgewählte GIF eine Ebene nach unten
• An Seite ausrichten - Optionen zum Ändern der Ausrichtung des ausgewählten GIFs
  • Links
  • Zentriert
  • Rechts
  • Oben
  • Mitte
  • Unten
• Gleichmäßig verteilen - Richtet das GIF innerhalb der größeren Box aus
  • Vertikal
  • Horizontal
• Spiegeln - Spiegelt das ausgewählte GIF
  • Horizontal
  • Vertikal
• Position - Ermöglicht die spezifische Platzierung des GIFs im Design
• Größe ändern - Ermöglicht die präzise Größenanpassung des GIFs

Seitenverhältnis beibehalten - Wenn aktiviert, wird das Seitenverhältnis bei der Größenänderung automatisch beibehalten.

Als Hintergrund verwenden - Wenn aktiviert, kann das GIF als Hintergrund im Design verwendet werden.

QR-Code

Die Option QR-Code im Seitenmenü ermöglicht es Ihnen, einen QR-Code zu jedem Design hinzuzufügen. Durch Klicken auf QR-Code hinzufügen erhalten Sie zahlreiche Optionen:

Wählen Sie:

• Website-URL - Leitet den Benutzer zur Website weiter, wenn der QR-Code gescannt wird
• E-Mail - Sendet eine E-Mail an eine bestimmte Adresse, wenn der QR-Code gescannt wird.
• Text - Zeigt Text an, wenn der Benutzer den QR-Code scannt
• Anruf - Tätigt einen Telefonanruf, wenn der Benutzer den QR-Code scannt
• SMS - Sendet eine SMS an eine bestimmte Nummer, wenn der QR-Code gescannt wird
• App Store - Leitet den Benutzer entweder zum Apple Store oder zum Google Play Store weiter, wenn der QR-Code gescannt wird.
• Facebook - Leitet den Benutzer zur Facebook-Seite weiter, wenn der QR-Code gescannt wird.
• Instagram - Leitet den Benutzer zur Instagram-Seite weiter, wenn der QR-Code gescannt wird.
• X - Leitet den Benutzer zum X-Profil weiter, wenn der QR-Code gescannt wird.
• WiFi - Gibt dem Benutzer Zugang zu einem WiFi-Netzwerk, wenn der QR-Code gescannt wird.
• WhatsApp - Sendet eine Nachricht über WhatsApp, wenn der QR-Code gescannt wird.
• Asset - Wählen Sie ein OptiSigns-Asset aus, das der Benutzer sieht, wenn der QR-Code gescannt wird.

Durch Klicken auf QR-Code aktualisieren können Sie den Typ des QR-Codes ändern oder Informationen aktualisieren.

Schließlich können bei Bedarf mehrere QR-Codes zum Design hinzugefügt werden.

Das ist alles!

OptiSigns ist der führende Anbieter von Digital Signage-Software. Wenn Sie weitere Fragen, Bedenken oder Feedback zu OptiSigns haben, wenden Sie sich bitte an unser Support-Team unter support@optisigns.com.