Produkt mit Bildern anzeigen

Die 2D-Bilderstapel-Darstellung bietet eine flexible Möglichkeit, Produkte mit mehreren Ansichten und Ebenen darzustellen. Sie können verschiedene Bilder übereinanderlegen und diese abhängig von Merkmalswerten anzeigen lassen.

Voraussetzungen

• Sie haben einen Konfigurator angelegt.
• Sie haben Bilder für Ihr Produkt vorbereitet.

Bilderstapel aktivieren

• Öffnen Sie den Editor Ihres Konfigurators.
• Klicken Sie in der Seitenleiste auf
  Loading...
  .
• Wählen Sie
  Loading...
  .
• Unter Produktdarstellung wählen Sie Bilderstapel aus.
• Klicken Sie auf
  Loading...
  .

info

Die Option "Bildergalerie" ist noch verfügbar, wird aber nicht mehr weiterentwickelt. Verwenden Sie für neue Konfiguratoren die "Bilderstapel"-Darstellung.

Bilder hochladen

Bevor Sie Ansichten und Ebenen konfigurieren, sollten Sie die benötigten Bilder hochladen.

• Öffnen Sie den Editor Ihres Konfigurators.
• Klicken Sie in der Seitenleiste auf
  Loading...
  .
• Klicken Sie auf
  Loading...
  .
• Klicken Sie auf
  Loading...
  und wählen Sie ein oder mehrere Bilder aus.
• Die Bilder werden hochgeladen und angezeigt.

Transparente PNGs

Für die Bilderstapel-Darstellung sollten Sie transparente PNG-Bilder verwenden. Damit können die verschiedenen Ebenen korrekt übereinander dargestellt werden, ohne dass sich die Bilder gegenseitig komplett verdecken.

Ansichten anlegen

Ansichten repräsentieren verschiedene Perspektiven Ihres Produktes, z.B. Vorder- und Rückseite.

• Öffnen Sie den Editor Ihres Konfigurators.
• Klicken Sie in der Seitenleiste auf
  Loading...
  .
• Klicken Sie auf
  Loading...
  .
• Klicken Sie auf
  Loading...
  .
• Geben Sie einen Namen für die Ansicht ein (z.B. "Vorderseite", "Rückseite").
• Klicken Sie auf
  Loading...
  .
• Wiederholen Sie diese Schritte für alle benötigten Ansichten.

Die angelegten Ansichten werden in einer Galerie dargestellt, durch die der Endkunde navigieren kann.

Ebenen und Druckbereiche hinzufügen

Innerhalb einer Ansicht können Sie Ebenen und Druckbereiche definieren. Die Reihenfolge bestimmt, welche Bilder "über" anderen liegen.

Ebenen hinzufügen

• Wählen Sie eine Ansicht aus.
• Klicken Sie auf
  Loading...
  .
• Geben Sie einen Namen für die Ebene ein (z.B. "Grundfarbe", "Muster", "Logo").
• Klicken Sie auf
  Loading...
  .
• Wiederholen Sie dies für alle benötigten Ebenen.

Reihenfolge

Die Reihenfolge der Ebenen ist wichtig! Ebenen, die weiter oben in der Liste stehen, werden über den darunter liegenden Ebenen angezeigt. Verwenden Sie Drag & Drop, um die Reihenfolge anzupassen.

Ebenen deaktivieren

Ebenen und Druckbereiche lassen sich abschalten, ohne sie zu löschen.

• Fahren Sie in der Liste über die Ebene und klicken Sie auf das Augen-Icon (Tooltip "Aktiv" bzw. "Inaktiv").
• Eine inaktive Ebene wird nicht mehr gezeichnet, bleibt aber mit allen Bildern und Regeln erhalten.
• Ein inaktiver Druckbereich nimmt auch die Ebenen mit, die in ihm liegen.

So prüfen Sie schnell, welchen Anteil eine einzelne Ebene am Gesamtbild hat, etwa bei Schatten- oder Overlay-Ebenen. Denken Sie daran, die Ebene danach wieder zu aktivieren: Die Einstellung wird mit dem Konfigurator gespeichert und wirkt auch in der veröffentlichten Version.

Druckbereiche hinzufügen

Druckbereiche sind Bereiche, in die Endkunden eigene Bilder oder Texte hochladen können.

• Wählen Sie eine Ansicht aus.
• Klicken Sie auf
  Loading...
  .
