Die Mockup-Engine per URL
Erzeugen Sie realistische Mockups.
Aus Ihren Bildern.
Importieren Sie ein Bild Ihres Mediums. Zeichnen Sie die anzupassenden Bereiche ein. Übermitteln Sie Ihre Visuals per URL: Die Engine fügt sie mit der Modellperspektive und -maske ein.
Ihre eigenen Vorlagen
Rendering per URL
Modellkonfiguration · nur einmal
Ein Leaflet. Ein Foto. Ein Porträt.
Zwei Bereiche im selben Dokument: das Immobilienfoto und das runde Maklerporträt. Sie bereiten das Modell einmalig vor.
Modell-Editor
Modell
mK7p2
1
Dokument importieren
leaflet-immobilier.png
Ein Leaflet · zwei Bereiche
Ihre Inszenierung, Ihre Texte und Ihr Erscheinungsbild.
Dieses Dokument ist die Basis für alle Renderings.
Dieses Dokument ist die Basis für alle Renderings.
Beispieldokument geladen
2
Zonen zeichnen
Zone
Kreis
Die Bilder gelangen in ihre Bereiche
Illustration
Modellzonen
01 · Bild der Immobilie
Vier Punkte
Transformation in Perspektive
Transformation in Perspektive
image_1 → zone_1
02 · Porträt
Kreisförmige Maske
Position und Maße
Position und Maße
image_2 → zone_2
Ein Modell = Ein Hintergrunddokument + eine oder mehrere Zonen. Jede Zone erhält ein Bild.
Dieses Modell per URL aufrufen
Interaktives Schema des Editors · Beispielmodell, keine gespeicherte Konfiguration.
03 – Modell aus Ihrer Anwendung aufrufen
Die Modell-URL.
Die URLs Ihrer Bilder.
Ihre Anwendung ruft das Modell auf, indem sie die Bildadressen hinzufügt. Die erste URL füllt den ersten Bereich, die zweite die zweite Zone. Die HTTP-Antwort ist das zusammengesetzte Bild.
Zu übermittelnde Bilder
URL Bild 1 → Zone 01
https://images.example.invalid/villa.jpg
URL Bild 2 → Zone 02
https://images.example.invalid/clara.jpg
GET
Generierungs-URL
https://mockupgenerator.io/mockups/generator/mK7p2/https://images.example.invalid/villa.jpg,https://images.example.invalid/clara.jpg
Gleiches Modell.
Unterschiedliche Bilder.
Unterschiedliche Bilder.
Wählen Sie einen Bildersatz aus und simulieren Sie dann den Aufruf.
Antwort: Ihr Mockup
VORSCHAU · SET A
Der Hintergrund bleibt unverändert. Die Bilder werden in den Modellbereichen platziert und transformiert, mit Perspektive und festgelegter Maske.
Eine URL, die als Bildquelle nutzbar ist.
Auf einer Webseite, einer Produktseite oder einem
<img> E-Mail-Tag. Ohne hinzugefügte Bild-URL liefert die Modell-URL das Originaldokument.Lokale Simulation · Fiktive Bild-IDs und URLs · Keine Anfragen an die Engine.
Use-Case · personalisierte E-Mails
Die gleiche Mechanik,
in Ihren E-Mails.
Ihr Marketingtool erstellt für jeden Empfänger eine Rendering-URL und verwendet sie als Quellenbild in der E-Mail. Die Nachricht zeigt ein Medium mit eigenen Visuals.
Eine neue Immobilie wird veröffentlicht.
Ihre Anwendung holt das Anzeigenfoto, das Maklerporträt und das zugehörige Markenmodell ab.
Ihre Business-Anwendung
Das Mockup wird generiert.
Die URL verknüpft das Kampagnenmodell mit dem Immobilienfoto und dem Porträt. Die Engine liefert das zusammengesetzte Bild zurück.
mockupgenerator
Ihr Tool sendet die E-Mail.
Der Kunde entdeckt ein bereits personalisiertes Medium mit Link zur Bestellung in Ihrem Shop.
Ihr Mailing-Tool → Ihr Marktplatz
mockupgenerator erzeugt die Bilder. Texte, Empfänger und Versand werden weiterhin von Ihrem Marketingtool verwaltet.
Dasselbe Medium, vor und nach der Komposition.
Vorschau einer personalisierten E-Mail
Betreff
Ihre neue Immobilie verdient Aufmerksamkeit.
i.
Ihr Immobiliengeschäft
An: Camille Dubois
Hallo Camille,
Ihre neue Anzeige ist online. Hier ist Ihre personalisierte Karte, bereit zur Präsentation in unserem Shop.
Das Ergebnis, wie es in der E-Mail erscheint.
Eine Vorschau mit dem Foto Ihrer Anzeige.
Illustratives Beispiel: Es wird keine E-Mail versendet.
Illustratives Beispiel: Es wird keine E-Mail versendet.
Eine gängige Anwendung in den Immobilienkampagnen von immosquare.
Demoinhalte · fiktive Marke und Kontakte
Die Perspektivdarstellung
Ihre Visuals folgen
den Ebenen des Mediums.
Ein flaches Bild wird zu einer Boxenfläche oder einer Seite einer Broschüre. Die vier Punkte jedes Bereichs bestimmen seine Perspektive. Das Setting bleibt Ihr Originalmodell.
Ein Medium, mehrere unabhängige Bereiche.
Die gestrichelten Linien verbinden jedes Visual mit seinem Zielbereich.
Prints
Zwei Seiten. Zwei Perspektiven.
Sie liefern das Bild für jede Seite. Die Engine überträgt es in den entsprechenden Bereich, ohne die Inszenierung zu verändern.
Personalisierung
Ein Foto der Immobilie. Ein Porträt.
Jedes Bild landet in seinem Bereich in der Broschüre, mit der Perspektive des Mediums.
Prinzipdarstellungen · Generierte Demo-Visuals, ohne Aufruf der Engine.
Als Anwendungs-Baustein konzipiert
Grafische Komposition,
gesteuert von Ihren Tools.
Das Backoffice verwaltet die Modelle. Ihr Code wählt die Bilder aus und löst das Rendering aus. Jede Anwendung kann das Ergebnis in ihrem eigenen Prozess nutzen.
Mit unserem Team chatten
Bereiche, die dem Medium folgen.
Die Engine berechnet eine Perspektivtransformation anhand der vier Punkte jedes Bereichs. Mit kreisförmigen Masken lässt sich vor allem ein Porträt einfügen.
Ihre Modelle, verwaltbar.
Verwalten Sie Szenen und Bereiche im Backoffice. Vorschau Ihrer Kompositionen und Abruf der generierten Renderings.
Ein bereits erstelltes Rendering wird wiederverwendet.
Für jede Kombination aus Modell und Bildern findet die Engine das bestehende Ergebnis wieder.
Die Individualisierung bleibt bei Ihnen.
Ihre Tools bereiten Texte und Kreationen vor. mockupgenerator erhält die Bilder und sorgt für deren Inszenierung.
Eine Technologie von immosquare
Für unsere Produkte entwickelt.
Mit echten Anwendungsfällen verbunden.
mockupgenerator entstand aus den Anforderungen unserer Immobilienanwendungen: personalisierte Medien präsentieren, sie mit einem Shop verknüpfen und in Marketingkampagnen einbinden.
Immosquare entdecken
Von Ihrer Business-Logik
zum sichtbaren Produkt.
zum sichtbaren Produkt.
Das gleiche Team entwickelt die Rendering-Engine und die Anwendungen, die sie nutzen.