Website mockup erstellen
Mit diesem Tool lässt sich ein Website mockup erstellen: Es setzt einen Screenshot einer öffentlichen Webseite in ein Browserfenster, einen Laptop-Rahmen oder einen Smartphone-Rahmen. Sie erhalten ein PNG-Bild, das Sie in einem Portfolio, einer Fallstudie oder einer Kundenvorschau verwenden können. Anonyme Nutzung erfordert eine Sicherheitsprüfung, angemeldete Nutzer bezahlen mit Credits.
- Es wird nur der erste Bildschirm der Seite erfasst. Inhalte weiter unten auf der Seite erscheinen nicht im Mockup.
- Geben Sie nur eine öffentliche Adresse ein. Einen eigenen Screenshot können Sie nicht hochladen, und eine Seite hinter einer Anmeldung zeigt den Anmeldebildschirm.
- Das Seitenbild wird vor dem Einrahmen komprimiert, deshalb kann kleiner Text unscharf wirken.
Ein Website-Mockup benötigt 2 Renderings: eine, um die Seite zu erfassen, und eine, um sie in den Rahmen zu setzen. Angemeldet kostet das insgesamt 2 Credits. Ohne Konto zählen beide Vorgänge zu den kostenlosen Grenzen, und die Sicherheitsprüfung läuft zweimal.
Die Seite wird nur im oberen Seitenbereich aufgenommen und dann in einen Rahmen aus einfachem CSS gesetzt. Die Aufnahme wird komprimiert, damit sie in das Größenlimit des kostenlosen Tools passt.
Bestätigen Sie die Sicherheitsprüfung, um die Schaltfläche zu aktivieren.
Ergebnis
Ihr Bild erscheint hier.
Das kostenlose Web-Tool erfasst höchstens 2000px Höhe. Für höhere Erfassungen verwenden Sie die API.
Aufbewahrung: Ergebnisse der Web-Tools werden nach 10 Minuten gelöscht. API-Ergebnisse werden im kostenlosen Tarif 1 Tag aufbewahrt und bei Starter und Pro 7 Tage (bei Business und Scale 30 Tage). Ein Protokoll jedes Auftrags (Typ, Zeit, Status und Credits, nicht das, was Sie eingereicht haben) wird 30 Tage ohne Konto aufbewahrt oder, wenn Sie angemeldet sind, solange Ihr Konto besteht.
Kein Konto erforderlich
10 pro Minute und 50 pro Tag kostenlos.
Umwandlung mit einem echten Browser
Headless-Chromium (Chromium ohne Bedienoberfläche), dieselbe Engine wie die API.
Automatisch gelöscht
Ergebnisse des Web-Tools werden nach 10 Minuten entfernt.
Datenschutz: Was Sie einreichen, wird nur für diese Datei verwendet. Es wird gelöscht, sobald der Auftrag endet, auch aus dem Auftragsprotokoll, und das Ergebnis nach 10 Minuten. Siehe die Datenschutzerklärung.
So machen Sie es in Ihrem Code
Dieselbe Anfrage, aufgebaut aus der Eingabe und den Optionen oben. Erstellen Sie ein Konto, um einen API-Schlüssel zu erhalten.
curl -X POST https://api.aiipworld.com/v1/render \
-H "Authorization: Bearer $AIIPWORLD_API_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"","output":"pdf","options":{}}'
# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"Stapel
Das Web-Tool verarbeitet 1 Dokument auf einmal. Die API nimmt eine Anfrage pro Dokument an, sodass Sie so viele per Skript senden können, wie Ihr Tarif erlaubt.
Mehr Kontrolle
Erfassung der gesamten Seite (full_page), Zuschneiden auf einen Bereich, Anfrage-Header und ein benutzerdefinierter User-Agent sind API-Optionen. Siehe Dokumentation.
Aufbewahrung
Ergebnisse der Web-Tools werden 10 Minuten aufbewahrt; kostenlose API-Ergebnisse 1 Tag; Ergebnisse bei Starter und Pro 7 Tage; Business und Scale 30 Tage. Das Web-Tool erlaubt 10 Umwandlungen pro Minute und 50 pro Tag und Besucher.
In einem Satz
Ein kostenloses Online-Tool, das einen Screenshot einer öffentlichen Webseite in einen Browserfenster-, Laptop- oder Smartphone-Rahmen setzt und ein PNG speichert.
Die wichtigsten Fakten
- Eingabe: eine öffentliche Adresse mit http oder https; es wird nur der erste Bildschirm der Seite erfasst.
- Die Rahmen zeichnen wir selbst in CSS; Hintergründe: die Verläufe Ocean, Sunset und Mint, Schiefergrau, Weiß oder Transparent.
- Ausgabe: ein PNG mit 1x oder 2x Pixeldichte.
- Kostenlos ohne Konto: Jedes Mockup verbraucht zwei Renderings, und beide zählen zu den Grenzen 10 pro Minute und 50 pro Tag und Besucher, wobei die Sicherheitsprüfung zweimal ausgeführt wird. Die erste Umwandlung lädt eine Webadresse, daher zählt sie außerdem zur Grenze von 5 Webadressen pro Tag. Angemeldet kostet ein Mockup 2 Credits (2 Renderings).
- Dateien werden automatisch gelöscht: 10 Minuten nach der Umwandlung ohne Konto, 1 Tag mit einem kostenlosen Konto.
- Entwickler können dasselbe Rendering mit POST https://api.aiipworld.com/v1/render und einem API-Schlüssel ausführen (siehe die Seite Screenshot-API).
Quellen
Zuletzt geprüft:
So funktioniert es
- Geben Sie die Adresse einer öffentlichen Webseite ein. Sie muss mit http:// oder https:// beginnen.
- Wählen Sie einen Rahmen: „Browserfenster“, „Laptop“ oder „Smartphone“.
- Wählen Sie einen Hintergrund und legen Sie den Innenabstand fest. Fügen Sie eine zusätzliche Wartezeit hinzu, wenn die Seite spät lädt.
- Wählen Sie die „Pixeldichte“ 1x oder 2x, starten Sie das Mockup und warten Sie auf das Ergebnis.
- Laden Sie das PNG herunter. Wenn Sie angemeldet sind, zeigt das Ergebnis auch die berechneten Credits.
Beispielergebnis
Website mockup erstellen: so gehen Sie vor
Ein Website-Mockup zeigt eine Seite in einem Geräterahmen, sodass Betrachter sehen, wie die Seite auf einem Bildschirm wirkt. Der Website-Mockup-Generator erledigt das in zwei Schritten, Sie benötigen dafür keine Gestaltungssoftware. Wer nach „mockup generator website“ sucht, findet mit diesem Tool genau diesen Ablauf.
Beginnen Sie mit der Adresse einer öffentlichen Seite. Das Tool lädt die Seite in einem Headless-Browser auf unserem Render-Server. JavaScript wird bei der Erfassung standardmäßig ausgeführt, sodass eine Seite, die ihren Inhalt mit Skripten aufbaut, im Bild erscheint.
Nutzen Sie die zusätzliche Wartezeit, wenn sich die Seite erst nach dem ersten Laden füllt. Die Wartezeit ist kurz und gibt der Seite Zeit, vor der Erfassung fertig zu werden.
Was die drei Rahmen zeigen
Der Rahmen „Browserfenster“ erfasst die Seite mit 1280 x 800 Pixeln. Die Adressleiste zeigt den Hostnamen der URL, sodass Betrachter sehen, woher die Seite stammt.
Der Rahmen „Laptop“ erfasst die Seite ebenfalls mit 1280 x 800 Pixeln. Der Bildschirm wird mit 75 % in einem laptopförmigen Rand und Sockel gezeigt.
Der Rahmen „Smartphone“ erfasst die Seite mit 390 x 844 Pixeln und setzt sie in einen abgerundeten Smartphone-Rand. Verwenden Sie ihn für Seiten, die Sie als mobiles Layout zeigen möchten.
Warum ein Mockup zwei Renderings kostet
Ein Mockup entsteht aus zwei Renderings. Das erste Rendering erfasst Ihre Seite als JPEG mit Qualität 85. Ihr Browser komprimiert dieses Bild danach, damit es in das kostenlose HTML-Limit von 256 KB passt, und setzt es in den Rahmen. Das zweite Rendering wandelt dieses HTML in das PNG um, das Sie herunterladen.
Jedes Rendering wird berechnet. Wenn Sie angemeldet sind, benötigt ein Mockup 2 Renderings und kostet 2 Credits.
Ohne Konto zählen beide Renderings zu den kostenlosen Grenzen, und die Sicherheitsprüfung läuft zweimal. Wenn Sie angemeldet sind, zeigt das Ergebnis die berechneten Credits.
Hintergründe, Innenabstand und Größe
Wählen Sie einen Hintergrund: die Verläufe Ocean, Sunset oder Mint, Schiefergrau, Weiß oder „Transparent“. Ein transparenter Hintergrund ergibt ein PNG ohne Hintergrundfläche, sodass Sie das Gerät in Ihr eigenes Design setzen können.
Der Innenabstand bestimmt den Platz um das Gerät. Wählen Sie mehr Abstand, wenn der Rahmen in der Mitte eines größeren Bildes mit Platz ringsum stehen soll.
Die Pixeldichte ist 1x oder 2x. Die Dichte 2x erzeugt mehr Pixel, daher ist die Datei größer, und sie eignet sich für Bilder, die Sie in voller Größe zeigen.
Der Komprimierungsschritt kann feinen Text weich wirken lassen. Berücksichtigen Sie das, wenn die Seite kleine Schrift enthält, die Leser deutlich sehen sollen.
Seiten, die eine Anmeldung erfordern
Das Tool lädt die Seite als Besucher, der nicht angemeldet ist. Eine Seite hinter einer Anmeldung zeigt ihren Anmeldebildschirm, nicht die Inhalte dahinter.
Die Adresse muss öffentlich sein. Private Netzwerke, localhost und Adressen für Cloud-Metadaten sind gesperrt, daher kann eine Seite auf Ihrem eigenen Gerät nicht erfasst werden.
Wenn Sie ein Mockup einer Seite benötigen, die normalerweise eine Anmeldung verlangt, verwenden Sie eine öffentliche Demo- oder Staging-Seite, die Sie zeigen dürfen.
Wofür Menschen Mockups verwenden
Designer nutzen Mockups im Portfolio, um eine fertige Seite in einem Geräterahmen zu zeigen.
Eine Fallstudie kann ein Mockup verwenden, um das Ergebnis eines Projekts neben dem beschreibenden Text zu zeigen.
Ein Mockup kann in einen Social-Media-Beitrag oder eine Kundenvorschau gehen, sodass der Kunde die Seite im Zusammenhang sieht, bevor sie live geht.
Zeigen Sie nur Seiten, die Ihnen gehören oder die Sie zeigen dürfen. Ein Mockup soll die echte Seite zeigen, nicht eine veränderte Kopie, die wie eine andere Website aussieht.
Website-Mockup-Generator per Code
Dieselben zwei Schritte funktionieren über die API. Senden Sie eine Screenshot-Anfrage mit der Seitenadresse, um das erste Bild zu erhalten. Senden Sie dann eine Screenshot-Anfrage mit HTML, das dieses Bild in einen Rahmen setzt, um das PNG zu erhalten.
Senden Sie Ihren API-Schlüssel als Authorization: Bearer gefolgt vom Schlüssel. Anfragen sind asynchron: POST an /v1/render gibt 202 mit einer job_id zurück. Fragen Sie GET /v1/jobs/:id ab, bis der Status succeeded, failed oder timeout ist.
Wenn der Auftrag erfolgreich ist, laden Sie die Datei über die download_url herunter. Dieser Link ist nur kurz gültig, laden Sie die Datei daher bald nach dem Erscheinen herunter. Credits für fehlgeschlagene Aufträge und Aufträge mit Zeitüberschreitung werden zurückerstattet. Webhooks sind noch nicht verfügbar, daher ist Abfragen die einzige Möglichkeit, das Ende eines Auftrags zu erkennen.
Den passenden Rahmen für Ihr Mockup wählen
Wählen Sie den Rahmen, der zur Seite passt. Ein Browser-Mockup im Rahmen „Browserfenster“ eignet sich für eine Webseite, während der Rahmen „Smartphone“ sich für ein mobiles Layout eignet. Der Rahmen „Smartphone“ erfasst die Seite in Telefongröße, daher kann ihr erster Bildschirm von den Desktop-Rahmen abweichen.
Prüfen Sie vor der Verwendung, ob die Seite öffentlich ist und der erste Bildschirm zeigt, was Sie präsentieren möchten. Laden Sie das PNG herunter und bewahren Sie eine Kopie auf, denn Ergebnisse werden nach 10 Minuten gelöscht.
Ein Mockup ist ein einzelnes Bild, daher können Sie es ohne weiteren Schritt in einem Angebot, einem Beitrag oder einer Folie wiederverwenden.
Screenshot-Mockup, Rahmen und Hintergrund
Ein Screenshot-Mockup setzt das Bild einer Seite in einen Rahmen. Dieses Tool arbeitet als einfacher Screenshot-Rahmen-Generator für Webseiten: Es erfasst die Seite, fügt Rahmen und Hintergrund hinzu und liefert ein PNG. Für diese Art von Tool wird auch der Begriff Geräterahmen-Generator verwendet, obwohl die Rahmen hier von uns gezeichnet und keine Fotos echter Geräte sind.
Wenn Sie die Screenshot-Ausgabe für ein Portfolio aufwerten möchten, übernehmen die Verlaufshintergründe und der Innenabstand den größten Teil der Arbeit. Als Screenshot-Verschönerer ist das Tool auf Webseiten nach Adresse beschränkt, da es kein hochgeladenes Bild verarbeiten kann.
Fragen
Wie setze ich einen Website-Screenshot in einen Browserrahmen?
Geben Sie eine öffentliche URL ein, wählen Sie den Rahmen „Browserfenster“, wählen Sie einen Hintergrund und starten Sie das Mockup. Das Tool erfasst die Seite und setzt sie in ein Browserfenster, mit dem Hostnamen der URL in der Adressleiste.
Warum werden zwei Renderings verwendet?
Das erste Rendering erfasst die Seite als Bild. Das zweite Rendering baut den Rahmen um dieses Bild und wandelt es in ein PNG um. Jedes Rendering wird getrennt gezählt, daher verbraucht ein Mockup 2 Renderings.
Wie viele Credits kostet es?
Wenn Sie angemeldet sind, kostet ein Mockup 2 Credits. Ohne Konto zählen beide Renderings zu den kostenlosen Grenzen, und die Sicherheitsprüfung läuft zweimal. Wenn Sie angemeldet sind, zeigt das Ergebnis die berechneten Credits.
Kann ich die ganze Seite erfassen?
Nein. Das Mockup erfasst nur den ersten Bildschirm der Seite, daher erscheinen Inhalte weiter unten nicht im Bild. Der Rahmen zeigt den oberen Teil der Seite so, wie ein Besucher sie zuerst sieht.
Kann ich einen eigenen Screenshot hochladen?
Nein. Das Tool nimmt eine öffentliche Webadresse entgegen und erfasst die Seite selbst. Hochgeladene Bilder werden nicht angenommen, daher können Sie keinen Screenshot in einen Rahmen setzen, den Sie auf Ihrem Gerät aufgenommen haben.
Stammen die Rahmen von einem Gerätehersteller?
Nein. Die Rahmen zeichnen wir selbst in einfachem HTML und CSS. Sie verwenden keine Gerätefotos, Markenbilder oder Grafiken von Dritten.
Warum wirkt der Screenshot leicht weich?
Die Seite wird zuerst als JPEG gespeichert, und der Browser komprimiert dieses Bild danach, damit es in das kostenlose HTML-Limit von 256 KB passt. Kleiner Text kann dadurch weniger scharf wirken, verwenden Sie daher nach Möglichkeit größere Schrift auf der Seite.
Kann ich eine Seite hinter einer Anmeldung als Mockup zeigen?
Nicht direkt. Das Tool lädt die Seite als Besucher, der nicht angemeldet ist, daher erscheint im Rahmen der Anmeldebildschirm. Verwenden Sie eine öffentliche Seite, die Sie zeigen dürfen.
Wie lange bleibt das Ergebnis erhalten?
Ergebnisse werden nach 10 Minuten gelöscht. Laden Sie das PNG herunter, sobald das Ergebnis erscheint. Zu jedem Auftrag wird ein Datensatz gespeichert, und angemeldete Nutzer sehen ihre Aufträge im Dashboard.
Ist das Tool kostenlos?
Sie können das kostenlose Tool ohne Konto nutzen, anonyme Nutzung erfordert eine Sicherheitsprüfung. Angemeldete Nutzer verwenden stattdessen Credits. Wir fügen dem Mockup kein Wasserzeichen hinzu.
Kann ich dasselbe Mockup mit der API erstellen?
Ja. Sie können dieselben zwei Screenshot-Schritte über die API senden, eine Anfrage für die Seite und eine für das gerahmte HTML. Jeder Schritt ist ein asynchroner Auftrag, den Sie abfragen, bis er erfolgreich ist.
Wie groß ist das Ausgabebild?
Die Ausgabe ist ein PNG. Seine Größe hängt von Rahmen, Innenabstand und der gewählten Pixeldichte ab. Die Dichte 2x erzeugt eine größere Datei als die Dichte 1x.
Was ist ein Webseiten-Mockup?
Ein Webseiten-Mockup zeigt eine öffentliche Seite in einem Geräte- oder Browserrahmen, sodass die Seite so wirkt, als stünde sie auf einem Bildschirm. Dieses Tool erstellt aus einer Webadresse ein PNG. Sie können es für ein Portfolio, eine Fallstudie oder eine Kundenvorschau verwenden.
Kann ich ein Web-Mockup für einen Kunden ohne Gestaltungssoftware erstellen?
Ja. Geben Sie die Adresse einer öffentlichen Seite ein, wählen Sie einen Rahmen und einen Hintergrund und laden Sie das PNG herunter. Es ist keine Gestaltungssoftware nötig. Das Tool erfasst nur den ersten Bildschirm, daher sieht Ihr Kunde im Bild den oberen Teil der Seite.
Kann ich ein Screenshot-Mockup in einer Fallstudie verwenden?
Ja. Speichern Sie das PNG und setzen Sie es in Ihre Fallstudie oder Ihr Portfolio ein. Wählen Sie den Rahmen „Browserfenster“ für eine Desktop-Optik, den Rahmen „Laptop“ für eine Laptop-Optik oder den Rahmen „Smartphone“ für eine mobile Seite. Das Ergebnis ist ein einzelnes Bild, sodass das Layout überall gleich bleibt.
Ist das ein iPhone- oder MacBook-Mockup-Generator?
Nicht im engeren Sinn. Die Rahmen „Smartphone“ und „Laptop“ sind allgemeine Formen, die wir in HTML und CSS zeichnen. Als iPhone-Mockup-Generator oder MacBook-Mockup-Generator zeigt das Tool kein Markengerät, sondern nur einen smartphone- oder laptopförmigen Rahmen um Ihre Seite.
Brauchen Sie das in Ihrer App oder in großen Mengen?
Dieses Tool läuft auf der Render-API, deshalb ist dasselbe Bild aus Ihrem Code eine HTTP-Anfrage. Ein kostenloses Konto enthält 100 Credits pro Monat.