• Geben Sie einen Namen für den Druckbereich ein (z.B. "Personalisierung", "Logo-Bereich").
• Klicken Sie auf
  Loading...
  .

Position und Größe festlegen

Ebenen und Druckbereiche werden auf dieselbe Weise positioniert und skaliert.

• Klicken Sie bei der Ebene oder dem Druckbereich auf das Resize-Icon (das Icon zum Größe ändern).
• Es öffnet sich eine visuelle Ansicht Ihrer Ansicht.
• Positionieren Sie den Bereich durch Ziehen.
• Ändern Sie die Größe durch Ziehen an den Ecken.
• Klicken Sie auf
  Loading...
  .
• Über
  Loading...
  kommen Sie wieder zur vollen Ansichtsgröße zurück.

info

Ebenen liegen immer nebeneinander in der Ansicht, sie werden nicht in einen Druckbereich hineingezogen. Jede Ebene bringt ihre eigene Position und Größe mit und bleibt überall referenzierbar – in den Merkmalsoptionen ebenso wie in Regeln.

Erweiterte Ansichts-Einstellungen

Jede Ansicht kann detailliert konfiguriert werden.

• Wählen Sie eine Ansicht aus.
• Klicken Sie auf
  Loading...
  .

Größe

• Breite und Höhe können hier optional angegeben werden.
• Normalerweise wird die Größe automatisch von den hochgeladenen Bildern übernommen.

info

Wenn Sie keine Größe angeben, verwendet der K3 die Dimensionen des ersten Bildes, das auf eine Ebene dieser Ansicht geladen wird.

Hintergrundfarbe

• Unter Hintergrundfarbe können Sie eine Farbe für den Hintergrund der Ansicht festlegen.
• Diese wird sichtbar, wenn Bilder transparente Bereiche haben oder nicht die gesamte Ansicht ausfüllen.

Skalierung

Die Skalierung bestimmt, wie die Ansicht in den Darstellungsbereich des Konfigurators eingepasst wird:

• Eingepasst:

  • Die Ansicht ist vollständig sichtbar und so groß wie möglich.
  • An den Seiten können Leerräume entstehen.
  • Dies ist die empfohlene Standardeinstellung für die meisten Anwendungsfälle.

• Ausfüllen:

  • Der Darstellungsbereich wird von der Ansicht komplett ausgefüllt.
  • Die Ansicht wird an den Seiten ggf. abgeschnitten.
  • Verwenden Sie dies, wenn Sie sicherstellen möchten, dass der gesamte Bereich ausgefüllt ist.

• Absolut:

  • Die Ansicht wird in der angegebenen (dann mandatorischen) Größe dargestellt.
  • Der Ankerpunkt ist links oben.
  • Verwenden Sie dies für pixelgenaue Kontrolle über die Darstellung.

Bilder auf Ebenen anzeigen

Nun können Sie Bilder auf Ebenen abhängig von Merkmalswerten anzeigen lassen.

Beim Anlegen eines Merkmals

• Legen Sie ein neues Merkmal an oder bearbeiten Sie ein vorhandenes.
• Wechseln Sie auf den Tab Aktionen.
• Setzen Sie den Haken bei Bild auf Ebene anzeigen.
• Wählen Sie die Ebenen aus, auf denen Bilder abhängig von diesem Merkmal dargestellt werden sollen.
• Sie können mehrere Ebenen auswählen.
• Klicken Sie auf
  Loading...
  .
• Auf dem Tab Werte gibt es nun Spalten für die gewählten Ebenen.
• Laden Sie für jeden Wert die passenden Bilder hoch oder wählen Sie diese aus.

Mehrere Ebenen

Sie können für ein Merkmal mehrere Ebenen gleichzeitig mit Bildern befüllen. So können Sie z.B. bei einem Farbmerkmal sowohl die Grundfarbe als auch ein farbabhängiges Overlay steuern.

Über Regeln

Für komplexere Fälle können Sie die Aktion auch manuell in Regeln verwenden:

• Klicken Sie im Editor in der Seitenleiste auf
  Loading...
  .
• Klicken Sie auf
  Loading...
  .
• Geben Sie einen Namen und optional eine Beschreibung ein.
• Klicken Sie auf
  Loading...
  .
• Klicken Sie auf
  Loading...
  .
