Tutorial: Website aus Browser in Sketch importieren

Eine Website aus dem Browser in Sketch ziehen und bearbeiten? Das geht. Ich zeige dir wie.

Es gibt für Photoshop das praktische Tool „PageLayers“ mit dem man eine Website aus dem Browser als PSD abspeichern kann. Das funktioniert hervorragend und hat mir schon mal SEHR viel Zeit bei einem Redesign gespart, wo der Kunde nicht mehr im Besitz der alten PSD Dateien war. Pagelayers funktioniert aber natürlich nur für Photoshop und nicht für Sketch.

Für Sketch gibt es aber ein kleines Workaround mit dem das fast genauso gut geht. Man muss sich dafür nur das kleine kostenlose Tool „Paparazzi!“ runterladen. Das Tool ist normalerweise dafür gemacht um einfach Screenshots von Webseiten zu machen, auch von einer langen Scrollseite zum Beispiel. Paparazzi speichert die Webseiten allerdings nicht einfach als Bild, sondern mit allen einzelnen Elementen. Um nun eine Webseite aus dem Browser bearbeitbar in Sketch zu kriegen, muss man einfach nur ein Screenshot mit Paparazzi machen, den Screenshot aus dem Programm auf eine Arbeitsfläche in Sketch ziehen. Per drag & drop und fertig! Hier auch nochmal ein Video, das das nochmal visualisiert.

Das Ergebnis ist nicht immer perfekt und nicht so gut wie bei PageLayers, aber auf jeden Fall wesentlich besser als die ganze Seite nachzubauen. Und vor allen Dingen ist alles kostenlos, außer Sketch natürlich 😉

[button color=“green“ size=“big“ alignment=“none“ rel=“follow“ openin=“newwindow“ url=“https://derailer.org/paparazzi/“]Paparazzi downloaden[/button]

 

 

Chris

UX Design Freelancer aus Berlin. Nie müde Projekte und Experimente nebenher zu betreiben. Ehemann, Vater und überzeugter Pflanzenfresser.