• Unter Merkmale wählen Sie die Merkmale aus, von denen die Bildanzeige abhängen soll.
• Setzen Sie den Haken bei Bild auf Ebene anzeigen.
• Wählen Sie die gewünschten Ebenen aus.
• Klicken Sie auf
  Loading...
  .
• Nun können Sie für jede Kombination von Merkmalswerten die passenden Bilder auswählen.

Zusätzliche Bestellbilder

Zum Abschluss einer Konfiguration speichert K3 von jeder Ansicht ein Bild. Daneben können Sie weitere Bilder definieren, die nur bestimmte Ebenen enthalten, etwa einen Freisteller des Produktes ohne Hintergrund-Ebene. Das ist das Gegenstück zu den Screenshot-Kameras in 3D.

• Klicken Sie in der Seitenleiste auf
  Loading...
  .
• Klicken Sie auf
  Loading...
  .
• Mit dem Schalter Jede Ansicht als Bestellbild speichern steuern Sie die automatischen Ansichtsbilder. Schalten Sie ihn aus, wenn nur Ihre eigenen Bestellbilder gespeichert werden sollen.
• Klicken Sie auf
  Loading...
  .
• Geben Sie einen Namen ein und wählen Sie die Ansicht.
• Unter Enthaltene Ebenen haken Sie die Ebenen und Druckbereiche an, die in diesem Bild erscheinen sollen.
• Unter Erweitert stellen Sie ein:
  • Transparenter Hintergrund (Freisteller): die Hintergrundfarbe der Ansicht entfällt.
  • Format: PNG (mit Transparenz) oder JPEG.
  • Auflösung (DPI): höhere Werte für den Druck, z.B. in PDF-Dokumenten.
• Die Reihenfolge der Bestellbilder ändern Sie per Drag & Drop, einzelne Bestellbilder können Sie wie Ebenen deaktivieren.
• Klicken Sie auf
  Loading...
  .

Die Bestellbilder werden zusätzlich zu den Ansichtsbildern mit der Bestellung gespeichert und stehen damit in PDF-Dokumenten und Mails zur Verfügung.

caution

Wenn Sie die Ansichtsbilder ausschalten und kein aktives Bestellbild definiert ist, wird zur Bestellung gar kein Bild gespeichert. K3 weist Sie in diesem Fall im Editor darauf hin.

Weiterführende Themen

Ebenen einfärben

Bei Produkten mit vielen Farboptionen müssten Sie normalerweise für jede Farbe ein separates Bild erstellen. Mit der Funktion Ebenen einfärben können Sie ein einziges Bild dynamisch mit verschiedenen Farben einfärben.

Kundenspezifische Aufdrucke

Sie können Bereiche definieren, in die Endkunden ihre eigenen Bilder und Texte hochladen können. Mehr dazu in Aufdrucke auf Bildern.

Tipps und Best Practices

Bild-Optimierung

• Verwenden Sie PNG-Bilder mit Transparenz für Ebenen, die übereinander liegen sollen.
• Halten Sie die Dateigröße klein (verwenden Sie Kompression).
• Verwenden Sie einheitliche Bildgrößen für alle Bilder einer Ansicht.

Ebenen-Organisation

• Verwenden Sie sprechende Namen für Ebenen (z.B. "Grundfarbe", "Dekoration", "Schatten").
• Ordnen Sie Ebenen von unten nach oben (Hintergrund zuerst, Vordergrund zuletzt).
• Verwenden Sie so wenige Ebenen wie nötig, aber so viele wie für die Flexibilität erforderlich.

Performance

• Zu viele Ebenen oder sehr große Bilder können die Performance beeinträchtigen.
• Testen Sie Ihren Konfigurator auf mobilen Geräten.
• Verwenden Sie Bilder nicht größer als 2048x2048 Pixel.

Häufige Fehler vermeiden

Falsche Ebenen-Reihenfolge

Wenn Bilder sich gegenseitig verdecken, obwohl sie es nicht sollten, überprüfen Sie die Ebenen-Reihenfolge.

Fehlende Transparenz

Wenn Ebenen sich nicht wie erwartet überlagern, stellen Sie sicher, dass die Bilder transparente Bereiche haben (PNG mit Alpha-Kanal).

Unterschiedliche Bildgrößen

Wenn Bilder unterschiedliche Größen haben, kann die Ansicht "springen". Verwenden Sie einheitliche Abmessungen.